@obosbbl/grunnmuren-react 3.0.15 → 3.1.0

package/dist/index.mjs

@@ -1,37 +1,18 @@
 '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 as ButtonContext$1, 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, GroupContext, Tabs as Tabs$1, TabListStateContext, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, Table as Table$1, TableHeader as TableHeader$1, Column, TableBody as TableBody$1, Row, Cell } from 'react-aria-components';
+import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, DisclosureGroup, useLocale, Link, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Table as Table$1, TableBody as TableBody$1, Cell, Column, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
 export { Form, Group, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay, Trash, User, ArrowRight, Download, LinkExternal } from '@obosbbl/grunnmuren-icons-react';
-import { useLayoutEffect, filterDOMProps, mergeRefs, mergeProps, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
 import { cva, cx, compose } from 'cva';
-import { createContext, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
-import { useProgressBar, useDateFormatter, useFocusRing, useDisclosure, useField } from 'react-aria';
+import { createContext, useContext, useId, useRef, Children, useState, useEffect, useCallback } from 'react';
+import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, ArrowRight, Download, LinkExternal, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
+import { filterDOMProps, mergeProps, mergeRefs, useUpdateEffect, useObjectRef, useFormReset } from '@react-aria/utils';
+import { useFocusRing, useDisclosure, useProgressBar, useDateFormatter, useField } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import { useDebouncedCallback } from 'use-debounce';
 import { useFormValidation } from '@react-aria/form';
 import { useFormValidationState } from '@react-stately/form';
 import { useControlledState } from '@react-stately/utils';
 import { PressResponder } from '@react-aria/interactions';
-import { useDebouncedCallback } from 'use-debounce';
-
-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 headingVariants = cva({
@@ -109,11 +90,177 @@ const Footer = (props)=>/*#__PURE__*/ jsx("div", {
         "data-slot": "footer"
     });
 
+const disclosureButtonVariants = cva({
+    base: [
+        'inline-flex cursor-pointer items-center justify-between rounded-lg focus-visible:outline-current focus-visible:outline-focus',
+        // Ensure a minimum click area of 44x44px, while making it look like it only has the size of the content
+        'p-2.5 focus-visible:outline-offset-[-0.625rem]',
+        'data-accordion:-m-2.5'
+    ],
+    variants: {
+        withChevron: {
+            true: '[&[aria-expanded="true"]_svg]:rotate-180',
+            false: null
+        },
+        /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */ isIconOnly: {
+            true: '[&>svg]:h-7 [&>svg]:w-7',
+            false: 'gap-2.5'
+        }
+    },
+    defaultVariants: {
+        withChevron: false,
+        isIconOnly: false
+    }
+});
+const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
+    const [props, ref] = useContextProps(restProps, _ref, ButtonContext$1);
+    return /*#__PURE__*/ jsxs(Button$1, {
+        ...props,
+        ref: ref,
+        className: disclosureButtonVariants({
+            className,
+            withChevron,
+            isIconOnly
+        }),
+        slot: "trigger",
+        children: [
+            children,
+            withChevron && /*#__PURE__*/ jsx(ChevronDown, {
+                className: "flex-none transition-transform duration-300 motion-reduce:transition-none"
+            })
+        ]
+    });
+};
+const DisclosureStateContext = /*#__PURE__*/ createContext(null);
+const Disclosure = ({ ref: _ref, children, ..._props })=>{
+    const [props, ref] = useContextProps(_props, _ref, DisclosureContext);
+    const groupState = useContext(DisclosureGroupStateContext);
+    let { id, ...otherProps } = props;
+    const defaultId = useId();
+    id ||= defaultId;
+    const isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
+    const state = useDisclosureState({
+        ...props,
+        isExpanded,
+        onExpandedChange (isExpanded) {
+            if (groupState) {
+                groupState.toggleKey(id);
+            }
+            props.onExpandedChange?.(isExpanded);
+        }
+    });
+    const isDisabled = props.isDisabled || groupState?.isDisabled || false;
+    const domProps = filterDOMProps(otherProps);
+    const { isFocusVisible: isFocusVisibleWithin } = useFocusRing({
+        within: true
+    });
+    const panelRef = useRef(null);
+    const { buttonProps, panelProps } = useDisclosure({
+        ...props,
+        isExpanded,
+        isDisabled
+    }, state, panelRef);
+    const { role: _, ...propsWithoutRole } = panelProps;
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                DisclosureContext,
+                state
+            ],
+            [
+                ButtonContext$1,
+                {
+                    slots: {
+                        [DEFAULT_SLOT]: {},
+                        trigger: buttonProps
+                    }
+                }
+            ],
+            [
+                DisclosurePanelContext,
+                {
+                    ...propsWithoutRole,
+                    panelRef
+                }
+            ],
+            [
+                DisclosureStateContext,
+                state
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            ...domProps,
+            className: otherProps.className,
+            ref: ref,
+            "data-focus-visible-within": isFocusVisibleWithin || undefined,
+            "data-expanded": state.isExpanded || undefined,
+            "data-disabled": isDisabled || undefined,
+            children: typeof children === 'function' ? children({
+                isExpanded: state.isExpanded,
+                isFocusVisibleWithin,
+                isDisabled,
+                state,
+                defaultChildren: null
+            }) : children
+        })
+    });
+};
+const DisclosurePanelContext = /*#__PURE__*/ createContext({});
+const DisclosurePanel = ({ ref, children, ...props })=>{
+    const disclosureContext = useContext(DisclosureContext);
+    const { panelProps, panelRef } = useContext(DisclosurePanelContext);
+    const { role: _role = 'group', className, ...restProps } = props;
+    const ariaLabelledby = props['aria-labelledby'] ?? restProps['aria-labelledby'];
+    const isWithoutRole = _role === 'none';
+    const role = isWithoutRole ? undefined : _role;
+    const { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = useFocusRing({
+        within: true
+    });
+    const domProps = filterDOMProps(props);
+    return /*#__PURE__*/ jsx("div", {
+        className: cx('grid transition-all duration-300 motion-reduce:transition-none', disclosureContext?.isExpanded ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr]'),
+        "data-expanded": disclosureContext?.isExpanded || undefined,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "overflow-hidden",
+            children: /*#__PURE__*/ jsx("div", {
+                ref: mergeRefs(ref, panelRef),
+                ...mergeProps(panelProps, focusWithinProps),
+                ...restProps,
+                ...domProps,
+                "data-focus-visible-within": isFocusVisibleWithin || undefined,
+                className: cx(className, '[content-visibility:visible]'),
+                role: role,
+                "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby,
+                inert: disclosureContext?.isExpanded ? undefined : true,
+                children: /*#__PURE__*/ jsx(Provider, {
+                    values: [
+                        // Reset the context to avoid passing the same context to children, in case of nested Disclosures
+                        [
+                            DisclosureContext,
+                            null
+                        ],
+                        [
+                            ButtonContext$1,
+                            null
+                        ]
+                    ],
+                    children: children
+                })
+            })
+        })
+    });
+};
+
 function Accordion(props) {
-    const { children, className, ...restProps } = props;
+    const { children, className, allowsMultipleExpanded = true, ...restProps } = props;
     const childCount = Children.count(children);
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(DisclosureGroup, {
         ...restProps,
+        "data-accordion": true,
+        allowsMultipleExpanded: allowsMultipleExpanded,
         className: cx('rounded-lg bg-white', className),
         children: Children.map(children, (child, index)=>/*#__PURE__*/ jsxs(Fragment, {
                 children: [
@@ -128,40 +275,16 @@ function Accordion(props) {
     });
 }
 function AccordionItem(props) {
-    const { className, children, defaultOpen = false, isOpen: controlledIsOpen, onOpenChange, ...restProps } = props;
-    const contentId = useId();
-    const buttonId = useId();
-    const isControlled = controlledIsOpen != null;
-    // This component has internal state that controls whether it is open or not,
-    // regardless if we are controlled or uncontrolled.
-    // If we are controlled, we use a layout effect to sync the controlled state
-    // with the internal state.
-    //
-    const [isOpen, setIsOpen] = useState(// If we are controlled, use that open state, otherwise use the uncontrolled
-    isControlled ? controlledIsOpen : defaultOpen);
-    useLayoutEffect(()=>{
-        if (isControlled) {
-            setIsOpen(controlledIsOpen);
-        }
-    }, [
-        controlledIsOpen,
-        isControlled
-    ]);
-    const handleOpenChange = ()=>{
-        const newOpenState = !isOpen;
-        if (!isControlled) {
-            setIsOpen(newOpenState);
-        }
-        // Always call the change handler, even if we're uncontrolled.
-        // Easier to add stuff such as tracking etc.
-        if (onOpenChange) {
-            onOpenChange(newOpenState);
-        }
-    };
-    return /*#__PURE__*/ jsx("div", {
+    const { className, children, defaultOpen = false, isOpen: controlledIsOpen, onOpenChange, defaultExpanded, isExpanded, onExpandedChange, ...restProps } = props;
+    const _defaultExpanded = defaultOpen ?? defaultExpanded;
+    const _isExpanded = controlledIsOpen ?? isExpanded;
+    const _onExpandedChange = onOpenChange ?? onExpandedChange;
+    return /*#__PURE__*/ jsx(Disclosure, {
         ...restProps,
         className: cx('relative px-2', className),
-        "data-open": isOpen,
+        defaultExpanded: _defaultExpanded,
+        onExpandedChange: _onExpandedChange,
+        isExpanded: _isExpanded,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
@@ -171,33 +294,22 @@ function AccordionItem(props) {
                         className: 'font-medium leading-7 -mx-2 text-base',
                         // Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
                         level: 3,
-                        _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
-                                "aria-controls": contentId,
-                                "aria-expanded": isOpen,
+                        _innerWrapper: (children)=>/*#__PURE__*/ jsx(DisclosureButton, {
                                 // Use outline with offset as focus indicator, this does not cover the left sky border on the expanded content and works with or without a background color on the accordion container
-                                className: "flex min-h-[44px] w-full cursor-pointer items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus focus-visible:outline-focus-inset",
-                                id: buttonId,
-                                onClick: handleOpenChange,
+                                className: "flex min-h-11 w-full gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus-inset!",
                                 type: "button",
-                                children: [
-                                    children,
-                                    /*#__PURE__*/ jsx(ChevronDown, {
-                                        className: cx('flex-none transition-transform duration-300 motion-reduce:transition-none', isOpen && 'rotate-180')
-                                    })
-                                ]
+                                withChevron: true,
+                                children: children
                             })
                     }
                 ],
                 [
                     ContentContext,
                     {
-                        className: // Uses pseudo element for vertical padding, since that doesn't affect the height when the accordion is closed
-                        'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
+                        className: // Uses pseudo elements for vertical padding, since that doesn't affect the height when the accordion is closed
+                        'text-sm font-light leading-6 px-3.5 data-[expanded]:after:h-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
                         role: 'region',
-                        inert: !isOpen,
-                        'aria-labelledby': buttonId,
-                        _outerWrapper: (children)=>/*#__PURE__*/ jsx("div", {
-                                className: cx('grid transition-all duration-300 after:relative after:block after:h-0 after:transition-all after:duration-300 motion-reduce:transition-none', isOpen ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr]'),
+                        _outerWrapper: (children)=>/*#__PURE__*/ jsx(DisclosurePanel, {
                                 children: children
                             })
                     }
@@ -208,43 +320,6 @@ function AccordionItem(props) {
     });
 }
 
-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',
@@ -279,17 +354,243 @@ const translations$1 = {
 };
 
 /**
- * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */ const buttonVariants = cva({
+ * 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 iconMap = {
+    info: InfoCircle,
+    success: CheckCircle,
+    warning: Warning,
+    danger: Error
+};
+const alertVariants = 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'
+        '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 button
-     * @default primary
+     * The variant of the alert
+     * @default info
      */ variant: {
-            primary: 'no-underline',
+            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
+            })
+        ]
+    });
+};
+
+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]"
+        })
+    });
+};
+
+function isLinkProps$1(props) {
+    return !!props.href;
+}
+function Backlink(props) {
+    const { className, style, children, withUnderline, ref, ...restProps } = props;
+    const _className = cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 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$1(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 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"
+    });
+}
+
+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 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
+    });
+}
+
+/**
+ * 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: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
@@ -372,7 +673,7 @@ const translations$1 = {
     }
 });
 const ButtonContext = /*#__PURE__*/ createContext({});
-function isLinkProps$1(props) {
+function isLinkProps(props) {
     return !!props.href;
 }
 function Button({ ref = null, ...props }) {
@@ -399,7 +700,7 @@ function Button({ ref = null, ...props }) {
             })
         ]
     }) : _children;
-    return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
+    return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...restProps,
         className: className,
         ref: ref,
@@ -413,708 +714,7 @@ function Button({ ref = null, ...props }) {
     });
 }
 
-const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
-const input = cva({
-    base: [
-        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
-        'bg-white',
-        // Use box-content to enable auto width based on number of characters (size)
-        // Setting min-height to prevent the input from collapsing in Safari
-        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
-        'box-content min-h-6 py-2.5',
-        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
-        // invalid styles
-        'group-data-invalid:ring-focus group-data-invalid:ring-red',
-        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
-        'appearance-none'
-    ],
-    variants: {
-        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
-        focusModifier: {
-            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
-            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
-        },
-        isGrouped: {
-            false: 'px-3',
-            true: '!ring-0 flex-1'
-        }
-    },
-    defaultVariants: {
-        focusModifier: 'focus',
-        isGrouped: false
-    }
-});
-const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
-    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
-]);
-const dropdown = {
-    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
-    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cx('max-h-[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) {
-    const { children, className, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Text, {
-        ...restProps,
-        className: cx(className, formFieldError),
-        slot: "errorMessage",
-        children: children
-    });
-}
-
-const defaultClasses$1 = cx([
-    '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.
-function CheckmarkBox() {
-    return /*#__PURE__*/ jsx("span", {
-        className: cx([
-            'relative left-0 grid flex-none place-content-center rounded-sm border-2 border-black text-white',
-            // 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.
-            // For the ::before psuedo element the line height of the label is always 1em.
-            // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
-            // 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:group-not-data-hovered:group-not-data-invalid:border-blue group-data-selected:group-not-data-hovered:group-not-data-invalid:bg-blue',
-            'group-data-selected:group-not-data-hovered:group-data-invalid:border-red group-data-selected:group-not-data-hovered:group-data-invalid:bg-red',
-            // focus
-            'group-data-focus-visible:outline-focus-offset',
-            // hovered
-            'group-data-hovered:group-data-invalid:bg-red-light',
-            'group-data-hovered:border-blue',
-            'group-data-hovered:bg-sky',
-            'group-data-hovered:group-data-selected:group-not-data-invalid:border-blue-dark',
-            'group-data-hovered:group-data-selected:group-not-data-invalid:bg-blue-dark',
-            // 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:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
-        ]),
-        children: /*#__PURE__*/ jsx(Check, {
-            className: "h-full w-full opacity-0 group-data-invalid:group-data-hovered:group-data-selected:text-red group-data-selected:opacity-100"
-        })
-    });
-}
-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 = !!errorMessage || _isInvalid;
-    return /*#__PURE__*/ jsx("div", {
-        children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
-            value: {
-                'aria-describedby': description ? descriptionId : undefined,
-                'aria-errormessage': errorMessage ? errorMessageId : undefined
-            },
-            children: [
-                /*#__PURE__*/ jsxs(Checkbox$1, {
-                    ...restProps,
-                    className: cx(className, defaultClasses$1),
-                    isInvalid: isInvalid,
-                    children: [
-                        /*#__PURE__*/ jsx(CheckmarkBox, {}),
-                        children
-                    ]
-                }),
-                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, {
-                    className: "mt-2 block",
-                    id: errorMessageId,
-                    children: errorMessage
-                })
-            ]
-        })
-    });
-}
-
-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;
-    return /*#__PURE__*/ jsx(Label$1, {
-        className: cx(className, 'font-semibold leading-7'),
-        ...restProps,
-        children: children
-    });
-}
-
-function CheckboxGroup(props) {
-    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...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 || _isInvalid;
-    return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
-        ...restProps,
-        className: cx(className, 'flex flex-col gap-2'),
-        isInvalid: isInvalid,
-        isRequired: isRequired,
-        children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                children: label
-            }),
-            description && /*#__PURE__*/ jsx(Description, {
-                children: description
-            }),
-            children,
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            })
-        ]
-    });
-}
-
-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 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) {
-    const { className, children, description, errorMessage, isPending, 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 || _isInvalid;
-    return /*#__PURE__*/ jsxs(ComboBox, {
-        ...restProps,
-        className: cx(className, formField),
-        isInvalid: isInvalid,
-        children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                children: label
-            }),
-            description && /*#__PURE__*/ jsx(Description, {
-                children: description
-            }),
-            /*#__PURE__*/ jsxs(Group, {
-                className: inputGroup,
-                children: [
-                    /*#__PURE__*/ jsx(Input, {
-                        className: input({
-                            isGrouped: true
-                        }),
-                        ref: ref
-                    }),
-                    /*#__PURE__*/ jsx(Button$1, {
-                        children: isPending ? /*#__PURE__*/ jsx(LoadingSpinner, {
-                            className: "animate-spin"
-                        }) : /*#__PURE__*/ jsx(ChevronDown, {
-                            className: dropdown.chevronIcon
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            }),
-            /*#__PURE__*/ jsx(Popover, {
-                // FIXME: The trigger width doesn't include the padding of the group, so for now we have to apply this workaround.
-                // Also... the combobox border gets a pixel wider when focused, so we account for that as well when calculating the width
-                // and the offset.
-                // The input gutter should probably be moved to a theme variable instead of using the hardcoded value as here.
-                className: cx(dropdown.popover, 'min-w-[calc(var(--trigger-width)+26px)]'),
-                crossOffset: -13,
-                children: /*#__PURE__*/ jsx(ListBox, {
-                    className: dropdown.listbox,
-                    children: children
-                })
-            })
-        ]
-    });
-}
-
-function RadioGroup(props) {
-    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, value, ...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 || _isInvalid;
-    return /*#__PURE__*/ jsxs(RadioGroup$1, {
-        ...restProps,
-        // Tabindex is set to -1 when the value is an empty string, which makes the radio input not focusable
-        value: value === '' ? undefined : value,
-        className: cx(className, 'flex flex-col gap-2'),
-        isInvalid: isInvalid,
-        isRequired: isRequired,
-        children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                children: label
-            }),
-            description && /*#__PURE__*/ jsx(Description, {
-                children: description
-            }),
-            children,
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            })
-        ]
-    });
-}
-
-const defaultClasses = cx([
-    '-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.
-    // For the ::before psuedo element the line height of the label is always 1em.
-    // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
-    // 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-blue data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
-    // hover
-    'data-hovered:data-selected:before:border-blue-dark data-hovered:data-invalid:before:bg-red-light data-hovered:data-selected:before:bg-blue-dark data-hovered:before:border-blue data-hovered:before:bg-sky',
-    // focus
-    '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: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) {
-    const { children, className, description, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Radio$1, {
-        ...restProps,
-        className: cx(className, defaultClasses),
-        children: /*#__PURE__*/ jsxs("div", {
-            children: [
-                children,
-                description && /*#__PURE__*/ jsx(Description, {
-                    className: "mt-2 block",
-                    children: description
-                })
-            ]
-        })
-    });
-}
-
-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 || _isInvalid;
-    return /*#__PURE__*/ jsxs(Select$1, {
-        ...restProps,
-        className: cx(className, formField),
-        isInvalid: isInvalid,
-        children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                children: label
-            }),
-            description && /*#__PURE__*/ jsx(Description, {
-                children: description
-            }),
-            /*#__PURE__*/ jsxs(Button$1, {
-                className: cx(input({
-                    focusModifier: 'visible'
-                }), // How to reuse placeholder text?
-                'inline-flex cursor-default items-center gap-2'),
-                // See https://github.com/adobe/react-spectrum/discussions/4792#discussioncomment-6492305
-                ref: ref,
-                children: [
-                    /*#__PURE__*/ jsx(SelectValue, {
-                        className: "flex-1 truncate text-left data-[placeholder]:text-[#727070]"
-                    }),
-                    /*#__PURE__*/ jsx(ChevronDown, {
-                        className: dropdown.chevronIcon
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            }),
-            /*#__PURE__*/ jsx(Popover, {
-                className: dropdown.popover,
-                children: /*#__PURE__*/ jsx(ListBox, {
-                    className: dropdown.listbox,
-                    children: children
-                })
-            })
-        ]
-    });
-}
-
-function TextArea(props) {
-    const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ref, ...restProps } = props;
-    const isInvalid = !!errorMessage || _isInvalid;
-    return /*#__PURE__*/ jsxs(TextField$1, {
-        ...restProps,
-        className: cx(className, formField),
-        isInvalid: isInvalid,
-        children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                children: label
-            }),
-            description && /*#__PURE__*/ jsx(Description, {
-                children: description
-            }),
-            /*#__PURE__*/ jsx(TextArea$1, {
-                className: input(),
-                rows: rows,
-                ref: ref
-            }),
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            })
-        ]
-    });
-}
-
-const inputVariants$1 = compose(input, cva({
-    base: '',
-    variants: {
-        textAlign: {
-            right: 'text-right',
-            left: ''
-        },
-        autoWidth: {
-            true: 'max-w-fit',
-            false: ''
-        }
-    }
-}));
-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 || _isInvalid;
-    return /*#__PURE__*/ jsxs(TextField$1, {
-        ...restProps,
-        className: cx(className, formField),
-        isInvalid: isInvalid,
-        children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                children: label
-            }),
-            description && /*#__PURE__*/ jsx(Description, {
-                children: description
-            }),
-            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
-                className: cx(inputGroup, {
-                    'w-fit': !!size
-                }),
-                children: [
-                    leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
-                    /*#__PURE__*/ jsx(Input, {
-                        className: inputVariants$1({
-                            textAlign,
-                            isGrouped: true,
-                            autoWidth: !!size
-                        }),
-                        ref: ref,
-                        size: size
-                    }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
-                    rightAddon
-                ]
-            }) : /*#__PURE__*/ jsx(Input, {
-                className: inputVariants$1({
-                    textAlign,
-                    autoWidth: !!size
-                }),
-                ref: ref,
-                size: size
-            }),
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            })
-        ]
-    });
-}
-
-// This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
-const inputVariants = compose(input, cva({
-    base: '',
-    variants: {
-        textAlign: {
-            right: 'text-right',
-            left: ''
-        },
-        autoWidth: {
-            true: 'max-w-fit',
-            false: ''
-        }
-    }
-}));
-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 || _isInvalid;
-    return /*#__PURE__*/ jsxs(NumberField$1, {
-        ...restProps,
-        className: cx(className, formField),
-        isInvalid: isInvalid,
-        children: [
-            label && /*#__PURE__*/ jsx(Label, {
-                children: label
-            }),
-            description && /*#__PURE__*/ jsx(Description, {
-                children: description
-            }),
-            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
-                className: cx(inputGroup, {
-                    'w-fit': !!size
-                }),
-                children: [
-                    leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
-                    /*#__PURE__*/ jsx(Input, {
-                        className: inputVariants({
-                            textAlign,
-                            isGrouped: true,
-                            autoWidth: !!size
-                        }),
-                        ref: ref,
-                        size: size
-                    }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
-                    rightAddon
-                ]
-            }) : /*#__PURE__*/ jsx(Input, {
-                className: inputVariants({
-                    textAlign,
-                    autoWidth: !!size
-                }),
-                ref: ref,
-                size: size
-            }),
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            })
-        ]
-    });
-}
-
-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({
+const cardVariants = cva({
     base: [
         'group/card',
         'rounded-[inherit]',
@@ -1339,259 +939,548 @@ const cardLinkVariants = cva({
     });
 };
 
-/**
- * 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 Carousel = ({ className, children, onChange, ...rest })=>{
+    const ref = useRef(null);
+    const locale = _useLocale();
+    const { previous, next } = translations$1;
+    const [scrollTargetIndex, setScrollTargetIndex] = useState(0);
+    const isScrollingProgrammatically = useRef(false);
+    const scrollTimeoutRef = useRef(null);
+    const scrollQueue = useRef([]);
+    const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
+    const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
+    useEffect(()=>{
+        setHasReachedScrollStart(scrollTargetIndex === 0);
+        setHasReachedScrollEnd(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
+    }, [
+        scrollTargetIndex
+    ]);
+    // Keep track of the previous index to determine if the user is scrolling forward or backward
+    // This is used to determine which callback to call (onPrev or onNext)
+    const prevIndex = useRef(0);
+    // Processes the next scroll action in the queue, if any
+    // All clicks on the prev/next buttons are queued while a programmatic scroll is in progress
+    // This is to ensure that rapid clicks on the buttons do not cause janky scrolling behavior
+    // while still a snappy response to user clicks
+    const processQueue = ()=>{
+        if (scrollQueue.current.length > 0 && !isScrollingProgrammatically.current) {
+            const nextIndex = scrollQueue.current?.shift();
+            if (nextIndex !== undefined) {
+                setScrollTargetIndex(nextIndex);
+            }
+        }
     };
-    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);
+    // Handle scrolling when user clicks the arrow icons
+    useUpdateEffect(()=>{
+        if (!ref.current) {
+            return;
+        }
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+        }
+        isScrollingProgrammatically.current = true;
+        ref.current.children[scrollTargetIndex]?.scrollIntoView({
+            behavior: 'smooth',
+            inline: 'start',
+            block: 'nearest'
+        });
+        if (prevIndex.current !== scrollTargetIndex && onChange) {
+            onChange({
+                index: scrollTargetIndex,
+                id: ref.current.children[scrollTargetIndex]?.id,
+                prevIndex: prevIndex.current,
+                prevId: ref.current.children[prevIndex.current]?.id
+            });
+        }
+        prevIndex.current = scrollTargetIndex;
+        scrollTimeoutRef.current = setTimeout(()=>{
+            isScrollingProgrammatically.current = false;
+            scrollTimeoutRef.current = null;
+            processQueue(); // Process any queued scrolls
+        }, 500);
+    }, [
+        scrollTargetIndex
+    ]);
+    // Clean up timeout on unmount
     useEffect(()=>{
-        const { matches: userPrefersReducedMotion } = matchMedia('(prefers-reduced-motion: reduce)');
-        setUserPrefersReducedMotion(userPrefersReducedMotion);
-        // Autoplay the video if the user does not prefer reduced motion
-        setShouldPlay(!userPrefersReducedMotion);
+        return ()=>{
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+        };
     }, []);
-    // 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));
+    const onScroll = useDebouncedCallback((event)=>{
+        // Ignore scroll events when we're programmatically scrolling
+        if (isScrollingProgrammatically.current) {
+            return;
+        }
+        const target = event.target;
+        const containerRect = target.getBoundingClientRect();
+        // Calculate the index of the item that is currently in view
+        const newScrollTargetIndex = Array.from(target.children).findIndex((child)=>{
+            const rect = child.getBoundingClientRect();
+            // Check if the item is more than 50% visible within the container
+            const visibleWidth = Math.min(rect.right, containerRect.right) - Math.max(rect.left, containerRect.left);
+            const itemWidth = rect.width;
+            return visibleWidth / itemWidth > 0.5;
+        });
+        if (newScrollTargetIndex !== -1 && newScrollTargetIndex !== scrollTargetIndex) {
+            if (onChange) {
+                onChange({
+                    index: newScrollTargetIndex,
+                    id: target.children[newScrollTargetIndex]?.id,
+                    prevIndex: prevIndex.current,
+                    prevId: target.children[prevIndex.current]?.id
+                });
+            }
+            // Update the index and prevIndex
+            setScrollTargetIndex(newScrollTargetIndex);
+            prevIndex.current = newScrollTargetIndex;
+        }
+    }, 150);
+    const handlePrevious = ()=>{
+        const targetIndex = scrollTargetIndex - 1;
+        if (targetIndex < 0) return;
+        if (isScrollingProgrammatically.current) {
+            // If we're already scrolling, queue this action
+            scrollQueue.current = [
+                targetIndex
+            ];
         } else {
-            videoRef.current.pause();
-            setIsPlaying(false);
+            setScrollTargetIndex(targetIndex);
         }
-    }, [
-        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 max-h-[inherit] w-full cursor-pointer rounded-[inherit] 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);
+    };
+    const handleNext = ()=>{
+        if (!ref.current) return;
+        const targetIndex = scrollTargetIndex + 1;
+        if (targetIndex >= ref.current.children.length) return;
+        if (isScrollingProgrammatically.current) {
+            // If we're already scrolling, queue this action
+            scrollQueue.current = [
+                targetIndex
+            ];
+        } else {
+            setScrollTargetIndex(targetIndex);
+        }
+    };
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "carousel",
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    CarouselItemsContext,
+                    {
+                        ref,
+                        onScroll
                     }
-                },
-                children: /*#__PURE__*/ jsx("source", {
-                    src: src,
-                    type: `video/${format}`
-                })
-            }),
-            userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
-                "data-slot": "video-loop-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', 'rounded-[inherit]', // 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'
+                ],
+                [
+                    ButtonContext,
+                    {
+                        slots: {
+                            [DEFAULT_SLOT]: {},
+                            prev: {
+                                'aria-label': previous[locale],
+                                onPress: handlePrevious
+                            },
+                            next: {
+                                isIconOnly: true,
+                                'aria-label': next[locale],
+                                onPress: handleNext
+                            }
+                        }
+                    }
+                ]
+            ],
+            children: /*#__PURE__*/ jsxs("div", {
+                ...rest,
+                className: cx(className, 'relative rounded-3xl', // If any <CarouselItems/> (the scroll-snap container) or <VideoLoop/> component is focused, apply custom focus styles around the carousel, this makes ensures that the focus outline is visible around the carousel in all cases
+                '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus', '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus-offset', // Unset the default focus outline for potential video loop buttons, as it interferes with the custom focus styles for the carousel
+                '**:data-[slot="video-loop-button"]:focus-visible:outline-none'),
+                children: [
+                    children,
+                    /*#__PURE__*/ jsxs(_CarouselControls, {
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                isIconOnly: true,
+                                slot: "prev",
+                                variant: "primary",
+                                color: "white",
+                                className: cx('group/carousel-previous', hasReachedScrollStart && 'invisible'),
+                                children: /*#__PURE__*/ jsx(ChevronLeft, {
+                                    className: "group-hover/carousel-previous:motion-safe:-translate-x-1 transition-transform"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                isIconOnly: true,
+                                slot: "next",
+                                variant: "primary",
+                                color: "white",
+                                className: cx('group/carousel-next', hasReachedScrollEnd && 'invisible'),
+                                children: /*#__PURE__*/ jsx(ChevronRight, {
+                                    className: "transition-transform group-hover/carousel-next:motion-safe:translate-x-1"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+/**
+ * This is internal for now, but we will expose it in the future when we support more flexible positioning of prev/next and other actions.
+ * It is used to render the prev/next buttons in the carousel for now.
+ */ const _CarouselControls = ({ children, className })=>/*#__PURE__*/ jsx("div", {
+        className: cx(className, 'absolute right-6 bottom-6 flex gap-x-2', // Make it easier to position in full-bleed hero variants (these style have no other side effects)
+        'items-end *:h-fit'),
+        "data-slot": "carousel-controls",
+        children: children
+    });
+const CarouselItemsContext = /*#__PURE__*/ createContext({
+    ref: null
+});
+const CarouselItems = ({ className, children })=>{
+    const handleKeyDown = (event)=>{
+        // Prevent default behavior when holding down arrow keys (when repeat is true)
+        // The default behavior in scroll snapping causes a staggering scroll effect that feels janky
+        if (event.repeat && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            event.preventDefault();
+        }
+    };
+    return /*#__PURE__*/ jsx(CarouselItemsContext.Consumer, {
+        children: ({ ref, onScroll })=>// biome-ignore lint/a11y/noStaticElementInteractions: The keydown handler is only to prevent undesired scrolling behavior when using the arrow keys
+            /*#__PURE__*/ jsx("div", {
+                "data-slot": "carousel-items",
+                className: cx(className, [
+                    'scrollbar-hidden',
+                    'flex',
+                    'snap-x',
+                    'snap-mandatory',
+                    'overflow-x-auto',
+                    'outline-none',
+                    'rounded-[inherit]'
                 ]),
-                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
+                ref: ref,
+                onScroll: onScroll,
+                onKeyDown: handleKeyDown,
+                children: children
             })
-        ]
+    });
+};
+const CarouselItem = ({ className, children, id })=>{
+    return /*#__PURE__*/ jsx("div", {
+        className: cx(className, 'shrink-0 basis-full snap-start'),
+        "data-slot": "carousel-item",
+        id: id,
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    MediaContext,
+                    {
+                        fit: 'cover',
+                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:h-full *:w-full', 'aspect-square max-sm:data-[fit="contain"]:*:object-cover sm:aspect-4/3 md:aspect-3/2 lg:aspect-2/1')
+                    }
+                ]
+            ],
+            children: children
+        })
     });
 };
 
-const disclosureButtonVariants = cva({
+const formField = cx('group flex flex-col gap-2');
+const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const input = cva({
     base: [
-        '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]'
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        // invalid styles
+        'group-data-invalid:ring-focus group-data-invalid:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
     ],
     variants: {
-        withChevron: {
-            true: '[&[aria-expanded="true"]_svg]:rotate-180',
-            false: null
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
         },
-        /**
-     * 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'
+        isGrouped: {
+            false: 'px-3',
+            true: '!ring-0 flex-1'
         }
     },
     defaultVariants: {
-        withChevron: false,
-        isIconOnly: false
+        focusModifier: 'focus',
+        isGrouped: false
     }
 });
-const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
-    const [props, ref] = useContextProps(restProps, _ref, ButtonContext$1);
-    return /*#__PURE__*/ jsxs(Button$1, {
-        ...props,
-        ref: ref,
-        className: disclosureButtonVariants({
-            className,
-            withChevron,
-            isIconOnly
-        }),
-        slot: "trigger",
+const inputGroup = cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+]);
+const dropdown = {
+    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cx('max-h-[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) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, formFieldError),
+        slot: "errorMessage",
+        children: children
+    });
+}
+
+const defaultClasses$1 = cx([
+    '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.
+function CheckmarkBox() {
+    return /*#__PURE__*/ jsx("span", {
+        className: cx([
+            'relative left-0 grid flex-none place-content-center rounded-sm border-2 border-black text-white',
+            // 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.
+            // For the ::before psuedo element the line height of the label is always 1em.
+            // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
+            // 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:group-not-data-hovered:group-not-data-invalid:border-blue group-data-selected:group-not-data-hovered:group-not-data-invalid:bg-blue',
+            'group-data-selected:group-not-data-hovered:group-data-invalid:border-red group-data-selected:group-not-data-hovered:group-data-invalid:bg-red',
+            // focus
+            'group-data-focus-visible:outline-focus-offset',
+            // hovered
+            'group-data-hovered:group-data-invalid:bg-red-light',
+            'group-data-hovered:border-blue',
+            'group-data-hovered:bg-sky',
+            'group-data-hovered:group-data-selected:group-not-data-invalid:border-blue-dark',
+            'group-data-hovered:group-data-selected:group-not-data-invalid:bg-blue-dark',
+            // 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:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
+        ]),
+        children: /*#__PURE__*/ jsx(Check, {
+            className: "h-full w-full opacity-0 group-data-invalid:group-data-hovered:group-data-selected:text-red group-data-selected:opacity-100"
+        })
+    });
+}
+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 = !!errorMessage || _isInvalid;
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
+            value: {
+                'aria-describedby': description ? descriptionId : undefined,
+                'aria-errormessage': errorMessage ? errorMessageId : undefined
+            },
+            children: [
+                /*#__PURE__*/ jsxs(Checkbox$1, {
+                    ...restProps,
+                    className: cx(className, defaultClasses$1),
+                    isInvalid: isInvalid,
+                    children: [
+                        /*#__PURE__*/ jsx(CheckmarkBox, {}),
+                        children
+                    ]
+                }),
+                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, {
+                    className: "mt-2 block",
+                    id: errorMessageId,
+                    children: errorMessage
+                })
+            ]
+        })
+    });
+}
+
+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;
+    return /*#__PURE__*/ jsx(Label$1, {
+        className: cx(className, 'font-semibold leading-7'),
+        ...restProps,
+        children: children
+    });
+}
+
+function CheckboxGroup(props) {
+    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...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 || _isInvalid;
+    return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
+        ...restProps,
+        className: cx(className, 'flex flex-col gap-2'),
+        isInvalid: isInvalid,
+        isRequired: isRequired,
         children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
             children,
-            withChevron && /*#__PURE__*/ jsx(ChevronDown, {
-                className: "flex-none transition-transform duration-300 motion-reduce:transition-none"
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
-};
-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);
-        }
+}
+
+function InputAddonDivider() {
+    return /*#__PURE__*/ jsx("span", {
+        className: "block h-6 w-px flex-none bg-black"
     });
-    const isDisabled = props.isDisabled || groupState?.isDisabled || false;
-    const domProps = filterDOMProps(otherProps);
-    const { isFocusVisible: isFocusVisibleWithin } = useFocusRing({
-        within: true
+}
+
+const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
+        ...restProps,
+        className: cx(dropdown.listbox, className)
     });
-    const panelRef = useRef(null);
-    const { buttonProps, panelProps } = useDisclosure({
+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,
-        isExpanded,
-        isDisabled
-    }, state, panelRef);
-    const { role: _, ...propsWithoutRole } = panelProps;
-    return /*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                DisclosureContext,
-                state
-            ],
-            [
-                ButtonContext$1,
-                {
-                    slots: {
-                        [DEFAULT_SLOT]: {},
-                        trigger: buttonProps
-                    }
-                }
-            ],
-            [
-                DisclosurePanelContext,
-                {
-                    ...propsWithoutRole,
-                    panelRef
-                }
-            ],
-            [
-                DisclosureStateContext,
-                state
-            ]
-        ],
-        children: /*#__PURE__*/ jsx("div", {
-            ...domProps,
-            className: otherProps.className,
-            ref: ref,
-            "data-focus-visible-within": isFocusVisibleWithin || undefined,
-            "data-expanded": state.isExpanded || undefined,
-            "data-disabled": isDisabled || undefined,
-            children: typeof children === 'function' ? children({
-                isExpanded: state.isExpanded,
-                isFocusVisibleWithin,
-                isDisabled,
-                state,
-                defaultChildren: null
-            }) : children
-        })
+        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
+                ]
+            })
     });
 };
-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
+/**
+ * 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')
     });
-    const domProps = filterDOMProps(props);
-    return /*#__PURE__*/ jsx("div", {
-        className: cx('grid transition-all duration-300 motion-reduce:transition-none', disclosureContext?.isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'),
-        children: /*#__PURE__*/ jsx("div", {
-            className: "overflow-hidden",
-            children: /*#__PURE__*/ jsx("div", {
-                ref: mergeRefs(ref, panelRef),
-                ...mergeProps(panelProps, focusWithinProps),
-                ...restProps,
-                ...domProps,
-                "data-focus-visible-within": isFocusVisibleWithin || undefined,
-                className: cx(className, '[content-visibility:visible]'),
-                role: role,
-                "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby,
-                children: /*#__PURE__*/ jsx(Provider, {
-                    values: [
-                        // Reset the context to avoid passing the same context to children, in case of nested Disclosures
-                        [
-                            DisclosureContext,
-                            null
-                        ],
-                        [
-                            ButtonContext$1,
-                            null
-                        ]
-                    ],
+/**
+ * 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 Combobox(props) {
+    const { className, children, description, errorMessage, isPending, 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 || _isInvalid;
+    return /*#__PURE__*/ jsxs(ComboBox, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsxs(Group, {
+                className: inputGroup,
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        className: input({
+                            isGrouped: true
+                        }),
+                        ref: ref
+                    }),
+                    /*#__PURE__*/ jsx(Button$1, {
+                        children: isPending ? /*#__PURE__*/ jsx(LoadingSpinner, {
+                            className: "animate-spin"
+                        }) : /*#__PURE__*/ jsx(ChevronDown, {
+                            className: dropdown.chevronIcon
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                // FIXME: The trigger width doesn't include the padding of the group, so for now we have to apply this workaround.
+                // Also... the combobox border gets a pixel wider when focused, so we account for that as well when calculating the width
+                // and the offset.
+                // The input gutter should probably be moved to a theme variable instead of using the hardcoded value as here.
+                className: cx(dropdown.popover, 'min-w-[calc(var(--trigger-width)+26px)]'),
+                crossOffset: -13,
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    className: dropdown.listbox,
                     children: children
                 })
             })
-        })
+        ]
     });
+}
+
+/**
+ * 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;
 };
 
 /**
@@ -1807,222 +1696,66 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                         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
-                    })
-                }),
-                controlledOrUncontrolledFiles.length > 0 && /*#__PURE__*/ jsx("ul", {
-                    className: "mt-4 grid max-w-fit 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('self-start', '-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$1,
-                            {
-                                // This is necessary to support multiple close buttons
-                                slots: {
-                                    // We need to define default slot in order to also support non-slotted buttons (i.e. buttons without slot prop)
-                                    [DEFAULT_SLOT]: {
-                                        className: 'w-fit'
-                                    },
-                                    close: {
-                                        onPress: close,
-                                        className: 'w-fit'
-                                    }
-                                }
-                            }
-                        ]
-                    ],
-                    children: children
+                        children: children
+                    })
+                }),
+                controlledOrUncontrolledFiles.length > 0 && /*#__PURE__*/ jsx("ul", {
+                    className: "mt-4 grid max-w-fit 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('self-start', '-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 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',
-        // Resting
-        'border-2 border-black bg-white text-black',
-        //Focus
-        'focus-visible:outline-focus-offset',
-        // Hover
-        ' data-hovered:bg-sky',
-        // Selected
-        // Allows removing
-        'data-allows-removing:border-transparent',
-        'data-allows-removing:bg-blue',
-        'data-allows-removing:data-hovered:bg-blue-dark',
-        'data-allows-removing:text-white',
-        // Selected
-        'aria-selected:border-transparent',
-        'aria-selected:bg-blue',
-        'aria-selected:data-hovered:bg-blue-dark',
-        'aria-selected:text-white',
-        //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
+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
     });
 }
 
@@ -2103,7 +1836,7 @@ const variants = cva({
         variant: 'standard'
     }
 });
-const Hero = ({ variant, className, children })=>{
+const Hero = ({ variant, className, children, ...rest })=>{
     const variantsClassName = variants({
         variant,
         className
@@ -2131,188 +1864,317 @@ const Hero = ({ variant, className, children })=>{
         ],
         children: /*#__PURE__*/ jsx("div", {
             className: cx(variantsClassName, className),
+            ...rest,
             children: children
         })
     });
 };
 
-const Carousel = ({ className, children, onChange })=>{
-    const ref = useRef(null);
-    const locale = _useLocale();
-    const { previous, next } = translations$1;
-    const [scrollTargetIndex, setScrollTargetIndex] = useState(0);
-    const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
-    const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
-    useEffect(()=>{
-        setHasReachedScrollStart(scrollTargetIndex === 0);
-        setHasReachedScrollEnd(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
-    }, [
-        scrollTargetIndex
-    ]);
-    // Keep track of the previous index to determine if the user is scrolling forward or backward
-    // This is used to determine which callback to call (onPrev or onNext)
-    const prevIndex = useRef(0);
-    // Handle scrolling when user clicks the arrow icons
-    useUpdateEffect(()=>{
-        if (!ref.current) return;
-        ref.current.children[scrollTargetIndex]?.scrollIntoView({
-            behavior: 'smooth',
-            inline: 'start',
-            block: 'nearest'
-        });
-        if (prevIndex.current !== scrollTargetIndex && onChange) {
-            onChange({
-                index: scrollTargetIndex,
-                id: ref.current.children[scrollTargetIndex]?.id,
-                prevIndex: prevIndex.current,
-                prevId: ref.current.children[prevIndex.current]?.id
-            });
-        }
-        prevIndex.current = scrollTargetIndex;
-    }, [
-        scrollTargetIndex
-    ]);
-    const onScroll = useDebouncedCallback((event)=>{
-        const target = event.target;
-        // Calculate the index of the item that is currently in view
-        const newScrollTargetIndex = Array.from(target.children).findIndex((child)=>{
-            const rect = child.getBoundingClientRect();
-            return rect.left >= 0 && rect.right <= window.innerWidth && rect.top >= 0;
-        });
-        if (newScrollTargetIndex !== -1) {
-            setScrollTargetIndex(newScrollTargetIndex);
-        }
-    }, 100);
+/**
+ * A basic link component that extends react-aria-components Link with consistent styling.
+ * Provides accessible focus styles and maintains design system consistency.
+ */ const CustomLink = ({ children, className, ...restProps })=>{
+    return /*#__PURE__*/ jsx(Link, {
+        ...restProps,
+        className: cx(className, 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset [&>svg]:shrink-0'),
+        children: children
+    });
+};
+
+const LinkList = ({ className, children, ...restProps })=>{
+    const numberofLinks = Children.count(children);
     return /*#__PURE__*/ jsx("div", {
-        "data-slot": "carousel",
-        children: /*#__PURE__*/ jsx(Provider, {
-            values: [
-                [
-                    CarouselItemsContext,
-                    {
-                        ref,
-                        onScroll
-                    }
-                ],
-                [
-                    ButtonContext,
-                    {
-                        slots: {
-                            prev: {
-                                'aria-label': previous[locale],
-                                onPress: ()=>{
-                                    if (scrollTargetIndex > 0) {
-                                        setScrollTargetIndex((prev)=>prev - 1);
+        className: cx(className, '@container'),
+        ...restProps,
+        children: /*#__PURE__*/ jsx("ul", {
+            className: cx('min-w-fit', // Hide dividers at the top of the list (overflow-y) and prevents arrow icon from overflowing container when animated to the right (overflow-x)
+            'overflow-hidden', // Add a small gap between items that fits the divider lines (this way the divider line don't take up any space in each item)
+            'grid auto-rows-max gap-y-0.25', // Gaps for when the list is displayed in multiple columns
+            '@lg:gap-x-12 @md:gap-x-9 @sm:gap-x-4 @xl:gap-x-16', numberofLinks > 5 && [
+                '@xl:grid-cols-2',
+                (numberofLinks === 9 || numberofLinks > 10) && '@4xl:grid-cols-3'
+            ]),
+            children: children
+        })
+    });
+};
+const LinkListItem = ({ children, isExternal, className, ...restProps })=>{
+    let Icon = ArrowRight;
+    let iconTransition = 'group-hover:motion-safe:translate-x-1';
+    if (restProps.download) {
+        Icon = Download;
+        iconTransition = 'group-hover:motion-safe:translate-y-1';
+    } else if (isExternal) {
+        iconTransition = 'group-hover:motion-safe:-translate-y-0.5 group-hover:motion-safe:translate-x-0.5';
+        Icon = LinkExternal;
+    }
+    return /*#__PURE__*/ jsx("li", {
+        // Creates divider lines that works in any grid layout and with the focus ring
+        className: "after:-top-0.25 relative p-0.75 after:absolute after:right-0 after:left-0 after:h-0.25 after:w-full after:bg-gray-light",
+        children: /*#__PURE__*/ jsxs(Link, {
+            ...restProps,
+            className: cx(className, 'group paragraph flex cursor-pointer justify-between gap-x-2 py-3.5 font-medium no-underline focus-visible:outline-focus'),
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(Icon, {
+                    className: cx('shrink-0 motion-safe:transition-transform', iconTransition)
+                })
+            ]
+        })
+    });
+};
+
+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",
+                                                        variant: "tertiary",
+                                                        className: "!px-2.5 data-focus-visible:outline-focus-inset",
+                                                        "aria-label": translations$1.close[locale],
+                                                        children: /*#__PURE__*/ jsx(Close, {})
+                                                    })
+                                                ]
+                                            })
                                     }
-                                },
-                                isDisabled: hasReachedScrollStart
-                            },
-                            next: {
-                                isIconOnly: true,
-                                'aria-label': next[locale],
-                                onPress: ()=>{
-                                    if (!ref.current) return;
-                                    if (scrollTargetIndex < ref.current.children.length - 1) {
-                                        setScrollTargetIndex((prev)=>prev + 1);
+                                }
+                            }
+                        ],
+                        [
+                            ButtonContext$1,
+                            {
+                                // This is necessary to support multiple close buttons
+                                slots: {
+                                    // We need to define default slot in order to also support non-slotted buttons (i.e. buttons without slot prop)
+                                    [DEFAULT_SLOT]: {
+                                        className: 'w-fit'
+                                    },
+                                    close: {
+                                        onPress: close,
+                                        className: 'w-fit'
                                     }
-                                },
-                                isDisabled: hasReachedScrollEnd
+                                }
                             }
-                        }
-                    }
-                ]
-            ],
-            children: /*#__PURE__*/ jsxs("div", {
-                className: cx(className, 'relative rounded-3xl', // If any <CarouselItems/> (the scroll-snap container) or <VideoLoop/> component is focused, apply custom focus styles around the carousel, this makes ensures that the focus outline is visible around the carousel in all cases
-                '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus', '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus-offset', // Unset the default focus outline for potential video loop buttons, as it interferes with the custom focus styles for the carousel
-                '**:data-[slot="video-loop-button"]:focus-visible:outline-none'),
-                children: [
-                    children,
-                    /*#__PURE__*/ jsxs(_CarouselControls, {
-                        children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                isIconOnly: true,
-                                slot: "prev",
-                                variant: "primary",
-                                color: "white",
-                                className: cx('group/carousel-previous', hasReachedScrollStart && 'invisible'),
-                                children: /*#__PURE__*/ jsx(ChevronLeft, {
-                                    className: "group-hover/carousel-previous:motion-safe:-translate-x-1 transition-transform"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx(Button, {
-                                isIconOnly: true,
-                                slot: "next",
-                                variant: "primary",
-                                color: "white",
-                                className: cx('group/carousel-next', hasReachedScrollEnd && 'invisible'),
-                                children: /*#__PURE__*/ jsx(ChevronRight, {
-                                    className: "transition-transform group-hover/carousel-next:motion-safe:translate-x-1"
-                                })
-                            })
                         ]
-                    })
-                ]
+                    ],
+                    children: children
+                })
             })
-        })
     });
 };
-/**
- * This is internal for now, but we will expose it in the future when we support more flexible positioning of prev/next and other actions.
- * It is used to render the prev/next buttons in the carousel for now.
- */ const _CarouselControls = ({ children, className })=>/*#__PURE__*/ jsx("div", {
-        className: cx(className, 'absolute right-6 bottom-6 flex gap-x-2', // Make it easier to position in full-bleed hero variants (these style have no other side effects)
-        'items-end *:h-fit'),
-        "data-slot": "carousel-controls",
-        children: children
-    });
-const CarouselItemsContext = /*#__PURE__*/ createContext({
-    ref: null
-});
-const CarouselItems = ({ className, children })=>/*#__PURE__*/ jsx(CarouselItemsContext.Consumer, {
-        children: ({ ref, onScroll })=>/*#__PURE__*/ jsx("div", {
-                "data-slot": "carousel-items",
-                className: cx(className, [
-                    'scrollbar-hidden',
-                    'flex',
-                    'snap-x',
-                    'snap-mandatory',
-                    'overflow-x-auto',
-                    'outline-none',
-                    'rounded-[inherit]'
-                ]),
+
+// This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
+const inputVariants$1 = compose(input, cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        },
+        autoWidth: {
+            true: 'max-w-fit',
+            false: ''
+        }
+    }
+}));
+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 || _isInvalid;
+    return /*#__PURE__*/ jsxs(NumberField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
+                className: cx(inputGroup, {
+                    'w-fit': !!size
+                }),
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: inputVariants$1({
+                            textAlign,
+                            isGrouped: true,
+                            autoWidth: !!size
+                        }),
+                        ref: ref,
+                        size: size
+                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                className: inputVariants$1({
+                    textAlign,
+                    autoWidth: !!size
+                }),
                 ref: ref,
-                // When the SnapEvent is supported: https://developer.mozilla.org/en-US/docs/Web/API/SnapEvent
-                // We can use the scrollsnapchange event to detect when the user has scrolled to a new item.
-                // We can then use Array.from(event.target.children).indexOf(event.snapTargetInline) to calculate the index of the item that is currently in view.
-                // Another option is to use the scrollEnd event, when Safiri supports it: https://developer.apple.com/documentation/webkitjs/snap_event/scrollend_event
-                onScroll: onScroll,
-                children: children
+                size: size
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
+        ]
     });
-const CarouselItem = ({ className, children, id })=>{
-    return /*#__PURE__*/ jsx("div", {
-        className: cx(className, 'shrink-0 basis-full snap-start'),
-        "data-slot": "carousel-item",
-        id: id,
-        children: /*#__PURE__*/ jsx(Provider, {
-            values: [
-                [
-                    MediaContext,
-                    {
-                        fit: 'cover',
-                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:h-full *:w-full', 'aspect-1/1 max-sm:data-[fit="contain"]:*:object-cover sm:aspect-4/3 md:aspect-3/2 lg:aspect-2/1')
-                    }
+}
+
+const defaultClasses = cx([
+    '-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.
+    // For the ::before psuedo element the line height of the label is always 1em.
+    // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
+    // 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-blue data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
+    // hover
+    'data-hovered:data-selected:before:border-blue-dark data-hovered:data-invalid:before:bg-red-light data-hovered:data-selected:before:bg-blue-dark data-hovered:before:border-blue data-hovered:before:bg-sky',
+    // focus
+    '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: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) {
+    const { children, className, description, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Radio$1, {
+        ...restProps,
+        className: cx(className, defaultClasses),
+        children: /*#__PURE__*/ jsxs("div", {
+            children: [
+                children,
+                description && /*#__PURE__*/ jsx(Description, {
+                    className: "mt-2 block",
+                    children: description
+                })
+            ]
+        })
+    });
+}
+
+function RadioGroup(props) {
+    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, value, ...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 || _isInvalid;
+    return /*#__PURE__*/ jsxs(RadioGroup$1, {
+        ...restProps,
+        // Tabindex is set to -1 when the value is an empty string, which makes the radio input not focusable
+        value: value === '' ? undefined : value,
+        className: cx(className, 'flex flex-col gap-2'),
+        isInvalid: isInvalid,
+        isRequired: isRequired,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            children,
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+
+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 || _isInvalid;
+    return /*#__PURE__*/ jsxs(Select$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsxs(Button$1, {
+                className: cx(input({
+                    focusModifier: 'visible'
+                }), // How to reuse placeholder text?
+                'inline-flex cursor-default items-center gap-2'),
+                // See https://github.com/adobe/react-spectrum/discussions/4792#discussioncomment-6492305
+                ref: ref,
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {
+                        className: "flex-1 truncate text-left data-[placeholder]:text-[#727070]"
+                    }),
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: dropdown.chevronIcon
+                    })
                 ]
-            ],
-            children: children
-        })
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                className: dropdown.popover,
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    className: dropdown.listbox,
+                    children: children
+                })
+            })
+        ]
     });
-};
+}
 
 function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, className, iconClassName }) {
     const Icon = direction === 'left' ? ChevronLeft : ChevronRight;
     return(// biome-ignore lint/a11y/useKeyWithClickEvents: This button is only for mouse interaction to help users scroll. Keyboard and screen reader users can navigate the content directly without needing these scroll helpers.
+    // biome-ignore lint/a11y/noStaticElementInteractions: This button is only for mouse interaction to help users scroll. Keyboard and screen reader users can navigate the content directly without needing these scroll helpers.
     /*#__PURE__*/ jsx("div", {
         onClick: onClick,
         className: cx(// Base scroll button styling
@@ -2375,6 +2237,126 @@ function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, cla
     };
 }
 
+const tableVariants = cva({
+    base: [
+        'relative'
+    ],
+    variants: {
+        variant: {
+            default: '',
+            'zebra-striped': ''
+        }
+    }
+});
+const tableRowVariants = cva({
+    base: [
+        'data-focus-visible:outline-focus-inset',
+        'group-data-[variant=zebra-striped]:odd:bg-white',
+        'group-data-[variant=zebra-striped]:even:bg-sky-lightest'
+    ]
+});
+/**
+ * A container component for displaying tabular data with horizontal scrolling support.
+ */ function Table(props) {
+    const { className, children, variant = 'default', ...restProps } = props;
+    const { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll();
+    const handleScroll = useCallback((direction)=>{
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        const scrollAmount = container.clientWidth * 0.8;
+        container.scrollBy({
+            left: direction === 'left' ? -scrollAmount : scrollAmount,
+            behavior: 'smooth'
+        });
+    }, [
+        scrollContainerRef
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: tableVariants({
+            className,
+            variant
+        }),
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "relative overflow-hidden",
+            children: [
+                /*#__PURE__*/ jsx(ScrollButton, {
+                    direction: "left",
+                    onClick: ()=>handleScroll('left'),
+                    isVisible: canScrollLeft,
+                    hasScrollingOccurred: hasScrollingOccurred,
+                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
+                    iconClassName: "h-5 w-5"
+                }),
+                /*#__PURE__*/ jsx(ScrollButton, {
+                    direction: "right",
+                    onClick: ()=>handleScroll('right'),
+                    isVisible: canScrollRight,
+                    hasScrollingOccurred: hasScrollingOccurred,
+                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
+                    iconClassName: "h-5 w-5"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    ref: scrollContainerRef,
+                    className: "scrollbar-hidden overflow-x-auto",
+                    style: {
+                        WebkitOverflowScrolling: 'touch'
+                    },
+                    children: /*#__PURE__*/ jsx(Table$1, {
+                        ...restProps,
+                        className: "group w-full min-w-fit",
+                        "data-variant": variant,
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+}
+/**
+ * Container for table column headers.
+ */ function TableHeader({ className, children, ...restProps }) {
+    return /*#__PURE__*/ jsx(TableHeader$1, {
+        ...restProps,
+        className: cx(className, 'border-black border-b'),
+        children: children
+    });
+}
+function TableColumn(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Column, {
+        ...restProps,
+        className: cx(className, 'px-4 py-3 text-left font-medium text-black text-sm', 'data-focus-visible:outline-focus-inset', 'min-w-fit whitespace-nowrap'),
+        children: children
+    });
+}
+/**
+ * Container for table rows.
+ */ function TableBody({ className, children, ...restProps }) {
+    return /*#__PURE__*/ jsx(TableBody$1, {
+        ...restProps,
+        className: className,
+        children: children
+    });
+}
+function TableRow(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Row, {
+        ...restProps,
+        className: tableRowVariants({
+            className
+        }),
+        children: children
+    });
+}
+function TableCell(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Cell, {
+        ...restProps,
+        className: cx(className, 'px-4 py-3 text-black text-sm leading-relaxed', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset'),
+        children: children
+    });
+}
+
 const tabsVariants = cva({
     base: [
         'grid gap-4'
@@ -2529,180 +2511,244 @@ const tabsVariants = cva({
     });
 }
 
-const tableVariants = cva({
-    base: [
-        'relative'
-    ],
-    variants: {
-        variant: {
-            default: '',
-            'zebra-striped': ''
-        }
-    }
-});
-const tableRowVariants = cva({
+const tagVariants = cva({
     base: [
-        'data-focus-visible:outline-focus-inset',
-        'group-data-[variant=zebra-striped]:odd:bg-white',
-        'group-data-[variant=zebra-striped]:even:bg-sky-lightest'
+        'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 font-medium text-sm transition-colors duration-200',
+        // Resting
+        'border-2 border-black bg-white text-black',
+        //Focus
+        'focus-visible:outline-focus-offset',
+        // Hover
+        'data-hovered:bg-sky',
+        // Selected
+        // Allows removing
+        'data-allows-removing:border-transparent',
+        'data-allows-removing:bg-blue',
+        'data-allows-removing:data-hovered:bg-blue-dark',
+        'data-allows-removing:text-white',
+        // Selected
+        'aria-selected:border-transparent',
+        'aria-selected:bg-blue',
+        'aria-selected:data-hovered:bg-blue-dark',
+        'aria-selected:text-white',
+        //Icons
+        '[&_svg]:h-4 [&_svg]:w-4'
     ]
 });
 /**
- * A container component for displaying tabular data with horizontal scrolling support.
- */ function Table(props) {
-    const { className, children, variant = 'default', ...restProps } = props;
-    const { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll();
-    const handleScroll = useCallback((direction)=>{
-        const container = scrollContainerRef.current;
-        if (!container) return;
-        const scrollAmount = container.clientWidth * 0.8;
-        container.scrollBy({
-            left: direction === 'left' ? -scrollAmount : scrollAmount,
-            behavior: 'smooth'
-        });
-    }, [
-        scrollContainerRef
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: tableVariants({
-            className,
-            variant
-        }),
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "relative overflow-hidden",
-            children: [
-                /*#__PURE__*/ jsx(ScrollButton, {
-                    direction: "left",
-                    onClick: ()=>handleScroll('left'),
-                    isVisible: canScrollLeft,
-                    hasScrollingOccurred: hasScrollingOccurred,
-                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
-                    iconClassName: "h-5 w-5"
-                }),
-                /*#__PURE__*/ jsx(ScrollButton, {
-                    direction: "right",
-                    onClick: ()=>handleScroll('right'),
-                    isVisible: canScrollRight,
-                    hasScrollingOccurred: hasScrollingOccurred,
-                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
-                    iconClassName: "h-5 w-5"
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    ref: scrollContainerRef,
-                    className: "scrollbar-hidden overflow-x-auto",
-                    style: {
-                        WebkitOverflowScrolling: 'touch'
-                    },
-                    children: /*#__PURE__*/ jsx(Table$1, {
-                        ...restProps,
-                        className: "group w-full min-w-fit",
-                        "data-variant": variant,
-                        children: children
-                    })
-                })
-            ]
-        })
-    });
-}
-/**
- * Container for table column headers.
- */ function TableHeader({ className, children, ...restProps }) {
-    return /*#__PURE__*/ jsx(TableHeader$1, {
+ * 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: cx(className, 'border-black border-b'),
+        className: className,
+        selectionMode: onRemove ? 'none' : selectionMode,
+        onRemove: onRemove,
         children: children
     });
 }
-function TableColumn(props) {
+/**
+ * A container component for Tag components within a TagGroup.
+ */ function TagList(props) {
     const { className, children, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Column, {
+    return /*#__PURE__*/ jsx(TagList$1, {
         ...restProps,
-        className: cx(className, 'px-4 py-3 text-left font-medium text-black text-sm', 'data-focus-visible:outline-focus-inset', 'min-w-fit whitespace-nowrap'),
+        className: cx('flex flex-wrap gap-2', className),
         children: children
     });
 }
 /**
- * Container for table rows.
- */ function TableBody({ className, children, ...restProps }) {
-    return /*#__PURE__*/ jsx(TableBody$1, {
-        ...restProps,
-        className: className,
-        children: children
-    });
-}
-function TableRow(props) {
+ * Interactive tag component for selections, filtering, and categorization.
+ */ function Tag(props) {
     const { className, children, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Row, {
-        ...restProps,
-        className: tableRowVariants({
+    const textValue = typeof children === 'string' ? children : undefined;
+    return /*#__PURE__*/ jsx(Tag$1, {
+        className: tagVariants({
             className
         }),
-        children: children
-    });
-}
-function TableCell(props) {
-    const { className, children, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Cell, {
+        textValue: textValue,
         ...restProps,
-        className: cx(className, 'px-4 py-3 text-black text-sm leading-relaxed', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset'),
-        children: children
+        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
     });
 }
 
-/**
- * A basic link component that extends react-aria-components Link with consistent styling.
- * Provides accessible focus styles and maintains design system consistency.
- */ const CustomLink = ({ children, className, ...restProps })=>{
-    return /*#__PURE__*/ jsx(Link, {
+function TextArea(props) {
+    const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ref, ...restProps } = props;
+    const isInvalid = !!errorMessage || _isInvalid;
+    return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
-        className: cx(className, 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset [&>svg]:shrink-0'),
-        children: children
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsx(TextArea$1, {
+                className: input(),
+                rows: rows,
+                ref: ref
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
     });
-};
+}
 
-const LinkList = ({ className, children, ...restProps })=>{
-    const numberofLinks = Children.count(children);
-    return /*#__PURE__*/ jsx("div", {
-        className: cx(className, '@container'),
-        ...restProps,
-        children: /*#__PURE__*/ jsx("ul", {
-            className: cx('min-w-fit', // Hide dividers at the top of the list (overflow-y) and prevents arrow icon from overflowing container when animated to the right (overflow-x)
-            'overflow-hidden', // Add a small gap between items that fits the divider lines (this way the divider line don't take up any space in each item)
-            'grid auto-rows-max gap-y-0.25', // Gaps for when the list is displayed in multiple columns
-            '@lg:gap-x-12 @md:gap-x-9 @sm:gap-x-4 @xl:gap-x-16', numberofLinks > 5 && [
-                '@xl:grid-cols-2',
-                (numberofLinks === 9 || numberofLinks > 10) && '@4xl:grid-cols-3'
-            ]),
-            children: children
-        })
-    });
-};
-const LinkListItem = ({ children, isExternal, className, ...restProps })=>{
-    let Icon = ArrowRight;
-    let iconTransition = 'group-hover:motion-safe:translate-x-1';
-    if (restProps.download) {
-        Icon = Download;
-        iconTransition = 'group-hover:motion-safe:translate-y-1';
-    } else if (isExternal) {
-        iconTransition = 'group-hover:motion-safe:-translate-y-0.5 group-hover:motion-safe:translate-x-0.5';
-        Icon = LinkExternal;
+const inputVariants = compose(input, cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        },
+        autoWidth: {
+            true: 'max-w-fit',
+            false: ''
+        }
     }
-    return /*#__PURE__*/ jsx("li", {
-        // Creates divider lines that works in any grid layout and with the focus ring
-        className: "after:-top-0.25 relative p-0.75 after:absolute after:right-0 after:left-0 after:h-0.25 after:w-full after:bg-gray-light",
-        children: /*#__PURE__*/ jsxs(Link, {
-            ...restProps,
-            className: cx(className, 'group paragraph flex cursor-pointer justify-between gap-x-2 py-3.5 font-medium no-underline focus-visible:outline-focus'),
-            children: [
-                /*#__PURE__*/ jsx("span", {
-                    children: children
+}));
+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 || _isInvalid;
+    return /*#__PURE__*/ jsxs(TextField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
+                className: cx(inputGroup, {
+                    'w-fit': !!size
                 }),
-                /*#__PURE__*/ jsx(Icon, {
-                    className: cx('shrink-0 motion-safe:transition-transform', iconTransition)
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: inputVariants({
+                            textAlign,
+                            isGrouped: true,
+                            autoWidth: !!size
+                        }),
+                        ref: ref,
+                        size: size
+                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                className: inputVariants({
+                    textAlign,
+                    autoWidth: !!size
+                }),
+                ref: ref,
+                size: size
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+
+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 max-h-[inherit] w-full cursor-pointer rounded-[inherit] 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", {
+                "data-slot": "video-loop-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', 'rounded-[inherit]', // 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
+            })
+        ]
     });
 };
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };