@obosbbl/grunnmuren-react 3.0.15 → 3.0.16

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, Provider, useLocale, Link, Button as Button$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, DEFAULT_SLOT, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, Header, ListBox as ListBox$1, ComboBox, Group, Input, Popover, ButtonContext as ButtonContext$1, DisclosureContext, DisclosureGroupStateContext, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, DialogTrigger as DialogTrigger$1, Modal as Modal$1, Dialog as Dialog$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Table as Table$1, TableHeader as TableHeader$1, Column, TableBody as TableBody$1, Row, Cell, Tabs as Tabs$1, TabListStateContext, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
 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 { ChevronDown, Close, InfoCircle, CheckCircle, Warning, Error, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, ArrowRight, Download, LinkExternal, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
+import { useLayoutEffect, useUpdateEffect, filterDOMProps, mergeRefs, mergeProps, useObjectRef, useFormReset } from '@react-aria/utils';
 import { cva, cx, compose } from 'cva';
 import { createContext, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { useProgressBar, useDateFormatter, useFocusRing, useDisclosure, useField } from 'react-aria';
+import { useDebouncedCallback } from 'use-debounce';
 import { useDisclosureState } from 'react-stately';
 import { useFormValidation } from '@react-aria/form';
 import { useFormValidationState } from '@react-stately/form';
 import { useControlledState } from '@react-stately/utils';
 import { PressResponder } from '@react-aria/interactions';
-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({
@@ -208,43 +189,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,1065 +223,1045 @@ 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',
-            // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
-            secondary: 'border-2 border-current no-underline hover:border-transparent',
-            tertiary: 'underline hover:no-underline'
-        },
-        /**
-     * Adjusts the color of the button for usage on different backgrounds.
-     * @default blue
-     */ color: {
-            blue: 'focus-visible:outline-focus',
-            mint: 'focus-visible:outline-focus focus-visible:outline-mint',
-            white: 'focus-visible:outline-focus focus-visible:outline-white'
-        },
-        /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
-            true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
-            false: 'gap-2.5 px-4 py-2'
-        },
-        // Make the content of the button transparent to hide it's content, but keep the button width
-        isPending: {
-            true: '!text-transparent relative',
-            false: null
+            info: 'border-[#1A7FA7] bg-sky-light',
+            success: 'border-[#0F9B6E] bg-mint-light',
+            warning: 'border-[#C57C13] bg-[#FFF2DE]',
+            danger: 'border-[#C0385D] bg-red-light'
         }
     },
-    compoundVariants: [
-        {
-            color: 'blue',
-            variant: 'primary',
-            // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
-        },
-        {
-            color: 'blue',
-            variant: 'secondary',
-            className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
-        },
-        {
-            color: 'blue',
-            variant: 'tertiary',
-            className: '[&_[role="progressbar"]]:text-black'
-        },
-        {
-            color: 'mint',
-            variant: 'primary',
-            // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
-        },
-        {
-            color: 'mint',
-            variant: 'secondary',
-            className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
-        },
-        {
-            color: 'mint',
-            variant: 'tertiary',
-            className: 'text-mint [&_[role="progressbar"]]:text-mint'
-        },
-        {
-            color: 'white',
-            variant: 'primary',
-            className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
-        },
-        {
-            color: 'white',
-            variant: 'secondary',
-            className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
-        },
-        {
-            color: 'white',
-            variant: 'tertiary',
-            className: 'text-white [&_[role="progressbar"]]:text-white'
-        }
-    ],
     defaultVariants: {
-        variant: 'primary',
-        color: 'blue',
-        isIconOnly: false,
-        isPending: false
+        variant: 'info'
     }
 });
-const ButtonContext = /*#__PURE__*/ createContext({});
-function isLinkProps$1(props) {
-    return !!props.href;
-}
-function Button({ ref = null, ...props }) {
-    [props, ref] = useContextProps(props, ref, ButtonContext);
-    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
-    const className = buttonVariants({
-        className: props.className,
-        color,
-        isIconOnly,
-        variant,
-        isPending
-    });
+const Alertbox = ({ children, role, className, icon, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
+    const Icon = icon ?? iconMap[variant];
     const locale = _useLocale();
-    const { progressBarProps } = useProgressBar({
-        isIndeterminate: true,
-        'aria-label': translations$1.pending[locale]
-    });
-    const children = isPending ? /*#__PURE__*/ jsxs(Fragment, {
+    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: [
-            _children,
-            /*#__PURE__*/ jsx(LoadingSpinner, {
-                className: "absolute m-auto motion-safe:animate-spin",
-                ...progressBarProps
+            /*#__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
             })
         ]
-    }) : _children;
-    return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
-        ...restProps,
-        className: className,
-        ref: ref,
-        children: children
-    }) : /*#__PURE__*/ jsx(Button$1, {
-        ...restProps,
-        className: className,
-        isPending: isPending,
+    });
+};
+
+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: children
+        children: content
     });
 }
 
-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({
+const badgeVariants = 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'
+        'inline-flex w-fit items-center justify-center gap-1.5 rounded-lg [&_svg]:shrink-0'
     ],
     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'
+        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'
         },
-        isGrouped: {
-            false: 'px-3',
-            true: '!ring-0 flex-1'
+        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: {
-        focusModifier: 'focus',
-        isGrouped: false
+        size: 'medium'
     }
 });
-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
+function Badge(props) {
+    const { className: _className, color, size, ...restProps } = props;
+    const className = badgeVariants({
+        className: _className,
+        color,
+        size
     });
-}
-
-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'),
+        className: className,
         ...restProps,
-        children: children
+        "data-slot": "badge"
     });
 }
 
-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, {
+function Breadcrumb(props) {
+    const { className, children, href, ...restProps } = props;
+    return /*#__PURE__*/ jsxs(Breadcrumb$1, {
+        className: cx(className, 'group flex items-center'),
         ...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
+            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"
             })
         ]
     });
 }
 
-const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
+function Breadcrumbs(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Breadcrumbs$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')
+        className: cx(className, 'flex flex-wrap text-sm leading-6'),
+        children: children
     });
+}
+
 /**
- * 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')
+ * 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'
+        },
+        /**
+     * Adjusts the color of the button for usage on different backgrounds.
+     * @default blue
+     */ color: {
+            blue: 'focus-visible:outline-focus',
+            mint: 'focus-visible:outline-focus focus-visible:outline-mint',
+            white: 'focus-visible:outline-focus focus-visible:outline-white'
+        },
+        /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */ isIconOnly: {
+            true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
+            false: 'gap-2.5 px-4 py-2'
+        },
+        // Make the content of the button transparent to hide it's content, but keep the button width
+        isPending: {
+            true: '!text-transparent relative',
+            false: null
+        }
+    },
+    compoundVariants: [
+        {
+            color: 'blue',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'blue',
+            variant: 'secondary',
+            className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
+        },
+        {
+            color: 'blue',
+            variant: 'tertiary',
+            className: '[&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'secondary',
+            className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'mint',
+            variant: 'tertiary',
+            className: 'text-mint [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'white',
+            variant: 'primary',
+            className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'white',
+            variant: 'secondary',
+            className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'white',
+            variant: 'tertiary',
+            className: 'text-white [&_[role="progressbar"]]:text-white'
+        }
+    ],
+    defaultVariants: {
+        variant: 'primary',
+        color: 'blue',
+        isIconOnly: false,
+        isPending: false
+    }
+});
+const ButtonContext = /*#__PURE__*/ createContext({});
+function isLinkProps(props) {
+    return !!props.href;
+}
+function Button({ ref = null, ...props }) {
+    [props, ref] = useContextProps(props, ref, ButtonContext);
+    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
+    const className = buttonVariants({
+        className: props.className,
+        color,
+        isIconOnly,
+        variant,
+        isPending
     });
-
-function InputAddonDivider() {
-    return /*#__PURE__*/ jsx("span", {
-        className: "block h-6 w-px flex-none bg-black"
+    const locale = _useLocale();
+    const { progressBarProps } = useProgressBar({
+        isIndeterminate: true,
+        'aria-label': translations$1.pending[locale]
     });
-}
-
-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,
+    const children = isPending ? /*#__PURE__*/ jsxs(Fragment, {
         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
-                })
+            _children,
+            /*#__PURE__*/ jsx(LoadingSpinner, {
+                className: "absolute m-auto motion-safe:animate-spin",
+                ...progressBarProps
             })
         ]
-    });
-}
-
-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, {
+    }) : _children;
+    return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...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
-            })
-        ]
+        className: className,
+        ref: ref,
+        children: children
+    }) : /*#__PURE__*/ jsx(Button$1, {
+        ...restProps,
+        className: className,
+        isPending: isPending,
+        ref: ref,
+        children: children
     });
 }
 
-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
-                })
+const cardVariants = cva({
+    base: [
+        'group/card',
+        'rounded-[inherit]',
+        'border p-3',
+        'flex flex-col gap-y-4',
+        'relative',
+        // **** Content ****
+        '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
+        // **** Media ****
+        '[&_[data-slot="media"]_*]:pointer-events-none',
+        '[&_[data-slot="media"]]:overflow-hidden',
+        '[&_[data-slot="media"]]:relative',
+        // Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
+        '[&_[data-slot="media"]]:mx-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))] [&_[data-slot="media"]]:mt-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+        // Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work on images in FF)
+        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-3/2 [&_[data-slot="media"]>img]:w-full [&_[data-slot="media"]>img]:object-cover',
+        // Prepare zoom animation for hover effects. The hover effect can also be enabled by classes on the parent component, so it is always prepared here.
+        '[&_[data-slot="media"]>*]:duration-300 [&_[data-slot="media"]>*]:ease-in-out [&_[data-slot="media"]>*]:motion-safe:transition-transform',
+        // **** Card link ****
+        // **** Hover ****
+        // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
+        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>img]:scale-110',
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>img]:scale-110',
+        // **** Fail-safe for interactive elements ****
+        // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
+        // The card is made clickable by a pseudo-element on the heading that covers the entire card
+        '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
+        // Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
+        '[&_[data-slot="card-link"]_a]:static',
+        // Place other interactive on top of the pseudo-element that makes the entire card clickable
+        // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
+        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
+        // **** Badge ****
+        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
+        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
+        // Left aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
+        // Right aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
+        // ... and position the badge at the right edge of the media content
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
+    ],
+    variants: {
+        /**
+     * The variant of the card
+     * @default subtle
+     */ variant: {
+            subtle: [
+                'border-transparent',
+                // **** Media styles ****
+                '[&_[data-slot="media"]]:rounded-2xl'
+            ],
+            outlined: 'border border-black'
+        },
+        /**
+     * The layout of the card
+     * @default vertical
+     */ layout: {
+            vertical: [
+                'flex-col',
+                // **** Media ****
+                '[&_[data-slot="media"]]:rounded-t-2xl'
+            ],
+            horizontal: [
+                // Use more gap for horizontal cards that have media
+                // Since this does not affect the layout before the flex direction is set (at breakpoint @2xl for Card with Media), we can set it here
+                'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
+                // **** With Media ****
+                '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
+                'has-data-[slot=media]:@2xl:!flex-row',
+                '*:data-[slot=media]:@2xl:h-fit',
+                'has-data-[slot=media]:*:@2xl:basis-1/2',
+                // Position media at the edges of the card
+                '*:data-[slot=media]:@2xl:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+                '*:data-[slot=media]:first:@2xl:mr-0',
+                '*:data-[slot=media]:last:@2xl:ml-0',
+                // Make sure the card link is clickable when the media is on the right side
+                // This is necessary because the media content is positioned after the card link in the DOM
+                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
+                // **** Without Media ****
+                'not-has-data-[slot=media]:@md:flex-row',
+                // Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
+                'not-has-data-[slot=media]:**:data-[slot=content]:grow',
+                // Make sure svg's etc. are not shrinkable
+                '[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
             ]
+        }
+    },
+    defaultVariants: {
+        variant: 'subtle',
+        layout: 'vertical'
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            layout: 'horizontal',
+            className: [
+                // **** Media ****
+                // Some rounded corners are removed when the card is outlined
+                '[&_[data-slot="media"]]:rounded-t-2xl',
+                '*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
+                '*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
+                // **** Badge ****
+                // Override default corner radius of the badge to match the media border radius
+                '[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:@2xl:rounded-tr-none',
+                '[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:@2xl:rounded-tl-none'
+            ]
+        }
+    ]
+});
+const Card = ({ children, className, variant, layout, ...restProps })=>{
+    const cardClassName = cardVariants({
+        variant,
+        layout
+    });
+    return(// The border-radius is set on the outer container to make it act as an invisible wrapper, only used for container queries
+    // Since passing the className prop to this container is necessary to make custom styles behave as expected, we need to apply the border-radius here incase the consumer passes a custom background color
+    /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx(className, '@container rounded-2xl'),
+        children: /*#__PURE__*/ jsx("div", {
+            className: cardClassName,
+            children: /*#__PURE__*/ jsx(Provider, {
+                values: [
+                    [
+                        HeadingContext,
+                        {
+                            size: 's',
+                            className: cx([
+                                'inline',
+                                'w-fit',
+                                'text-pretty',
+                                'hyphens-auto',
+                                '[word-break:break-word]',
+                                // **** Card link in Heading ****
+                                // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
+                                // Border top is set to even out the border bottom used for the underline
+                                '*:data-[slot="card-link"]:no-underline',
+                                '*:data-[slot="card-link"]:border-y-2',
+                                '*:data-[slot="card-link"]:border-y-transparent',
+                                '*:data-[slot="card-link"]:transition-colors',
+                                '*:data-[slot="card-link"]:hover:border-b-current',
+                                // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
+                                '*:data-[slot="card-link"]:font-inherit',
+                                '*:data-[slot="card-link"]:text-pretty',
+                                '*:data-[slot="card-link"]:hyphens-auto',
+                                '*:data-[slot="card-link"]:[word-break:break-word]'
+                            ])
+                        }
+                    ]
+                ],
+                children: children
+            })
         })
+    }));
+};
+const cardLinkVariants = cva({
+    base: 'w-fit max-w-full',
+    variants: {
+        withHref: {
+            true: [
+                // **** Clickarea ****
+                'cursor-pointer',
+                'after:absolute',
+                'after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                'focus-visible:outline-none',
+                'data-focus-visible:after:outline-focus',
+                'data-focus-visible:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the clickable area.
+                'hover:no-underline'
+            ],
+            false: [
+                // **** Clickarea ****
+                '[&_a]:after:cursor-pointer',
+                '[&_a]:after:absolute',
+                '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                '[&_a[data-focus-visible]]:outline-none',
+                '[&_a[data-focus-visible]]:after:outline-focus',
+                '[&_a[data-focus-visible]]:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the card.
+                // The group-hover ensures that the hover effect also applies when this component is used as a wrapper around a link.
+                '[&_a]:group-hover/card:no-underline'
+            ]
+        }
+    }
+});
+/**
+ * A component that creates a clickable area on a card.
+ * It can be used either as a wrapper around a link or as a standalone link.
+ */ const CardLink = ({ className: _className, href, ...restProps })=>{
+    const className = cardLinkVariants({
+        className: _className,
+        withHref: !!href
     });
-}
-
-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, {
+    return href ? /*#__PURE__*/ jsx(Link, {
+        "data-slot": "card-link",
         ...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
+        href: href,
+        className: className
+    }) : // We can't utilize that the `Link` component from react-aria-components renders as a span if it doesn't have an href,
+    // because it still renders with role="link" and tabindex="0" which makes it focusable.
+    // So we need to render a div instead.
+    /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "card-link",
+        className: className
+    });
+};
+
+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);
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "carousel",
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    CarouselItemsContext,
+                    {
+                        ref,
+                        onScroll
+                    }
+                ],
+                [
+                    ButtonContext,
+                    {
+                        slots: {
+                            [DEFAULT_SLOT]: {},
+                            prev: {
+                                'aria-label': previous[locale],
+                                onPress: ()=>{
+                                    if (scrollTargetIndex > 0) {
+                                        setScrollTargetIndex((prev)=>prev - 1);
+                                    }
+                                },
+                                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);
+                                    }
+                                },
+                                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"
+                                })
+                            })
+                        ]
                     })
                 ]
-            }),
-            /*#__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
-            })
-        ]
+};
+/**
+ * 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 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
-                }),
+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]'
+                ]),
                 ref: ref,
-                size: size
-            }),
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
+                // 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
             })
-        ]
     });
-}
-
-// 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
+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')
+                    }
                 ]
-            }) : /*#__PURE__*/ jsx(Input, {
-                className: inputVariants({
-                    textAlign,
-                    autoWidth: !!size
-                }),
-                ref: ref,
-                size: size
-            }),
-            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
-                errorMessage: errorMessage
-            })
-        ]
+            ],
+            children: children
+        })
     });
-}
-
-const iconMap = {
-    info: InfoCircle,
-    success: CheckCircle,
-    warning: Warning,
-    danger: Error
 };
-const alertVariants = 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: [
-        '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'
+        // 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: {
-        /**
-     * 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'
+        // 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: {
-        variant: 'info'
+        focusModifier: 'focus',
+        isGrouped: false
     }
 });
-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 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 Breadcrumbs(props) {
-    const { className, children, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Breadcrumbs$1, {
+function ErrorMessage(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
         ...restProps,
-        className: cx(className, 'flex flex-wrap text-sm leading-6'),
+        className: cx(className, formFieldError),
+        slot: "errorMessage",
         children: children
     });
 }
 
-function Breadcrumb(props) {
-    const { className, children, href, ...restProps } = props;
-    return /*#__PURE__*/ jsxs(Breadcrumb$1, {
-        className: cx(className, 'group flex items-center'),
+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,
-        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"
-            })
-        ]
+        className: cx(className, 'description'),
+        slot: "description"
     });
 }
 
-function isLinkProps(props) {
-    return !!props.href;
+/**
+ * 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 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
-                })
-            })
-        ]
+
+function Label(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Label$1, {
+        className: cx(className, 'font-semibold leading-7'),
+        ...restProps,
+        children: children
     });
-    if (isLinkProps(props)) {
-        return /*#__PURE__*/ jsx(Link, {
-            ...restProps,
-            className: _className,
-            style: style,
-            ref: ref,
-            children: content
-        });
-    }
-    return /*#__PURE__*/ jsx(Button$1, {
+}
+
+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: _className,
-        style: style,
-        ref: ref,
-        children: content
+        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 cardVariants = cva({
-    base: [
-        'group/card',
-        'rounded-[inherit]',
-        'border p-3',
-        'flex flex-col gap-y-4',
-        'relative',
-        // **** Content ****
-        '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
-        // **** Media ****
-        '[&_[data-slot="media"]_*]:pointer-events-none',
-        '[&_[data-slot="media"]]:overflow-hidden',
-        '[&_[data-slot="media"]]:relative',
-        // Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
-        '[&_[data-slot="media"]]:mx-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))] [&_[data-slot="media"]]:mt-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
-        // Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work on images in FF)
-        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-3/2 [&_[data-slot="media"]>img]:w-full [&_[data-slot="media"]>img]:object-cover',
-        // Prepare zoom animation for hover effects. The hover effect can also be enabled by classes on the parent component, so it is always prepared here.
-        '[&_[data-slot="media"]>*]:duration-300 [&_[data-slot="media"]>*]:ease-in-out [&_[data-slot="media"]>*]:motion-safe:transition-transform',
-        // **** Card link ****
-        // **** Hover ****
-        // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
-        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>img]:scale-110',
-        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>img]:scale-110',
-        // **** Fail-safe for interactive elements ****
-        // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
-        // The card is made clickable by a pseudo-element on the heading that covers the entire card
-        '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
-        // Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
-        '[&_[data-slot="card-link"]_a]:static',
-        // Place other interactive on top of the pseudo-element that makes the entire card clickable
-        // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
-        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
-        // **** Badge ****
-        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
-        // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
-        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
-        // Left aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
-        // Right aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
-        // ... and position the badge at the right edge of the media content
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
-    ],
-    variants: {
-        /**
-     * The variant of the card
-     * @default subtle
-     */ variant: {
-            subtle: [
-                'border-transparent',
-                // **** Media styles ****
-                '[&_[data-slot="media"]]:rounded-2xl'
-            ],
-            outlined: 'border border-black'
-        },
-        /**
-     * The layout of the card
-     * @default vertical
-     */ layout: {
-            vertical: [
-                'flex-col',
-                // **** Media ****
-                '[&_[data-slot="media"]]:rounded-t-2xl'
-            ],
-            horizontal: [
-                // Use more gap for horizontal cards that have media
-                // Since this does not affect the layout before the flex direction is set (at breakpoint @2xl for Card with Media), we can set it here
-                'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
-                // **** With Media ****
-                '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
-                'has-data-[slot=media]:@2xl:!flex-row',
-                '*:data-[slot=media]:@2xl:h-fit',
-                'has-data-[slot=media]:*:@2xl:basis-1/2',
-                // Position media at the edges of the card
-                '*:data-[slot=media]:@2xl:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
-                '*:data-[slot=media]:first:@2xl:mr-0',
-                '*:data-[slot=media]:last:@2xl:ml-0',
-                // Make sure the card link is clickable when the media is on the right side
-                // This is necessary because the media content is positioned after the card link in the DOM
-                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
-                // **** Without Media ****
-                'not-has-data-[slot=media]:@md:flex-row',
-                // Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
-                'not-has-data-[slot=media]:**:data-[slot=content]:grow',
-                // Make sure svg's etc. are not shrinkable
-                '[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
-            ]
-        }
-    },
-    defaultVariants: {
-        variant: 'subtle',
-        layout: 'vertical'
-    },
-    compoundVariants: [
-        {
-            variant: 'outlined',
-            layout: 'horizontal',
-            className: [
-                // **** Media ****
-                // Some rounded corners are removed when the card is outlined
-                '[&_[data-slot="media"]]:rounded-t-2xl',
-                '*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
-                '*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
-                // **** Badge ****
-                // Override default corner radius of the badge to match the media border radius
-                '[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:@2xl:rounded-tr-none',
-                '[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:@2xl:rounded-tl-none'
-            ]
-        }
-    ]
-});
-const Card = ({ children, className, variant, layout, ...restProps })=>{
-    const cardClassName = cardVariants({
-        variant,
-        layout
+function InputAddonDivider() {
+    return /*#__PURE__*/ jsx("span", {
+        className: "block h-6 w-px flex-none bg-black"
     });
-    return(// The border-radius is set on the outer container to make it act as an invisible wrapper, only used for container queries
-    // Since passing the className prop to this container is necessary to make custom styles behave as expected, we need to apply the border-radius here incase the consumer passes a custom background color
-    /*#__PURE__*/ jsx("div", {
+}
+
+const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
         ...restProps,
-        className: cx(className, '@container rounded-2xl'),
-        children: /*#__PURE__*/ jsx("div", {
-            className: cardClassName,
-            children: /*#__PURE__*/ jsx(Provider, {
-                values: [
-                    [
-                        HeadingContext,
-                        {
-                            size: 's',
-                            className: cx([
-                                'inline',
-                                'w-fit',
-                                'text-pretty',
-                                'hyphens-auto',
-                                '[word-break:break-word]',
-                                // **** Card link in Heading ****
-                                // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
-                                // Border top is set to even out the border bottom used for the underline
-                                '*:data-[slot="card-link"]:no-underline',
-                                '*:data-[slot="card-link"]:border-y-2',
-                                '*:data-[slot="card-link"]:border-y-transparent',
-                                '*:data-[slot="card-link"]:transition-colors',
-                                '*:data-[slot="card-link"]:hover:border-b-current',
-                                // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
-                                '*:data-[slot="card-link"]:font-inherit',
-                                '*:data-[slot="card-link"]:text-pretty',
-                                '*:data-[slot="card-link"]:hyphens-auto',
-                                '*:data-[slot="card-link"]:[word-break:break-word]'
-                            ])
-                        }
-                    ]
-                ],
-                children: children
+        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
+                ]
             })
-        })
-    }));
+    });
 };
-const cardLinkVariants = cva({
-    base: 'w-fit max-w-full',
-    variants: {
-        withHref: {
-            true: [
-                // **** Clickarea ****
-                'cursor-pointer',
-                'after:absolute',
-                'after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
-                'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
-                // **** Focus ****
-                'focus-visible:outline-none',
-                'data-focus-visible:after:outline-focus',
-                'data-focus-visible:after:outline-offset-2',
-                // **** Hover ****
-                // Links are underlined by default, and the underline is removed on hover.
-                // So we make sure that also happens when the user hovers the clickable area.
-                'hover:no-underline'
-            ],
-            false: [
-                // **** Clickarea ****
-                '[&_a]:after:cursor-pointer',
-                '[&_a]:after:absolute',
-                '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
-                '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
-                // **** Focus ****
-                '[&_a[data-focus-visible]]:outline-none',
-                '[&_a[data-focus-visible]]:after:outline-focus',
-                '[&_a[data-focus-visible]]:after:outline-offset-2',
-                // **** Hover ****
-                // Links are underlined by default, and the underline is removed on hover.
-                // So we make sure that also happens when the user hovers the card.
-                // The group-hover ensures that the hover effect also applies when this component is used as a wrapper around a link.
-                '[&_a]:group-hover/card:no-underline'
-            ]
-        }
-    }
-});
 /**
- * A component that creates a clickable area on a card.
- * It can be used either as a wrapper around a link or as a standalone link.
- */ const CardLink = ({ className: _className, href, ...restProps })=>{
-    const className = cardLinkVariants({
-        className: _className,
-        withHref: !!href
-    });
-    return href ? /*#__PURE__*/ jsx(Link, {
-        "data-slot": "card-link",
+ * This component can be used to group items in a listbox
+ */ const ListBoxSection = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBoxSection$1, {
         ...restProps,
-        href: href,
-        className: className
-    }) : // We can't utilize that the `Link` component from react-aria-components renders as a span if it doesn't have an href,
-    // because it still renders with role="link" and tabindex="0" which makes it focusable.
-    // So we need to render a div instead.
-    /*#__PURE__*/ jsx("div", {
+        // 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 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,
-        "data-slot": "card-link",
-        className: className
+        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
@@ -1354,85 +1278,6 @@ const cardLinkVariants = cva({
     return render ? render(formatted) : formatted;
 };
 
-const VideoLoop = ({ src, format, alt, className })=>{
-    // Control the video playback state, so that the user can pause and play the video at will, also control the video autoplay
-    const [shouldPlay, setShouldPlay] = useState(false);
-    // Needed to show the pause button when the video is actually playing (refer to google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
-    const [isPlaying, setIsPlaying] = useState(false);
-    // We need to check if the user prefers reduced motion, so that we can prevent the video from autoplaying if so
-    const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(null);
-    const videoRef = useRef(null);
-    useEffect(()=>{
-        const { matches: userPrefersReducedMotion } = matchMedia('(prefers-reduced-motion: reduce)');
-        setUserPrefersReducedMotion(userPrefersReducedMotion);
-        // Autoplay the video if the user does not prefer reduced motion
-        setShouldPlay(!userPrefersReducedMotion);
-    }, []);
-    // Follow google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
-    // "Don't assume a video will play, and don't show a pause button when the video is not actually playing."
-    // "You should always look at the Promise returned by the play function to see if it was rejected:"
-    // This is why we use the promise returned by the play function, and an extra state variable to determine if the video is actually playing or not
-    useEffect(()=>{
-        if (!videoRef.current) return;
-        if (shouldPlay) {
-            videoRef.current.play().then(()=>setIsPlaying(true)).catch(()=>setIsPlaying(false));
-        } else {
-            videoRef.current.pause();
-            setIsPlaying(false);
-        }
-    }, [
-        shouldPlay
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        className: cx(className, 'relative', userPrefersReducedMotion === null && 'opacity-0'),
-        children: [
-            /*#__PURE__*/ jsx("video", {
-                "aria-hidden": true,
-                ref: videoRef,
-                // cursor-pointer is not working on the button below, so we add it here for the same effect
-                className: "h-full 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
-            })
-        ]
-    });
-};
-
 const disclosureButtonVariants = cva({
     base: [
         'inline-flex cursor-pointer items-center justify-between rounded-lg focus-visible:outline-current focus-visible:outline-focus',
@@ -1831,198 +1676,42 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                                             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
+                                                // 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
     });
 }
 
@@ -2136,183 +1825,312 @@ const Hero = ({ variant, className, 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" // 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, {})
+                                                    })
+                                                ]
+                                            })
                                     }
-                                },
-                                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 +2193,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,179 +2467,243 @@ 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
+            })
+        ]
     });
 };