@obosbbl/grunnmuren-react 2.0.0-canary.4 → 2.0.0-canary.40

package/dist/index.mjs

@@ -1,17 +1,209 @@
-import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem, ComboBox, Group, Input, Button as Button$1, 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';
+'use client';
+import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, FieldError, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, 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 } from 'react-aria-components';
+export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useId } from 'react';
-import { cva, cx, compose } from 'cva';
-import { LoadingSpinner, Check, ChevronDown } from '@obosbbl/grunnmuren-icons-react';
-import { mergeRefs } from '@react-aria/utils';
-import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5nawgR.js';
+import { createContext, forwardRef, Children, useId, useState } from 'react';
+import { cx, cva, compose } from 'cva';
+import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
+import { useLayoutEffect } from '@react-aria/utils';
+import { useProgressBar, useDateFormatter } from 'react-aria';
+
+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)=>{
+    [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)=>{
+    [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 Footer = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "footer"
+    });
+
+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,
+                                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
+    });
+}
+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-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
+        '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: {
         /**
@@ -27,17 +219,21 @@ import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5na
      * Adjusts the color of the button for usage on different backgrounds.
      * @default green
      */ color: {
-            green: 'focus-visible:ring-black',
-            mint: 'focus-visible:ring-mint focus-visible:ring-offset-green-dark',
-            white: 'focus-visible:ring-white focus-visible:ring-offset-blue'
+            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: // The of-type classes takes care to add spacing when the button is used with icons
-            'px-4 py-2 [&>svg]:first-of-type:mr-2.5 [&>svg]:last-of-type:ml-2.5'
+            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: 'relative !text-transparent',
+            false: null
         }
     },
     compoundVariants: [
@@ -45,96 +241,103 @@ import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5na
             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]'
+            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352] [&_[role="progressbar"]]:text-white'
         },
         {
             color: 'green',
             variant: 'secondary',
-            className: 'bg-white text-black shadow-green hover:bg-green hover:text-white active:bg-green'
+            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: 'active:[#9ddac6] bg-mint text-black hover:bg-[#8dd4bd]'
+            className: 'active:[#9ddac6] bg-mint text-black hover:bg-[#8dd4bd] [&_[role="progressbar"]]:text-black'
         },
         {
             color: 'mint',
             variant: 'secondary',
-            className: 'text-mint shadow-mint hover:bg-mint hover:text-black'
+            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'
+            className: 'text-mint [&_[role="progressbar"]]:text-mint'
         },
         {
             color: 'white',
             variant: 'primary',
-            className: 'bg-white text-black hover:bg-sky active:bg-sky-light'
+            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'
+            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'
+            className: 'text-white [&_[role="progressbar"]]:text-white'
         }
     ],
     defaultVariants: {
         variant: 'primary',
         color: 'green',
-        isIconOnly: false
+        isIconOnly: false,
+        isPending: false
     }
 });
-function Button(props, forwardedRef) {
-    const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
-    const [widthOverride, setWidthOverride] = useState();
-    const ownRef = useRef(null);
-    const ref = mergeRefs(ownRef, forwardedRef);
-    useClientLayoutEffect(()=>{
-        if (isLoading) {
-            const requestID = window.requestAnimationFrame(()=>{
-                setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
-            });
-            return ()=>{
-                setWidthOverride(undefined);
-                cancelAnimationFrame(requestID);
-            };
-        }
-    }, [
-        isLoading,
-        children
-    ]);
-    let Component = 'a';
-    if (props.href == null) {
-        // If we don't have a href, it's a button, and we add a fallback type button to prevent the button from accidentally submitting when in a form
-        Component = 'button';
-        restProps.type ??= 'button';
+function isLinkProps$1(props) {
+    return !!props.href;
+}
+const translations$1 = {
+    pending: {
+        nb: 'venter',
+        sv: 'väntar',
+        en: 'pending'
     }
-    return(// @ts-expect-error TS doesn't agree here taht restProps is safe to spread, because restProps for anchors aren't type compatible with restProps for buttons, but that should be okay here
-    /*#__PURE__*/ jsx(Component, {
-        "aria-busy": isLoading ? true : undefined,
-        className: buttonVariants({
-            className,
-            color,
-            isIconOnly,
-            variant
-        }),
+};
+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,
-        style: {
-            ...style,
-            width: widthOverride
-        },
+        children: children
+    }) : /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
-        children: widthOverride ? // remove margin for icon alignment
-        /*#__PURE__*/ jsx(LoadingSpinner, {
-            className: "!m-0 mx-auto animate-spin"
-        }) : children
-    }));
+        className: className,
+        isPending: isPending,
+        ref: ref,
+        children: children
+    });
 }
 const _Button = /*#__PURE__*/ forwardRef(Button);
 
@@ -142,20 +345,27 @@ 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 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 text-base font-normal 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: 'flex-1 !ring-0'
         }
     },
     defaultVariants: {
@@ -163,10 +373,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('min-w-[--trigger-width] overflow-y-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'),
+    // 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')
 };
 
@@ -180,22 +394,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 relative left-0 -mx-2.5 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.
@@ -206,7 +411,7 @@ 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',
             // 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
@@ -223,7 +428,7 @@ function Checkbox(props, ref) {
     const id = useId();
     const descriptionId = 'desc' + id;
     const errorMessageId = 'error' + id;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
             value: {
@@ -237,16 +442,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, {
@@ -269,9 +473,31 @@ function Label(props) {
     });
 }
 
+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 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'),
@@ -286,28 +512,53 @@ function CheckboxGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
 }
 const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
 
-/**
- * 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
+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
+                ]
+            })
+    });
+};
+
+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),
@@ -329,7 +580,7 @@ function Combobox(props, ref) {
                         ref: ref
                     }),
                     /*#__PURE__*/ jsx(Button$1, {
-                        children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
+                        children: isPending ? /*#__PURE__*/ jsx(LoadingSpinner, {
                             className: "animate-spin"
                         }) : /*#__PURE__*/ jsx(ChevronDown, {
                             className: dropdown.chevronIcon
@@ -355,33 +606,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'),
@@ -396,8 +627,8 @@ function RadioGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
@@ -405,7 +636,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',
+    'relative -ml-2.5 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.
@@ -418,38 +649,35 @@ const defaultClasses = cx([
     // hover
     'data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light',
     // 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'
 ]);
 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),
@@ -490,33 +718,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),
@@ -541,18 +747,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),
@@ -565,29 +777,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
@@ -595,11 +874,326 @@ 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);
+
+// TODO: add new icons
+const iconMap = {
+    info: InfoCircle,
+    success: CheckCircle,
+    warning: Warning,
+    danger: CloseCircle
+};
+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"]]:text-base [&_[data-slot="heading"]]:font-medium [&_[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"]]:text-xs [&_[data-slot="footer"]]:font-light [&_[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, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
+    const 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-focus focus-visible:-outline-offset-8'),
+                onClick: close,
+                "aria-label": translations.close[locale],
+                children: /*#__PURE__*/ jsx(Close, {})
+            }),
+            isExpandable && /*#__PURE__*/ jsxs("button", {
+                className: cx('relative col-span-full row-start-2 -my-3 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
+                'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
+                onClick: ()=>setIsExpanded((prevState)=>!prevState),
+                "aria-expanded": isExpanded,
+                "aria-controls": id,
+                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 data-[focus-visible]:outline-focus group-last:no-underline [&: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] flex-shrink-0 transition-transform duration-300 group-hover:-translate-x-1')
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: /*#__PURE__*/ jsx("span", {
+                    className: cx('border-b-[1px] border-t-[1px] border-transparent 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',
+        'grid auto-rows-max 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',
+        // **** Content ****
+        '[&_[data-slot="content"]]:grid [&_[data-slot="content"]]:auto-rows-max [&_[data-slot="content"]]:gap-y-4',
+        // **** Media ****
+        '[&_[data-slot="media"]]:overflow-hidden',
+        '[&_[data-slot="media"]]:rounded-t-2xl',
+        // 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"]>*]:aspect-[3/2] [&_[data-slot="media"]>*]: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"]>*]:scale-110',
+        // **** Card link in Heading ****
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>*]: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"]]:text-pretty [&_[data-slot="heading"]_[data-slot="card-link"]]:leading-6',
+        // **** 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]'
+    ],
+    variants: {
+        /**
+     * The variant of the card
+     * @default subtle
+     */ variant: {
+            subtle: [
+                'border-transparent',
+                // Media styles:
+                '[&_[data-slot="media"]]:rounded-b-2xl'
+            ],
+            outlined: 'border border-black'
+        }
+    },
+    defaultVariants: {
+        variant: 'subtle'
+    }
+});
+const Card = ({ children, className: _className, variant, ...restProps })=>{
+    const className = cardVariants({
+        className: _className,
+        variant
+    });
+    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", {
+        "data-slot": "card-link",
+        className: className,
+        ...restProps
+    });
+};
+
+/**
+ * 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;
+};
 
-export { _Button as Button, _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, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField, _useLocale as useLocale };