@obosbbl/grunnmuren-react 3.3.5 → 3.4.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 'use client';
-import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, ProgressBar as ProgressBar$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
+import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, GroupContext, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, ProgressBar as ProgressBar$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
 export { DisclosureGroup, Form, Group } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva, cx, compose } from 'cva';
-import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, isValidElement, cloneElement } from 'react';
+import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback } from 'react';
 import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, ArrowRight, Download, LinkExternal, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
 import { filterDOMProps, mergeProps, mergeRefs, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
 import { useFocusRing, useDisclosure, useProgressBar, useDateFormatter, useField } from 'react-aria';
@@ -357,11 +357,6 @@ const translations$1 = {
         sv: 'Nästa',
         en: 'Next'
     },
-    carousel: {
-        nb: 'Karusell',
-        sv: 'Karusell',
-        en: 'Carousel'
-    },
     externalLink: {
         nb: '(ekstern lenke)',
         sv: '(extern länk)',
@@ -495,44 +490,73 @@ const Avatar = ({ src, alt = '', className, onError, loading = 'lazy', ...rest }
     });
 };
 
-const _LinkContext = /*#__PURE__*/ createContext({});
-const Link = ({ ref: _ref, ..._props })=>{
-    const [props, ref] = useContextProps(_props, _ref, _LinkContext);
-    const { className, _innerWrapper, children: _children, ...restProps } = props;
-    const locale = _useLocale();
-    const externalLinkSR = props.rel?.includes('external') ? /*#__PURE__*/ jsx("span", {
-        className: "sr-only",
-        children: translations$1.externalLink[locale]
-    }) : null;
-    const reactNodeChildren = /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            _children,
-            externalLinkSR
-        ]
-    });
-    const children = _innerWrapper ? _innerWrapper({
-        ...restProps,
-        children: typeof _children === 'function' ? (values)=>_children(values) : reactNodeChildren
-    }) : reactNodeChildren;
-    return /*#__PURE__*/ jsx(Link$1, {
-        ...restProps,
-        ref: ref,
-        "data-slot": "link",
-        className: cx(className, 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset [&>svg]:shrink-0 [&>svg]:transition-transform'),
-        children: children
-    });
+const formField = cx('group flex flex-col gap-2');
+const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const input = cva({
+    base: [
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        // invalid styles
+        'group-data-invalid:ring-focus group-data-invalid:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
+    ],
+    variants: {
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
+        },
+        isGrouped: {
+            false: 'px-3',
+            true: '!ring-0 flex-1'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        isGrouped: false
+    }
+});
+const inputGroup = cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+]);
+const dropdown = {
+    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
+    chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
 };
+const animateIconVariants = cva({
+    base: '*:[svg]:shrink-0 *:[svg]:transition-transform',
+    variants: {
+        animateIcon: {
+            right: 'hover:*:[svg]:motion-safe:translate-x-1',
+            left: 'hover:*:[svg]:motion-safe:-translate-x-1',
+            down: 'hover:*:[svg]:motion-safe:translate-y-1',
+            up: 'hover:*:[svg]:motion-safe:-translate-y-1',
+            'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
+        }
+    }
+});
 
 function isLinkProps$1(props) {
     return !!props.href;
 }
 function Backlink(props) {
-    const { className, style, children, withUnderline, ref, ...restProps } = props;
-    const _className = cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 font-normal no-underline focus-visible:outline-focus');
+    const { className, children, withUnderline, ref, ...restProps } = props;
+    const _className = cx(className, animateIconVariants({
+        animateIcon: 'left'
+    }), 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 font-normal no-underline focus-visible:outline-focus');
     const content = /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ChevronLeft, {
-                className: cx('-ml-[0.5em] group-hover:-translate-x-1 duration-300')
+                className: cx('-ml-[0.5em] duration-300')
             }),
             /*#__PURE__*/ jsx("span", {
                 children: /*#__PURE__*/ jsx("span", {
@@ -543,10 +567,9 @@ function Backlink(props) {
         ]
     });
     if (isLinkProps$1(props)) {
-        return /*#__PURE__*/ jsx(Link, {
+        return /*#__PURE__*/ jsx(Link$1, {
             ...restProps,
             className: _className,
-            style: style,
             ref: ref,
             children: content
         });
@@ -554,7 +577,6 @@ function Backlink(props) {
     return /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
         className: _className,
-        style: style,
         ref: ref,
         children: content
     });
@@ -597,6 +619,40 @@ function Badge(props) {
     });
 }
 
+const _LinkContext = /*#__PURE__*/ createContext({});
+const linkVariants = compose(animateIconVariants, cva({
+    base: 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset data-disabled:cursor-default'
+}));
+const Link = ({ ref: _ref, animateIcon, ..._props })=>{
+    const [props, ref] = useContextProps(_props, _ref, _LinkContext);
+    const { className, _innerWrapper, children: _children, ...restProps } = props;
+    const locale = _useLocale();
+    const externalLinkSR = props.rel?.includes('external') ? /*#__PURE__*/ jsx("span", {
+        className: "sr-only",
+        children: translations$1.externalLink[locale]
+    }) : null;
+    const reactNodeChildren = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            _children,
+            externalLinkSR
+        ]
+    });
+    const children = _innerWrapper ? _innerWrapper({
+        ...restProps,
+        children: typeof _children === 'function' ? (values)=>_children(values) : reactNodeChildren
+    }) : reactNodeChildren;
+    return /*#__PURE__*/ jsx(Link$1, {
+        ...restProps,
+        ref: ref,
+        "data-slot": "link",
+        className: linkVariants({
+            className,
+            animateIcon
+        }),
+        children: children
+    });
+};
+
 function Breadcrumb(props) {
     const { className, children, href, ...restProps } = props;
     return /*#__PURE__*/ jsxs(Breadcrumb$1, {
@@ -627,38 +683,38 @@ function Breadcrumbs(props) {
 
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */ const buttonVariants = cva({
+ */ const buttonVariants = compose(animateIconVariants, cva({
     base: [
         'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
     ],
     variants: {
         /**
-     * The variant of the button
-     * @default primary
-     */ variant: {
+       * The variant of the button
+       * @default primary
+       */ variant: {
             primary: 'no-underline',
             // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
             secondary: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
         },
         /**
-     * Adjusts the color of the button for usage on different backgrounds.
-     * @default blue
-     */ color: {
+       * Adjusts the color of the button for usage on different backgrounds.
+       * @default blue
+       */ color: {
             blue: 'focus-visible:outline-focus',
             mint: 'focus-visible:outline-focus focus-visible:outline-mint',
             white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
         /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
+       * When the button is without text, but with a single icon.
+       * @default false
+       */ isIconOnly: {
             true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
             false: 'gap-2.5 px-4 py-2'
         },
         // Make the content of the button transparent to hide it's content, but keep the button width
         isPending: {
-            true: '!text-transparent relative',
+            true: 'relative text-transparent!',
             false: null
         }
     },
@@ -717,15 +773,17 @@ function Breadcrumbs(props) {
         isIconOnly: false,
         isPending: false
     }
-});
+}));
 const ButtonContext = /*#__PURE__*/ createContext({});
 function isLinkProps(props) {
     return !!props.href;
 }
 function Button({ ref = null, ...props }) {
     [props, ref] = useContextProps(props, ref, ButtonContext);
-    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
+    const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
+        // Don't animate the icon when we're pending, as it affects the loading spinner
+        animateIcon: isPending ? undefined : animateIcon,
         className: props.className,
         color,
         isIconOnly,
@@ -985,6 +1043,137 @@ const cardLinkVariants = cva({
     });
 };
 
+const HeroContext = /*#__PURE__*/ createContext(null);
+// Common variant for "standard" and "full-bleed" Hero variants
+const oneColumnLayout = [
+    // Vertical spacing in the <Content>
+    'lg:*:data-[slot="content"]:gap-y-4',
+    // Main text content takes up 9 columns on medium screens and above
+    'lg:*:data-[slot="content"]:col-span-9',
+    // Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
+    '*:not-data-[slot="content"]:not-data-[slot="media"]:w-fit',
+    // Other elements than <Content> and <Media> (e.g. CTA, SVG logo or Badge) take up 3 columns on medium screens and above, and are right aligned
+    'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:not-data-[slot="carousel"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
+    // <Media> and <Carousel> content takes up the full width on medium screens and above
+    'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
+    'lg:*:data-[slot="carousel"]:col-span-full',
+    // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
+    'lg:items-end'
+];
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot="media"]:*:aspect-[1/1] sm:*:data-[slot="media"]:*:aspect-4/3 md:*:data-[slot="media"]:*:aspect-3/2';
+const variants = cva({
+    base: [
+        'container px-0',
+        // Grid variant to position the Hero's content
+        'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
+        'gap-y-10 lg:gap-y-12',
+        // Enable vertical gap within <Content>
+        '*:data-[slot="content"]:grid',
+        // Vertical spacing in the <Content>
+        '*:data-[slot="content"]:gap-y-3',
+        // Make sure <Media> content fills any available vertical and horizontal space
+        '*:data-[slot="media"]:*:object-cover',
+        '*:data-[slot="carousel"]:overflow-hidden *:data-[slot="carousel"]:rounded-3xl',
+        // Make the carousel items full width, so we scroll one at a time
+        '**:data-[slot="carousel-item"]:basis-full'
+    ],
+    variants: {
+        /**
+     * Defines the variant of the Hero
+     * @default standard
+     * */ variant: {
+            standard: [
+                oneColumnLayout,
+                nonFullBleedAspectRatiosForSmallScreens,
+                'lg:*:data-[slot="media"]:*:aspect-2/1'
+            ],
+            'full-bleed': [
+                oneColumnLayout,
+                // Position the media and carousel content to fill the entire viewport width
+                '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
+                // Special case for Carousel, where the Media is nested inside a CarouselItem
+                '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full',
+                // 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-80 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]',
+                '**:data-[slot="media"]:*:h-[inherit]',
+                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                '*:data-[slot="carousel"]:h-80 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"]:w-full!',
+                // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
+                '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
+                // break out the carousel out of the container
+                '**:data-[slot="carousel-items-container"]:absolute **:data-[slot="carousel-items-container"]:right-0 **:data-[slot="carousel-items-container"]:left-0 **:data-[slot="carousel-items-container"]:h-[inherit]',
+                // Positions the carousel controls inside the carousel
+                '**:data-[slot="carousel-controls"]:z-10 **:data-[slot="carousel-controls"]:mb-4 *:data-[slot="carousel"]:flex *:data-[slot="carousel"]:items-end *:data-[slot="carousel"]:justify-end'
+            ],
+            'two-column': [
+                'lg:items-center lg:*:col-span-6',
+                // Vertical spacing in the <Content>
+                'lg:*:data-[slot="content"]:gap-y-7',
+                nonFullBleedAspectRatiosForSmallScreens,
+                // Set media aspect ratio to 1:1 (square)
+                'lg:*:data-[slot="media"]:*:aspect-square'
+            ]
+        }
+    },
+    compoundVariants: [
+        {
+            variant: [
+                'standard',
+                'two-column'
+            ],
+            className: [
+                '*:data-[slot="media"]:*:rounded-3xl',
+                '**:data-[slot="carousel-controls"]:absolute *:data-[slot="carousel"]:relative **:data-[slot="carousel-controls"]:right-4 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-container"]:rounded-3xl'
+            ]
+        }
+    ],
+    defaultVariants: {
+        variant: 'standard'
+    }
+});
+const Hero = ({ variant, className, children, ...rest })=>{
+    const variantsClassName = variants({
+        variant,
+        className
+    });
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeroContext,
+                {
+                    variant
+                }
+            ],
+            [
+                HeadingContext,
+                {
+                    // Sets the default heading size for the Hero based on the variant
+                    size: variant === 'two-column' ? 'xl' : 'l',
+                    className: // word-break:break-word to allow long words to break (this is necessary to make hyphens work in grid containers in Safari)
+                    'hyphens-auto text-pretty [word-break:break-word]'
+                }
+            ],
+            [
+                GroupContext,
+                {
+                    // Prevents the group from being announced as a group by screen readers
+                    // The Group component is used to group the Hero's CTA buttons together visually, and has no semantic meaning
+                    role: 'presentation',
+                    className: 'flex flex-wrap gap-3 *:w-fit'
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            className: cx(variantsClassName, className),
+            ...rest,
+            children: children
+        })
+    });
+};
+
 /**
  * Hook that detects the user's preference for reduced motion.
  *
@@ -1008,6 +1197,32 @@ const cardLinkVariants = cva({
     return prefersReducedMotion;
 }
 
+/**
+ * A helper to get the prev/next button from the carousel DOM
+ * @param ref The carousel ref
+ * @param slot The slot of the button to get ('prev' or 'next')
+ * @returns The button element, or undefined if not found
+ */ const getCarouselButton = (ref, slot)=>ref.current?.querySelector(`button[slot="${slot}"]`);
+/**
+ * Focus the first focusable element in the currently snapped slide
+ * @param emblaApi The embla carousel API instance
+ */ const focusElementInSnappedSlide = (emblaApi)=>{
+    if (!emblaApi) {
+        return;
+    }
+    const index = emblaApi.selectedScrollSnap();
+    const targetSlide = emblaApi.slideNodes()[index];
+    if (!targetSlide) {
+        return;
+    }
+    // Find first focusable element in the slide
+    const focusableElement = targetSlide.querySelector('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
+    // Use preventScroll to avoid the browser's default scroll-into-view behavior
+    // which would conflict with embla's scroll animation
+    focusableElement?.focus({
+        preventScroll: true
+    });
+};
 const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0, orientation = 'horizontal', onSelect, onSettled, loop = false, scrollGestures = false, ref, ...rest })=>{
     const carouselRef = useRef(null);
     const prefersReducedMotion = usePrefersReducedMotion() ?? false;
@@ -1040,6 +1255,10 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
     const [slidesInView, setSlidesInView] = useState([
         initialIndex
     ]);
+    // We need some default values here. The proper initial values will be set by the embla init handler later
+    // for the default values, assume that we can scroll next, but for prev only if looping is enabled
+    const [canScrollNext, setCanScrollNext] = useState(true);
+    const [canScrollPrev, setCanScrollPrev] = useState(loop);
     const previousSettledScrollIndex = useRef(initialIndex);
     useEffect(()=>{
         if (!emblaApi) {
@@ -1050,6 +1269,8 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
             switch(type){
                 case 'select':
                     onSelect?.(scrollSnapIndex);
+                    setCanScrollNext(emblaApi.canScrollNext());
+                    setCanScrollPrev(emblaApi.canScrollPrev());
                     break;
                 case 'settle':
                     {
@@ -1066,15 +1287,23 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
                         setSlidesInView(emblaApi.slidesInView());
                         break;
                     }
+                case 'init':
+                    {
+                        setCanScrollNext(emblaApi.canScrollNext());
+                        setCanScrollPrev(emblaApi.canScrollPrev());
+                        break;
+                    }
             }
         };
         emblaApi.on('select', emblaHandler);
         emblaApi.on('slidesInView', emblaHandler);
         emblaApi.on('settle', emblaHandler);
+        emblaApi.on('init', emblaHandler);
         return ()=>{
             emblaApi.off('select', emblaHandler);
             emblaApi.off('settle', emblaHandler);
             emblaApi.off('slidesInView', emblaHandler);
+            emblaApi.off('init', emblaHandler);
         };
     }, [
         emblaApi,
@@ -1088,8 +1317,8 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
         emblaApi.plugins().autoplay?.stop();
         emblaApi.scrollNext(prefersReducedMotion);
         // we need to move focus if  we are about to disable this button due to start/end of carousel
-        if (!loop && !emblaApi.canScrollNext() && carouselRef.current?.querySelector('button[slot="next"]')?.matches(':focus-visible')) {
-            carouselRef.current?.querySelector('button[slot="prev"]')?.focus();
+        if (!loop && !emblaApi.canScrollNext() && getCarouselButton(carouselRef, 'next')?.matches(':focus-visible')) {
+            getCarouselButton(carouselRef, 'prev')?.focus();
         }
     }, [
         emblaApi,
@@ -1103,8 +1332,8 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
         emblaApi.plugins().autoplay?.stop();
         emblaApi.scrollPrev(prefersReducedMotion);
         // we need to move focus if  we are about to disable this button due to start/end of carousel
-        if (!loop && !emblaApi.canScrollPrev() && carouselRef.current?.querySelector('button[slot="prev"]')?.matches(':focus-visible')) {
-            carouselRef.current?.querySelector('button[slot="next"]')?.focus();
+        if (!loop && !emblaApi.canScrollPrev() && getCarouselButton(carouselRef, 'prev')?.matches(':focus-visible')) {
+            getCarouselButton(carouselRef, 'next')?.focus();
         }
     }, [
         emblaApi,
@@ -1113,24 +1342,40 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
     ]);
     const locale = _useLocale();
     const handleKeyDown = useCallback((e)=>{
+        // Check if either prev or next button has focus - if so, don't override their focus management
+        const carouselButtonHasFocus = getCarouselButton(carouselRef, 'prev')?.matches(':focus-visible') || getCarouselButton(carouselRef, 'next')?.matches(':focus-visible');
         if (e.key === 'ArrowRight' && !e.repeat) {
             handleNextPress();
+            // Focus first focusable element in the next slide, unless a carousel button has focus
+            if (!carouselButtonHasFocus) {
+                focusElementInSnappedSlide(emblaApi);
+            }
         } else if (e.key === 'ArrowLeft' && !e.repeat) {
             handlePrevPress();
+            // Focus first focusable element in the previous slide, unless a carousel button has focus
+            if (!carouselButtonHasFocus) {
+                focusElementInSnappedSlide(emblaApi);
+            }
         }
     }, [
         handleNextPress,
-        handlePrevPress
+        handlePrevPress,
+        emblaApi
     ]);
-    return(// biome-ignore lint/a11y/useSemanticElements: we want to use a div
+    const hasHeroContext = !!useContext(HeroContext);
+    const nextPrevStyles = hasHeroContext ? {
+        color: 'white',
+        variant: 'primary'
+    } : {
+        variant: 'tertiary'
+    };
+    return(// biome-ignore lint/a11y/noStaticElementInteractions: This is just to enhance keyboard navigation, this is not a replacement for proper focusable elements inside the carousel
     /*#__PURE__*/ jsx("div", {
         ...rest,
         "data-orientation": orientation,
         "data-slot": "carousel",
         ref: mergeRefs(ref, carouselRef),
         onKeyDown: handleKeyDown,
-        role: "region",
-        "aria-label": translations$1.carousel[locale],
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
@@ -1148,13 +1393,15 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
                             [DEFAULT_SLOT]: {},
                             prev: {
                                 'aria-label': translations$1.previous[locale],
-                                isDisabled: !emblaApi?.canScrollPrev(),
-                                onPress: handlePrevPress
+                                isDisabled: !canScrollPrev,
+                                onPress: handlePrevPress,
+                                ...nextPrevStyles
                             },
                             next: {
                                 'aria-label': translations$1.next[locale],
-                                isDisabled: !emblaApi?.canScrollNext(),
-                                onPress: handleNextPress
+                                isDisabled: !canScrollNext,
+                                onPress: handleNextPress,
+                                ...nextPrevStyles
                             }
                         }
                     }
@@ -1180,17 +1427,11 @@ const CarouselItemsContainer = ({ children, className, ...rest })=>{
     });
 };
 const CarouselItems = ({ className, children })=>{
-    const { slidesInView, orientation } = useContext(CarouselContext);
+    const { orientation } = useContext(CarouselContext);
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'flex', orientation === 'vertical' && 'flex-col'),
         "data-slot": "carousel-items",
-        children: Children.map(children, (child, index)=>{
-            if (/*#__PURE__*/ isValidElement(child)) {
-                return /*#__PURE__*/ cloneElement(child, {
-                    inert: slidesInView.includes(index) ? undefined : true
-                });
-            }
-        })
+        children: children
     });
 };
 /**
@@ -1200,6 +1441,8 @@ const CarouselItems = ({ className, children })=>{
         className: cx(className, 'flex justify-end gap-x-2'),
         "data-slot": "carousel-controls",
         ...rest,
+        // All items of the carousel are accessible to the screen reader at all times, so these controls will only confuse screen reader users
+        "aria-hidden": "true",
         children: children
     });
 const carouselButtonVariants = cva({
@@ -1242,7 +1485,7 @@ const carouselButtonIconSlotVariants = cva({
         }
     ]
 });
-const CarouselButton = ({ className, isIconOnly = true, color = 'white', variant = 'primary', slot, ...rest })=>{
+const CarouselButton = ({ className, isIconOnly = true, slot, ...rest })=>{
     const { orientation } = useContext(CarouselContext);
     return /*#__PURE__*/ jsx(Button, {
         className: carouselButtonVariants({
@@ -1250,8 +1493,6 @@ const CarouselButton = ({ className, isIconOnly = true, color = 'white', variant
         }),
         isIconOnly: isIconOnly,
         slot: slot,
-        variant: variant,
-        color: color,
         ...rest,
         children: /*#__PURE__*/ jsx(ChevronRight, {
             className: carouselButtonIconSlotVariants({
@@ -1281,49 +1522,6 @@ const CarouselItem = ({ className, children, ...rest })=>{
     });
 };
 
-const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
-const input = cva({
-    base: [
-        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
-        'bg-white',
-        // Use box-content to enable auto width based on number of characters (size)
-        // Setting min-height to prevent the input from collapsing in Safari
-        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
-        'box-content min-h-6 py-2.5',
-        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
-        // invalid styles
-        'group-data-invalid:ring-focus group-data-invalid:ring-red',
-        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
-        'appearance-none'
-    ],
-    variants: {
-        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
-        focusModifier: {
-            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
-            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
-        },
-        isGrouped: {
-            false: 'px-3',
-            true: '!ring-0 flex-1'
-        }
-    },
-    defaultVariants: {
-        focusModifier: 'focus',
-        isGrouped: false
-    }
-});
-const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
-    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
-]);
-const dropdown = {
-    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
-    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
-    chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
-};
-
 function ErrorMessage(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsx(Text, {
@@ -1913,130 +2111,6 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     });
 }
 
-// Common variant for "standard" and "full-bleed" Hero variants
-const oneColumnLayout = [
-    // Vertical spacing in the <Content>
-    'lg:*:data-[slot="content"]:gap-y-4',
-    // Main text content takes up 9 columns on medium screens and above
-    'lg:*:data-[slot="content"]:col-span-9',
-    // Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
-    '*:not-data-[slot="content"]:not-data-[slot="media"]:w-fit',
-    // Other elements than <Content> and <Media> (e.g. CTA, SVG logo or Badge) take up 3 columns on medium screens and above, and are right aligned
-    'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:not-data-[slot="carousel"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
-    // <Media> and <Carousel> content takes up the full width on medium screens and above
-    'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
-    'lg:*:data-[slot="carousel"]:col-span-full',
-    // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
-    'lg:items-end'
-];
-const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot="media"]:*:aspect-[1/1] sm:*:data-[slot="media"]:*:aspect-4/3 md:*:data-[slot="media"]:*:aspect-3/2';
-const variants = cva({
-    base: [
-        'container px-0',
-        // Grid variant to position the Hero's content
-        'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
-        'gap-y-10 lg:gap-y-12',
-        // Enable vertical gap within <Content>
-        '*:data-[slot="content"]:grid',
-        // Vertical spacing in the <Content>
-        '*:data-[slot="content"]:gap-y-3',
-        // Make sure <Media> content fills any available vertical and horizontal space
-        '*:data-[slot="media"]:*:object-cover',
-        '*:data-[slot="carousel"]:overflow-hidden *:data-[slot="carousel"]:rounded-3xl',
-        // Make the carousel items full width, so we scroll one at a time
-        '**:data-[slot="carousel-item"]:basis-full'
-    ],
-    variants: {
-        /**
-     * Defines the variant of the Hero
-     * @default standard
-     * */ variant: {
-            standard: [
-                oneColumnLayout,
-                nonFullBleedAspectRatiosForSmallScreens,
-                'lg:*:data-[slot="media"]:*:aspect-2/1'
-            ],
-            'full-bleed': [
-                oneColumnLayout,
-                // Position the media and carousel content to fill the entire viewport width
-                '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
-                // Special case for Carousel, where the Media is nested inside a CarouselItem
-                '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full',
-                // 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-80 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]',
-                '**:data-[slot="media"]:*:h-[inherit]',
-                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-                '*:data-[slot="carousel"]:h-80 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"]:w-full!',
-                // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
-                '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
-                // break out the carousel out of the container
-                '**:data-[slot="carousel-items-container"]:absolute **:data-[slot="carousel-items-container"]:right-0 **:data-[slot="carousel-items-container"]:left-0 **:data-[slot="carousel-items-container"]:h-[inherit]',
-                // Positions the carousel controls inside the carousel
-                '**:data-[slot="carousel-controls"]:z-10 **:data-[slot="carousel-controls"]:mb-4 *:data-[slot="carousel"]:flex *:data-[slot="carousel"]:items-end *:data-[slot="carousel"]:justify-end'
-            ],
-            'two-column': [
-                'lg:items-center lg:*:col-span-6',
-                // Vertical spacing in the <Content>
-                'lg:*:data-[slot="content"]:gap-y-7',
-                nonFullBleedAspectRatiosForSmallScreens,
-                // Set media aspect ratio to 1:1 (square)
-                'lg:*:data-[slot="media"]:*:aspect-square'
-            ]
-        }
-    },
-    compoundVariants: [
-        {
-            variant: [
-                'standard',
-                'two-column'
-            ],
-            className: [
-                '*:data-[slot="media"]:*:rounded-3xl',
-                '**:data-[slot="carousel-controls"]:absolute *:data-[slot="carousel"]:relative **:data-[slot="carousel-controls"]:right-4 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-container"]:rounded-3xl'
-            ]
-        }
-    ],
-    defaultVariants: {
-        variant: 'standard'
-    }
-});
-const Hero = ({ variant, className, children, ...rest })=>{
-    const variantsClassName = variants({
-        variant,
-        className
-    });
-    return /*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                HeadingContext,
-                {
-                    // Sets the default heading size for the Hero based on the variant
-                    size: variant === 'two-column' ? 'xl' : 'l',
-                    className: // word-break:break-word to allow long words to break (this is necessary to make hyphens work in grid containers in Safari)
-                    'hyphens-auto text-pretty [word-break:break-word]'
-                }
-            ],
-            [
-                GroupContext,
-                {
-                    // Prevents the group from being announced as a group by screen readers
-                    // The Group component is used to group the Hero's CTA buttons together visually, and has no semantic meaning
-                    role: 'presentation',
-                    className: 'flex flex-wrap gap-3 *:w-fit'
-                }
-            ]
-        ],
-        children: /*#__PURE__*/ jsx("div", {
-            className: cx(variantsClassName, className),
-            ...rest,
-            children: children
-        })
-    });
-};
-
 // Sets the correct icons for each link in the link list
 const _LinkProvider = ({ children })=>/*#__PURE__*/ jsx(Provider, {
         values: [
@@ -3001,4 +3075,4 @@ const VideoLoop = ({ src, format, alt, className })=>{
     });
 };
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _LinkContext, _useLocale as useLocale };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _LinkContext, _useLocale as useLocale };