@obosbbl/grunnmuren-react 2.0.0-canary.9 → 2.0.1

package/dist/index.mjs

@@ -1,31 +1,392 @@
-import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem, ComboBox, Group, Input, Button, Popover, ListBox, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1 } from 'react-aria-components';
-export { Form, I18nProvider } from 'react-aria-components';
-export { _ as Button } from './Button-client-wuoyidfi.js';
+'use client';
+import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, 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, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, ButtonContext, DisclosureContext, DisclosureGroupStateContext, DEFAULT_SLOT, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, DialogTrigger as DialogTrigger$1, Modal as Modal$1, Dialog as Dialog$1, ModalOverlay as ModalOverlay$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1 } from 'react-aria-components';
+export { Form, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useId } from 'react';
+import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay, Trash, User } from '@obosbbl/grunnmuren-icons-react';
+import { useLayoutEffect, filterDOMProps, mergeRefs, mergeProps, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
 import { cx, cva, compose } from 'cva';
-import { Check, LoadingSpinner, ChevronDown } from '@obosbbl/grunnmuren-icons-react';
+import { createContext, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { useProgressBar, useDateFormatter, useFocusRing, useDisclosure, useField } from 'react-aria';
+import { useDisclosureState } from 'react-stately';
+import { useFormValidation } from '@react-aria/form';
+import { useFormValidationState } from '@react-stately/form';
+import { useControlledState } from '@react-stately/utils';
+import { PressResponder } from '@react-aria/interactions';
+
+function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
+    return /*#__PURE__*/ jsx(I18nProvider, {
+        locale: locale,
+        children: navigate ? /*#__PURE__*/ jsx(RouterProvider, {
+            navigate: navigate,
+            useHref: useHref,
+            children: children
+        }) : children
+    });
+}
+
+/**
+ * Returns the locale set in `<GrunnmurenProvider />`
+ */ function _useLocale() {
+    // a small wrapper around react-arias useLocale with a simpler return type with only the locales that we actually support
+    const locale = useLocale();
+    return locale.locale;
+}
+
+const HeadingContext = /*#__PURE__*/ createContext({});
+const Heading = ({ ref = null, ...props })=>{
+    [props, ref] = useContextProps(props, ref, HeadingContext);
+    const { children, level, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
+    const Element = `h${level}`;
+    const content = /*#__PURE__*/ jsx(Element, {
+        ...restProps,
+        className: className,
+        "data-slot": "heading",
+        children: innerWrapper ? innerWrapper(children) : children
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const ContentContext = /*#__PURE__*/ createContext({});
+const Content = ({ ref = null, ...props })=>{
+    [props, ref] = useContextProps(props, ref, ContentContext);
+    const { _outerWrapper: outerWrapper, ...restProps } = props;
+    const content = /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "content"
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const Media = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "media"
+    });
+const Caption = ({ className, ...restProps })=>/*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx('description', className),
+        "data-slot": "caption"
+    });
+const Footer = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "footer"
+    });
+
+function Accordion(props) {
+    const { children, className, ...restProps } = props;
+    const childCount = Children.count(children);
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx('rounded-lg bg-white', className),
+        children: Children.map(children, (child, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    child,
+                    index < childCount - 1 && // Margin is added to enable support for containers with a background color
+                    /*#__PURE__*/ jsx("hr", {
+                        className: "mx-2 border-gray-light",
+                        "aria-hidden": true
+                    })
+                ]
+            }))
+    });
+}
+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", {
+        ...restProps,
+        className: cx('relative px-2', className),
+        "data-open": isOpen,
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    HeadingContext,
+                    {
+                        // Negative margin to strech the button to the entire with of the accordion (to support containers with a background color)
+                        className: 'font-semibold 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,
+                                // Use outline with offset as focus indicator, this does not cover the left mint 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,
+                                type: "button",
+                                children: [
+                                    children,
+                                    /*#__PURE__*/ jsx(ChevronDown, {
+                                        className: cx('flex-none transition-transform duration-300 motion-reduce:transition-none', isOpen && 'rotate-180')
+                                    })
+                                ]
+                            })
+                    }
+                ],
+                [
+                    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-mint 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]'),
+                                children: children
+                            })
+                    }
+                ]
+            ],
+            children: children
+        })
+    });
+}
+
+const badgeVariants = cva({
+    base: [
+        'inline-flex w-fit items-center justify-center gap-1.5 rounded-lg [&_svg]:shrink-0'
+    ],
+    variants: {
+        color: {
+            'gray-dark': 'bg-gray-dark text-white',
+            mint: 'bg-mint',
+            sky: 'bg-sky',
+            white: 'bg-white',
+            'blue-dark': 'bg-blue-dark text-white',
+            'green-dark': 'bg-green-dark text-white'
+        },
+        size: {
+            small: 'description px-2 py-0.5 [&_svg]:h-4 [&_svg]:w-4',
+            medium: 'description px-2.5 py-1.5 [&_svg]:h-4 [&_svg]:w-4',
+            large: 'paragraph px-3 py-2 [&_svg]:h-5 [&_svg]:w-5'
+        }
+    },
+    defaultVariants: {
+        size: 'medium'
+    }
+});
+function Badge(props) {
+    const { className: _className, color, size, ...restProps } = props;
+    const className = badgeVariants({
+        className: _className,
+        color,
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        ...restProps,
+        "data-slot": "badge"
+    });
+}
+
+const translations$1 = {
+    close: {
+        nb: 'Lukk',
+        sv: 'Stäng',
+        en: 'Close'
+    },
+    pending: {
+        nb: 'venter',
+        sv: 'väntar',
+        en: 'pending'
+    },
+    showMore: {
+        nb: 'Les mer',
+        sv: 'Läs mer',
+        en: 'Read more'
+    },
+    showLess: {
+        nb: 'Vis mindre',
+        sv: 'Dölj',
+        en: 'Show less'
+    }
+};
+
+/**
+ * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
+ */ const buttonVariants = 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: {
+            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: 'no-underline shadow-[inset_0_0_0_2px]',
+            tertiary: 'underline hover:no-underline'
+        },
+        /**
+     * Adjusts the color of the button for usage on different backgrounds.
+     * @default green
+     */ color: {
+            green: '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: {
+            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',
+            false: null
+        }
+    },
+    compoundVariants: [
+        {
+            color: 'green',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352] [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'green',
+            variant: 'secondary',
+            className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'green',
+            variant: 'tertiary',
+            className: '[&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'secondary',
+            className: 'text-mint shadow-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'mint',
+            variant: 'tertiary',
+            className: 'text-mint [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'white',
+            variant: 'primary',
+            className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'white',
+            variant: 'secondary',
+            className: 'text-white shadow-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'white',
+            variant: 'tertiary',
+            className: 'text-white [&_[role="progressbar"]]:text-white'
+        }
+    ],
+    defaultVariants: {
+        variant: 'primary',
+        color: 'green',
+        isIconOnly: false,
+        isPending: false
+    }
+});
+function isLinkProps$1(props) {
+    return !!props.href;
+}
+function Button(props) {
+    const { children: _children, color, isIconOnly, isLoading, variant, isPending: _isPending, ref, ...restProps } = props;
+    const isPending = _isPending || isLoading;
+    const className = buttonVariants({
+        className: props.className,
+        color,
+        isIconOnly,
+        variant,
+        isPending
+    });
+    const locale = _useLocale();
+    const { progressBarProps } = useProgressBar({
+        isIndeterminate: true,
+        'aria-label': translations$1.pending[locale]
+    });
+    const children = isPending ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            _children,
+            /*#__PURE__*/ jsx(LoadingSpinner, {
+                className: "absolute m-auto motion-safe:animate-spin",
+                ...progressBarProps
+            })
+        ]
+    }) : _children;
+    return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
+        ...restProps,
+        className: className,
+        ref: ref,
+        children: children
+    }) : /*#__PURE__*/ jsx(Button$1, {
+        ...restProps,
+        className: className,
+        isPending: isPending,
+        ref: ref,
+        children: children
+    });
+}
 
 const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
+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: [
-        'rounded-md px-3 py-2.5 text-sm font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
+        // 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-2 group-data-[invalid]:ring-red',
+        '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-2 group-data-[invalid]:focus:ring',
-            visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
+            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: '',
-            //
-            true: 'flex-1 !ring-0 first:pl-0 last:pr-0'
+            false: 'px-3',
+            true: '!ring-0 flex-1'
         }
     },
     defaultVariants: {
@@ -33,11 +394,15 @@ const input = cva({
         isGrouped: false
     }
 });
-const inputGroup = cx('inline-flex items-center overflow-hidden rounded-md px-3 ring-1 ring-black focus-within:ring-2 group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring');
+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('min-w-[--trigger-width] overflow-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
-    listbox: cx('text-sm outline-none'),
-    chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
+    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-[25rem] 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) {
@@ -50,17 +415,8 @@ function ErrorMessage(props) {
     });
 }
 
-function Description(props) {
-    const { className, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Text, {
-        ...restProps,
-        className: cx(className, 'text-sm font-light leading-6'),
-        slot: "description"
-    });
-}
-
 const defaultClasses$1 = cx([
-    'group relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7'
+    'group -mx-2.5 relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
 ]);
 // Pulling this out into it's own component. Will probably export it in the future
 // so it can be used in other views, outside of an input of type checkbox, like in table rows.
@@ -74,26 +430,26 @@ function CheckmarkBox() {
             // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
             'mt-[calc((1em_*_1.75_-_24px)_/_2)] h-[24px] w-[24px]',
             // selected
-            'group-data-[selected]:!border-green group-data-[selected]:!bg-green',
+            'group-data-selected:!border-green group-data-selected:!bg-green',
             // focus
-            'group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-black group-data-[focus-visible]:ring-offset-[9px]',
+            'group-data-focus-visible:outline-focus-offset',
             // hovered
-            'group-data-[hovered]:border-green group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:bg-green-lightest group-data-[hovered]:group-data-[invalid]:bg-red-light',
+            'group-data-hovered:group-data-invalid:border-red group-data-hovered:group-data-invalid:bg-red-light group-data-hovered:border-green group-data-hovered:bg-green-lightest',
             // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
             // so we use an inner shadow of 1 px instead to pad the actual border
-            'group-data-[invalid]:border-red group-data-[invalid]:group-data-[selected]:shadow-none group-data-[invalid]:shadow-[inset_0_0_0_1px] group-data-[invalid]:shadow-red'
+            'group-data-invalid:group-data-selected:shadow-none group-data-invalid:border-red group-data-invalid:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
         ]),
         children: /*#__PURE__*/ jsx(Check, {
-            className: "h-full w-full opacity-0 group-data-[selected]:opacity-100"
+            className: "h-full w-full opacity-0 group-data-selected:opacity-100"
         })
     });
 }
-function Checkbox(props, ref) {
+function Checkbox(props) {
     const { children, className, description, errorMessage, isInvalid: _isInvalid, ...restProps } = props;
     const id = useId();
-    const descriptionId = 'desc' + id;
-    const errorMessageId = 'error' + id;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const descriptionId = `desc${id}`;
+    const errorMessageId = `error${id}`;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
             value: {
@@ -105,18 +461,16 @@ function Checkbox(props, ref) {
                     ...restProps,
                     className: cx(className, defaultClasses$1),
                     isInvalid: isInvalid,
-                    ref: ref,
                     children: [
-                        /*#__PURE__*/ jsx("span", {
-                            className: "absolute -left-2.5 top-0 z-10 h-11 w-11"
-                        }),
                         /*#__PURE__*/ jsx(CheckmarkBox, {}),
                         children
                     ]
                 }),
-                description && /*#__PURE__*/ jsx(Description, {
-                    className: "block",
+                description && // {/* Use a div instead of the Description component to avoid infinite re-render loops in React until this bug in RAC is fixed: https://github.com/adobe/react-spectrum/issues/6229 */}
+                /*#__PURE__*/ jsx("div", {
                     id: descriptionId,
+                    slot: "description",
+                    className: "description block",
                     children: description
                 }),
                 errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
@@ -128,7 +482,26 @@ function Checkbox(props, ref) {
         })
     });
 }
-const _Checkbox = /*#__PURE__*/ forwardRef(Checkbox);
+
+function Description(props) {
+    const { className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, 'description'),
+        slot: "description"
+    });
+}
+
+/**
+ * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
+ * In other words, this handles controlled and uncontrolled form errors.
+ */ function ErrorMessageOrFieldError({ errorMessage }) {
+    return errorMessage ? /*#__PURE__*/ jsx(ErrorMessage, {
+        children: errorMessage
+    }) : /*#__PURE__*/ jsx(FieldError, {
+        className: formFieldError
+    });
+}
 
 function Label(props) {
     const { children, className, ...restProps } = props;
@@ -139,15 +512,16 @@ function Label(props) {
     });
 }
 
-function CheckboxGroup(props, ref) {
+function CheckboxGroup(props) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
         isInvalid: isInvalid,
         isRequired: isRequired,
-        ref: ref,
         children: [
             label && /*#__PURE__*/ jsx(Label, {
                 children: label
@@ -156,28 +530,66 @@ function CheckboxGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
 }
-const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
 
+const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
+        ...restProps,
+        className: cx(dropdown.listbox, className)
+    });
+const ListBoxItem = (props)=>{
+    let textValue = props.textValue;
+    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
+    // Since we use a render function (to handle the selected state) the child is never a string.
+    // This condition adds back that behaviour
+    if (textValue == null && typeof props.children === 'string') {
+        textValue = props.children;
+    }
+    return /*#__PURE__*/ jsx(ListBoxItem$1, {
+        ...props,
+        className: cx(props.className, 'flex cursor-pointer px-6 py-3 leading-6 outline-none data-focused:bg-sky-lightest'),
+        textValue: textValue,
+        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    isSelected && /*#__PURE__*/ jsx(Check, {
+                        className: "-ml-6 text-base"
+                    }),
+                    props.children
+                ]
+            })
+    });
+};
 /**
- * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
- * In other words, this handles controlled and uncontrolled form errors.
- */ function ErrorMessageOrFieldError({ errorMessage }) {
-    return errorMessage ? /*#__PURE__*/ jsx(ErrorMessage, {
-        children: errorMessage
-    }) : /*#__PURE__*/ jsx(FieldError, {
-        className: formFieldError
+ * This component can be used to group items in a listbox
+ */ const ListBoxSection = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBoxSection$1, {
+        ...restProps,
+        // The :not(:first-child) selector adds extra spacing to all the options, but not the section (group) headings
+        // This way we get the desired extra indent on all options within a group
+        className: cx(className, 'pb-1 [&>:not(:first-child)]:pl-10')
+    });
+/**
+ * This component can be used to label grouped items in a `ListBoxSection` with a heading
+ */ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header, {
+        ...props,
+        className: cx(props.className, 'mx-6 cursor-default py-2 font-medium text-blue-dark leading-6')
+    });
+
+function InputAddonDivider() {
+    return /*#__PURE__*/ jsx("span", {
+        className: "block h-6 w-px flex-none bg-black"
     });
 }
 
-function Combobox(props, ref) {
-    const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+function Combobox(props) {
+    const { className, children, description, errorMessage, isLoading, isPending: _isPending, label, isInvalid: _isInvalid, ref, ...restProps } = props;
+    const isPending = _isPending || isLoading;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(ComboBox, {
         ...restProps,
         className: cx(className, formField),
@@ -198,8 +610,8 @@ function Combobox(props, ref) {
                         }),
                         ref: ref
                     }),
-                    /*#__PURE__*/ jsx(Button, {
-                        children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
+                    /*#__PURE__*/ jsx(Button$1, {
+                        children: isPending ? /*#__PURE__*/ jsx(LoadingSpinner, {
                             className: "animate-spin"
                         }) : /*#__PURE__*/ jsx(ChevronDown, {
                             className: dropdown.chevronIcon
@@ -225,39 +637,17 @@ function Combobox(props, ref) {
         ]
     });
 }
-const ComboboxItem = (props)=>{
-    let textValue = props.textValue;
-    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
-    // Since we use a render function (to handle the selected state) the child is never a string.
-    // This condition adds back that behaviour
-    if (textValue == null && typeof props.children === 'string') {
-        textValue = props.children;
-    }
-    return /*#__PURE__*/ jsx(ListBoxItem, {
-        ...props,
-        className: cx(props.className, 'flex cursor-default px-6 py-2 leading-6 outline-none data-[focused]:bg-sky-lightest'),
-        textValue: textValue,
-        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    isSelected && /*#__PURE__*/ jsx(Check, {
-                        className: "-ml-6 text-base"
-                    }),
-                    props.children
-                ]
-            })
-    });
-};
-const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
 
-function RadioGroup(props, ref) {
+function RadioGroup(props) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(RadioGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
         isInvalid: isInvalid,
         isRequired: isRequired,
-        ref: ref,
         children: [
             label && /*#__PURE__*/ jsx(Label, {
                 children: label
@@ -266,16 +656,15 @@ function RadioGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
 }
-const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
 
 const defaultClasses = cx([
-    'relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7',
+    '-ml-2.5 relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
     // the radio button itself
     'before:flex-none before:rounded-full before:border-2 before:border-black',
     // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
@@ -284,42 +673,37 @@ const defaultClasses = cx([
     // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
     'before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]',
     // selected
-    'data-[selected]:before:border-black data-[selected]:before:bg-green data-[selected]:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
+    'data-selected:before:border-black data-selected:before:bg-green data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
     // hover
-    'data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light',
+    'data-hovered:data-invalid:before:bg-red-light data-hovered:before:border-green data-hovered:before:bg-green-lightest',
     // focus
-    'data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]',
+    'data-focus-visible:before:ring-focus-offset',
     // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
     // so we use an inner outline to artifically pad the border
-    'data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red'
+    'data-invalid:data-selected:before:!bg-red data-invalid:before:border-red data-invalid:before:outline data-invalid:before:outline-[3px] data-invalid:before:outline-red data-invalid:before:outline-solid data-invalid:before:outline-offset-[-3px]'
 ]);
-function Radio(props, ref) {
+function Radio(props) {
     const { children, className, description, ...restProps } = props;
-    return /*#__PURE__*/ jsxs(Radio$1, {
+    return /*#__PURE__*/ jsx(Radio$1, {
         ...restProps,
         className: cx(className, defaultClasses),
-        ref: ref,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                className: "absolute -left-2.5 top-0 z-10 h-11 w-11 "
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                children: [
-                    children,
-                    description && /*#__PURE__*/ jsx(Description, {
-                        className: "mt-2 block",
-                        children: description
-                    })
-                ]
-            })
-        ]
+        children: /*#__PURE__*/ jsxs("div", {
+            children: [
+                children,
+                description && /*#__PURE__*/ jsx(Description, {
+                    className: "mt-2 block",
+                    children: description
+                })
+            ]
+        })
     });
 }
-const _Radio = /*#__PURE__*/ forwardRef(Radio);
 
-function Select(props, ref) {
-    const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+function Select(props) {
+    const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ref, ...restProps } = props;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(Select$1, {
         ...restProps,
         className: cx(className, formField),
@@ -331,7 +715,7 @@ function Select(props, ref) {
             description && /*#__PURE__*/ jsx(Description, {
                 children: description
             }),
-            /*#__PURE__*/ jsxs(Button, {
+            /*#__PURE__*/ jsxs(Button$1, {
                 className: cx(input({
                     focusModifier: 'visible'
                 }), // How to reuse placeholder text?
@@ -360,33 +744,10 @@ function Select(props, ref) {
         ]
     });
 }
-const SelectItem = (props)=>{
-    let textValue = props.textValue;
-    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
-    // Since we use a render function (to handle the selected state) the child is never a string.
-    // This condition adds back that behaviour
-    if (textValue == null && typeof props.children === 'string') {
-        textValue = props.children;
-    }
-    return /*#__PURE__*/ jsx(ListBoxItem, {
-        ...props,
-        className: cx(props.className, 'flex cursor-default px-6 py-2 leading-6 outline-none data-[focused]:bg-sky-lightest'),
-        textValue: textValue,
-        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    isSelected && /*#__PURE__*/ jsx(Check, {
-                        className: "-ml-6 text-base"
-                    }),
-                    props.children
-                ]
-            })
-    });
-};
-const _Select = /*#__PURE__*/ forwardRef(Select);
 
-function TextArea(props, ref) {
-    const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+function TextArea(props) {
+    const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ref, ...restProps } = props;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -409,20 +770,25 @@ function TextArea(props, ref) {
         ]
     });
 }
-const _TextArea = /*#__PURE__*/ forwardRef(TextArea);
 
-const inputWithAlignment$1 = compose(input, cva({
+const inputVariants$1 = compose(input, cva({
     base: '',
     variants: {
         textAlign: {
             right: 'text-right',
             left: ''
+        },
+        autoWidth: {
+            true: 'max-w-fit',
+            false: ''
         }
     }
 }));
-function TextField(props, ref) {
-    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+function TextField(props) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ref, ...restProps } = props;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -435,29 +801,31 @@ function TextField(props, ref) {
                 children: description
             }),
             leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
-                className: inputGroup,
+                className: cx(inputGroup, {
+                    'w-fit': !!size
+                }),
                 children: [
                     leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider$1, {
-                        className: "ml-3"
-                    }),
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
-                        className: inputWithAlignment$1({
+                        className: inputVariants$1({
                             textAlign,
-                            isGrouped: true
+                            isGrouped: true,
+                            autoWidth: !!size
                         }),
-                        ref: ref
-                    }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider$1, {
-                        className: "mr-3"
+                        ref: ref,
+                        size: size
                     }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
-                className: inputWithAlignment$1({
-                    textAlign
+                className: inputVariants$1({
+                    textAlign,
+                    autoWidth: !!size
                 }),
-                ref: ref
+                ref: ref,
+                size: size
             }),
             /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
                 errorMessage: errorMessage
@@ -465,26 +833,26 @@ function TextField(props, ref) {
         ]
     });
 }
-function Divider$1({ className }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: cx(className, 'block h-6 w-px flex-none bg-black')
-    });
-}
-const _TextField = /*#__PURE__*/ forwardRef(TextField);
 
 // This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
-const inputWithAlignment = compose(input, cva({
+const inputVariants = compose(input, cva({
     base: '',
     variants: {
         textAlign: {
             right: 'text-right',
             left: ''
+        },
+        autoWidth: {
+            true: 'max-w-fit',
+            false: ''
         }
     }
 }));
-function NumberField(props, ref) {
-    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+function NumberField(props) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ref, ...restProps } = props;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(NumberField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -497,29 +865,31 @@ function NumberField(props, ref) {
                 children: description
             }),
             leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
-                className: inputGroup,
+                className: cx(inputGroup, {
+                    'w-fit': !!size
+                }),
                 children: [
                     leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "ml-3"
-                    }),
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
-                        className: inputWithAlignment({
+                        className: inputVariants({
                             textAlign,
-                            isGrouped: true
+                            isGrouped: true,
+                            autoWidth: !!size
                         }),
-                        ref: ref
-                    }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "mr-3"
+                        ref: ref,
+                        size: size
                     }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
-                className: inputWithAlignment({
-                    textAlign
+                className: inputVariants({
+                    textAlign,
+                    autoWidth: !!size
                 }),
-                ref: ref
+                ref: ref,
+                size: size
             }),
             /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
                 errorMessage: errorMessage
@@ -527,11 +897,1049 @@ function NumberField(props, ref) {
         ]
     });
 }
-function Divider({ className }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: cx(className, 'block h-6 w-px flex-none bg-black')
+
+const iconMap = {
+    info: InfoCircle,
+    success: CheckCircle,
+    warning: Warning,
+    danger: Error
+};
+const alertVariants = cva({
+    base: [
+        'grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md border-2 px-3 py-2',
+        // Heading styles:
+        '[&_[data-slot="heading"]]:font-medium [&_[data-slot="heading"]]:text-base [&_[data-slot="heading"]]:leading-7',
+        // Content styles:
+        '[&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full [&_[data-slot="content"]]:text-sm [&_[data-slot="content"]]:leading-6',
+        // Footer styles:
+        '[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:font-light [&_[data-slot="footer"]]:text-xs [&_[data-slot="footer"]]:leading-6'
+    ],
+    variants: {
+        /**
+     * The variant of the alert
+     * @default info
+     */ variant: {
+            info: 'border-[#1A7FA7] bg-sky-light',
+            success: 'border-[#0F9B6E] bg-mint-light',
+            warning: 'border-[#C57C13] bg-[#FFF2DE]',
+            danger: 'border-[#C0385D] bg-red-light'
+        }
+    },
+    defaultVariants: {
+        variant: 'info'
+    }
+});
+const Alertbox = ({ children, role, className, icon, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
+    const Icon = icon ?? iconMap[variant];
+    const locale = _useLocale();
+    const id = useId();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const isCollapsed = isExpandable && !isExpanded;
+    const [isUncontrolledVisible, setIsUncontrolledVisible] = useState(true);
+    const isVisible = isDismissed !== undefined ? !isDismissed : isUncontrolledVisible;
+    if (!isVisible) return;
+    const close = ()=>{
+        setIsUncontrolledVisible(false);
+        if (onDismiss) onDismiss();
+    };
+    const isInDevMode = process.env.NODE_ENV !== 'production';
+    if (isInDevMode && onDismiss && !isDismissable) {
+        console.warn('Passing an `onDismiss` callback without setting the `isDismissable` prop to `true` will not have any effect.');
+    }
+    if (isInDevMode && !children) {
+        console.error('`No children was passed to the <AlertBox/>` component.');
+        return;
+    }
+    const [firstChild, ...restChildren] = Children.toArray(children);
+    return /*#__PURE__*/ jsxs("div", {
+        className: alertVariants({
+            className,
+            variant
+        }),
+        // The role prop is required to force consumers to consider and choose the appropriate alertbox role.
+        // role="none" will not have any effect on a div, so it can be omitted.
+        role: role === 'none' ? undefined : role,
+        children: [
+            /*#__PURE__*/ jsx(Icon, {}),
+            firstChild,
+            isDismissable && /*#__PURE__*/ jsx("button", {
+                className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:-outline-offset-8 cursor-pointer focus-visible:outline-focus'),
+                onClick: close,
+                "aria-label": translations$1.close[locale],
+                type: "button",
+                children: /*#__PURE__*/ jsx(Close, {})
+            }),
+            isExpandable && /*#__PURE__*/ jsxs("button", {
+                className: cx('-my-3 relative col-span-full row-start-2 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
+                'outline-none after:absolute after:right-0 after:bottom-3 after:left-0 after:h-0', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
+                onClick: ()=>setIsExpanded((prevState)=>!prevState),
+                "aria-expanded": isExpanded,
+                "aria-controls": id,
+                type: "button",
+                children: [
+                    isExpanded ? translations$1.showLess[locale] : translations$1.showMore[locale],
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: cx('transition-transform duration-150 motion-reduce:transition-none', isExpanded && 'rotate-180')
+                    })
+                ]
+            }),
+            restChildren?.length > 0 && /*#__PURE__*/ jsx("div", {
+                className: cx('col-span-full grid gap-y-4', isCollapsed && '[&>*:not([data-slot="footer"])]:hidden'),
+                id: id,
+                children: restChildren
+            })
+        ]
+    });
+};
+
+function Breadcrumbs(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Breadcrumbs$1, {
+        ...restProps,
+        className: cx(className, 'flex flex-wrap text-sm leading-6'),
+        children: children
+    });
+}
+
+function Breadcrumb(props) {
+    const { className, children, href, ...restProps } = props;
+    return /*#__PURE__*/ jsxs(Breadcrumb$1, {
+        className: cx(className, 'group flex items-center'),
+        ...restProps,
+        children: [
+            href ? /*#__PURE__*/ jsx(Link, {
+                href: href,
+                // use outline instead of ring-3 for focus marker that can be offset without creating a white background between the focus marker and the element content
+                className: "rounded-xs focus-visible:outline-focus group-last:no-underline",
+                children: children
+            }) : children,
+            /*#__PURE__*/ jsx(ChevronRight, {
+                className: "px-1 group-last:hidden"
+            })
+        ]
+    });
+}
+
+function isLinkProps(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 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 shrink-0 transition-transform duration-300')
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: /*#__PURE__*/ jsx("span", {
+                    className: cx('border-transparent border-t-[1px] border-b-[1px] transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
+                    children: children
+                })
+            })
+        ]
+    });
+    if (isLinkProps(props)) {
+        return /*#__PURE__*/ jsx(Link, {
+            ...restProps,
+            className: _className,
+            style: style,
+            ref: ref,
+            children: content
+        });
+    }
+    return /*#__PURE__*/ jsx(Button$1, {
+        ...restProps,
+        className: _className,
+        style: style,
+        ref: ref,
+        children: content
+    });
+}
+
+const cardVariants = cva({
+    base: [
+        'group/card',
+        'rounded-2xl border p-3',
+        'flex gap-y-4',
+        'relative',
+        // **** Heading ****
+        '[&_[data-slot="heading"]]:inline',
+        '[&_[data-slot="heading"]]:heading-s',
+        '[&_[data-slot="heading"]]:leading-6',
+        '[&_[data-slot="heading"]]:w-fit',
+        '[&_[data-slot="heading"]]:text-pretty',
+        '[&_[data-slot="heading"]]:hyphens-auto',
+        '[&_[data-slot="heading"]]:[word-break:break-word]',
+        // **** Content ****
+        '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
+        // **** Media ****
+        '[&_[data-slot="media"]_*]:pointer-events-none',
+        '[&_[data-slot="media"]]:overflow-hidden',
+        '[&_[data-slot="media"]]:relative',
+        // Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
+        '[&_[data-slot="media"]]:mx-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))] [&_[data-slot="media"]]:mt-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+        // Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work on images in FF)
+        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-[3/2] [&_[data-slot="media"]>img]:w-full [&_[data-slot="media"]>img]:object-cover',
+        // Prepare zoom animation for hover effects. The hover effect can also be enabled by classes on the parent component, so it is always prepared here.
+        '[&_[data-slot="media"]>*]:duration-300 [&_[data-slot="media"]>*]:ease-in-out [&_[data-slot="media"]>*]:motion-safe:transition-transform',
+        // **** Card link ****
+        // **** Hover ****
+        // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
+        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>img]:scale-110',
+        // **** Card link in Heading ****
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>img]:scale-110',
+        // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
+        // Border top is set to even out the border bottom used for the underline
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:no-underline',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-2',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-transparent',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:transition-colors',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]:hover]:border-b-current',
+        // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:leading-6',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:hyphens-auto',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:[word-break:break-word]',
+        // **** Fail-safe for interactive elements ****
+        // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
+        // The card is made clickable by a pseudo-element on the heading that covers the entire card
+        '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
+        // Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
+        '[&_[data-slot="card-link"]_a]:static',
+        // Place other interactive on top of the pseudo-element that makes the entire card clickable
+        // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
+        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
+        // **** Badge ****
+        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
+        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
+        // Left aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
+        // Right aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
+        // ... and position the badge at the right edge of the media content
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
+    ],
+    variants: {
+        /**
+     * The variant of the card
+     * @default subtle
+     */ variant: {
+            subtle: [
+                'border-transparent',
+                // **** Media styles ****
+                '[&_[data-slot="media"]]:rounded-2xl'
+            ],
+            outlined: 'border border-black'
+        },
+        /**
+     * The layout of the card
+     * @default vertical
+     */ layout: {
+            vertical: [
+                'flex-col',
+                // **** Media ****
+                '[&_[data-slot="media"]]:rounded-t-2xl'
+            ],
+            horizontal: [
+                'gap-x-4',
+                // **** With Media ****
+                '[&:has(>[data-slot="media"]:first-child)]:flex-col',
+                '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
+                '[&:has(>[data-slot="media"])]:md:!flex-row',
+                '[&_[data-slot="media"]]:md:h-fit',
+                '[&:has(>[data-slot="media"])>*]:md:basis-1/2',
+                // Position media at the edges of the card
+                '[&_[data-slot="media"]]:md:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+                '[&_[data-slot="media"]:first-child]:md:mr-0',
+                '[&_[data-slot="media"]:last-child]:md:ml-0',
+                // Make sure the card link is clickable when the media is on the right side
+                // This i necessary because the media content is positioned after the card link in the DOM
+                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
+                // **** Without Media ****
+                '[&:not(:has(>[data-slot="media"]))]:flex-row',
+                // Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
+                '[&:not(:has(>[data-slot="media"]))]:flex-wrap [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:grow [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:basis-[12rem]',
+                // Make sure svg's etc. are not shrinkable
+                '[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
+            ]
+        }
+    },
+    defaultVariants: {
+        variant: 'subtle',
+        layout: 'vertical'
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            layout: 'horizontal',
+            className: [
+                // **** Media ****
+                // Some rounded corners are removed when the card is outlined
+                '[&_[data-slot="media"]]:rounded-t-2xl',
+                '[&_[data-slot="media"]:first-child]:md:rounded-tr-none [&_[data-slot="media"]:first-child]:md:rounded-bl-2xl',
+                '[&_[data-slot="media"]:last-child]:md:rounded-tl-none [&_[data-slot="media"]:last-child]:md:rounded-br-2xl',
+                // **** Badge ****
+                // Override default corner radius of the badge to match the media border radius
+                '[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:md:rounded-tr-none',
+                '[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:md:rounded-tl-none'
+            ]
+        }
+    ]
+});
+const Card = ({ children, className: _className, variant, layout, ...restProps })=>{
+    const className = cardVariants({
+        className: _className,
+        variant,
+        layout
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        ...restProps,
+        children: children
+    });
+};
+const cardLinkVariants = cva({
+    base: 'w-fit max-w-full',
+    variants: {
+        withHref: {
+            true: [
+                // **** Clickarea ****
+                'cursor-pointer',
+                'after:absolute',
+                'after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                'focus-visible:outline-none',
+                'data-focus-visible:after:outline-focus',
+                'data-focus-visible:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the clickable area.
+                'hover:no-underline'
+            ],
+            false: [
+                // **** Clickarea ****
+                '[&_a]:after:cursor-pointer',
+                '[&_a]:after:absolute',
+                '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                '[&_a[data-focus-visible]]:outline-none',
+                '[&_a[data-focus-visible]]:after:outline-focus',
+                '[&_a[data-focus-visible]]:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the card.
+                // The group-hover ensures that the hover effect also applies when this component is used as a wrapper around a link.
+                '[&_a]:group-hover/card:no-underline'
+            ]
+        }
+    }
+});
+/**
+ * A component that creates a clickable area on a card.
+ * It can be used either as a wrapper around a link or as a standalone link.
+ */ const CardLink = ({ className: _className, href, ...restProps })=>{
+    const className = cardLinkVariants({
+        className: _className,
+        withHref: !!href
+    });
+    return href ? /*#__PURE__*/ jsx(Link, {
+        "data-slot": "card-link",
+        ...restProps,
+        href: href,
+        className: className
+    }) : // We can't utilize that the `Link` component from react-aria-components renders as a span if it doesn't have an href,
+    // because it still renders with role="link" and tabindex="0" which makes it focusable.
+    // So we need to render a div instead.
+    /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "card-link",
+        className: className
+    });
+};
+
+/**
+ * A React component that wraps https://react-spectrum.adobe.com/react-aria/useDateFormatter.html
+ * By default it sets the timeZone to `Europe/Berlin` to prevent the server's timezone from affecting
+ * the localized format
+ */ const DateFormatter = ({ options: _options, value, children: render })=>{
+    const options = {
+        timeZone: 'Europe/Berlin',
+        ..._options
+    };
+    const formatter = useDateFormatter(options);
+    const date = typeof value === 'string' ? new Date(value) : value;
+    const formatted = formatter.format(date);
+    return render ? render(formatted) : formatted;
+};
+
+const VideoLoop = ({ src, format, alt, className })=>{
+    // Control the video playback state, so that the user can pause and play the video at will, also control the video autoplay
+    const [shouldPlay, setShouldPlay] = useState(false);
+    // Needed to show the pause button when the video is actually playing (refer to google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
+    const [isPlaying, setIsPlaying] = useState(false);
+    // We need to check if the user prefers reduced motion, so that we can prevent the video from autoplaying if so
+    const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(null);
+    const videoRef = useRef(null);
+    useEffect(()=>{
+        const { matches: userPrefersReducedMotion } = matchMedia('(prefers-reduced-motion: reduce)');
+        setUserPrefersReducedMotion(userPrefersReducedMotion);
+        // Autoplay the video if the user does not prefer reduced motion
+        setShouldPlay(!userPrefersReducedMotion);
+    }, []);
+    // Follow google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+    // "Don't assume a video will play, and don't show a pause button when the video is not actually playing."
+    // "You should always look at the Promise returned by the play function to see if it was rejected:"
+    // This is why we use the promise returned by the play function, and an extra state variable to determine if the video is actually playing or not
+    useEffect(()=>{
+        if (!videoRef.current) return;
+        if (shouldPlay) {
+            videoRef.current.play().then(()=>setIsPlaying(true)).catch(()=>setIsPlaying(false));
+        } else {
+            videoRef.current.pause();
+            setIsPlaying(false);
+        }
+    }, [
+        shouldPlay
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cx(className, 'relative', userPrefersReducedMotion === null && 'opacity-0'),
+        children: [
+            /*#__PURE__*/ jsx("video", {
+                "aria-hidden": true,
+                ref: videoRef,
+                // cursor-pointer is not working on the button below, so we add it here for the same effect
+                className: "h-full w-full cursor-pointer object-cover",
+                playsInline: true,
+                loop: userPrefersReducedMotion === false,
+                autoPlay: userPrefersReducedMotion === false,
+                muted: true,
+                onEnded: (event)=>{
+                    if (userPrefersReducedMotion) {
+                        // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
+                        event.currentTarget.currentTime = 0;
+                        setShouldPlay(false);
+                        setIsPlaying(false);
+                    }
+                },
+                children: /*#__PURE__*/ jsx("source", {
+                    src: src,
+                    type: `video/${format}`
+                })
+            }),
+            userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
+                "aria-hidden": true,
+                type: "button",
+                onClick: ()=>setShouldPlay((prevState)=>!prevState),
+                className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
+                shouldPlay && 'opacity-0', isPlaying && [
+                    'transition-opacity duration-200',
+                    // Only show the pause button when the video is hovered or focused
+                    'focus-visible:opacity-100',
+                    'hover:opacity-100'
+                ]),
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "grid h-12 w-12 place-items-center rounded-full bg-white outline-hidden",
+                    children: isPlaying ? /*#__PURE__*/ jsx(PlayerPause, {}) : /*#__PURE__*/ jsx(PlayerPlay, {})
+                })
+            }),
+            alt && /*#__PURE__*/ jsx("p", {
+                className: "sr-only",
+                children: alt
+            })
+        ]
+    });
+};
+
+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);
+    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,
+                {
+                    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,
+                            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)=>{
+    const { onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ref, isInvalid, isRequired, name, value, ...rest } = props;
+    const inputRef = useObjectRef(ref);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(PressResponder, {
+                onPress: ()=>{
+                    if (inputRef.current?.value) {
+                        inputRef.current.value = '';
+                    }
+                    inputRef.current?.click();
+                },
+                children: children
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                ...rest,
+                required: isRequired,
+                "aria-invalid": isInvalid,
+                "data-invalid": isInvalid,
+                "data-rac": true,
+                name: Array.isArray(name) ? name.join(' ') : name,
+                type: "file",
+                ref: inputRef,
+                accept: acceptedFileTypes?.toString(),
+                onChange: (e)=>onSelect?.(e.target.files),
+                capture: defaultCamera,
+                multiple: allowsMultiple,
+                // @ts-expect-error
+                webkitdirectory: acceptDirectory ? '' : undefined,
+                // This is a work around to prevent error in the console when attempting to submit a form with a required and empty file input
+                // RAC uses display: none, which prevents the file input from being focused.
+                // What we do instead is to hide it visually using custom CSS, so that the native HTML validation messages are still hidden. Which is why
+                // we don't use the sr-only class.
+                className: "absolute left-[-1000vw] opacity-0",
+                // Finally, we add aria-hidden to prevent the file input from being read by screen readers
+                "aria-hidden": true,
+                // Prevent focus trap when tabbing (since focus is delegated to the button)
+                tabIndex: -1
+            })
+        ]
+    });
+};
+
+const translations = {
+    remove: {
+        nb: 'Fjern',
+        sv: 'Ta bort',
+        en: 'Remove'
+    }
+};
+/**
+ * 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.
+ * @param files An array of files
+ * @returns The files as a DataTransfer object which can be used as a FileList
+ */ function filesToDataTransfer(files) {
+    const dataTransfer = new DataTransfer();
+    for (const file of files){
+        dataTransfer.items.add(file);
+    }
+    return dataTransfer.files;
+}
+/**
+ * Generates unique file names for files with the same original name.
+ * Any duplicate files will have a number in parentheses appended to their name.
+ * @param files An array of files
+ * @returns An array of files with unique names
+ */ function uniqueFileNames(files) {
+    const fileNameCounts = {};
+    return files.map((file)=>{
+        const fileName = file.name;
+        // Filter out the extension and any trailing numbers in parentheses
+        const baseName = fileName.replace(/\s*\(\d+\)|(\.[^.]+)$/g, '');
+        // Extract the file extension
+        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');
+            fileNameCounts[baseName] = baseNameCount;
+        }
+        fileNameCounts[baseName]++;
+        if (fileNameCounts[baseName] > 1) {
+            return new File([
+                file
+            ], // Follow the pattern of adding a number in parentheses to the base name (e.g. "file (1).txt")
+            `${baseName} (${fileNameCounts[baseName] - 1})${extension}`);
+        }
+        return file;
+    });
+}
+const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _isInvalid, errorMessage, isRequired, allowsMultiple, ref, ...fileTriggerProps })=>{
+    const [files, setFiles] = useState(_files ?? []);
+    const isInvalid = !!errorMessage || _isInvalid;
+    const id = useId();
+    const locale = _useLocale();
+    const _inputRef = useRef(null);
+    const inputRef = ref ?? _inputRef;
+    const slottedContext = useSlottedContext(FormContext) || {};
+    const validationBehavior = fileTriggerProps.validationBehavior ?? slottedContext.validationBehavior ?? 'native';
+    const validateFiles = useCallback((files)=>{
+        if (validate === undefined) return true;
+        const errors = [];
+        for (const file of files){
+            if (!validate) continue;
+            const validation = validate(file);
+            if (typeof validation === 'string') errors.push(validation);
+        }
+        if (errors.length === 0) return true;
+        return errors;
+    }, [
+        validate
+    ]);
+    const validationState = useFormValidationState({
+        ...fileTriggerProps,
+        validationBehavior,
+        validate: validateFiles,
+        isRequired,
+        isInvalid,
+        value: _files ?? files ?? null
+    });
+    const controlledOrUncontrolledFiles = // Use controlled files if they are provided, otherwise use internal files - but map them to File objects (remove validation prop)
+    _files ?? files;
+    useEffect(()=>{
+        // Keep the native file input in sync with the internal file state
+        if (inputRef.current) {
+            inputRef.current.files = filesToDataTransfer(controlledOrUncontrolledFiles);
+        }
+    }, [
+        controlledOrUncontrolledFiles,
+        inputRef
+    ]);
+    const { fieldProps } = useField({
+        ...fileTriggerProps,
+        validate: validateFiles,
+        validationBehavior,
+        isInvalid,
+        errorMessage
+    });
+    const [value, setValue] = useControlledState(_files, [], onChange);
+    useFormReset(inputRef, value, setValue);
+    useFormValidation({
+        ...fileTriggerProps,
+        validationBehavior,
+        validate: validateFiles,
+        isRequired,
+        isInvalid
+    }, validationState, inputRef);
+    const buttonRef = useRef(null);
+    const { displayValidation } = validationState;
+    useUpdateEffect(()=>{
+        // Fixes a bug where validation state is not reset after being set to customError
+        // This happens if the file upload ends up in an invalid state and then is emptied: the old valdiations is still lingering
+        if (controlledOrUncontrolledFiles.length === 0 && validationState.displayValidation.validationDetails.customError) {
+            validationState.commitValidation();
+        }
+    }, [
+        controlledOrUncontrolledFiles
+    ]);
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                FieldErrorContext,
+                displayValidation
+            ]
+        ],
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-slot": "file-upload",
+            className: "group grid w-72 max-w-full gap-2",
+            "data-required": isRequired,
+            children: [
+                /*#__PURE__*/ jsx(Provider, {
+                    values: [
+                        [
+                            LabelContext,
+                            {
+                                htmlFor: id
+                            }
+                        ],
+                        [
+                            ButtonContext,
+                            {
+                                // The button acts as the trigger for the file input, which is why we connect the label to the button id
+                                id,
+                                // Needed for RAC auto-focusing behavior to work
+                                ref: buttonRef,
+                                className: 'w-fit'
+                            }
+                        ],
+                        [
+                            InputContext,
+                            fieldProps
+                        ]
+                    ],
+                    children: /*#__PURE__*/ jsx(FileTrigger, {
+                        ...fileTriggerProps,
+                        isRequired: isRequired,
+                        allowsMultiple: allowsMultiple,
+                        onSelect: (selectedFiles)=>{
+                            if (selectedFiles === null) return;
+                            const newFiles = Array.from(selectedFiles);
+                            // For controlled component
+                            onChange?.((prevFiles)=>allowsMultiple ? uniqueFileNames(prevFiles.concat(newFiles)) : newFiles);
+                            // For internal file state
+                            setFiles((prevFiles)=>allowsMultiple ? uniqueFileNames(prevFiles.concat(newFiles)) : newFiles);
+                        },
+                        isInvalid: isInvalid || validationState.displayValidation.isInvalid,
+                        ref: inputRef,
+                        // Delegate focus to the button when the hidden file input is focused (for RAC auto-focusing behavior)
+                        onFocus: ()=>buttonRef.current?.focus(),
+                        children: children
+                    })
+                }),
+                /*#__PURE__*/ jsx("ul", {
+                    className: "mt-4 grid gap-y-2",
+                    children: controlledOrUncontrolledFiles.map((file, fileIndex)=>{
+                        let fileName = file.name;
+                        if (fileTriggerProps.acceptDirectory && file.webkitRelativePath !== '') {
+                            fileName = file.webkitRelativePath;
+                        }
+                        const validation = validate?.(file) ?? true;
+                        const hasError = validation !== true;
+                        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'),
+                                    children: [
+                                        fileName,
+                                        ' ',
+                                        /*#__PURE__*/ jsx("button", {
+                                            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
+                                                onChange?.((prevFiles)=>prevFiles.filter((_, index)=>index !== fileIndex));
+                                                // For internal file state
+                                                setFiles((prevFiles)=>prevFiles.filter((_, index)=>index !== fileIndex));
+                                                // Make sure screen readers doesn't loose track of focus
+                                                // (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, {})
+                                        })
+                                    ]
+                                }),
+                                hasError && /*#__PURE__*/ jsx(ErrorMessage, {
+                                    className: "mt-1 block w-full",
+                                    children: validation
+                                })
+                            ]
+                        }, fileName);
+                    })
+                }),
+                (controlledOrUncontrolledFiles.length === 0 || !!errorMessage) && /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                    errorMessage: errorMessage
+                })
+            ]
+        })
+    });
+};
+
+const baseClassName = 'h-20 w-20 shrink-0 rounded-full';
+const Avatar = ({ src, alt = '', className, onError, loading = 'lazy', ...rest })=>{
+    const [hasError, setHasError] = useState(false);
+    const hasValidImage = !hasError && src;
+    return hasValidImage ? /*#__PURE__*/ jsx("img", {
+        ...rest,
+        src: src,
+        alt: alt,
+        loading: loading,
+        className: cx(className, baseClassName, 'object-cover'),
+        onError: (event)=>{
+            onError?.(event);
+            setHasError(true);
+        }
+    }) : /*#__PURE__*/ jsx("div", {
+        className: cx(className, baseClassName, 'grid place-items-center bg-gray-light text-gray-dark'),
+        children: /*#__PURE__*/ jsx(User, {
+            className: "scale-[2.25]"
+        })
+    });
+};
+
+const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
+        ...props
+    });
+const ModalOverlay = (props)=>/*#__PURE__*/ jsx(ModalOverlay$1, {
+        ...props,
+        isDismissable: true,
+        className: ({ isEntering, isExiting })=>cx('fixed inset-0 z-10 flex min-h-full items-center justify-center overflow-y-auto bg-black/25 p-4 text-center backdrop-blur-sm', isEntering && 'fade-in animate-in duration-300 ease-out', isExiting && 'fade-out animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+            'motion-reduce:animate-none')
+    });
+const Modal = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ModalOverlay, {
+        children: /*#__PURE__*/ jsx(Modal$1, {
+            ...restProps,
+            className: ({ isEntering, isExiting })=>cx(className, 'w-full max-w-md overflow-hidden rounded-2xl bg-white p-4 text-left align-middle shadow-xl', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+                'motion-reduce:animate-none')
+        })
+    });
+const Dialog = ({ className, children, ...restProps })=>{
+    const locale = _useLocale();
+    return /*#__PURE__*/ jsx(Dialog$1, {
+        ...restProps,
+        className: cx('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: [
+                        [
+                            HeadingContext,
+                            {
+                                slots: {
+                                    [DEFAULT_SLOT]: {},
+                                    title: {
+                                        className: 'heading-s',
+                                        _outerWrapper: (children)=>/*#__PURE__*/ jsxs("div", {
+                                                className: "flex items-center justify-between gap-x-2",
+                                                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
+                                                        ,
+                                                        variant: "tertiary",
+                                                        className: "!px-2.5 data-focus-visible:outline-focus-inset",
+                                                        "aria-label": translations$1.close[locale],
+                                                        children: /*#__PURE__*/ jsx(Close, {})
+                                                    })
+                                                ]
+                                            })
+                                    }
+                                }
+                            }
+                        ],
+                        [
+                            ButtonContext,
+                            {
+                                // 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
+                })
+            })
+    });
+};
+
+const tagVariants = cva({
+    base: [
+        'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 font-medium text-sm transition-colors duration-200',
+        //Focus
+        'focus-visible:outline-focus-offset',
+        //Border
+        'border-2 border-blue-dark',
+        //Backgrounds
+        'data-hovered:!bg-sky bg-white text-black aria-selected:bg-sky-light data-allows-removing:bg-sky-light',
+        //Icons
+        '[&_svg]:h-4 [&_svg]:w-4'
+    ]
+});
+/**
+ * A group component for Tag components that enables selection and organization of options.
+ */ function TagGroup(props) {
+    const { onRemove, selectionMode = 'single', className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(TagGroup$1, {
+        ...restProps,
+        className: className,
+        selectionMode: onRemove ? 'none' : selectionMode,
+        onRemove: onRemove,
+        children: children
+    });
+}
+/**
+ * A container component for Tag components within a TagGroup.
+ */ function TagList(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(TagList$1, {
+        ...restProps,
+        className: cx('flex flex-wrap gap-2', className),
+        children: children
+    });
+}
+/**
+ * Interactive tag component for selections, filtering, and categorization.
+ */ function Tag(props) {
+    const { className, children, ...restProps } = props;
+    const textValue = typeof children === 'string' ? children : undefined;
+    return /*#__PURE__*/ jsx(Tag$1, {
+        className: tagVariants({
+            className
+        }),
+        textValue: textValue,
+        ...restProps,
+        children: ({ allowsRemoving })=>allowsRemoving ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    children,
+                    /*#__PURE__*/ jsx(Button$1, {
+                        className: "cursor-pointer outline-none after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0",
+                        slot: "remove",
+                        children: /*#__PURE__*/ jsx(Close, {
+                            className: "ml-1"
+                        })
+                    })
+                ]
+            }) : children
     });
 }
-const _NumberField = /*#__PURE__*/ forwardRef(NumberField);
 
-export { _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ComboboxItem, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, SelectItem, _TextArea as TextArea, _TextField as TextField };
+export { Accordion, AccordionItem, Alertbox, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, 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, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, TextArea, TextField, Avatar as UNSAFE_Avatar, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };