@obosbbl/grunnmuren-react 2.0.0-canary.5 → 2.0.0-canary.51

package/dist/index.mjs

@@ -1,29 +1,383 @@
-import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem, ComboBox, Group, Input, Button, Popover, ListBox, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
-export { Form, I18nProvider } from 'react-aria-components';
-export { _ as Button } from './Button-client-wuoyidfi.js';
+'use client';
+import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, Header, ListBox as ListBox$1, ComboBox, Group, Input, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, ButtonContext, DisclosureContext, DisclosureGroupStateContext } from 'react-aria-components';
+export { Form, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useId } from 'react';
+import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
+import { useLayoutEffect, filterDOMProps } from '@react-aria/utils';
 import { cx, cva, compose } from 'cva';
-import { Check, LoadingSpinner, ChevronDown } from '@obosbbl/grunnmuren-icons-react';
+import { createContext, forwardRef, Children, useId, useState, useRef, useEffect, useContext } from 'react';
+import { useProgressBar, useDateFormatter, useDisclosure } from 'react-aria';
+import { useDisclosureState } from 'react-stately';
+
+function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
+    return /*#__PURE__*/ jsx(I18nProvider, {
+        locale: locale,
+        children: navigate ? /*#__PURE__*/ jsx(RouterProvider, {
+            navigate: navigate,
+            useHref: useHref,
+            children: children
+        }) : children
+    });
+}
+
+/**
+ * Returns the locale set in `<GrunnmurenProvider />`
+ */ function _useLocale() {
+    // a small wrapper around react-arias useLocale with a simpler return type with only the locales that we actually support
+    const locale = useLocale();
+    return locale.locale;
+}
+
+const HeadingContext = /*#__PURE__*/ createContext({});
+const Heading = (props, ref)=>{
+    // biome-ignore lint/style/noParameterAssign: fix when removing refs for React 19
+    [props, ref] = useContextProps(props, ref, HeadingContext);
+    const { children, level, className, _innerWrapper: innerWrapper, ...restProps } = props;
+    const Element = `h${level}`;
+    return /*#__PURE__*/ jsx(Element, {
+        ...restProps,
+        className: className,
+        "data-slot": "heading",
+        children: innerWrapper ? innerWrapper(children) : children
+    });
+};
+const ContentContext = /*#__PURE__*/ createContext({});
+const Content = (props, ref)=>{
+    // biome-ignore lint/style/noParameterAssign: fix when removing refs for React 19
+    [props, ref] = useContextProps(props, ref, ContentContext);
+    const { _outerWrapper: outerWrapper, ...restProps } = props;
+    const content = /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "content"
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const Media = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "media"
+    });
+const Caption = ({ className, ...restProps })=>/*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx('description', className),
+        "data-slot": "caption"
+    });
+const Footer = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "footer"
+    });
+const _Heading = /*#__PURE__*/ forwardRef(Heading);
+const _Content = /*#__PURE__*/ forwardRef(Content);
+
+function Accordion(props, ref) {
+    const { children, className, ...restProps } = props;
+    const childCount = Children.count(children);
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: cx('rounded-lg bg-white', className),
+        children: Children.map(children, (child, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    child,
+                    index < childCount - 1 && // Margin is added to enable support for containers with a background color
+                    /*#__PURE__*/ jsx("hr", {
+                        className: "mx-2 border-gray-light",
+                        "aria-hidden": true
+                    })
+                ]
+            }))
+    });
+}
+function AccordionItem(props, ref) {
+    const { className, children, defaultOpen = false, isOpen: controlledIsOpen, onOpenChange, ...restProps } = props;
+    const contentId = useId();
+    const buttonId = useId();
+    const isControlled = controlledIsOpen != null;
+    // This component has internal state that controls whether it is open or not,
+    // regardless if we are controlled or uncontrolled.
+    // If we are controlled, we use a layout effect to sync the controlled state
+    // with the internal state.
+    //
+    const [isOpen, setIsOpen] = useState(// If we are controlled, use that open state, otherwise use the uncontrolled
+    isControlled ? controlledIsOpen : defaultOpen);
+    useLayoutEffect(()=>{
+        if (isControlled) {
+            setIsOpen(controlledIsOpen);
+        }
+    }, [
+        controlledIsOpen,
+        isControlled
+    ]);
+    const handleOpenChange = ()=>{
+        const newOpenState = !isOpen;
+        if (!isControlled) {
+            setIsOpen(newOpenState);
+        }
+        // Always call the change handler, even if we're uncontrolled.
+        // Easier to add stuff such as tracking etc.
+        if (onOpenChange) {
+            onOpenChange(newOpenState);
+        }
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx('relative px-2', className),
+        ref: ref,
+        "data-open": isOpen,
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    HeadingContext,
+                    {
+                        // Negative margin to strech the button to the entire with of the accordion (to support containers with a background color)
+                        className: 'font-semibold leading-7 -mx-2 text-base',
+                        // Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
+                        level: 3,
+                        _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
+                                "aria-controls": contentId,
+                                "aria-expanded": isOpen,
+                                // Use outline with offset as focus indicator, this does not cover the left mint border on the expanded content and works with or without a background color on the accordion container
+                                className: "flex min-h-[44px] w-full items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus focus-visible:outline-focus-inset",
+                                id: buttonId,
+                                onClick: handleOpenChange,
+                                type: "button",
+                                children: [
+                                    children,
+                                    /*#__PURE__*/ jsx(ChevronDown, {
+                                        className: cx('flex-none transition-transform duration-300 motion-reduce:transition-none', isOpen && 'rotate-180')
+                                    })
+                                ]
+                            })
+                    }
+                ],
+                [
+                    ContentContext,
+                    {
+                        className: // Uses pseudo element for vertical padding, since that doesn't affect the height when the accordion is closed
+                        'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-mint border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
+                        role: 'region',
+                        // @ts-expect-error TODO: remove this expect-error when we're on React 19 https://github.com/facebook/react/issues/17157#issuecomment-2003750544
+                        inert: isOpen ? undefined : 'true',
+                        'aria-labelledby': buttonId,
+                        _outerWrapper: (children)=>/*#__PURE__*/ jsx("div", {
+                                className: cx('grid transition-all duration-300 after:relative after:block after:h-0 after:transition-all after:duration-300 motion-reduce:transition-none', isOpen ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr]'),
+                                children: children
+                            })
+                    }
+                ]
+            ],
+            children: children
+        })
+    });
+}
+const _Accordion = /*#__PURE__*/ forwardRef(Accordion);
+const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
+
+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, ref) {
+    const { className: _className, color, size, ...restProps } = props;
+    const className = badgeVariants({
+        className: _className,
+        color,
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        ...restProps,
+        ref: ref,
+        "data-slot": "badge"
+    });
+}
+const _Badge = /*#__PURE__*/ forwardRef(Badge);
+
+/**
+ * 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 [&:not([data-focus-visible])]:outline-none'
+    ],
+    variants: {
+        /**
+     * The variant of the button
+     * @default primary
+     */ variant: {
+            primary: 'no-underline',
+            // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
+            secondary: 'no-underline shadow-[inset_0_0_0_2px]',
+            tertiary: 'underline hover:no-underline'
+        },
+        /**
+     * Adjusts the color of the button for usage on different backgrounds.
+     * @default green
+     */ color: {
+            green: 'data-[focus-visible]:outline-focus',
+            mint: 'data-[focus-visible]:outline-focus data-[focus-visible]:outline-mint',
+            white: 'data-[focus-visible]:outline-focus data-[focus-visible]:outline-white'
+        },
+        /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */ isIconOnly: {
+            true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
+            false: 'gap-2.5 px-4 py-2'
+        },
+        // Make the content of the button transparent to hide it's content, but keep the button width
+        isPending: {
+            true: '!text-transparent relative',
+            false: null
+        }
+    },
+    compoundVariants: [
+        {
+            color: 'green',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352] [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'green',
+            variant: 'secondary',
+            className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'green',
+            variant: 'tertiary',
+            className: '[&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'primary',
+            // Darken bg by 20% on hover. The color is manually crafted
+            className: 'bg-mint text-black hover:bg-[#8dd4bd] active:[#9ddac6] [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'secondary',
+            className: 'text-mint shadow-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'mint',
+            variant: 'tertiary',
+            className: 'text-mint [&_[role="progressbar"]]:text-mint'
+        },
+        {
+            color: 'white',
+            variant: 'primary',
+            className: 'bg-white text-black hover:bg-sky active:bg-sky-light [&_[role="progressbar"]]:text-black'
+        },
+        {
+            color: 'white',
+            variant: 'secondary',
+            className: 'text-white shadow-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
+        },
+        {
+            color: 'white',
+            variant: 'tertiary',
+            className: 'text-white [&_[role="progressbar"]]:text-white'
+        }
+    ],
+    defaultVariants: {
+        variant: 'primary',
+        color: 'green',
+        isIconOnly: false,
+        isPending: false
+    }
+});
+function isLinkProps$1(props) {
+    return !!props.href;
+}
+const translations$1 = {
+    pending: {
+        nb: 'venter',
+        sv: 'väntar',
+        en: 'pending'
+    }
+};
+function Button(props, ref) {
+    const { children: _children, color, isIconOnly, isLoading, variant, isPending: _isPending, ...restProps } = props;
+    const isPending = _isPending || isLoading;
+    const className = buttonVariants({
+        className: props.className,
+        color,
+        isIconOnly,
+        variant,
+        isPending
+    });
+    const locale = _useLocale();
+    const { progressBarProps } = useProgressBar({
+        isIndeterminate: true,
+        'aria-label': translations$1.pending[locale]
+    });
+    const children = isPending ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            _children,
+            /*#__PURE__*/ jsx(LoadingSpinner, {
+                className: "absolute m-auto motion-safe:animate-spin",
+                ...progressBarProps
+            })
+        ]
+    }) : _children;
+    return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
+        ...restProps,
+        className: className,
+        ref: ref,
+        children: children
+    }) : /*#__PURE__*/ jsx(Button$1, {
+        ...restProps,
+        className: className,
+        isPending: isPending,
+        ref: ref,
+        children: children
+    });
+}
+const _Button = /*#__PURE__*/ forwardRef(Button);
 
 const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
+const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-red text-sm leading-6');
 const input = cva({
     base: [
-        'rounded-md px-3 py-2.5 text-sm font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
         // invalid styles
-        'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red'
+        'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
     ],
     variants: {
         // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
         focusModifier: {
-            focus: 'focus:ring-2 group-data-[invalid]:focus:ring',
-            visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
+            focus: 'focus:ring-focus group-data-[invalid]:focus:ring',
+            visible: 'data-[focus-visible]:ring-focus group-data-[invalid]:data-[focus-visible]:ring'
         },
         isGrouped: {
-            false: '',
-            //
-            true: 'flex-1 !ring-0 first:pl-0 last:pr-0'
+            false: 'px-3',
+            true: '!ring-0 flex-1'
         }
     },
     defaultVariants: {
@@ -31,10 +385,14 @@ const input = cva({
         isGrouped: false
     }
 });
-const inputGroup = cx('inline-flex items-center overflow-hidden rounded-md px-3 ring-1 ring-black focus-within:ring-2 group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring');
+const inputGroup = cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
+]);
 const dropdown = {
-    popover: cx('min-w-[--trigger-width] overflow-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
-    listbox: cx('text-sm outline-none'),
+    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 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-none'),
     chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
 };
 
@@ -48,22 +406,13 @@ function ErrorMessage(props) {
     });
 }
 
-function Description(props) {
-    const { className, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Text, {
-        ...restProps,
-        className: cx(className, 'text-sm font-light leading-6'),
-        slot: "description"
-    });
-}
-
 const defaultClasses$1 = cx([
-    'group relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7'
+    'group -mx-2.5 relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
 ]);
 // Pulling this out into it's own component. Will probably export it in the future
 // so it can be used in other views, outside of an input of type checkbox, like in table rows.
 function CheckmarkBox() {
-    return /*#__PURE__*/ jsx("div", {
+    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.
@@ -74,12 +423,12 @@ function CheckmarkBox() {
             // selected
             'group-data-[selected]:!border-green group-data-[selected]:!bg-green',
             // focus
-            'group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-black group-data-[focus-visible]:ring-offset-[9px]',
+            'group-data-[focus-visible]:outline-focus-offset',
             // hovered
-            'group-data-[hovered]:border-green group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:bg-green-lightest group-data-[hovered]:group-data-[invalid]:bg-red-light',
+            'group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:group-data-[invalid]:bg-red-light group-data-[hovered]:border-green group-data-[hovered]:bg-green-lightest',
             // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
             // so we use an inner shadow of 1 px instead to pad the actual border
-            'group-data-[invalid]:border-red group-data-[invalid]:group-data-[selected]:shadow-none group-data-[invalid]:shadow-[inset_0_0_0_1px] group-data-[invalid]:shadow-red'
+            'group-data-[invalid]:group-data-[selected]:shadow-none group-data-[invalid]:border-red group-data-[invalid]:shadow-[inset_0_0_0_1px] group-data-[invalid]:shadow-red'
         ]),
         children: /*#__PURE__*/ jsx(Check, {
             className: "h-full w-full opacity-0 group-data-[selected]:opacity-100"
@@ -89,9 +438,9 @@ function CheckmarkBox() {
 function Checkbox(props, ref) {
     const { children, className, description, errorMessage, isInvalid: _isInvalid, ...restProps } = props;
     const id = useId();
-    const descriptionId = 'desc' + id;
-    const errorMessageId = 'error' + id;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const descriptionId = `desc${id}`;
+    const errorMessageId = `error${id}`;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
             value: {
@@ -105,16 +454,15 @@ function Checkbox(props, ref) {
                     isInvalid: isInvalid,
                     ref: ref,
                     children: [
-                        /*#__PURE__*/ jsx("div", {
-                            className: "absolute -left-2.5 top-0 z-10 h-11 w-11"
-                        }),
                         /*#__PURE__*/ jsx(CheckmarkBox, {}),
                         children
                     ]
                 }),
-                description && /*#__PURE__*/ jsx(Description, {
-                    className: "block",
+                description && // {/* Use a div instead of the Description component to avoid infinite re-render loops in React until this bug in RAC is fixed: https://github.com/adobe/react-spectrum/issues/6229 */}
+                /*#__PURE__*/ jsx("div", {
                     id: descriptionId,
+                    slot: "description",
+                    className: "description block",
                     children: description
                 }),
                 errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
@@ -128,6 +476,26 @@ function Checkbox(props, ref) {
 }
 const _Checkbox = /*#__PURE__*/ forwardRef(Checkbox);
 
+function Description(props) {
+    const { className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, 'description'),
+        slot: "description"
+    });
+}
+
+/**
+ * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
+ * In other words, this handles controlled and uncontrolled form errors.
+ */ function ErrorMessageOrFieldError({ errorMessage }) {
+    return errorMessage ? /*#__PURE__*/ jsx(ErrorMessage, {
+        children: errorMessage
+    }) : /*#__PURE__*/ jsx(FieldError, {
+        className: formFieldError
+    });
+}
+
 function Label(props) {
     const { children, className, ...restProps } = props;
     return /*#__PURE__*/ jsx(Label$1, {
@@ -139,7 +507,9 @@ function Label(props) {
 
 function CheckboxGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
@@ -154,28 +524,67 @@ function CheckboxGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
 }
 const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
 
+const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
+        ...restProps,
+        className: cx(dropdown.listbox, className)
+    });
+const ListBoxItem = (props)=>{
+    let textValue = props.textValue;
+    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
+    // Since we use a render function (to handle the selected state) the child is never a string.
+    // This condition adds back that behaviour
+    if (textValue == null && typeof props.children === 'string') {
+        textValue = props.children;
+    }
+    return /*#__PURE__*/ jsx(ListBoxItem$1, {
+        ...props,
+        className: cx(props.className, 'flex cursor-pointer px-6 py-3 leading-6 outline-none data-[focused]:bg-sky-lightest'),
+        textValue: textValue,
+        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    isSelected && /*#__PURE__*/ jsx(Check, {
+                        className: "-ml-6 text-base"
+                    }),
+                    props.children
+                ]
+            })
+    });
+};
 /**
- * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
- * In other words, this handles controlled and uncontrolled form errors.
- */ function ErrorMessageOrFieldError({ errorMessage }) {
-    return errorMessage ? /*#__PURE__*/ jsx(ErrorMessage, {
-        children: errorMessage
-    }) : /*#__PURE__*/ jsx(FieldError, {
-        className: formFieldError
+ * This component can be used to group items in a listbox
+ */ const ListBoxSection = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBoxSection$1, {
+        ...restProps,
+        // The :not(:first-child) selector adds extra spacing to all the options, but not the section (group) headings
+        // This way we get the desired extra indent on all options within a group
+        className: cx(className, 'pb-1 [&>:not(:first-child)]:pl-10')
+    });
+/**
+ * This component can be used to label grouped items in a `ListBoxSection` with a heading
+ */ const ListBoxHeader = (props)=>/*#__PURE__*/ jsx(Header, {
+        ...props,
+        className: cx(props.className, 'mx-6 cursor-default py-2 font-medium text-blue-dark leading-6')
+    });
+
+function InputAddonDivider() {
+    return /*#__PURE__*/ jsx("span", {
+        className: "block h-6 w-px flex-none bg-black"
     });
 }
 
 function Combobox(props, ref) {
-    const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const { className, children, description, errorMessage, isLoading, isPending: _isPending, label, isInvalid: _isInvalid, ...restProps } = props;
+    const isPending = _isPending || isLoading;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(ComboBox, {
         ...restProps,
         className: cx(className, formField),
@@ -196,8 +605,8 @@ function Combobox(props, ref) {
                         }),
                         ref: ref
                     }),
-                    /*#__PURE__*/ jsx(Button, {
-                        children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
+                    /*#__PURE__*/ jsx(Button$1, {
+                        children: isPending ? /*#__PURE__*/ jsx(LoadingSpinner, {
                             className: "animate-spin"
                         }) : /*#__PURE__*/ jsx(ChevronDown, {
                             className: dropdown.chevronIcon
@@ -223,33 +632,13 @@ function Combobox(props, ref) {
         ]
     });
 }
-const ComboboxItem = (props)=>{
-    let textValue = props.textValue;
-    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
-    // Since we use a render function (to handle the selected state) the child is never a string.
-    // This condition adds back that behaviour
-    if (textValue == null && typeof props.children === 'string') {
-        textValue = props.children;
-    }
-    return /*#__PURE__*/ jsx(ListBoxItem, {
-        ...props,
-        className: cx(props.className, 'flex cursor-default px-6 py-2 leading-6 outline-none data-[focused]:bg-sky-lightest'),
-        textValue: textValue,
-        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    isSelected && /*#__PURE__*/ jsx(Check, {
-                        className: "-ml-6 text-base"
-                    }),
-                    props.children
-                ]
-            })
-    });
-};
 const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
 
 function RadioGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(RadioGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
@@ -264,8 +653,8 @@ function RadioGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
@@ -273,7 +662,7 @@ function RadioGroup(props, ref) {
 const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
 
 const defaultClasses = cx([
-    'relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7',
+    '-ml-2.5 relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
     // the radio button itself
     'before:flex-none before:rounded-full before:border-2 before:border-black',
     // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
@@ -284,40 +673,37 @@ const defaultClasses = cx([
     // selected
     'data-[selected]:before:border-black data-[selected]:before:bg-green data-[selected]:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
     // hover
-    'data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light',
+    'data-[hovered]:data-[invalid]:before:bg-red-light data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest',
     // focus
-    'data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]',
+    'data-[focus-visible]:before:ring-focus-offset',
     // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
     // so we use an inner outline to artifically pad the border
-    'data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red'
+    'data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:border-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-red data-[invalid]:before:outline-solid data-[invalid]:before:outline-offset-[-3px]'
 ]);
 function Radio(props, ref) {
     const { children, className, description, ...restProps } = props;
-    return /*#__PURE__*/ jsxs(Radio$1, {
+    return /*#__PURE__*/ jsx(Radio$1, {
         ...restProps,
         className: cx(className, defaultClasses),
         ref: ref,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "absolute -left-2.5 top-0 z-10 h-11 w-11 "
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                children: [
-                    children,
-                    description && /*#__PURE__*/ jsx(Description, {
-                        className: "mt-2 block",
-                        children: description
-                    })
-                ]
-            })
-        ]
+        children: /*#__PURE__*/ jsxs("div", {
+            children: [
+                children,
+                description && /*#__PURE__*/ jsx(Description, {
+                    className: "mt-2 block",
+                    children: description
+                })
+            ]
+        })
     });
 }
 const _Radio = /*#__PURE__*/ forwardRef(Radio);
 
 function Select(props, ref) {
     const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(Select$1, {
         ...restProps,
         className: cx(className, formField),
@@ -329,7 +715,7 @@ function Select(props, ref) {
             description && /*#__PURE__*/ jsx(Description, {
                 children: description
             }),
-            /*#__PURE__*/ jsxs(Button, {
+            /*#__PURE__*/ jsxs(Button$1, {
                 className: cx(input({
                     focusModifier: 'visible'
                 }), // How to reuse placeholder text?
@@ -358,33 +744,11 @@ function Select(props, ref) {
         ]
     });
 }
-const SelectItem = (props)=>{
-    let textValue = props.textValue;
-    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
-    // Since we use a render function (to handle the selected state) the child is never a string.
-    // This condition adds back that behaviour
-    if (textValue == null && typeof props.children === 'string') {
-        textValue = props.children;
-    }
-    return /*#__PURE__*/ jsx(ListBoxItem, {
-        ...props,
-        className: cx(props.className, 'flex cursor-default px-6 py-2 leading-6 outline-none data-[focused]:bg-sky-lightest'),
-        textValue: textValue,
-        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    isSelected && /*#__PURE__*/ jsx(Check, {
-                        className: "-ml-6 text-base"
-                    }),
-                    props.children
-                ]
-            })
-    });
-};
 const _Select = /*#__PURE__*/ forwardRef(Select);
 
 function TextArea(props, ref) {
     const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -409,18 +773,24 @@ function TextArea(props, ref) {
 }
 const _TextArea = /*#__PURE__*/ forwardRef(TextArea);
 
-const inputWithAlignment = compose(input, cva({
+const inputVariants$1 = compose(input, cva({
     base: '',
     variants: {
         textAlign: {
             right: 'text-right',
             left: ''
+        },
+        autoWidth: {
+            true: 'max-w-fit',
+            false: ''
         }
     }
 }));
 function TextField(props, ref) {
-    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -433,29 +803,96 @@ function TextField(props, ref) {
                 children: description
             }),
             leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
-                className: inputGroup,
+                className: cx(inputGroup, {
+                    'w-fit': !!size
+                }),
                 children: [
                     leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "ml-3"
-                    }),
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
-                        className: inputWithAlignment({
+                        className: inputVariants$1({
                             textAlign,
-                            isGrouped: true
+                            isGrouped: true,
+                            autoWidth: !!size
                         }),
-                        ref: ref
+                        ref: ref,
+                        size: size
                     }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "mr-3"
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                className: inputVariants$1({
+                    textAlign,
+                    autoWidth: !!size
+                }),
+                ref: ref,
+                size: size
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+const _TextField = /*#__PURE__*/ forwardRef(TextField);
+
+// This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
+const inputVariants = compose(input, cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        },
+        autoWidth: {
+            true: 'max-w-fit',
+            false: ''
+        }
+    }
+}));
+function NumberField(props, ref) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
+    return /*#__PURE__*/ jsxs(NumberField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
+                className: cx(inputGroup, {
+                    'w-fit': !!size
+                }),
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: inputVariants({
+                            textAlign,
+                            isGrouped: true,
+                            autoWidth: !!size
+                        }),
+                        ref: ref,
+                        size: size
                     }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
-                className: inputWithAlignment({
-                    textAlign
+                className: inputVariants({
+                    textAlign,
+                    autoWidth: !!size
                 }),
-                ref: ref
+                ref: ref,
+                size: size
             }),
             /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
                 errorMessage: errorMessage
@@ -463,11 +900,594 @@ function TextField(props, ref) {
         ]
     });
 }
-function Divider({ className }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: cx(className, 'block h-6 w-px flex-none bg-black')
+const _NumberField = /*#__PURE__*/ forwardRef(NumberField);
+
+const iconMap = {
+    info: InfoCircle,
+    success: CheckCircle,
+    warning: Warning,
+    danger: Error
+};
+const alertVariants = cva({
+    base: [
+        'grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md border-2 px-3 py-2',
+        // Heading styles:
+        '[&_[data-slot="heading"]]:font-medium [&_[data-slot="heading"]]:text-base [&_[data-slot="heading"]]:leading-7',
+        // Content styles:
+        '[&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full [&_[data-slot="content"]]:text-sm [&_[data-slot="content"]]:leading-6',
+        // Footer styles:
+        '[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:font-light [&_[data-slot="footer"]]:text-xs [&_[data-slot="footer"]]:leading-6'
+    ],
+    variants: {
+        /**
+     * The variant of the alert
+     * @default info
+     */ variant: {
+            info: 'border-[#1A7FA7] bg-sky-light',
+            success: 'border-[#0F9B6E] bg-mint-light',
+            warning: 'border-[#C57C13] bg-[#FFF2DE]',
+            danger: 'border-[#C0385D] bg-red-light'
+        }
+    },
+    defaultVariants: {
+        variant: 'info'
+    }
+});
+const translations = {
+    close: {
+        nb: 'Lukk',
+        sv: 'Stäng',
+        en: 'Close'
+    },
+    showMore: {
+        nb: 'Les mer',
+        sv: 'Läs mer',
+        en: 'Read more'
+    },
+    showLess: {
+        nb: 'Vis mindre',
+        sv: 'Dölj',
+        en: 'Show less'
+    }
+};
+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 focus-visible:outline-focus'),
+                onClick: close,
+                "aria-label": translations.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.showLess[locale] : translations.showMore[locale],
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: cx('transition-transform duration-150 motion-reduce:transition-none', isExpanded && 'rotate-180')
+                    })
+                ]
+            }),
+            restChildren?.length > 0 && /*#__PURE__*/ jsx("div", {
+                className: cx('col-span-full grid gap-y-4', isCollapsed && '[&>*:not([data-slot="footer"])]:hidden'),
+                id: id,
+                children: restChildren
+            })
+        ]
+    });
+};
+
+function Breadcrumbs(props, ref) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Breadcrumbs$1, {
+        ...restProps,
+        className: cx(className, 'flex flex-wrap text-sm leading-6'),
+        ref: ref,
+        children: children
     });
 }
-const _TextField = /*#__PURE__*/ forwardRef(TextField);
+const _Breadcrumbs = /*#__PURE__*/ forwardRef(Breadcrumbs);
+
+function Breadcrumb(props, ref) {
+    const { className, children, href, ...restProps } = props;
+    return /*#__PURE__*/ jsxs(Breadcrumb$1, {
+        className: cx(className, 'group flex items-center'),
+        ...restProps,
+        ref: ref,
+        children: [
+            href ? /*#__PURE__*/ jsx(Link, {
+                href: href,
+                // use outline instead of ring for focus marker that can be offset without creating a white background between the focus marker and the element content
+                className: "rounded-sm group-last:no-underline data-[focus-visible]:outline-focus [&:not([data-focus-visible])]:outline-none",
+                children: children
+            }) : children,
+            /*#__PURE__*/ jsx(ChevronRight, {
+                className: "px-1 group-last:hidden"
+            })
+        ]
+    });
+}
+const _Breadcrumb = /*#__PURE__*/ forwardRef(Breadcrumb);
+
+function isLinkProps(props) {
+    return !!props.href;
+}
+function Backlink(props, ref) {
+    const { className, children, withUnderline, ...restProps } = props;
+    const Component = isLinkProps(props) ? Link : Button$1;
+    return /*#__PURE__*/ jsxs(Component, {
+        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline data-[focus-visible]:outline-focus [&:not([data-focus-visible])]:outline-none'),
+        ...restProps,
+        // @ts-expect-error ignore the type of the ref here
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx(ChevronLeft, {
+                className: cx('-ml-[0.5em] group-hover:-translate-x-1 flex-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
+                })
+            })
+        ]
+    });
+}
+const _Backlink = /*#__PURE__*/ forwardRef(Backlink);
+
+const cardVariants = cva({
+    base: [
+        'group/card',
+        'rounded-2xl border p-3',
+        'flex gap-y-4',
+        'relative',
+        // **** Heading ****
+        '[&_[data-slot="heading"]]:inline',
+        '[&_[data-slot="heading"]]:heading-s',
+        '[&_[data-slot="heading"]]:leading-6',
+        '[&_[data-slot="heading"]]:w-fit',
+        '[&_[data-slot="heading"]]:text-pretty',
+        '[&_[data-slot="heading"]]:hyphens-auto',
+        '[&_[data-slot="heading"]]:[word-break:break-word]',
+        // **** Content ****
+        '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
+        // **** Media ****
+        '[&_[data-slot="media"]]: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 in FF)
+        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-[3/2] [&_[data-slot="media"]>*:not([data-slot="badge"])]: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"]>*:not([data-slot="badge"])]:scale-110',
+        // **** Card link in Heading ****
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>*:not([data-slot="badge"])]:scale-110',
+        // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
+        // Border top is set to even out the border bottom used for the underline
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:no-underline',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-2',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-transparent',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:transition-colors',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]:hover]:border-b-current',
+        // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:leading-6',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:hyphens-auto',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:[word-break:break-word]',
+        // **** Fail-safe for interactive elements ****
+        // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
+        // The card is made clickable by a pseudo-element on the heading that covers the entire card
+        '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
+        // Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
+        '[&_[data-slot="card-link"]_a]:static',
+        // Place other interactive on top of the pseudo-element that makes the entire card clickable
+        // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
+        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
+        // **** Badge ****
+        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
+        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
+        // Left aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
+        // Right aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
+        // ... and position the badge at the right edge of the media content
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
+    ],
+    variants: {
+        /**
+     * The variant of the card
+     * @default subtle
+     */ variant: {
+            subtle: [
+                'border-transparent',
+                // **** Media styles ****
+                '[&_[data-slot="media"]]:rounded-2xl'
+            ],
+            outlined: 'border border-black'
+        },
+        /**
+     * The layout of the card
+     * @default vertical
+     */ layout: {
+            vertical: [
+                'flex-col',
+                // **** Media ****
+                '[&_[data-slot="media"]]:rounded-t-2xl'
+            ],
+            horizontal: [
+                'gap-x-4',
+                // **** With Media ****
+                '[&:has(>[data-slot="media"]:first-child)]:flex-col',
+                '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
+                '[&:has(>[data-slot="media"])]:md:!flex-row',
+                '[&_[data-slot="media"]]:md:h-fit',
+                '[&:has(>[data-slot="media"])>*]:md:basis-1/2',
+                // Position media at the edges of the card
+                '[&_[data-slot="media"]]:md:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+                '[&_[data-slot="media"]:first-child]:md:mr-0',
+                '[&_[data-slot="media"]:last-child]:md:ml-0',
+                // Make sure the card link is clickable when the media is on the right side
+                // This i necessary because the media content is positioned after the card link in the DOM
+                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
+                // **** Without Media ****
+                '[&:not(:has(>[data-slot="media"]))]:flex-row',
+                // Make the layout responsive: when the Content reaches a minimum width of 18rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
+                '[&:not(:has(>[data-slot="media"]))]:flex-wrap [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:grow [&:not(:has(>[data-slot="media"]))_[data-slot="content"]]:basis-[18rem]',
+                // Make sure svg's etc. are not shrinkable
+                '[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
+            ]
+        }
+    },
+    defaultVariants: {
+        variant: 'subtle',
+        layout: 'vertical'
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            layout: 'horizontal',
+            className: [
+                // **** Media ****
+                // Some rounded corners are removed when the card is outlined
+                '[&_[data-slot="media"]]:rounded-t-2xl',
+                '[&_[data-slot="media"]:first-child]:md:rounded-tr-none [&_[data-slot="media"]:first-child]:md:rounded-bl-2xl',
+                '[&_[data-slot="media"]:last-child]:md:rounded-tl-none [&_[data-slot="media"]:last-child]:md:rounded-br-2xl',
+                // **** Badge ****
+                // Override default corner radius of the badge to match the media border radius
+                '[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:md:rounded-tr-none',
+                '[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:md:rounded-tl-none'
+            ]
+        }
+    ]
+});
+const Card = ({ children, className: _className, variant, layout, ...restProps })=>{
+    const className = cardVariants({
+        className: _className,
+        variant,
+        layout
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        ...restProps,
+        children: children
+    });
+};
+const cardLinkVariants = cva({
+    base: 'w-fit max-w-full',
+    variants: {
+        withHref: {
+            true: [
+                // **** Clickarea ****
+                'cursor-pointer',
+                'after:absolute',
+                'after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                'focus-visible:outline-none',
+                'data-[focus-visible]:after:outline-focus',
+                'data-[focus-visible]:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the clickable area.
+                'hover:no-underline'
+            ],
+            false: [
+                // **** Clickarea ****
+                '[&_a]:after:cursor-pointer',
+                '[&_a]:after:absolute',
+                '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                '[&_a[data-focus-visible]]:outline-none',
+                '[&_a[data-focus-visible]]:after:outline-focus',
+                '[&_a[data-focus-visible]]:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the card.
+                // The group-hover ensures that the hover effect also applies when this component is used as a wrapper around a link.
+                '[&_a]:group-hover/card:no-underline'
+            ]
+        }
+    }
+});
+/**
+ * A component that creates a clickable area on a card.
+ * It can be used either as a wrapper around a link or as a standalone link.
+ */ const CardLink = ({ className: _className, href, ...restProps })=>{
+    const className = cardLinkVariants({
+        className: _className,
+        withHref: !!href
+    });
+    return href ? /*#__PURE__*/ jsx(Link, {
+        "data-slot": "card-link",
+        ...restProps,
+        href: href,
+        className: className
+    }) : // We can't utilize that the `Link` component from react-aria-components renders as a span if it doesn't have an href,
+    // because it still renders with role="link" and tabindex="0" which makes it focusable.
+    // So we need to render a div instead.
+    /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "card-link",
+        className: className
+    });
+};
+
+/**
+ * A React component that wraps https://react-spectrum.adobe.com/react-aria/useDateFormatter.html
+ * By default it sets the timeZone to `Europe/Berlin` to prevent the server's timezone from affecting
+ * the localized format
+ */ const DateFormatter = ({ options: _options, value, children: render })=>{
+    const options = {
+        timeZone: 'Europe/Berlin',
+        ..._options
+    };
+    const formatter = useDateFormatter(options);
+    const date = typeof value === 'string' ? new Date(value) : value;
+    const formatted = formatter.format(date);
+    return render ? render(formatted) : formatted;
+};
+
+const VideoLoop = ({ src, format, alt, className })=>{
+    // Control the video playback state, so that the user can pause and play the video at will, also control the video autoplay
+    const [shouldPlay, setShouldPlay] = useState(false);
+    // Needed to show the pause button when the video is actually playing (refer to google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
+    const [isPlaying, setIsPlaying] = useState(false);
+    // We need to check if the user prefers reduced motion, so that we can prevent the video from autoplaying if so
+    const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(null);
+    const videoRef = useRef(null);
+    useEffect(()=>{
+        const { matches: userPrefersReducedMotion } = matchMedia('(prefers-reduced-motion: reduce)');
+        setUserPrefersReducedMotion(userPrefersReducedMotion);
+        // Autoplay the video if the user does not prefer reduced motion
+        setShouldPlay(!userPrefersReducedMotion);
+    }, []);
+    // Follow google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+    // "Don't assume a video will play, and don't show a pause button when the video is not actually playing."
+    // "You should always look at the Promise returned by the play function to see if it was rejected:"
+    // This is why we use the promise returned by the play function, and an extra state variable to determine if the video is actually playing or not
+    useEffect(()=>{
+        if (!videoRef.current) return;
+        if (shouldPlay) {
+            videoRef.current.play().then(()=>setIsPlaying(true)).catch(()=>setIsPlaying(false));
+        } else {
+            videoRef.current.pause();
+            setIsPlaying(false);
+        }
+    }, [
+        shouldPlay
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cx(className, 'relative', userPrefersReducedMotion === null && 'opacity-0'),
+        children: [
+            /*#__PURE__*/ jsx("video", {
+                "aria-hidden": true,
+                ref: videoRef,
+                // cursor-pointer is not working on the button below, so we add it here for the same effect
+                className: "h-full w-full cursor-pointer object-cover",
+                playsInline: true,
+                loop: userPrefersReducedMotion === false,
+                autoPlay: userPrefersReducedMotion === false,
+                muted: true,
+                onEnded: (event)=>{
+                    if (userPrefersReducedMotion) {
+                        // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
+                        event.currentTarget.currentTime = 0;
+                        setShouldPlay(false);
+                        setIsPlaying(false);
+                    }
+                },
+                children: /*#__PURE__*/ jsx("source", {
+                    src: src,
+                    type: `video/${format}`
+                })
+            }),
+            userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
+                "aria-hidden": true,
+                type: "button",
+                onClick: ()=>setShouldPlay((prevState)=>!prevState),
+                className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
+                shouldPlay && 'opacity-0', isPlaying && [
+                    'transition-opacity duration-200',
+                    // Only show the pause button when the video is hovered or focused
+                    'focus-visible:opacity-100',
+                    'hover:opacity-100'
+                ]),
+                children: /*#__PURE__*/ jsx("span", {
+                    className: "grid h-12 w-12 place-items-center rounded-full bg-white outline-none",
+                    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 outline-none data-[focus-visible]:outline-focus',
+        // Ensure a minimum click area of 44x44px, while making it look like it only has the size of the content
+        '-m-2.5 p-2.5 data-[focus-visible]:outline-offset-[-0.625rem]'
+    ],
+    variants: {
+        withChevron: {
+            true: '[&[aria-expanded="true"]_svg]:rotate-180',
+            false: null
+        },
+        /**
+     * When the button is without text, but with a single icon.
+     * @default false
+     */ isIconOnly: {
+            true: '[&>svg]:h-7 [&>svg]:w-7',
+            false: 'gap-2.5'
+        }
+    },
+    defaultVariants: {
+        withChevron: false,
+        isIconOnly: false
+    }
+});
+const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
+    const [props, ref] = useContextProps(restProps, _ref, ButtonContext);
+    return /*#__PURE__*/ jsxs(Button$1, {
+        ...props,
+        ref: ref,
+        className: disclosureButtonVariants({
+            className,
+            withChevron,
+            isIconOnly
+        }),
+        children: [
+            children,
+            withChevron && /*#__PURE__*/ jsx(ChevronDown, {
+                className: "flex-none transition-transform duration-300 motion-reduce:transition-none"
+            })
+        ]
+    });
+};
+const Disclosure = ({ ref: _ref, children, ..._props })=>{
+    const [props, ref] = useContextProps(_props, _ref, DisclosureContext);
+    const groupState = useContext(DisclosureGroupStateContext);
+    let { id, ...otherProps } = props;
+    const defaultId = useId();
+    id ||= defaultId;
+    const isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
+    const state = useDisclosureState({
+        ...props,
+        isExpanded,
+        onExpandedChange (isExpanded) {
+            if (groupState) {
+                groupState.toggleKey(id);
+            }
+            props.onExpandedChange?.(isExpanded);
+        }
+    });
+    const isDisabled = props.isDisabled || groupState?.isDisabled || false;
+    const domProps = filterDOMProps(otherProps);
+    const panelRef = useRef(null);
+    const { buttonProps, panelProps } = useDisclosure({
+        ...props,
+        isExpanded,
+        isDisabled
+    }, state, panelRef);
+    const { role: _, ...propsWithoutRole } = panelProps;
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                DisclosureContext,
+                state
+            ],
+            [
+                ButtonContext,
+                buttonProps
+            ],
+            [
+                DisclosurePanelContext,
+                {
+                    ...propsWithoutRole,
+                    ref: panelRef
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            ...domProps,
+            className: otherProps.className,
+            ref: ref,
+            "data-expanded": state.isExpanded || undefined,
+            "data-disabled": isDisabled || undefined,
+            children: children
+        })
+    });
+};
+const DisclosurePanelContext = /*#__PURE__*/ createContext({});
+const DisclosurePanel = ({ ref: _ref, ..._props })=>{
+    const disclosureContext = useContext(DisclosureContext);
+    const [props, ref] = useContextProps(_props, _ref, DisclosurePanelContext);
+    const { role: _role = 'group', className, ...restProps } = props;
+    const ariaLabelledby = _props['aria-labelledby'] ?? restProps['aria-labelledby'];
+    const isWithoutRole = _role === 'none';
+    const role = isWithoutRole ? undefined : _role;
+    return /*#__PURE__*/ jsx("div", {
+        className: cx('grid transition-all duration-300 after:relative after:block after:h-0 after:transition-all after:duration-300 motion-reduce:transition-none', disclosureContext?.isExpanded ? 'grid-rows-[1fr] after:h-3.5' : 'grid-rows-[0fr]'),
+        children: /*#__PURE__*/ jsx("div", {
+            ...restProps,
+            ref: ref,
+            className: cx(className, 'relative overflow-hidden [content-visibility:visible] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5'),
+            role: role,
+            "aria-labelledby": isWithoutRole ? undefined : ariaLabelledby
+        })
+    });
+};
 
-export { _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ComboboxItem, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, SelectItem, _TextArea as TextArea, _TextField as TextField };
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Caption, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, _Heading as Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, _TextArea as TextArea, _TextField as TextField, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, VideoLoop, _useLocale as useLocale };