@obosbbl/grunnmuren-react 2.0.0-canary.31 → 2.0.0-canary.33

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, LinkProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, Link, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components';
 export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
@@ -73,9 +73,9 @@ declare const buttonVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
+    class?: never;
     className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
         [x: string]: any;
     } | null | undefined)[] | {
@@ -102,21 +102,16 @@ declare const buttonVariants: (props?: ({
         [x: string]: any;
     } | null | undefined;
 })) | undefined) => string;
-type ButtonOrLinkProps = (React.ComponentPropsWithoutRef<'button'> & {
-    href?: never;
-}) | (React.ComponentPropsWithoutRef<'a'> & {
-    href: string;
-});
-type ButtonProps = VariantProps<typeof buttonVariants> & {
-    className?: string;
-    children: React.ReactNode;
+type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
+    children?: React.ReactNode;
+    href?: string;
     /**
      * Display the button in a loading state
      * @default false
      */
     isLoading?: boolean;
-    style?: React.CSSProperties;
-} & ButtonOrLinkProps;
+};
+type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps$1;
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 type CheckboxProps = {
@@ -133,13 +128,13 @@ type CheckboxProps = {
 declare const _Checkbox: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
     errorMessage?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<CheckboxProps$1, "children" | "style" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
 
 type CheckboxGroupProps = {
@@ -158,7 +153,7 @@ type CheckboxGroupProps = {
 declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -166,7 +161,7 @@ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<CheckboxGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
@@ -194,7 +189,7 @@ type ComboboxProps<T extends object> = {
 declare const _Combobox: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -203,13 +198,13 @@ declare const _Combobox: react.ForwardRefExoticComponent<{
      * Display the dropdown button trigger in a loading state
      * @default false
      */
-    isLoading?: boolean | undefined;
+    isLoading?: boolean;
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<ComboBoxProps<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type RadioGroupProps = {
@@ -228,7 +223,7 @@ type RadioGroupProps = {
 declare const _RadioGroup: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -236,7 +231,7 @@ declare const _RadioGroup: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<RadioGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 type RadioProps = {
@@ -251,11 +246,11 @@ type RadioProps = {
 declare const _Radio: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<RadioProps$1, "children" | "style" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
 
 type SelectProps<T extends object> = {
@@ -276,7 +271,7 @@ type SelectProps<T extends object> = {
 declare const _Select: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -284,9 +279,9 @@ declare const _Select: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<SelectProps$1<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
@@ -310,7 +305,7 @@ type TextAreaProps = {
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
 declare const _TextArea: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -318,14 +313,14 @@ declare const _TextArea: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /**
      * The number of visible text lines for the control.
      * @default 2
      */
-    rows?: number | undefined;
+    rows?: number;
 } & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 type TextFieldProps = {
@@ -357,7 +352,7 @@ type TextFieldProps = {
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
 declare const _TextField: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -369,18 +364,18 @@ declare const _TextField: react.ForwardRefExoticComponent<{
     /** Element to be rendered in the right side of the input. */
     rightAddon?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /**
      * Text alignment of the input
      * @default left
      */
-    textAlign?: "left" | "right" | undefined;
+    textAlign?: "left" | "right";
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** Add a divider between the left/right addons and the input, a value of 0 will be ignored */
-    withAddonDivider?: boolean | undefined;
+    withAddonDivider?: boolean;
     /** Defines the number of characters and determines the width of the input element */
-    size?: number | undefined;
+    size?: number;
 } & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type NumberFieldProps = {
@@ -416,7 +411,7 @@ type NumberFieldProps = {
 } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
 declare const _NumberField: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -428,22 +423,22 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
     /** Element to be rendered in the right side of the input. */
     rightAddon?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /**
      * Text alignment of the input
      * @default left
      */
-    textAlign?: "left" | "right" | undefined;
+    textAlign?: "left" | "right";
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** Add a divider between the left/right addons and the input */
-    withAddonDivider?: boolean | undefined;
+    withAddonDivider?: boolean;
     /** Defines the number of characters and determines the width of the input element, a value of 0 will be ignored */
-    size?: number | undefined;
+    size?: number;
     /** Defines the maximum numeric value */
-    maxValue?: number | undefined;
+    maxValue?: number;
     /** Defines the minimum numeric value */
-    minValue?: number | undefined;
+    minValue?: number;
 } & Omit<NumberFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const alertVariants: (props?: ({
@@ -474,9 +469,9 @@ declare const alertVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
+    class?: never;
     className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
         [x: string]: any;
     } | null | undefined)[] | {
@@ -566,11 +561,11 @@ type BreadcrumbProps = {
 } & Omit<BreadcrumbProps$1, 'className' | 'style'>;
 declare const _Breadcrumb: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** The URL to navigate to when clicking the breadcrumb. */
-    href?: string | undefined;
+    href?: string;
 } & Omit<BreadcrumbProps$1, "className" | "style"> & react.RefAttributes<HTMLLIElement>>;
 
 type BreadcrumbsProps = {
@@ -581,34 +576,23 @@ type BreadcrumbsProps = {
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, 'className' | 'style'>;
 declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
 
-type BacklinkProps = {
+type ButtonOrLinkProps = {
+    children?: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
-    /** The URL to navigate to when clicking the backlink. */
+    /** Determines whether to use an anchor or a button for the Backlink */
     href?: string;
-    /** The content of the link */
-    children?: React.ReactNode;
     /** To add a permanent underline on the link (not only on hover)
      * @default false
      */
     withUnderline?: boolean;
-} & LinkProps;
-declare const _Backlink: react.ForwardRefExoticComponent<{
-    /** Additional CSS className for the element. */
-    className?: string | undefined;
-    /** The URL to navigate to when clicking the backlink. */
-    href?: string | undefined;
-    /** The content of the link */
-    children?: React.ReactNode;
-    /** To add a permanent underline on the link (not only on hover)
-     * @default false
-     */
-    withUnderline?: boolean | undefined;
-} & LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+};
+type BacklinkProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
+declare const _Backlink: react.ForwardRefExoticComponent<BacklinkProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, ContentContext, type ContentProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxItem as SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { I18nProvider, RouterProvider, useContextProps, Provider, 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, Button as Button$1, 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, useLocale, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Link } from 'react-aria-components';
+import { I18nProvider, RouterProvider, 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, useLocale, 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 { useLayoutEffect, createContext, forwardRef, Children, useId, useState, useRef } from 'react';
@@ -156,7 +156,7 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
  * 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-all duration-200 focus:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-offset-2'
     ],
     variants: {
         /**
@@ -234,8 +234,11 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
         isIconOnly: false
     }
 });
+function isLinkProps$1(props) {
+    return !!props.href;
+}
 function Button(props, forwardedRef) {
-    const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
+    const { children: _children, color, isIconOnly, isLoading, variant, style: _style, ...restProps } = props;
     const [widthOverride, setWidthOverride] = useState();
     const ownRef = useRef(null);
     const ref = mergeRefs(ownRef, forwardedRef);
@@ -251,34 +254,35 @@ function Button(props, forwardedRef) {
         }
     }, [
         isLoading,
-        children
+        _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';
-    }
-    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
-        }),
+    const className = buttonVariants({
+        className: props.className,
+        color,
+        isIconOnly,
+        variant
+    });
+    const children = widthOverride ? // remove margin for icon alignment
+    /*#__PURE__*/ jsx(LoadingSpinner, {
+        className: "!m-0 mx-auto animate-spin"
+    }) : _children;
+    const style = {
+        ..._style,
+        widthOverride
+    };
+    return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
+        ...restProps,
+        className: className,
+        style: style,
         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,
+        style: style,
+        ref: ref,
+        children: children
+    });
 }
 const _Button = /*#__PURE__*/ forwardRef(Button);
 
@@ -286,7 +290,7 @@ 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 py-2.5 text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
+        'min-h-11 rounded-md py-2.5 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',
         // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -313,9 +317,9 @@ const inputGroup = cx([
     'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
 ]);
 const dropdown = {
-    popover: cx(// Use outline + clip-path hack instead of border to prevent scrollbars from overflowing border-radius
-    'min-w-[--trigger-width] overflow-y-auto rounded-md bg-white shadow outline outline-1 outline-offset-[-1px] outline-black [clip-path:content-box] data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
-    listbox: cx('max-h-[25rem] 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')
 };
 
@@ -330,7 +334,7 @@ function ErrorMessage(props) {
 }
 
 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.
@@ -377,9 +381,6 @@ function Checkbox(props, ref) {
                     isInvalid: isInvalid,
                     ref: ref,
                     children: [
-                        /*#__PURE__*/ jsx("span", {
-                            className: "absolute -left-2.5 top-0 z-10 h-11 w-11"
-                        }),
                         /*#__PURE__*/ jsx(CheckmarkBox, {}),
                         children
                     ]
@@ -573,7 +574,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.
@@ -593,24 +594,19 @@ const defaultClasses = cx([
 ]);
 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("span", {
-                className: "absolute -left-2.5 top-0 z-10 h-11 w-11 "
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                children: [
-                    children,
-                    description && /*#__PURE__*/ jsx(Description, {
-                        className: "mt-2 block",
-                        children: description
-                    })
-                ]
-            })
-        ]
+        children: /*#__PURE__*/ jsxs("div", {
+            children: [
+                children,
+                description && /*#__PURE__*/ jsx(Description, {
+                    className: "mt-2 block",
+                    children: description
+                })
+            ]
+        })
     });
 }
 const _Radio = /*#__PURE__*/ forwardRef(Radio);
@@ -962,13 +958,17 @@ function Breadcrumb(props, ref) {
 }
 const _Breadcrumb = /*#__PURE__*/ forwardRef(Breadcrumb);
 
+function isLinkProps(props) {
+    return !!props.href;
+}
 function Backlink(props, ref) {
-    const { className, children, href, withUnderline, ...restProps } = props;
-    return /*#__PURE__*/ jsxs(Link, {
+    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 focus:outline-none data-[focus-visible]:ring data-[focus-visible]:ring-black'),
         ...restProps,
+        // @ts-expect-error ignore the type of the ref here
         ref: ref,
-        href: href,
         children: [
             /*#__PURE__*/ jsx(ChevronLeft, {
                 className: cx('-ml-[0.5em] flex-shrink-0 transition-transform duration-300 group-hover:-translate-x-1')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.31",
+  "version": "2.0.0-canary.33",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -19,10 +19,10 @@
   ],
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
-    "@react-aria/utils": "^3.24.1",
+    "@react-aria/utils": "^3.25.1",
     "@types/node": "^20.11.19",
     "cva": "1.0.0-beta.1",
-    "react-aria-components": "^1.2.1"
+    "react-aria-components": "^1.3.1"
   },
   "peerDependencies": {
     "react": "^18"