@obosbbl/grunnmuren-react 2.0.0-canary.32 → 2.0.0-canary.34

package/README.md

@@ -81,7 +81,7 @@ import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
 import { useRouter } from 'next/navigation';
 
 export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
-  let router = useRouter();
+  const router = useRouter();
 
   return (
     <GrunnmurenProvider locale={locale} navigate={router.push}>
@@ -116,6 +116,52 @@ export default function RootLayout({
 }
 ```
 
+#### Basepath
+
+If you're using a router such as Next's, then you can use the `useHref` prop to convert router-specific hrefs into native HTML hrefs. This is very useful for instance when using Next's [basepath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting, as you can use this to prepend the basepath to all links, similar to Next's `<Link>`.
+
+**Before**
+
+```tsx
+import Link from 'next/link';
+import { Button } from '@obosbbl/grunnmuren-react';
+
+// Notice how you have to handle the basepath yourself with Grunnmuren's component, but not with Next's.
+
+<Link href="/bli-medlem">Bli medlem</Link>
+<Button href="/medlem/bli-medlem">Bli medlem</Button>
+```
+
+**After**
+
+```js
+// app/providers.tsx
+'use client'
+import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
+import { useRouter } from 'next/navigation';
+
+export function Providers({children, locale}: { children: React.ReactNode, locale: string}) {
+  const router = useRouter();
+  const useHref = (href: string) => '/medlem' + href;
+
+  return (
+    <GrunnmurenProvider locale={locale} navigate={router.push} useHref={useHref}>
+      {children}
+    </GrunnmurenProvider>
+  )
+}
+```
+
+```tsx
+import Link from 'next/link';
+import { Button } from '@obosbbl/grunnmuren-react';
+
+// The hrefs are the same, as basepath is handled by the useHref hook in the provider.
+
+<Link href="/bli-medlem">Bli medlem</Link>
+<Button href="/bli-medlem">Bli medlem</Button>
+```
+
 ### Optimize bundle size by removing unused locales
 
 React Aria Components has built in support for over 30 languages, most of which will be unused in your application. To optimize your applications bundle size, it is recommended to use React Aria's build plugin to remove all the unused locales. Here is a quick example for Next.js:

package/dist/index.d.mts

@@ -1,10 +1,11 @@
-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, LinkProps } from 'react-aria-components';
+import { RouterProvider, 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';
 import react__default, { HTMLProps, ForwardedRef } from 'react';
 import { VariantProps } from 'cva';
 
+type RouterProviderProps = React.ComponentProps<typeof RouterProvider>;
 type GrunnmurenProviderProps = {
     children: React.ReactNode;
     /**
@@ -12,10 +13,12 @@ type GrunnmurenProviderProps = {
      *  @default nb
      */
     locale?: 'nb' | 'sv' | 'en';
-    /** The router to use for navigation */
-    navigate?: (path: string) => void;
+    /** The router to use for client side navigation */
+    navigate?: RouterProviderProps['navigate'];
+    /** Converts a router-specific href to a native HTML href, e.g. prepending a base path */
+    useHref?: RouterProviderProps['useHref'];
 };
-declare function GrunnmurenProvider({ children, locale, navigate, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
+declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
 
 type AccordionProps = {
     children: react__default.ReactNode;
@@ -102,7 +105,7 @@ declare const buttonVariants: (props?: ({
         [x: string]: any;
     } | null | undefined;
 })) | undefined) => string;
-type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
+type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
     children?: React.ReactNode;
     href?: string;
     /**
@@ -111,7 +114,7 @@ type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
      */
     isLoading?: boolean;
 };
-type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
+type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps$1;
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 type CheckboxProps = {
@@ -135,7 +138,7 @@ declare const _Checkbox: react.ForwardRefExoticComponent<{
     errorMessage?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<CheckboxProps$1, "children" | "style" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
+} & Omit<CheckboxProps$1, "style" | "children" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
 
 type CheckboxGroupProps = {
     children: React.ReactNode;
@@ -162,7 +165,7 @@ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
     label?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<CheckboxGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
+} & Omit<CheckboxGroupProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
 
@@ -205,7 +208,7 @@ declare const _Combobox: react.ForwardRefExoticComponent<{
     placeholder?: string;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<ComboBoxProps<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<ComboBoxProps<object>, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type RadioGroupProps = {
     children: React.ReactNode;
@@ -232,7 +235,7 @@ declare const _RadioGroup: react.ForwardRefExoticComponent<{
     label?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<RadioGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
+} & Omit<RadioGroupProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 type RadioProps = {
     children: React.ReactNode;
@@ -251,7 +254,7 @@ declare const _Radio: react.ForwardRefExoticComponent<{
     description?: React.ReactNode;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<RadioProps$1, "children" | "style" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
+} & Omit<RadioProps$1, "style" | "children" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
 
 type SelectProps<T extends object> = {
     children: React.ReactNode;
@@ -282,7 +285,7 @@ declare const _Select: react.ForwardRefExoticComponent<{
     placeholder?: string;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<SelectProps$1<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
+} & Omit<SelectProps$1<object>, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
     /** Additional CSS className for the element. */
@@ -321,7 +324,7 @@ declare const _TextArea: react.ForwardRefExoticComponent<{
      * @default 2
      */
     rows?: number;
-} & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<TextFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 type TextFieldProps = {
     /** Additional CSS className for the element. */
@@ -376,7 +379,7 @@ declare const _TextField: react.ForwardRefExoticComponent<{
     withAddonDivider?: boolean;
     /** Defines the number of characters and determines the width of the input element */
     size?: number;
-} & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<TextFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type NumberFieldProps = {
     /** Additional CSS className for the element. */
@@ -439,7 +442,7 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
     maxValue?: number;
     /** Defines the minimum numeric value */
     minValue?: number;
-} & Omit<NumberFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
+} & Omit<NumberFieldProps$1, "style" | "children" | "className" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const alertVariants: (props?: ({
     variant?: "info" | "success" | "warning" | "danger" | undefined;
@@ -566,7 +569,7 @@ declare const _Breadcrumb: react.ForwardRefExoticComponent<{
     style?: React.CSSProperties;
     /** The URL to navigate to when clicking the breadcrumb. */
     href?: string;
-} & Omit<BreadcrumbProps$1, "className" | "style"> & react.RefAttributes<HTMLLIElement>>;
+} & Omit<BreadcrumbProps$1, "style" | "className"> & react.RefAttributes<HTMLLIElement>>;
 
 type BreadcrumbsProps = {
     /** Additional CSS className for the element. */
@@ -579,31 +582,20 @@ declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
     className?: string;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-} & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
+} & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "style" | "className"> & react.RefAttributes<HTMLOListElement>>;
 
-type BacklinkProps = {
-    /** Additional CSS className for the element. */
-    className?: string;
-    /** The URL to navigate to when clicking the backlink. */
-    href?: string;
-    /** The content of the link */
+type ButtonOrLinkProps = {
     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;
-    /** 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 & 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

@@ -2,26 +2,22 @@
 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';
+import { createContext, forwardRef, Children, useId, useState, useRef } 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 { mergeRefs } from '@react-aria/utils';
+import { useLayoutEffect, mergeRefs } from '@react-aria/utils';
 
-function GrunnmurenProvider({ children, locale = 'nb', navigate }) {
+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
     });
 }
 
-const canUseDOM = ()=>{
-    return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-};
-const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : ()=>{};
-
 const HeadingContext = /*#__PURE__*/ createContext({});
 const Heading = (props, ref)=>{
     [props, ref] = useContextProps(props, ref, HeadingContext);
@@ -80,7 +76,7 @@ function AccordionItem(props, ref) {
     //
     const [isOpen, setIsOpen] = useState(// If we are controlled, use that open state, otherwise use the uncontrolled
     isControlled ? controlledIsOpen : defaultOpen);
-    useClientLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         if (isControlled) {
             setIsOpen(controlledIsOpen);
         }
@@ -194,7 +190,7 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
         {
             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'
         },
         {
             color: 'mint',
@@ -234,15 +230,15 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
         isIconOnly: false
     }
 });
-function isLinkProps(props) {
-    return 'href' in props;
+function isLinkProps$1(props) {
+    return !!props.href;
 }
 function Button(props, forwardedRef) {
     const { children: _children, color, isIconOnly, isLoading, variant, style: _style, ...restProps } = props;
     const [widthOverride, setWidthOverride] = useState();
     const ownRef = useRef(null);
     const ref = mergeRefs(ownRef, forwardedRef);
-    useClientLayoutEffect(()=>{
+    useLayoutEffect(()=>{
         if (isLoading) {
             const requestID = window.requestAnimationFrame(()=>{
                 setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
@@ -268,9 +264,9 @@ function Button(props, forwardedRef) {
     }) : _children;
     const style = {
         ..._style,
-        widthOverride
+        width: widthOverride
     };
-    return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link, {
+    return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...restProps,
         className: className,
         style: style,
@@ -290,7 +286,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
@@ -317,9 +313,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')
 };
 
@@ -334,7 +330,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.
@@ -381,9 +377,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
                     ]
@@ -577,7 +570,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.
@@ -597,24 +590,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);
@@ -966,13 +954,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.32",
+  "version": "2.0.0-canary.34",
   "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"