@obosbbl/grunnmuren-react 3.3.4 → 3.4.0

package/dist/index.mjs

@@ -1,18 +1,21 @@
 '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, isValidElement, cloneElement, useCallback } 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, useUpdateEffect, useObjectRef, useFormReset } from '@react-aria/utils';
+import { filterDOMProps, mergeProps, mergeRefs, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
 import { useFocusRing, useDisclosure, useProgressBar, useDateFormatter, useField } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
-import { useDebouncedCallback } from 'use-debounce';
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
+import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
 import { useFormValidation } from '@react-aria/form';
 import { useFormValidationState } from '@react-stately/form';
 import { useControlledState } from '@react-stately/utils';
 import { PressResponder } from '@react-aria/interactions';
+import { useDebouncedCallback } from 'use-debounce';
 
 const HeadingContext = /*#__PURE__*/ createContext({});
 const headingVariants = cva({
@@ -487,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", {
@@ -535,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
         });
@@ -546,7 +577,6 @@ function Backlink(props) {
     return /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
         className: _className,
-        style: style,
         ref: ref,
         children: content
     });
@@ -589,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, {
@@ -619,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
         }
     },
@@ -709,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,
@@ -977,12 +1043,145 @@ 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.
  *
  * Keep in mind that this hook relies on a browser API's and doesn't run on the server.
  * You can supply an initial value that will be used for server side rendering.
- */ function usePrefersReducedMotion(initialValue = true) {
+ *
+ * The default initial value is `false` as this aligns with most users. This is to prevent unecessary rerenders on mount for the common user.
+ */ function usePrefersReducedMotion(initialValue = false) {
     const [prefersReducedMotion, setPrefersReducedMotion] = useState(initialValue);
     useEffect(()=>{
         const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -998,188 +1197,193 @@ const cardLinkVariants = cva({
     return prefersReducedMotion;
 }
 
-const Carousel = ({ className, children, onChange, ...rest })=>{
+/**
+ * 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 carouselItemsRef = useRef(null);
-    const locale = _useLocale();
-    const { previous, next } = translations$1;
-    const [scrollTargetIndex, setScrollTargetIndex] = useState(0);
-    const isScrollingProgrammatically = useRef(false);
-    const scrollTimeoutRef = useRef(null);
-    const scrollQueue = useRef([]);
-    const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
-    const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
-    const prefersReducedMotion = usePrefersReducedMotion();
-    useEffect(()=>{
-        setHasReachedScrollStart(scrollTargetIndex === 0);
-        setHasReachedScrollEnd(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
-    }, [
-        scrollTargetIndex
-    ]);
-    // Keep track of the previous index to determine if the user is scrolling forward or backward
-    // This is used to determine which callback to call (onPrev or onNext)
-    const prevIndex = useRef(0);
-    // Processes the next scroll action in the queue, if any
-    // All clicks on the prev/next buttons are queued while a programmatic scroll is in progress
-    // This is to ensure that rapid clicks on the buttons do not cause janky scrolling behavior
-    // while still a snappy response to user clicks
-    const processQueue = ()=>{
-        if (scrollQueue.current.length > 0 && !isScrollingProgrammatically.current) {
-            const nextIndex = scrollQueue.current?.shift();
-            if (nextIndex !== undefined) {
-                setScrollTargetIndex(nextIndex);
-            }
-        }
-    };
-    // Handle scrolling when user clicks the arrow icons
-    useUpdateEffect(()=>{
-        if (!carouselItemsRef.current) {
-            return;
-        }
-        if (scrollTimeoutRef.current) {
-            clearTimeout(scrollTimeoutRef.current);
-        }
-        isScrollingProgrammatically.current = true;
-        const elementWithFocusVisible = carouselRef.current?.querySelector(':focus-visible');
-        const targetElement = carouselItemsRef.current.children[scrollTargetIndex];
-        if (targetElement) {
-            // Calculate the scroll position to scroll the target element into view
-            const containerRect = carouselItemsRef.current.getBoundingClientRect();
-            const targetRect = targetElement.getBoundingClientRect();
-            const scrollLeft = carouselItemsRef.current.scrollLeft + (targetRect.left - containerRect.left);
-            carouselItemsRef.current.scrollTo({
-                left: Math.round(scrollLeft),
-                behavior: prefersReducedMotion ? 'instant' : 'smooth'
-            });
+    const prefersReducedMotion = usePrefersReducedMotion() ?? false;
+    const emblaPlugins = useMemo(()=>{
+        const plugins = [];
+        if (scrollGestures) {
+            plugins.push(WheelGesturesPlugin());
         }
-        if (prevIndex.current !== scrollTargetIndex && onChange) {
-            onChange({
-                index: scrollTargetIndex,
-                id: carouselItemsRef.current.children[scrollTargetIndex]?.id,
-                prevIndex: prevIndex.current,
-                prevId: carouselItemsRef.current.children[prevIndex.current]?.id
-            });
+        if (autoPlayDelay) {
+            plugins.push(Autoplay({
+                delay: autoPlayDelay,
+                stopOnLastSnap: !loop,
+                jump: prefersReducedMotion
+            }));
         }
-        prevIndex.current = scrollTargetIndex;
-        scrollTimeoutRef.current = setTimeout(()=>{
-            isScrollingProgrammatically.current = false;
-            scrollTimeoutRef.current = null;
-            if (elementWithFocusVisible && !carouselRef.current?.contains(document.activeElement)) {
-                // Restore focus to the appropriate element after scrolling
-                // First check if the prev or next buttons just got hidden due to reaching the start/end of the carousel
-                // If so, move focus to the other button. This is to avoid a scroll jank that occurs if instead focus is restored to the carousel container
-                // This jank happens because of the delays used for scrolling with these buttons (debounce, queuing etc.).
-                switch(elementWithFocusVisible.slot){
-                    case 'prev':
-                        {
-                            // Focus was lost when the prev button turned invisible, set it to the next button
-                            const nextButton = carouselRef.current?.querySelector('[slot="next"]');
-                            nextButton?.focus();
-                            break;
-                        }
-                    case 'next':
-                        {
-                            // Focus was lost when the next button turned invisible, set it to the prev button
-                            const prevButton = carouselRef.current?.querySelector('[slot="prev"]');
-                            prevButton?.focus();
-                            break;
-                        }
-                    default:
-                        {
-                            // Focus was lost during while scrolling with left/right arrows, restore it to the carousel container
-                            carouselItemsRef.current?.focus();
-                            break;
-                        }
-                }
-            }
-            processQueue(); // Process any queued scrolls
-        }, 500);
+        return plugins;
     }, [
-        scrollTargetIndex,
+        autoPlayDelay,
+        scrollGestures,
+        loop,
         prefersReducedMotion
     ]);
-    // Clean up timeout on unmount
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align,
+        loop,
+        startIndex: initialIndex,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+        inViewThreshold: 0.2
+    }, emblaPlugins);
+    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(()=>{
-        return ()=>{
-            if (scrollTimeoutRef.current) {
-                clearTimeout(scrollTimeoutRef.current);
+        if (!emblaApi) {
+            return;
+        }
+        const emblaHandler = (_, type)=>{
+            const scrollSnapIndex = emblaApi.selectedScrollSnap();
+            switch(type){
+                case 'select':
+                    onSelect?.(scrollSnapIndex);
+                    setCanScrollNext(emblaApi.canScrollNext());
+                    setCanScrollPrev(emblaApi.canScrollPrev());
+                    break;
+                case 'settle':
+                    {
+                        // We only invoke the callback if the scroll index actually changed from the previous settled index
+                        // Otherwise this gets triggered if the user does the tiniest bit of scrolling in the carousel, but doesn't transition to the next slide
+                        if (scrollSnapIndex !== previousSettledScrollIndex.current) {
+                            previousSettledScrollIndex.current = scrollSnapIndex;
+                            onSettled?.(scrollSnapIndex);
+                        }
+                        break;
+                    }
+                case 'slidesInView':
+                    {
+                        setSlidesInView(emblaApi.slidesInView());
+                        break;
+                    }
+                case 'init':
+                    {
+                        setCanScrollNext(emblaApi.canScrollNext());
+                        setCanScrollPrev(emblaApi.canScrollPrev());
+                        break;
+                    }
             }
         };
-    }, []);
-    const onScroll = useDebouncedCallback((event)=>{
-        // Ignore scroll events when we're programmatically scrolling
-        if (isScrollingProgrammatically.current) {
+        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,
+        onSelect,
+        onSettled
+    ]);
+    const handleNextPress = useCallback(()=>{
+        if (!emblaApi) {
             return;
         }
-        const target = event.target;
-        const containerRect = target.getBoundingClientRect();
-        // Calculate the index of the item that is currently in view
-        const newScrollTargetIndex = Array.from(target.children).findIndex((child)=>{
-            const rect = child.getBoundingClientRect();
-            // Check if the item is more than 50% visible within the container
-            const visibleWidth = Math.min(rect.right, containerRect.right) - Math.max(rect.left, containerRect.left);
-            const itemWidth = rect.width;
-            return visibleWidth / itemWidth > 0.5;
-        });
-        if (newScrollTargetIndex !== -1 && newScrollTargetIndex !== scrollTargetIndex) {
-            if (onChange) {
-                onChange({
-                    index: newScrollTargetIndex,
-                    id: target.children[newScrollTargetIndex]?.id,
-                    prevIndex: prevIndex.current,
-                    prevId: target.children[prevIndex.current]?.id
-                });
-            }
-            // Update the index and prevIndex
-            setScrollTargetIndex(newScrollTargetIndex);
-            prevIndex.current = newScrollTargetIndex;
+        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() && getCarouselButton(carouselRef, 'next')?.matches(':focus-visible')) {
+            getCarouselButton(carouselRef, 'prev')?.focus();
         }
-    }, 150);
-    const handlePrevious = ()=>{
-        setScrollTargetIndex((currentTargetIndex)=>{
-            const targetIndex = currentTargetIndex - 1;
-            if (targetIndex < 0) {
-                return currentTargetIndex;
-            }
-            if (isScrollingProgrammatically.current) {
-                // If we're already scrolling, queue this action
-                scrollQueue.current = [
-                    targetIndex
-                ];
-                return currentTargetIndex;
-            }
-            return targetIndex;
-        });
-    };
-    const handleNext = ()=>{
-        setScrollTargetIndex((currentTargetIndex)=>{
-            const targetIndex = currentTargetIndex + 1;
-            if (!carouselItemsRef.current || targetIndex >= carouselItemsRef.current.children.length) {
-                return currentTargetIndex;
+    }, [
+        emblaApi,
+        prefersReducedMotion,
+        loop
+    ]);
+    const handlePrevPress = useCallback(()=>{
+        if (!emblaApi) {
+            return;
+        }
+        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() && getCarouselButton(carouselRef, 'prev')?.matches(':focus-visible')) {
+            getCarouselButton(carouselRef, 'next')?.focus();
+        }
+    }, [
+        emblaApi,
+        prefersReducedMotion,
+        loop
+    ]);
+    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);
             }
-            if (isScrollingProgrammatically.current) {
-                // If we're already scrolling, queue this action
-                scrollQueue.current = [
-                    targetIndex
-                ];
-                return currentTargetIndex;
+        } 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);
             }
-            return targetIndex;
-        });
+        }
+    }, [
+        handleNextPress,
+        handlePrevPress,
+        emblaApi
+    ]);
+    const hasHeroContext = !!useContext(HeroContext);
+    const nextPrevStyles = hasHeroContext ? {
+        color: 'white',
+        variant: 'primary'
+    } : {
+        variant: 'tertiary'
     };
-    return /*#__PURE__*/ jsx("div", {
+    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: carouselRef,
+        ref: mergeRefs(ref, carouselRef),
+        onKeyDown: handleKeyDown,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
-                    CarouselItemsContext,
+                    CarouselContext,
                     {
-                        carouselItemsRef,
-                        onScroll,
-                        activeIndex: scrollTargetIndex,
-                        handlePrevious,
-                        handleNext
+                        slidesInView,
+                        '~emblaRef': emblaRef,
+                        orientation
                     }
                 ],
                 [
@@ -1188,115 +1392,119 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
                         slots: {
                             [DEFAULT_SLOT]: {},
                             prev: {
-                                'aria-label': previous[locale],
-                                onPress: handlePrevious
+                                'aria-label': translations$1.previous[locale],
+                                isDisabled: !canScrollPrev,
+                                onPress: handlePrevPress,
+                                ...nextPrevStyles
                             },
                             next: {
-                                isIconOnly: true,
-                                'aria-label': next[locale],
-                                onPress: handleNext
+                                'aria-label': translations$1.next[locale],
+                                isDisabled: !canScrollNext,
+                                onPress: handleNextPress,
+                                ...nextPrevStyles
                             }
                         }
                     }
                 ]
             ],
-            children: /*#__PURE__*/ jsxs("div", {
-                ...rest,
-                className: cx(className, 'relative rounded-3xl', // If any <CarouselItems/> (the scroll-snap container) or <VideoLoop/> component is focused, apply custom focus styles around the carousel, this makes ensures that the focus outline is visible around the carousel in all cases
-                '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus', '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus-offset', // Unset the default focus outline for potential video loop buttons, as it interferes with the custom focus styles for the carousel
-                '**:data-[slot="video-loop-button"]:focus-visible:outline-none'),
-                children: [
-                    children,
-                    /*#__PURE__*/ jsxs(_CarouselControls, {
-                        children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                isIconOnly: true,
-                                slot: "prev",
-                                variant: "primary",
-                                color: "white",
-                                className: cx('group/carousel-previous', hasReachedScrollStart && 'invisible'),
-                                children: /*#__PURE__*/ jsx(ChevronLeft, {
-                                    className: "group-hover/carousel-previous:motion-safe:-translate-x-1 transition-transform"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(Button, {
-                                isIconOnly: true,
-                                slot: "next",
-                                variant: "primary",
-                                color: "white",
-                                className: cx('group/carousel-next', hasReachedScrollEnd && 'invisible'),
-                                children: /*#__PURE__*/ jsx(ChevronRight, {
-                                    className: "transition-transform group-hover/carousel-next:motion-safe:translate-x-1"
-                                })
-                            })
-                        ]
-                    })
-                ]
-            })
+            children: children
         })
+    }));
+};
+const CarouselContext = /*#__PURE__*/ createContext({
+    '~emblaRef': null,
+    orientation: 'horizontal',
+    slidesInView: []
+});
+const CarouselItemsContainer = ({ children, className, ...rest })=>{
+    const { '~emblaRef': emblaRef } = useContext(CarouselContext);
+    return /*#__PURE__*/ jsx("div", {
+        className: cx(className, 'overflow-hidden'),
+        ref: emblaRef,
+        "data-slot": "carousel-items-container",
+        ...rest,
+        children: children
+    });
+};
+const CarouselItems = ({ className, children })=>{
+    const { orientation } = useContext(CarouselContext);
+    return /*#__PURE__*/ jsx("div", {
+        className: cx(className, 'flex', orientation === 'vertical' && 'flex-col'),
+        "data-slot": "carousel-items",
+        children: children
     });
 };
 /**
  * This is internal for now, but we will expose it in the future when we support more flexible positioning of prev/next and other actions.
  * It is used to render the prev/next buttons in the carousel for now.
- */ const _CarouselControls = ({ children, className })=>/*#__PURE__*/ jsx("div", {
-        className: cx(className, 'absolute right-6 bottom-6 flex gap-x-2', // Make it easier to position in full-bleed hero variants (these style have no other side effects)
-        'items-end *:h-fit'),
+ */ const CarouselControls = ({ children, className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        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 CarouselItemsContext = /*#__PURE__*/ createContext({
-    carouselItemsRef: null,
-    activeIndex: 0
+const carouselButtonVariants = cva({
+    base: 'group data-disabled:invisible'
 });
-const CarouselItems = ({ className, children })=>{
-    const { carouselItemsRef, onScroll, activeIndex, handlePrevious, handleNext } = useContext(CarouselItemsContext);
-    const prefersReducedMotion = usePrefersReducedMotion();
-    const handleKeyDown = (event)=>{
-        // Prevent default behavior when holding down arrow keys (when repeat is true)
-        // The default behavior in scroll snapping causes a staggering scroll effect that feels janky
-        if (event.repeat && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-            event.preventDefault();
-            return;
+const carouselButtonIconSlotVariants = cva({
+    base: 'transition-transform',
+    variants: {
+        slot: {
+            next: null,
+            prev: null
+        },
+        orientation: {
+            horizontal: null,
+            vertical: null
         }
-        // For users with prefers-reduced-motion, trigger button click behavior instead of native scroll
-        if (prefersReducedMotion) {
-            if (event.key === 'ArrowLeft' && handlePrevious) {
-                event.preventDefault();
-                handlePrevious();
-            } else if (event.key === 'ArrowRight' && handleNext) {
-                event.preventDefault();
-                handleNext();
-            }
+    },
+    compoundVariants: [
+        // horizontal controls
+        {
+            slot: 'next',
+            orientation: 'horizontal',
+            className: 'group-hover:motion-safe:translate-x-1'
+        },
+        {
+            slot: 'prev',
+            orientation: 'horizontal',
+            className: 'group-hover:motion-safe:-translate-x-1 rotate-180'
+        },
+        // vertical controls
+        {
+            slot: 'next',
+            orientation: 'vertical',
+            className: 'rotate-90 group-hover:motion-safe:translate-y-1'
+        },
+        {
+            slot: 'prev',
+            orientation: 'vertical',
+            className: 'group-hover:motion-safe:-translate-y-1 -rotate-90'
         }
-    };
-    return(// biome-ignore lint/a11y/noStaticElementInteractions: The keydown handler is only to prevent undesired scrolling behavior when using the arrow keys
-    /*#__PURE__*/ jsx("div", {
-        "data-slot": "carousel-items",
-        className: cx(className, [
-            'scrollbar-hidden',
-            'flex',
-            'snap-x',
-            'snap-mandatory',
-            'overflow-x-auto',
-            'outline-none',
-            'rounded-[inherit]'
-        ]),
-        ref: carouselItemsRef,
-        onScroll: onScroll,
-        onKeyDown: handleKeyDown,
-        children: Children.map(children, (child, index)=>{
-            if (/*#__PURE__*/ isValidElement(child)) {
-                return /*#__PURE__*/ cloneElement(child, {
-                    inert: activeIndex === index ? undefined : true
-                });
-            }
+    ]
+});
+const CarouselButton = ({ className, isIconOnly = true, slot, ...rest })=>{
+    const { orientation } = useContext(CarouselContext);
+    return /*#__PURE__*/ jsx(Button, {
+        className: carouselButtonVariants({
+            className
+        }),
+        isIconOnly: isIconOnly,
+        slot: slot,
+        ...rest,
+        children: /*#__PURE__*/ jsx(ChevronRight, {
+            className: carouselButtonIconSlotVariants({
+                orientation,
+                slot
+            })
         })
-    }));
+    });
 };
 const CarouselItem = ({ className, children, ...rest })=>{
     return /*#__PURE__*/ jsx("div", {
-        className: cx(className, 'shrink-0 basis-full snap-start'),
+        className: cx(className, 'min-w-0 shrink-0 grow-0'),
         "data-slot": "carousel-item",
         ...rest,
         children: /*#__PURE__*/ jsx(Provider, {
@@ -1314,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, {
@@ -1612,7 +1777,7 @@ function Combobox(props) {
 /**
  * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
  */ const FileTrigger = (props)=>{
-    const { onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ref, isInvalid, isRequired, name, value, ...rest } = props;
+    const { onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ref, isInvalid, isRequired, name, ...rest } = props;
     const inputRef = useObjectRef(ref);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -1661,6 +1826,46 @@ const translations = {
         en: 'Remove'
     }
 };
+/**
+ * Extracts a simple file extension from a file name or converts MIME type to extension
+ * @param file The file object
+ * @returns A simple file extension (e.g., "pdf", "jpg", "svg")
+ */ function getFileExtension(file) {
+    const match = file.name.match(/\.([^.]+)$/);
+    if (match) {
+        return match[1].toUpperCase();
+    }
+    const mimeType = file.type;
+    if (!mimeType) {
+        return '';
+    }
+    const parts = mimeType.split('/');
+    if (parts.length === 2) {
+        const subtype = parts[1].split('+')[0]; // Handle cases like "svg+xml"
+        return subtype.toUpperCase();
+    }
+    return '';
+}
+/**
+ * Formats a file size in bytes to a human-readable string (B, KB, MB, GB, etc.)
+ * @param bytes The file size in bytes
+ * @returns A formatted string with the appropriate unit
+ */ function formatFileSize(bytes) {
+    if (bytes === 0) {
+        return '0 B';
+    }
+    const units = [
+        'B',
+        'KB',
+        'MB',
+        'GB',
+        'TB'
+    ];
+    const base = 1024;
+    const unitIndex = Math.floor(Math.log(bytes) / Math.log(base));
+    const size = bytes / base ** unitIndex;
+    return `${size.toFixed(2).replace(/\.?0+$/, '')} ${units[unitIndex]}`;
+}
 /**
  * Converts an array of files to a DataTransfer object which can be used as a FileList.
  * This is necessary for setting the files on a native file input.
@@ -1688,7 +1893,7 @@ const translations = {
         const extension = fileName.match(/(\.[^.]+)$/)?.[0] || '';
         if (!fileNameCounts[baseName]) {
             // Extract any number from the file name (if any, otherwise default to 0)
-            const baseNameCount = Number.parseInt(fileName.match(/\((\d+)\)/)?.[1] ?? '0');
+            const baseNameCount = Number.parseInt(fileName.match(/\((\d+)\)/)?.[1] ?? '0', 10);
             fileNameCounts[baseName] = baseNameCount;
         }
         fileNameCounts[baseName]++;
@@ -1837,11 +2042,34 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                         return /*#__PURE__*/ jsxs("li", {
                             children: [
                                 /*#__PURE__*/ jsxs("div", {
-                                    className: cx('flex items-center justify-between gap-2 rounded-lg border-2 px-4 py-2', hasError ? 'border-red bg-red-light' : 'border-gray bg-gray-lightest'),
+                                    className: cx('flex items-center justify-between gap-3 rounded-lg border p-1.5', hasError ? 'border-red bg-red-light' : 'border-gray'),
                                     children: [
-                                        fileName,
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center gap-3",
+                                            children: [
+                                                /*#__PURE__*/ jsx("div", {
+                                                    className: "footnote rounded-md border border-gray-light bg-gray-lightest px-2.5 py-2",
+                                                    children: getFileExtension(file)
+                                                }),
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "flex flex-col",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "description truncate font-medium",
+                                                            children: fileName
+                                                        }),
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "footnote text-gray-dark",
+                                                            children: formatFileSize(file.size)
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
                                         /*#__PURE__*/ jsx("button", {
-                                            className: cx('self-start', '-m-2 grid h-11 w-11 shrink-0 cursor-pointer place-items-center rounded-xl', // Focus styles
+                                            type: "button",
+                                            "aria-label": translations.remove[locale],
+                                            className: cx('-m-2 grid h-11 w-11 shrink-0 cursor-pointer place-items-center rounded-xl', // Focus styles
                                             'focus-visible:-outline-offset-8 focus-visible:outline-focus'),
                                             onClick: ()=>{
                                                 // For controlled component
@@ -1852,8 +2080,6 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                                                 // (without this, the focus will be set to the top of the page for screen readers)
                                                 buttonRef.current?.focus();
                                             },
-                                            "aria-label": translations.remove[locale],
-                                            type: "button",
                                             children: /*#__PURE__*/ jsx(Trash, {})
                                         })
                                     ]
@@ -1885,117 +2111,6 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     });
 }
 
-const roundedMediaCorners = '*:data-[slot="media"]:*:rounded-3xl';
-// 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  *:data-[slot="carousel"]:*:w-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'
-    ],
-    variants: {
-        /**
-     * Defines the variant of the Hero
-     * @default standard
-     * */ variant: {
-            standard: [
-                roundedMediaCorners,
-                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 *: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-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]',
-                // 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]',
-                // 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]',
-                // 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',
-                '**: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'
-            ],
-            'two-column': [
-                'lg:items-center lg:*:col-span-6',
-                // Vertical spacing in the <Content>
-                'lg:*:data-[slot="content"]:gap-y-7',
-                roundedMediaCorners,
-                nonFullBleedAspectRatiosForSmallScreens,
-                // Set media aspect ratio to 1:1 (square)
-                'lg:*:data-[slot="media"]:*:aspect-[1/1]'
-            ]
-        }
-    },
-    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: [
@@ -2110,30 +2225,28 @@ const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, classN
 };
 const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog$1, {
         ...restProps,
-        className: cx('relative grid gap-y-5 outline-none', // Footer
+        className: cx(className, 'relative grid gap-y-5 outline-none', // Footer
         '[&_[data-slot="footer"]]:flex [&_[data-slot="footer"]]:gap-x-2'),
-        children: ({ close })=>/*#__PURE__*/ jsx(Fragment, {
-                children: /*#__PURE__*/ jsx(Provider, {
-                    values: [
-                        [
-                            ButtonContext$1,
-                            {
-                                // This is necessary to support multiple close buttons
-                                slots: {
-                                    // We need to define default slot in order to also support non-slotted buttons (i.e. buttons without slot prop)
-                                    [DEFAULT_SLOT]: {
-                                        className: 'w-fit'
-                                    },
-                                    close: {
-                                        onPress: close,
-                                        className: 'w-fit'
-                                    }
+        children: ({ close })=>/*#__PURE__*/ jsx(Provider, {
+                values: [
+                    [
+                        ButtonContext$1,
+                        {
+                            // This is necessary to support multiple close buttons
+                            slots: {
+                                // We need to define default slot in order to also support non-slotted buttons (i.e. buttons without slot prop)
+                                [DEFAULT_SLOT]: {
+                                    className: 'w-fit'
+                                },
+                                close: {
+                                    onPress: close,
+                                    className: 'w-fit'
                                 }
                             }
-                        ]
-                    ],
-                    children: children
-                })
+                        }
+                    ]
+                ],
+                children: children
             })
     });
 
@@ -2701,7 +2814,7 @@ const tabsVariants = cva({
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(Tab$1, {
         ...restProps,
-        className: cx(className, 'data-focus-visible:-outline-offset-10 data-focus-visible:outline-2 data-focus-visible:outline-black', 'cursor-pointer border-transparent px-4 py-2 font-light text-sm', // Transition
+        className: cx(className, 'data-focus-visible:-outline-offset-10 data-focus-visible:outline-2 data-focus-visible:outline-black', 'description cursor-pointer border-transparent px-4 py-2 font-light', // Transition
         'transition-colors duration-150 ease-out', // TODO: Should disabled tabs just be hidden?
         'data-disabled:cursor-not-allowed data-disabled:opacity-50', // Selection
         'data-selected:font-medium data-selected:text-blue-dark', // Hover with layout shift prevention using pseudo-element
@@ -2962,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, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, 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 };