@obosbbl/grunnmuren-react 2.0.0-canary.1 → 2.0.0-canary.2

package/dist/index.mjs

@@ -0,0 +1,585 @@
+import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ComboBox, Group, Input, Button as Button$1, Popover, ListBox, ListBoxItem, 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 } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useId } from 'react';
+import { cva, cx, compose } from 'cva';
+import { LoadingSpinner, Check, ChevronDown } from '@obosbbl/grunnmuren-icons-react';
+import { u as useClientLayoutEffect } from './useClientLayoutEffect-client-2_5nawgR.js';
+
+/**
+ * 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'
+    ],
+    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: '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'
+        },
+        /**
+     * 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'
+        }
+    },
+    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]'
+        },
+        {
+            color: 'green',
+            variant: 'secondary',
+            className: 'bg-white text-black shadow-green hover:bg-green hover:text-white active:bg-green'
+        },
+        {
+            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]'
+        },
+        {
+            color: 'mint',
+            variant: 'secondary',
+            className: 'text-mint shadow-mint hover:bg-mint hover:text-black'
+        },
+        {
+            color: 'mint',
+            variant: 'tertiary',
+            className: 'text-mint'
+        },
+        {
+            color: 'white',
+            variant: 'primary',
+            className: 'bg-white text-black hover:bg-sky active:bg-sky-light'
+        },
+        {
+            color: 'white',
+            variant: 'secondary',
+            className: 'text-white shadow-white hover:bg-white hover:text-black'
+        },
+        {
+            color: 'white',
+            variant: 'tertiary',
+            className: 'text-white'
+        }
+    ],
+    defaultVariants: {
+        variant: 'primary',
+        color: 'green',
+        isIconOnly: false
+    }
+});
+function Button(props) {
+    const { children, className, color, isIconOnly, loading, variant, style, ...restProps } = props;
+    // TODO: Merge refs when we use RAC
+    const buttonRef = useRef(null);
+    const [widthOverride, setWidthOverride] = useState();
+    useClientLayoutEffect(()=>{
+        if (loading) {
+            const requestID = window.requestAnimationFrame(()=>{
+                setWidthOverride(buttonRef?.current?.getBoundingClientRect()?.width);
+            });
+            return ()=>{
+                setWidthOverride(undefined);
+                cancelAnimationFrame(requestID);
+            };
+        }
+    }, [
+        loading,
+        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": loading ? true : undefined,
+        className: buttonVariants({
+            className,
+            color,
+            isIconOnly,
+            variant
+        }),
+        ref: buttonRef,
+        style: {
+            ...style,
+            width: widthOverride
+        },
+        ...restProps,
+        children: widthOverride ? // remove margin for icon alignment
+        /*#__PURE__*/ jsx(LoadingSpinner, {
+            className: "!m-0 mx-auto animate-spin"
+        }) : children
+    }));
+}
+
+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',
+        // invalid styles
+        'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red'
+    ],
+    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'
+        },
+        isGrouped: {
+            false: '',
+            //
+            true: 'flex-1 !ring-0 first:pl-0 last:pr-0'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        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 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'),
+    chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
+};
+
+function ErrorMessage(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, formFieldError),
+        slot: "errorMessage",
+        children: children
+    });
+}
+
+function 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'
+]);
+// 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", {
+        className: cx([
+            'relative left-0 grid flex-none place-content-center rounded-sm border-2 border-black text-white',
+            // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
+            // For the ::before psuedo element the line height of the label is always 1em.
+            // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
+            // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
+            'mt-[calc((1em_*_1.75_-_24px)_/_2)] h-[24px] w-[24px]',
+            // selected
+            'group-data-[selected]:!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]',
+            // 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
+            // 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'
+        ]),
+        children: /*#__PURE__*/ jsx(Check, {
+            className: "h-full w-full opacity-0 group-data-[selected]:opacity-100"
+        })
+    });
+}
+function Checkbox(props) {
+    const { children, className, description, errorMessage, isInvalid: _isInvalid, ...restProps } = props;
+    const id = useId();
+    const descriptionId = 'desc' + id;
+    const errorMessageId = 'error' + id;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
+            value: {
+                'aria-describedby': description ? descriptionId : undefined,
+                'aria-errormessage': errorMessage ? errorMessageId : undefined
+            },
+            children: [
+                /*#__PURE__*/ jsxs(Checkbox$1, {
+                    ...restProps,
+                    className: cx(className, defaultClasses$1),
+                    isInvalid: isInvalid,
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "absolute -left-2.5 top-0 z-10 h-11 w-11"
+                        }),
+                        /*#__PURE__*/ jsx(CheckmarkBox, {}),
+                        children
+                    ]
+                }),
+                description && /*#__PURE__*/ jsx(Description, {
+                    className: "block",
+                    id: descriptionId,
+                    children: description
+                }),
+                errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
+                    className: "mt-2 block",
+                    id: errorMessageId,
+                    children: errorMessage
+                })
+            ]
+        })
+    });
+}
+
+function Label(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Label$1, {
+        className: cx(className, 'font-semibold leading-7'),
+        ...restProps,
+        children: children
+    });
+}
+
+function CheckboxGroup(props) {
+    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
+        ...restProps,
+        className: cx(className, 'flex flex-col gap-2'),
+        isInvalid: isInvalid,
+        isRequired: isRequired,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            children,
+            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
+                children: errorMessage
+            })
+        ]
+    });
+}
+
+/**
+ * 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 Combobox(props) {
+    const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(ComboBox, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsxs(Group, {
+                className: inputGroup,
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        className: input({
+                            isGrouped: true
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Button$1, {
+                        children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
+                            className: "animate-spin"
+                        }) : /*#__PURE__*/ jsx(ChevronDown, {
+                            className: dropdown.chevronIcon
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                // FIXME: The trigger width doesn't include the padding of the group, so for now we have to apply this workaround.
+                // Also... the combobox border gets a pixel wider when focused, so we account for that as well when calculating the width
+                // and the offset.
+                // The input gutter should probably be moved to a theme variable instead of using the hardcoded value as here.
+                className: cx(dropdown.popover, 'min-w-[calc(var(--trigger-width)+26px)]'),
+                crossOffset: -13,
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    className: dropdown.listbox,
+                    children: children
+                })
+            })
+        ]
+    });
+}
+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
+                ]
+            })
+    });
+};
+
+function RadioGroup(props) {
+    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(RadioGroup$1, {
+        ...restProps,
+        className: cx(className, 'flex flex-col gap-2'),
+        isInvalid: isInvalid,
+        isRequired: isRequired,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            children,
+            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
+                children: errorMessage
+            })
+        ]
+    });
+}
+
+const defaultClasses = cx([
+    'relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7',
+    // the radio button itself
+    'before:flex-none before:rounded-full before:border-2 before:border-black',
+    // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
+    // For the ::before psuedo element the line height of the label is always 1em.
+    // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
+    // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
+    'before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]',
+    // selected
+    'data-[selected]:before:border-black data-[selected]:before:bg-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',
+    // focus
+    'data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]',
+    // 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) {
+    const { children, className, description, ...restProps } = props;
+    return /*#__PURE__*/ jsxs(Radio$1, {
+        ...restProps,
+        className: cx(className, defaultClasses),
+        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
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+function Select(props) {
+    const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(Select$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsxs(Button$1, {
+                className: cx(input({
+                    focusModifier: 'visible'
+                }), // How to reuse placeholder text?
+                'inline-flex cursor-default items-center gap-2'),
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {
+                        className: "flex-1 truncate text-left data-[placeholder]:text-[#727070]"
+                    }),
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: dropdown.chevronIcon
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                className: dropdown.popover,
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    className: dropdown.listbox,
+                    children: children
+                })
+            })
+        ]
+    });
+}
+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
+                ]
+            })
+    });
+};
+
+function TextArea(props) {
+    const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(TextField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsx(TextArea$1, {
+                className: input(),
+                rows: rows
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+
+const inputWithAlignment = compose(input, cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        }
+    }
+}));
+function TextField(props) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(TextField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
+                className: inputGroup,
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider, {
+                        className: "ml-3"
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: inputWithAlignment({
+                            textAlign,
+                            isGrouped: true
+                        })
+                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
+                        className: "mr-3"
+                    }),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                className: inputWithAlignment({
+                    textAlign
+                })
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+function Divider({ className }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: cx(className, 'block h-6 w-px flex-none bg-black')
+    });
+}
+
+export { Button, Checkbox, CheckboxGroup, Combobox, ComboboxItem, Radio, RadioGroup, Select, SelectItem, TextArea, TextField };

package/dist/useClientLayoutEffect-client-2_5nawgR.js

@@ -0,0 +1,9 @@
+'use client';
+import { useLayoutEffect } from 'react';
+
+const canUseDOM = ()=>{
+    return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+};
+const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : ()=>{};
+
+export { useClientLayoutEffect as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.1",
+  "version": "2.0.0-canary.2",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -9,54 +9,23 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    "./button": {
-      "types": "./dist/button/Button.d.ts",
-      "default": "./dist/button/Button.mjs"
-    },
-    "./checkbox": {
-      "types": "./dist/checkbox/index.d.ts",
-      "default": "./dist/checkbox/index.mjs"
-    },
-    "./label": {
-      "types": "./dist/label/index.d.ts",
-      "default": "./dist/label/index.mjs"
-    },
-    "./radiogroup": {
-      "types": "./dist/radiogroup/index.d.ts",
-      "default": "./dist/radiogroup/index.mjs"
-    },
-    "./textfield": {
-      "types": "./dist/textfield/index.d.ts",
-      "default": "./dist/textfield/index.mjs"
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.0",
+    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
     "cva": "1.0.0-beta.1",
-    "react-aria-components": "1.0.0-rc.0"
+    "react-aria-components": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^18"
   },
-  "unbuild": {
-    "entries": [
-      "./src/button/Button.tsx",
-      "./src/checkbox/index.ts",
-      "./src/label/index.ts",
-      "./src/radiogroup/index.ts",
-      "./src/textfield/index.ts"
-    ],
-    "declaration": true,
-    "rollup": {
-      "esbuild": {
-        "jsx": "automatic"
-      }
-    }
-  },
   "scripts": {
-    "build": "unbuild"
+    "build": "bunchee"
   }
 }