Ensure equal height on Carousel parent node as it's image content (#1340)

* Ensure equal height on Carousel parent node as it's image content

* Ignore autogenerate vite file

* Remove autogenerate file

Author: oscarcarlstrom

.changeset/spotty-wings-tease.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": patch
+---
+
+Fixes a layout bug in `<Hero variant="full-bleed">` that causes content below it to be placed behind `<Carousel>` children.

biome.json

@@ -5,7 +5,7 @@
       "dist/",
       ".next/",
       ".output/",
-      ".vinxi/",
+      "vite.config.timestamp_*",
       "apps/docs/public/storybook",
       "routetree.gen.ts",
       "packages/icons-react/src",

packages/react/src/button/button.tsx

@@ -186,6 +186,7 @@ function Button({ ref = null, ...props }: ButtonProps) {
   return isLinkProps(restProps) ? (
     <RACLink
       {...restProps}
+      routerOptions={restProps.routerOptions}
       className={className}
       ref={ref as Ref<HTMLAnchorElement>}
     >

packages/react/src/hero/hero.stories.tsx

@@ -266,5 +266,15 @@ export const FullBleedWithCarousel = () => (
         </CarouselItems>
       </Carousel>
     </Hero>
+    <h2>Tittel</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </p>
   </main>
 );

packages/react/src/hero/hero.tsx

@@ -49,12 +49,15 @@ const variants = cva({
       standard: [roundedMediaCorners, oneColumnLayout],
       'full-bleed': [
         oneColumnLayout,
-        // Match the heights of the <Media> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
-        // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-        '*:data-[slot="media"]:*:h-70 sm:*:data-[slot="media"]:*:h-[25rem] md:*:data-[slot="media"]:*:h-[30rem] lg:*:data-[slot="media"]:*:h-[35rem] xl:*:data-[slot="media"]:*:h-[40rem] 2xl:*:data-[slot="media"]:*:h-[42rem] 3xl:*:data-[slot="media"]:*:h-[48rem] 4xl:*:data-[slot="media"]:*:h-[53rem]',
         // Position the media and carousel content to fill the entire viewport width
         '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
         '*:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
+        // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
+        // This is necessary due to the absolute positioning of the media and carousel containers in this variant
+        // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+        '*:data-[slot="media"]:*:h-70 sm:*:data-[slot="media"]:*:h-[25rem] md:*:data-[slot="media"]:*:h-[30rem] lg:*:data-[slot="media"]:*:h-[35rem] xl:*:data-[slot="media"]:*:h-[40rem] 2xl:*:data-[slot="media"]:*:h-[42rem] 3xl:*:data-[slot="media"]:*:h-[48rem] 4xl:*:data-[slot="media"]:*:h-[53rem]',
+        // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+        '*:data-[slot="carousel"]:h-70 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
         '**:data-[slot="carousel-controls"]:container **:data-[slot="carousel-controls"]:right-0 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-controls"]:left-0 **:data-[slot="carousel-controls"]:justify-end',
         // Override rounded corners of Carousel slots
         '*:data-[slot="carousel"]:*:rounded-none',