@obosbbl/grunnmuren-react 3.0.16 → 3.1.1

package/dist/index.mjs

@@ -1,14 +1,14 @@
 'use client';
-import { useContextProps, Provider, useLocale, Link, Button as Button$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, DEFAULT_SLOT, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, Header, ListBox as ListBox$1, ComboBox, Group, Input, Popover, ButtonContext as ButtonContext$1, DisclosureContext, DisclosureGroupStateContext, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, DialogTrigger as DialogTrigger$1, Modal as Modal$1, Dialog as Dialog$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Table as Table$1, TableHeader as TableHeader$1, Column, TableBody as TableBody$1, Row, Cell, Tabs as Tabs$1, TabListStateContext, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$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, 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 as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Table as Table$1, TableBody as TableBody$1, Cell, Column, 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 { Form, Group, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, Close, InfoCircle, CheckCircle, Warning, Error, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, ArrowRight, Download, LinkExternal, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
-import { useLayoutEffect, useUpdateEffect, filterDOMProps, mergeRefs, mergeProps, useObjectRef, useFormReset } from '@react-aria/utils';
 import { cva, cx, compose } from 'cva';
-import { createContext, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
-import { useProgressBar, useDateFormatter, useFocusRing, useDisclosure, useField } from 'react-aria';
-import { useDebouncedCallback } from 'use-debounce';
+import { createContext, useContext, useId, useRef, Children, useState, useEffect, 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 { useFocusRing, useDisclosure, useProgressBar, useDateFormatter, useField } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import { useDebouncedCallback } from 'use-debounce';
 import { useFormValidation } from '@react-aria/form';
 import { useFormValidationState } from '@react-stately/form';
 import { useControlledState } from '@react-stately/utils';
@@ -90,11 +90,176 @@ const Footer = (props)=>/*#__PURE__*/ jsx("div", {
         "data-slot": "footer"
     });
 
+const disclosureButtonVariants = cva({
+    base: [
+        'inline-flex cursor-pointer items-center justify-between rounded-lg focus-visible:outline-current focus-visible:outline-focus',
+        // Ensure a minimum click area of 44x44px, while making it look like it only has the size of the content
+        'p-2.5 focus-visible:outline-offset-[-0.625rem]',
+        'data-accordion:-m-2.5'
+    ],
+    variants: {
+        withChevron: {
+            true: '[&[aria-expanded="true"]_svg]:rotate-180',
+            false: null
+        },
+        /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */ isIconOnly: {
+            true: '[&>svg]:h-7 [&>svg]:w-7',
+            false: 'gap-2.5'
+        }
+    },
+    defaultVariants: {
+        withChevron: false,
+        isIconOnly: false
+    }
+});
+const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
+    const [props, ref] = useContextProps(restProps, _ref, ButtonContext$1);
+    return /*#__PURE__*/ jsxs(Button$1, {
+        ...props,
+        ref: ref,
+        className: disclosureButtonVariants({
+            className,
+            withChevron,
+            isIconOnly
+        }),
+        slot: "trigger",
+        children: [
+            children,
+            withChevron && /*#__PURE__*/ jsx(ChevronDown, {
+                className: "flex-none transition-transform duration-300 motion-reduce:transition-none"
+            })
+        ]
+    });
+};
+const DisclosureStateContext = /*#__PURE__*/ createContext(null);
+const Disclosure = ({ ref: _ref, children, ..._props })=>{
+    const [props, ref] = useContextProps(_props, _ref, DisclosureContext);
+    const groupState = useContext(DisclosureGroupStateContext);
+    let { id, ...otherProps } = props;
+    const defaultId = useId();
+    id ||= defaultId;
+    const isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
+    const state = useDisclosureState({
+        ...props,
+        isExpanded,
+        onExpandedChange (isExpanded) {
+            if (groupState) {
+                groupState.toggleKey(id);
+            }
+            props.onExpandedChange?.(isExpanded);
+        }
+    });
+    const isDisabled = props.isDisabled || groupState?.isDisabled || false;
+    const domProps = filterDOMProps(otherProps);
+    const { isFocusVisible: isFocusVisibleWithin } = useFocusRing({
+        within: true
+    });
+    const panelRef = useRef(null);
+    const { buttonProps, panelProps } = useDisclosure({
+        ...props,
+        isExpanded,
+        isDisabled
+    }, state, panelRef);
+    const { role: _, ...propsWithoutRole } = panelProps;
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                DisclosureContext,
+                state
+            ],
+            [
+                ButtonContext$1,
+                {
+                    slots: {
+                        [DEFAULT_SLOT]: {},
+                        trigger: buttonProps
+                    }
+                }
+            ],
+            [
+                DisclosurePanelContext,
+                {
+                    ...propsWithoutRole,
+                    panelRef
+                }
+            ],
+            [
+                DisclosureStateContext,
+                state
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            ...domProps,
+            className: otherProps.className,
+            ref: ref,
+            "data-focus-visible-within": isFocusVisibleWithin || undefined,
+            "data-expanded": state.isExpanded || undefined,
+            "data-disabled": isDisabled || undefined,
+            children: typeof children === 'function' ? children({
+                isExpanded: state.isExpanded,
+                isFocusVisibleWithin,
+                isDisabled,
+                state,
+                defaultChildren: null
+            }) : children
+        })
+    });
+};
+const DisclosurePanelContext = /*#__PURE__*/ createContext({});
+const DisclosurePanel = ({ ref, children, ...props })=>{
+    const disclosureContext = useContext(DisclosureContext);
+    const { panelProps, panelRef } = useContext(DisclosurePanelContext);
+    const { role: _role = 'group', className, ...restProps } = props;
+    const ariaLabelledby = props['aria-labelledby'] ?? restProps['aria-labelledby'];
+    const isWithoutRole = _role === 'none';
+    const role = isWithoutRole ? undefined : _role;
+    const { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = useFocusRing({
+        within: true
+    });
+    const domProps = filterDOMProps(props);
+    return /*#__PURE__*/ jsx("div", {
+        className: cx('grid transition-all duration-300 motion-reduce:transition-none', disclosureContext?.isExpanded ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr]'),
+        "data-expanded": disclosureContext?.isExpanded || undefined,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "overflow-hidden",
+            children: /*#__PURE__*/ jsx("div", {
+                ref: mergeRefs(ref, panelRef),
+                ...mergeProps(panelProps, focusWithinProps),
+                ...restProps,
+                ...domProps,
+                "data-focus-visible-within": isFocusVisibleWithin || undefined,
+                className: cx(className, '[content-visibility:visible]'),
+                role: role,
+                "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby,
+                inert: disclosureContext?.isExpanded ? undefined : true,
+                children: /*#__PURE__*/ jsx(Provider, {
+                    values: [
+                        // Reset the context to avoid passing the same context to children, in case of nested Disclosures
+                        [
+                            DisclosureContext,
+                            null
+                        ],
+                        [
+                            ButtonContext$1,
+                            null
+                        ]
+                    ],
+                    children: children
+                })
+            })
+        })
+    });
+};
+
 function Accordion(props) {
     const { children, className, ...restProps } = props;
     const childCount = Children.count(children);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
+        "data-accordion": true,
         className: cx('rounded-lg bg-white', className),
         children: Children.map(children, (child, index)=>/*#__PURE__*/ jsxs(Fragment, {
                 children: [
@@ -109,40 +274,16 @@ function Accordion(props) {
     });
 }
 function AccordionItem(props) {
-    const { className, children, defaultOpen = false, isOpen: controlledIsOpen, onOpenChange, ...restProps } = props;
-    const contentId = useId();
-    const buttonId = useId();
-    const isControlled = controlledIsOpen != null;
-    // This component has internal state that controls whether it is open or not,
-    // regardless if we are controlled or uncontrolled.
-    // If we are controlled, we use a layout effect to sync the controlled state
-    // with the internal state.
-    //
-    const [isOpen, setIsOpen] = useState(// If we are controlled, use that open state, otherwise use the uncontrolled
-    isControlled ? controlledIsOpen : defaultOpen);
-    useLayoutEffect(()=>{
-        if (isControlled) {
-            setIsOpen(controlledIsOpen);
-        }
-    }, [
-        controlledIsOpen,
-        isControlled
-    ]);
-    const handleOpenChange = ()=>{
-        const newOpenState = !isOpen;
-        if (!isControlled) {
-            setIsOpen(newOpenState);
-        }
-        // Always call the change handler, even if we're uncontrolled.
-        // Easier to add stuff such as tracking etc.
-        if (onOpenChange) {
-            onOpenChange(newOpenState);
-        }
-    };
-    return /*#__PURE__*/ jsx("div", {
+    const { className, children, defaultOpen, isOpen: controlledIsOpen, onOpenChange, defaultExpanded = false, isExpanded, onExpandedChange, ...restProps } = props;
+    const _defaultExpanded = defaultOpen ?? defaultExpanded;
+    const _isExpanded = controlledIsOpen ?? isExpanded;
+    const _onExpandedChange = onOpenChange ?? onExpandedChange;
+    return /*#__PURE__*/ jsx(Disclosure, {
         ...restProps,
         className: cx('relative px-2', className),
-        "data-open": isOpen,
+        defaultExpanded: _defaultExpanded,
+        onExpandedChange: _onExpandedChange,
+        isExpanded: _isExpanded,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
@@ -152,33 +293,22 @@ function AccordionItem(props) {
                         className: 'font-medium leading-7 -mx-2 text-base',
                         // Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
                         level: 3,
-                        _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
-                                "aria-controls": contentId,
-                                "aria-expanded": isOpen,
+                        _innerWrapper: (children)=>/*#__PURE__*/ jsx(DisclosureButton, {
                                 // Use outline with offset as focus indicator, this does not cover the left sky border on the expanded content and works with or without a background color on the accordion container
-                                className: "flex min-h-[44px] w-full cursor-pointer items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus focus-visible:outline-focus-inset",
-                                id: buttonId,
-                                onClick: handleOpenChange,
+                                className: "flex min-h-11 w-full gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus-inset!",
                                 type: "button",
-                                children: [
-                                    children,
-                                    /*#__PURE__*/ jsx(ChevronDown, {
-                                        className: cx('flex-none transition-transform duration-300 motion-reduce:transition-none', isOpen && 'rotate-180')
-                                    })
-                                ]
+                                withChevron: true,
+                                children: children
                             })
                     }
                 ],
                 [
                     ContentContext,
                     {
-                        className: // Uses pseudo element for vertical padding, since that doesn't affect the height when the accordion is closed
-                        'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
+                        className: // Uses pseudo elements for vertical padding, since that doesn't affect the height when the accordion is closed
+                        'text-sm font-light leading-6 px-3.5 data-[expanded]:after:h-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
                         role: 'region',
-                        inert: !isOpen,
-                        'aria-labelledby': buttonId,
-                        _outerWrapper: (children)=>/*#__PURE__*/ jsx("div", {
-                                className: cx('grid transition-all duration-300 after:relative after:block after:h-0 after:transition-all after:duration-300 motion-reduce:transition-none', isOpen ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr]'),
+                        _outerWrapper: (children)=>/*#__PURE__*/ jsx(DisclosurePanel, {
                                 children: children
                             })
                     }
@@ -808,11 +938,14 @@ const cardLinkVariants = cva({
     });
 };
 
-const Carousel = ({ className, children, onChange })=>{
+const Carousel = ({ className, children, onChange, ...rest })=>{
     const ref = 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(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
     useEffect(()=>{
@@ -824,9 +957,27 @@ const Carousel = ({ className, children, onChange })=>{
     // 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 (!ref.current) return;
+        if (!ref.current) {
+            return;
+        }
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+        }
+        isScrollingProgrammatically.current = true;
         ref.current.children[scrollTargetIndex]?.scrollIntoView({
             behavior: 'smooth',
             inline: 'start',
@@ -841,20 +992,76 @@ const Carousel = ({ className, children, onChange })=>{
             });
         }
         prevIndex.current = scrollTargetIndex;
+        scrollTimeoutRef.current = setTimeout(()=>{
+            isScrollingProgrammatically.current = false;
+            scrollTimeoutRef.current = null;
+            processQueue(); // Process any queued scrolls
+        }, 500);
     }, [
         scrollTargetIndex
     ]);
+    // Clean up timeout on unmount
+    useEffect(()=>{
+        return ()=>{
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+        };
+    }, []);
     const onScroll = useDebouncedCallback((event)=>{
+        // Ignore scroll events when we're programmatically scrolling
+        if (isScrollingProgrammatically.current) {
+            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();
-            return rect.left >= 0 && rect.right <= window.innerWidth && rect.top >= 0;
+            // 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) {
+        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;
+        }
+    }, 150);
+    const handlePrevious = ()=>{
+        const targetIndex = scrollTargetIndex - 1;
+        if (targetIndex < 0) return;
+        if (isScrollingProgrammatically.current) {
+            // If we're already scrolling, queue this action
+            scrollQueue.current = [
+                targetIndex
+            ];
+        } else {
+            setScrollTargetIndex(targetIndex);
+        }
+    };
+    const handleNext = ()=>{
+        if (!ref.current) return;
+        const targetIndex = scrollTargetIndex + 1;
+        if (targetIndex >= ref.current.children.length) return;
+        if (isScrollingProgrammatically.current) {
+            // If we're already scrolling, queue this action
+            scrollQueue.current = [
+                targetIndex
+            ];
+        } else {
+            setScrollTargetIndex(targetIndex);
         }
-    }, 100);
+    };
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "carousel",
         children: /*#__PURE__*/ jsx(Provider, {
@@ -873,29 +1080,19 @@ const Carousel = ({ className, children, onChange })=>{
                             [DEFAULT_SLOT]: {},
                             prev: {
                                 'aria-label': previous[locale],
-                                onPress: ()=>{
-                                    if (scrollTargetIndex > 0) {
-                                        setScrollTargetIndex((prev)=>prev - 1);
-                                    }
-                                },
-                                isDisabled: hasReachedScrollStart
+                                onPress: handlePrevious
                             },
                             next: {
                                 isIconOnly: true,
                                 'aria-label': next[locale],
-                                onPress: ()=>{
-                                    if (!ref.current) return;
-                                    if (scrollTargetIndex < ref.current.children.length - 1) {
-                                        setScrollTargetIndex((prev)=>prev + 1);
-                                    }
-                                },
-                                isDisabled: hasReachedScrollEnd
+                                onPress: handleNext
                             }
                         }
                     }
                 ]
             ],
             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'),
@@ -942,8 +1139,17 @@ const Carousel = ({ className, children, onChange })=>{
 const CarouselItemsContext = /*#__PURE__*/ createContext({
     ref: null
 });
-const CarouselItems = ({ className, children })=>/*#__PURE__*/ jsx(CarouselItemsContext.Consumer, {
-        children: ({ ref, onScroll })=>/*#__PURE__*/ jsx("div", {
+const CarouselItems = ({ className, children })=>{
+    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 /*#__PURE__*/ jsx(CarouselItemsContext.Consumer, {
+        children: ({ ref, onScroll })=>// 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',
@@ -955,14 +1161,12 @@ const CarouselItems = ({ className, children })=>/*#__PURE__*/ jsx(CarouselItems
                     'rounded-[inherit]'
                 ]),
                 ref: ref,
-                // When the SnapEvent is supported: https://developer.mozilla.org/en-US/docs/Web/API/SnapEvent
-                // We can use the scrollsnapchange event to detect when the user has scrolled to a new item.
-                // We can then use Array.from(event.target.children).indexOf(event.snapTargetInline) to calculate the index of the item that is currently in view.
-                // Another option is to use the scrollEnd event, when Safiri supports it: https://developer.apple.com/documentation/webkitjs/snap_event/scrollend_event
                 onScroll: onScroll,
+                onKeyDown: handleKeyDown,
                 children: children
             })
     });
+};
 const CarouselItem = ({ className, children, id })=>{
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'shrink-0 basis-full snap-start'),
@@ -974,7 +1178,7 @@ const CarouselItem = ({ className, children, id })=>{
                     MediaContext,
                     {
                         fit: 'cover',
-                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:h-full *:w-full', 'aspect-1/1 max-sm:data-[fit="contain"]:*:object-cover sm:aspect-4/3 md:aspect-3/2 lg:aspect-2/1')
+                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:h-full *:w-full', 'aspect-square max-sm:data-[fit="contain"]:*:object-cover sm:aspect-4/3 md:aspect-3/2 lg:aspect-2/1')
                     }
                 ]
             ],
@@ -1278,167 +1482,6 @@ function Combobox(props) {
     return render ? render(formatted) : formatted;
 };
 
-const disclosureButtonVariants = cva({
-    base: [
-        'inline-flex cursor-pointer items-center justify-between rounded-lg focus-visible:outline-current focus-visible:outline-focus',
-        // Ensure a minimum click area of 44x44px, while making it look like it only has the size of the content
-        '-m-2.5 p-2.5 focus-visible:outline-offset-[-0.625rem]'
-    ],
-    variants: {
-        withChevron: {
-            true: '[&[aria-expanded="true"]_svg]:rotate-180',
-            false: null
-        },
-        /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
-            true: '[&>svg]:h-7 [&>svg]:w-7',
-            false: 'gap-2.5'
-        }
-    },
-    defaultVariants: {
-        withChevron: false,
-        isIconOnly: false
-    }
-});
-const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
-    const [props, ref] = useContextProps(restProps, _ref, ButtonContext$1);
-    return /*#__PURE__*/ jsxs(Button$1, {
-        ...props,
-        ref: ref,
-        className: disclosureButtonVariants({
-            className,
-            withChevron,
-            isIconOnly
-        }),
-        slot: "trigger",
-        children: [
-            children,
-            withChevron && /*#__PURE__*/ jsx(ChevronDown, {
-                className: "flex-none transition-transform duration-300 motion-reduce:transition-none"
-            })
-        ]
-    });
-};
-const DisclosureStateContext = /*#__PURE__*/ createContext(null);
-const Disclosure = ({ ref: _ref, children, ..._props })=>{
-    const [props, ref] = useContextProps(_props, _ref, DisclosureContext);
-    const groupState = useContext(DisclosureGroupStateContext);
-    let { id, ...otherProps } = props;
-    const defaultId = useId();
-    id ||= defaultId;
-    const isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
-    const state = useDisclosureState({
-        ...props,
-        isExpanded,
-        onExpandedChange (isExpanded) {
-            if (groupState) {
-                groupState.toggleKey(id);
-            }
-            props.onExpandedChange?.(isExpanded);
-        }
-    });
-    const isDisabled = props.isDisabled || groupState?.isDisabled || false;
-    const domProps = filterDOMProps(otherProps);
-    const { isFocusVisible: isFocusVisibleWithin } = useFocusRing({
-        within: true
-    });
-    const panelRef = useRef(null);
-    const { buttonProps, panelProps } = useDisclosure({
-        ...props,
-        isExpanded,
-        isDisabled
-    }, state, panelRef);
-    const { role: _, ...propsWithoutRole } = panelProps;
-    return /*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                DisclosureContext,
-                state
-            ],
-            [
-                ButtonContext$1,
-                {
-                    slots: {
-                        [DEFAULT_SLOT]: {},
-                        trigger: buttonProps
-                    }
-                }
-            ],
-            [
-                DisclosurePanelContext,
-                {
-                    ...propsWithoutRole,
-                    panelRef
-                }
-            ],
-            [
-                DisclosureStateContext,
-                state
-            ]
-        ],
-        children: /*#__PURE__*/ jsx("div", {
-            ...domProps,
-            className: otherProps.className,
-            ref: ref,
-            "data-focus-visible-within": isFocusVisibleWithin || undefined,
-            "data-expanded": state.isExpanded || undefined,
-            "data-disabled": isDisabled || undefined,
-            children: typeof children === 'function' ? children({
-                isExpanded: state.isExpanded,
-                isFocusVisibleWithin,
-                isDisabled,
-                state,
-                defaultChildren: null
-            }) : children
-        })
-    });
-};
-const DisclosurePanelContext = /*#__PURE__*/ createContext({});
-const DisclosurePanel = ({ ref, children, ...props })=>{
-    const disclosureContext = useContext(DisclosureContext);
-    const { panelProps, panelRef } = useContext(DisclosurePanelContext);
-    const { role: _role = 'group', className, ...restProps } = props;
-    const ariaLabelledby = props['aria-labelledby'] ?? restProps['aria-labelledby'];
-    const isWithoutRole = _role === 'none';
-    const role = isWithoutRole ? undefined : _role;
-    const { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = useFocusRing({
-        within: true
-    });
-    const domProps = filterDOMProps(props);
-    return /*#__PURE__*/ jsx("div", {
-        className: cx('grid transition-all duration-300 motion-reduce:transition-none', disclosureContext?.isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'),
-        children: /*#__PURE__*/ jsx("div", {
-            className: "overflow-hidden",
-            children: /*#__PURE__*/ jsx("div", {
-                ref: mergeRefs(ref, panelRef),
-                ...mergeProps(panelProps, focusWithinProps),
-                ...restProps,
-                ...domProps,
-                "data-focus-visible-within": isFocusVisibleWithin || undefined,
-                className: cx(className, '[content-visibility:visible]'),
-                role: role,
-                "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby,
-                children: /*#__PURE__*/ jsx(Provider, {
-                    values: [
-                        // Reset the context to avoid passing the same context to children, in case of nested Disclosures
-                        [
-                            DisclosureContext,
-                            null
-                        ],
-                        [
-                            ButtonContext$1,
-                            null
-                        ]
-                    ],
-                    children: children
-                })
-            })
-        })
-    });
-};
-
 /**
  * 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)=>{
@@ -1792,7 +1835,7 @@ const variants = cva({
         variant: 'standard'
     }
 });
-const Hero = ({ variant, className, children })=>{
+const Hero = ({ variant, className, children, ...rest })=>{
     const variantsClassName = variants({
         variant,
         className
@@ -1820,6 +1863,7 @@ const Hero = ({ variant, className, children })=>{
         ],
         children: /*#__PURE__*/ jsx("div", {
             className: cx(variantsClassName, className),
+            ...rest,
             children: children
         })
     });
@@ -1918,8 +1962,7 @@ const Dialog = ({ className, children, ...restProps })=>{
                                                 children: [
                                                     children,
                                                     /*#__PURE__*/ jsx(Button, {
-                                                        slot: "close" // RAC Dialog suppors one close button out of the box, so we utilize that here. For other close buttons we use ButtonContext
-                                                        ,
+                                                        slot: "close",
                                                         variant: "tertiary",
                                                         className: "!px-2.5 data-focus-visible:outline-focus-inset",
                                                         "aria-label": translations$1.close[locale],
@@ -2707,4 +2750,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, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, 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, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _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, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, 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, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, 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, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };