@obosbbl/grunnmuren-react 3.4.4 → 3.4.5

package/dist/__stories__/form-validation.stories.cjs

@@ -2,10 +2,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var reactAriaComponents = require('react-aria-components');
+var Form$1 = require('react-aria-components/Form');
 var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
 var cva = require('cva');
-var reactAria = require('react-aria');
+var Button$1 = require('react-aria-components/Button');
+var Link = require('react-aria-components/Link');
+var slots = require('react-aria-components/slots');
+var useProgressBar = require('react-aria/useProgressBar');
+var I18nProvider = require('react-aria-components/I18nProvider');
+var Group = require('react-aria-components/Group');
+var Input = require('react-aria-components/Input');
+var TextField$1 = require('react-aria-components/TextField');
+require('react-aria-components/Header');
+require('react-aria-components/ListBox');
+var Text = require('react-aria-components/Text');
+var FieldError = require('react-aria-components/FieldError');
+var Label$1 = require('react-aria-components/Label');
 
 const formField = cva.cx('group flex flex-col gap-2');
 const formFieldError = cva.cx('bg-red-light text-red w-fit px-2 py-1 text-sm/6', 'group-data-[slot=file-upload]:rounded-lg');
@@ -73,7 +85,7 @@ const translations = {
  * 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 = reactAriaComponents.useLocale();
+    const locale = I18nProvider.useLocale();
     return locale.locale;
 }
 
@@ -175,7 +187,7 @@ function isLinkProps(props) {
     return !!props.href;
 }
 function Button({ ref = null, ...props }) {
-    [props, ref] = reactAriaComponents.useContextProps(props, ref, ButtonContext);
+    [props, ref] = slots.useContextProps(props, ref, ButtonContext);
     const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
         // Don't animate the icon when we're pending, as it affects the loading spinner
@@ -187,7 +199,7 @@ function Button({ ref = null, ...props }) {
         isPending
     });
     const locale = _useLocale();
-    const { progressBarProps } = reactAria.useProgressBar({
+    const { progressBarProps } = useProgressBar.useProgressBar({
         isIndeterminate: true,
         'aria-label': translations.pending[locale]
     });
@@ -200,12 +212,12 @@ function Button({ ref = null, ...props }) {
             })
         ]
     }) : _children;
-    return isLinkProps(restProps) ? /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Link, {
+    return isLinkProps(restProps) ? /*#__PURE__*/ jsxRuntime.jsx(Link.Link, {
         ...restProps,
         className: className,
         ref: ref,
         children: children
-    }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Button, {
+    }) : /*#__PURE__*/ jsxRuntime.jsx(Button$1.Button, {
         ...restProps,
         className: className,
         isPending: isPending,
@@ -222,7 +234,7 @@ function InputAddonDivider() {
 
 function Description(props) {
     const { className, ...restProps } = props;
-    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Text, {
+    return /*#__PURE__*/ jsxRuntime.jsx(Text.Text, {
         ...restProps,
         className: cva.cx(className, 'description'),
         slot: "description"
@@ -231,7 +243,7 @@ function Description(props) {
 
 function ErrorMessage(props) {
     const { children, className, ...restProps } = props;
-    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Text, {
+    return /*#__PURE__*/ jsxRuntime.jsx(Text.Text, {
         ...restProps,
         className: cva.cx(className, formFieldError),
         slot: "errorMessage",
@@ -245,14 +257,14 @@ function ErrorMessage(props) {
  */ function ErrorMessageOrFieldError({ errorMessage }) {
     return errorMessage ? /*#__PURE__*/ jsxRuntime.jsx(ErrorMessage, {
         children: errorMessage
-    }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.FieldError, {
+    }) : /*#__PURE__*/ jsxRuntime.jsx(FieldError.FieldError, {
         className: formFieldError
     });
 }
 
 function Label(props) {
     const { children, className, ...restProps } = props;
-    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Label, {
+    return /*#__PURE__*/ jsxRuntime.jsx(Label$1.Label, {
         className: cva.cx(className, 'leading-7 font-medium'),
         ...restProps,
         children: children
@@ -277,7 +289,7 @@ function TextField(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 || _isInvalid;
-    return /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.TextField, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(TextField$1.TextField, {
         ...restProps,
         className: cva.cx(className, formField),
         isInvalid: isInvalid,
@@ -288,14 +300,14 @@ function TextField(props) {
             description && /*#__PURE__*/ jsxRuntime.jsx(Description, {
                 children: description
             }),
-            leftAddon || rightAddon ? /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.Group, {
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxRuntime.jsxs(Group.Group, {
                 className: cva.cx(inputGroup, {
                     'w-fit': !!size
                 }),
                 children: [
                     leftAddon,
                     withAddonDivider && leftAddon && /*#__PURE__*/ jsxRuntime.jsx(InputAddonDivider, {}),
-                    /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Input, {
+                    /*#__PURE__*/ jsxRuntime.jsx(Input.Input, {
                         className: inputVariants({
                             textAlign,
                             isGrouped: true,
@@ -307,7 +319,7 @@ function TextField(props) {
                     withAddonDivider && rightAddon && /*#__PURE__*/ jsxRuntime.jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
-            }) : /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Input, {
+            }) : /*#__PURE__*/ jsxRuntime.jsx(Input.Input, {
                 className: inputVariants({
                     textAlign,
                     autoWidth: !!size
@@ -353,7 +365,7 @@ const Form = (props)=>{
             }, 0);
         }
     };
-    return /*#__PURE__*/ jsxRuntime.jsxs(reactAriaComponents.Form, {
+    return /*#__PURE__*/ jsxRuntime.jsxs(Form$1.Form, {
         onSubmit: handleSubmit,
         className: "container-prose flex flex-col items-start gap-4",
         validationErrors: errors,

package/dist/__stories__/form-validation.stories.js

@@ -1,9 +1,21 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useState } from 'react';
-import { useLocale, useContextProps, Link, Button as Button$1, Text, FieldError, Label as Label$1, TextField as TextField$1, Group, Input, Form as Form$1 } from 'react-aria-components';
+import { Form as Form$1 } from 'react-aria-components/Form';
 import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
 import { cx, cva, compose } from 'cva';
-import { useProgressBar } from 'react-aria';
+import { Button as Button$1 } from 'react-aria-components/Button';
+import { Link } from 'react-aria-components/Link';
+import { useContextProps } from 'react-aria-components/slots';
+import { useProgressBar } from 'react-aria/useProgressBar';
+import { useLocale } from 'react-aria-components/I18nProvider';
+import { Group } from 'react-aria-components/Group';
+import { Input } from 'react-aria-components/Input';
+import { TextField as TextField$1 } from 'react-aria-components/TextField';
+import 'react-aria-components/Header';
+import 'react-aria-components/ListBox';
+import { Text } from 'react-aria-components/Text';
+import { FieldError } from 'react-aria-components/FieldError';
+import { Label as Label$1 } from 'react-aria-components/Label';
 
 const formField = cx('group flex flex-col gap-2');
 const formFieldError = cx('bg-red-light text-red w-fit px-2 py-1 text-sm/6', 'group-data-[slot=file-upload]:rounded-lg');

package/dist/__stories__/layout.stories.cjs

@@ -3,8 +3,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
 var cva = require('cva');
-var reactAriaComponents = require('react-aria-components');
+var Link = require('react-aria-components/Link');
+var slots = require('react-aria-components/slots');
 var react = require('react');
+var Group = require('react-aria-components/Group');
 
 const HeadingContext = /*#__PURE__*/ react.createContext({});
 const headingVariants = cva.cva({
@@ -19,7 +21,7 @@ const headingVariants = cva.cva({
     }
 });
 const Heading = ({ ref = null, ...props })=>{
-    [props, ref] = reactAriaComponents.useContextProps(props, ref, HeadingContext);
+    [props, ref] = slots.useContextProps(props, ref, HeadingContext);
     const { children, level, size, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
     const _className = headingVariants({
         size
@@ -35,7 +37,7 @@ const Heading = ({ ref = null, ...props })=>{
 };
 const ContentContext = /*#__PURE__*/ react.createContext({});
 const Content = ({ ref = null, ...props })=>{
-    [props, ref] = reactAriaComponents.useContextProps(props, ref, ContentContext);
+    [props, ref] = slots.useContextProps(props, ref, ContentContext);
     const { _outerWrapper: outerWrapper, ...restProps } = props;
     const content = /*#__PURE__*/ jsxRuntime.jsx("div", {
         ...restProps,
@@ -57,7 +59,7 @@ const mediaVariant = cva.cva({
 });
 const MediaContext = /*#__PURE__*/ react.createContext({});
 const Media = ({ ref = null, ...props })=>{
-    [props, ref] = reactAriaComponents.useContextProps(props, ref, MediaContext);
+    [props, ref] = slots.useContextProps(props, ref, MediaContext);
     const { className, fit, ...restProps } = props;
     const _className = mediaVariant({
         fit
@@ -203,7 +205,7 @@ const Card = ({ children, className, variant, layout, ...restProps })=>{
         className: cva.cx(className, '@container rounded-2xl'),
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
             className: cardClassName,
-            children: /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Provider, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(slots.Provider, {
                 values: [
                     [
                         HeadingContext,
@@ -283,7 +285,7 @@ const cardLinkVariants = cva.cva({
         className: _className,
         withHref: !!href
     });
-    return href ? /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Link, {
+    return href ? /*#__PURE__*/ jsxRuntime.jsx(Link.Link, {
         "data-slot": "card-link",
         ...restProps,
         href: href,
@@ -394,7 +396,7 @@ const Hero = ({ variant, className, children, ...rest })=>{
         variant,
         className
     });
-    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Provider, {
+    return /*#__PURE__*/ jsxRuntime.jsx(slots.Provider, {
         values: [
             [
                 HeroContext,
@@ -412,7 +414,7 @@ const Hero = ({ variant, className, children, ...rest })=>{
                 }
             ],
             [
-                reactAriaComponents.GroupContext,
+                Group.GroupContext,
                 {
                     // Prevents the group from being announced as a group by screen readers
                     // The Group component is used to group the Hero's CTA buttons together visually, and has no semantic meaning

package/dist/__stories__/layout.stories.js

@@ -1,8 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ArrowRight } from '@obosbbl/grunnmuren-icons-react';
 import { cva, cx } from 'cva';
-import { useContextProps, Provider, Link, GroupContext } from 'react-aria-components';
+import { Link } from 'react-aria-components/Link';
+import { useContextProps, Provider } from 'react-aria-components/slots';
 import { createContext } from 'react';
+import { GroupContext } from 'react-aria-components/Group';
 
 const HeadingContext = /*#__PURE__*/ createContext({});
 const headingVariants = cva({

package/dist/index.d.mts

@@ -1,14 +1,39 @@
-import { DisclosureProps as DisclosureProps$1, ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ContextValue, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, HeadingProps as HeadingProps$1, ListBoxItemProps, ListBoxSectionProps, ComboBoxProps, FileTriggerProps as FileTriggerProps$1, RouterProvider, TextProps, LabelProps, DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps as ModalOverlayProps$1, NumberFieldProps as NumberFieldProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, ResizableTableContainerProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
-export { ListBoxItemProps as ComboboxItemProps, DisclosureGroup, DisclosureGroupProps, Form, Group, LabelProps, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
+import { RouterProvider } from 'react-aria-components';
+export { Form, Group } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { RefAttributes, HTMLAttributes, HTMLProps, ComponentProps, Ref, ReactNode, RefObject, Dispatch, SetStateAction, JSX } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
-import { DisclosureState } from 'react-stately';
+import { ButtonProps as ButtonProps$1 } from 'react-aria-components/Button';
+import { DisclosureProps as DisclosureProps$1 } from 'react-aria-components/DisclosureGroup';
+export { DisclosureGroup, DisclosureGroupProps } from 'react-aria-components/DisclosureGroup';
+import { DisclosureState } from 'react-stately/useDisclosureState';
+import { LinkProps as LinkProps$1 } from 'react-aria-components/Link';
+import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1 } from 'react-aria-components/Breadcrumbs';
+import { ContextValue } from 'react-aria-components/slots';
 import { EmblaViewportRefType } from 'embla-carousel-react';
-import { DateFormatterOptions } from 'react-aria';
-import { FormValidationProps } from '@react-stately/form';
+import { CheckboxProps as CheckboxProps$1 } from 'react-aria-components/Checkbox';
+import { CheckboxGroupProps as CheckboxGroupProps$1 } from 'react-aria-components/CheckboxGroup';
+import { ComboBoxProps } from 'react-aria-components/ComboBox';
+import { DateFormatterOptions } from 'react-aria/useDateFormatter';
+import { FileTriggerProps as FileTriggerProps$1 } from 'react-aria-components/FileTrigger';
+import { useFormValidationState } from 'react-stately/private/form/useFormValidationState';
+import { TextProps } from 'react-aria-components/Text';
+import { LabelProps } from 'react-aria-components/Label';
+export { LabelProps } from 'react-aria-components/Label';
+import { DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1 } from 'react-aria-components/Dialog';
+import { ModalOverlayProps as ModalOverlayProps$1 } from 'react-aria-components/Modal';
+import { NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components/NumberField';
+import { RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1 } from 'react-aria-components/RadioGroup';
+import { SelectProps as SelectProps$1 } from 'react-aria-components/Select';
+import { ColumnResizerProps, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, ResizableTableContainerProps, TableHeaderProps as TableHeaderProps$1, RowProps } from 'react-aria-components/Table';
+import { TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1 } from 'react-aria-components/Tabs';
+import { TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components/TagGroup';
+import { TextFieldProps as TextFieldProps$1 } from 'react-aria-components/TextField';
+import { HeaderProps } from 'react-aria-components/Header';
+import { ListBoxItemProps, ListBoxSectionProps } from 'react-aria-components/ListBox';
+export { ListBoxItemProps as ComboboxItemProps, ListBoxItemProps as SelectItemProps } from 'react-aria-components/ListBox';
 
 declare const disclosureButtonVariants: (props?: ({
     withChevron?: boolean | undefined;
@@ -228,7 +253,7 @@ type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivEleme
 };
 declare const cardVariants: (props?: ({
     variant?: "subtle" | "outlined" | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
+    layout?: "vertical" | "horizontal" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -366,7 +391,7 @@ declare const ListBoxSection: <T extends object>({ className, ...restProps }: Li
 /**
  * This component can be used to label grouped items in a `ListBoxSection` with a heading
  */
-declare const ListBoxHeader: (props: HeadingProps$1) => react_jsx_runtime.JSX.Element;
+declare const ListBoxHeader: (props: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps<T extends object> = {
     children: React.ReactNode;
@@ -461,7 +486,8 @@ type DateFormatterProps = {
  */
 declare const DateFormatter: ({ options: _options, value, children: render }: DateFormatterProps) => ReactNode;
 
-type FileTriggerProps = Partial<FormValidationProps<File>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
+type FormValidationProps<T> = Parameters<typeof useFormValidationState<T>>[0];
+type FileTriggerProps = Partial<Omit<FormValidationProps<File>, 'value'>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
     ref?: RefObject<HTMLInputElement | null>;
     isInvalid?: boolean;
     isRequired?: boolean;

package/dist/index.mjs

@@ -1,21 +1,60 @@
 'use client';
-import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, GroupContext, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, ProgressBar as ProgressBar$1, LinkContext, ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
-export { DisclosureGroup, Form, Group } from 'react-aria-components';
+import { RouterProvider } from 'react-aria-components';
+export { Form, Group } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva, cx, compose } from 'cva';
 import { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, isValidElement, cloneElement, use } from 'react';
+import { useContextProps, Provider, DEFAULT_SLOT, useSlottedContext } from 'react-aria-components/slots';
 import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, Download, LinkExternal, ArrowRight, Edit, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
-import { filterDOMProps, mergeProps, mergeRefs, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
-import { useFocusRing, useDisclosure, useProgressBar, useDateFormatter, useField } from 'react-aria';
-import { useDisclosureState } from 'react-stately';
+import { ButtonContext as ButtonContext$1, Button as Button$1 } from 'react-aria-components/Button';
+import { DisclosureContext, DisclosureGroupStateContext } from 'react-aria-components/DisclosureGroup';
+export { DisclosureGroup } from 'react-aria-components/DisclosureGroup';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { mergeProps } from 'react-aria/mergeProps';
+import { mergeRefs } from 'react-aria/mergeRefs';
+import { useDisclosure } from 'react-aria/useDisclosure';
+import { useFocusRing } from 'react-aria/useFocusRing';
+import { useDisclosureState } from 'react-stately/useDisclosureState';
+import { useLocale, I18nProvider } from 'react-aria-components/I18nProvider';
+import { Link as Link$1, LinkContext } from 'react-aria-components/Link';
+import { Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1 } from 'react-aria-components/Breadcrumbs';
+import { useProgressBar } from 'react-aria/useProgressBar';
 import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
-import { useFormValidation } from '@react-aria/form';
-import { useFormValidationState } from '@react-stately/form';
-import { useControlledState } from '@react-stately/utils';
-import { PressResponder } from '@react-aria/interactions';
+import { GroupContext, Group } from 'react-aria-components/Group';
+import { CheckboxContext, Checkbox as Checkbox$1 } from 'react-aria-components/Checkbox';
+import { Text } from 'react-aria-components/Text';
+import { CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components/CheckboxGroup';
+import { FieldError, FieldErrorContext } from 'react-aria-components/FieldError';
+import { Label as Label$1, LabelContext } from 'react-aria-components/Label';
+import { ComboBox } from 'react-aria-components/ComboBox';
+import { Input, InputContext } from 'react-aria-components/Input';
+import { Popover } from 'react-aria-components/Popover';
+import { Header } from 'react-aria-components/Header';
+import { ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1 } from 'react-aria-components/ListBox';
+import { useDateFormatter } from 'react-aria/useDateFormatter';
+import { FormContext } from 'react-aria-components/Form';
+import { useFormValidation } from 'react-aria/private/form/useFormValidation';
+import { useFormReset } from 'react-aria/private/utils/useFormReset';
+import { useUpdateEffect } from 'react-aria/private/utils/useUpdateEffect';
+import { useField } from 'react-aria/useField';
+import { useFormValidationState } from 'react-stately/private/form/useFormValidationState';
+import { useControlledState } from 'react-stately/useControlledState';
+import { PressResponder } from 'react-aria/private/interactions/PressResponder';
+import { useObjectRef } from 'react-aria/useObjectRef';
+import { Dialog as Dialog$1, DialogTrigger as DialogTrigger$1 } from 'react-aria-components/Dialog';
+import { Modal as Modal$1, ModalOverlay } from 'react-aria-components/Modal';
+import { NumberField as NumberField$1 } from 'react-aria-components/NumberField';
+import { Radio as Radio$1, RadioGroup as RadioGroup$1 } from 'react-aria-components/RadioGroup';
+import { Select as Select$1, SelectValue } from 'react-aria-components/Select';
+import { ProgressBar as ProgressBar$1 } from 'react-aria-components/ProgressBar';
 import { useDebouncedCallback } from 'use-debounce';
+import { ColumnResizer, Table as Table$1, TableBody as TableBody$1, Cell, Column, ResizableTableContainer, TableHeader as TableHeader$1, Row } from 'react-aria-components/Table';
+import { Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from 'react-aria-components/Tabs';
+import { TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1 } from 'react-aria-components/TagGroup';
+import { TextArea as TextArea$1 } from 'react-aria-components/TextArea';
+import { TextField as TextField$1 } from 'react-aria-components/TextField';
 
 const HeadingContext = /*#__PURE__*/ createContext({});
 const headingVariants = cva({
@@ -1802,8 +1841,9 @@ function Combobox(props) {
                 onChange: (e)=>onSelect?.(e.target.files),
                 capture: defaultCamera,
                 multiple: allowsMultiple,
-                // @ts-expect-error
-                webkitdirectory: acceptDirectory ? '' : undefined,
+                ...acceptDirectory ? {
+                    webkitdirectory: ''
+                } : {},
                 // This is a work around to prevent error in the console when attempting to submit a form with a required and empty file input
                 // RAC uses display: none, which prevents the file input from being focused.
                 // What we do instead is to hide it visually using custom CSS, so that the native HTML validation messages are still hidden. Which is why

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {
@@ -19,18 +19,13 @@
   },
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.1.2",
-    "@react-aria/form": "^3.0.18",
-    "@react-aria/interactions": "^3.25.3",
-    "@react-aria/utils": "^3.29.1",
-    "@react-stately/form": "^3.1.5",
-    "@react-stately/utils": "^3.10.7",
     "cva": "^1.0.0-0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "react-aria": "^3.41.1",
-    "react-aria-components": "^1.10.1",
-    "react-stately": "^3.39.0",
+    "react-aria": "^3.48.0",
+    "react-aria-components": "^1.17.0",
+    "react-stately": "^3.46.0",
     "use-debounce": "^10.0.4"
   },
   "devDependencies": {