@obosbbl/grunnmuren-react 3.4.4 → 3.4.6

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
@@ -107,21 +109,11 @@ const cardVariants = cva.cva({
         // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
         '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
         // **** Badge ****
-        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        '*:data-[slot=media]:*:data-[slot=badge]:absolute',
+        '*:data-[slot=media]:*:data-[slot=badge]:first:top-3.5 *:data-[slot=media]:*:data-[slot=badge]:first:left-3.5',
         // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
-        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
-        // Left aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
-        // Right aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
-        // ... and position the badge at the right edge of the media content
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
+        '*:data-[slot=media]:*:data-[slot=badge]:z-[1]',
+        '*:data-[slot=media]:*:data-[slot=badge]:last:top-3.5 *:data-[slot=media]:*:data-[slot=badge]:last:right-3.5'
     ],
     variants: {
         /**
@@ -203,7 +195,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 +275,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 +386,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 +404,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({
@@ -105,21 +107,11 @@ const cardVariants = cva({
         // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
         '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
         // **** Badge ****
-        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        '*:data-[slot=media]:*:data-[slot=badge]:absolute',
+        '*:data-[slot=media]:*:data-[slot=badge]:first:top-3.5 *:data-[slot=media]:*:data-[slot=badge]:first:left-3.5',
         // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
-        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
-        // Left aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
-        // Right aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
-        // ... and position the badge at the right edge of the media content
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
+        '*:data-[slot=media]:*:data-[slot=badge]:z-[1]',
+        '*:data-[slot=media]:*:data-[slot=badge]:last:top-3.5 *:data-[slot=media]:*:data-[slot=badge]:last:right-3.5'
     ],
     variants: {
         /**

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;
@@ -250,8 +275,18 @@ type CardLinkProps = (Omit<LinkProps$1, 'href'> & Required<Pick<LinkProps$1, 'hr
  */
 declare const CardLink: ({ className: _className, href, ...restProps }: CardLinkProps) => react_jsx_runtime.JSX.Element;
 
-type CarouselProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'onSelect'> & {
+type CarouselMethods = {
+    /** Navigate to a specific slide by index. */
+    goToSlide: (index: number) => void;
+    /** Navigate to the next slide. */
+    goToNextSlide: () => void;
+    /** Navigate to the previous slide. */
+    goToPrevSlide: () => void;
+};
+type CarouselElement = HTMLDivElement & CarouselMethods;
+type CarouselProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'onSelect' | 'ref'> & {
     children?: React.ReactNode;
+    ref?: React.Ref<CarouselElement>;
     /**
      * Alignment of the items relative to the carousel viewport.
      * @default 'center'
@@ -292,6 +327,7 @@ declare const Carousel: ({ autoPlayDelay, align, children, initialIndex, orienta
 type CarouselContextValue = {
     slidesInView: number[];
     orientation: 'horizontal' | 'vertical';
+    '~shouldUseAriaCarouselPattern': boolean;
     /**
      * @private
      */
@@ -306,7 +342,7 @@ type CarouselItemsProps = HTMLProps<HTMLDivElement> & {
     /** The <CarouselItem/> components to be displayed within the carousel. */
     children: React.ReactNode;
 };
-declare const CarouselItems: ({ className, children }: CarouselItemsProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselItems: ({ className, children, ...restProps }: CarouselItemsProps) => react_jsx_runtime.JSX.Element;
 type CarouselControlsProps = HTMLProps<HTMLDivElement> & {
     /** The <CarouselItem/> components to be displayed within the carousel. */
     children: React.ReactNode;
@@ -366,7 +402,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;
@@ -405,7 +441,7 @@ type HeadingProps = Omit<HTMLProps<HTMLHeadingElement>, 'size'> & VariantProps<t
 };
 declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
 declare const headingVariants: (props?: ({
-    size?: "s" | "xl" | "l" | "m" | "xs" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xs" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -461,7 +497,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;
@@ -556,9 +593,11 @@ type ModalOverlayProps = Omit<ModalOverlayProps$1, 'isDismissable' | 'style'> &
     zIndex?: number;
     /** @default true Makes the modal dismissable */
     isDismissable?: boolean;
+    /** @default false When true, the modal takes up the full screen */
+    fullscreen?: boolean;
 };
 type ModalProps = ModalOverlayProps;
-declare const Modal: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, ...restProps }: ModalProps) => react_jsx_runtime.JSX.Element;
+declare const Modal: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, fullscreen, ...restProps }: ModalProps) => react_jsx_runtime.JSX.Element;
 type DialogProps = DialogProps$1 & {
     children: React.ReactNode;
 };
@@ -872,4 +911,4 @@ type VideoLoopProps = {
 declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
 
 export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Link as UNSAFE_Link, Modal as UNSAFE_Modal, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _useLocale as useLocale };
-export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, TableContainerProps as UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };
+export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, TableContainerProps as UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };

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 { createContext, useContext, useId, useRef, Children, useState, useEffect, useMemo, useCallback, useImperativeHandle, 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 { Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, OverlayTriggerStateContext } from 'react-aria-components/Dialog';
+import { Modal as Modal$1, ModalOverlay } from 'react-aria-components/Modal';
+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 { 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({
@@ -599,9 +638,9 @@ const badgeVariants = cva({
     variants: {
         color: {
             'gray-dark': 'bg-gray-dark text-white',
-            mint: 'bg-mint',
-            sky: 'bg-sky',
-            white: 'bg-white',
+            mint: 'bg-mint text-black',
+            sky: 'bg-sky text-black',
+            white: 'bg-white text-black',
             'blue-dark': 'bg-blue-dark text-white',
             'green-dark': 'bg-green-dark text-white'
         },
@@ -852,21 +891,11 @@ const cardVariants = cva({
         // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
         '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
         // **** Badge ****
-        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        '*:data-[slot=media]:*:data-[slot=badge]:absolute',
+        '*:data-[slot=media]:*:data-[slot=badge]:first:top-3.5 *:data-[slot=media]:*:data-[slot=badge]:first:left-3.5',
         // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
-        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
-        // Left aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
-        // Right aligned - override default corner radius of the badge
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
-        // ... and position the badge at the right edge of the media content
-        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
+        '*:data-[slot=media]:*:data-[slot=badge]:z-[1]',
+        '*:data-[slot=media]:*:data-[slot=badge]:last:top-3.5 *:data-[slot=media]:*:data-[slot=badge]:last:right-3.5'
     ],
     variants: {
         /**
@@ -1174,6 +1203,106 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
 };
 
+const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
+        ...props
+    });
+const _ModalOverlay = ({ style = {}, zIndex = 10, fullscreen, ...restProps })=>/*#__PURE__*/ jsx(ModalOverlay, {
+        ...restProps,
+        className: ({ isEntering, isExiting })=>cx('fixed inset-0 flex min-h-full items-center justify-center overflow-y-auto bg-black/25 text-center backdrop-blur-sm', !fullscreen && 'p-4', isEntering && 'fade-in animate-in duration-300 ease-out', isExiting && 'fade-out animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+            'motion-reduce:animate-none'),
+        style: {
+            zIndex,
+            ...style
+        }
+    });
+const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex, fullscreen = false, ...restProps })=>{
+    const locale = _useLocale();
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeadingContext,
+                {
+                    slots: {
+                        [DEFAULT_SLOT]: {},
+                        title: {
+                            className: 'heading-s',
+                            _outerWrapper: (children)=>/*#__PURE__*/ jsxs("div", {
+                                    className: "flex items-center justify-between gap-x-2",
+                                    children: [
+                                        children,
+                                        isDismissable && /*#__PURE__*/ jsx(Button, {
+                                            slot: "close",
+                                            variant: "tertiary",
+                                            className: "data-focus-visible:outline-focus-inset px-2.5!",
+                                            "aria-label": translations$1.close[locale],
+                                            onPress: ()=>onOpenChange?.(false),
+                                            children: /*#__PURE__*/ jsx(Close, {})
+                                        })
+                                    ]
+                                })
+                        }
+                    }
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx(_ModalOverlay, {
+            isOpen: isOpen,
+            onOpenChange: onOpenChange,
+            defaultOpen: defaultOpen,
+            isDismissable: isDismissable,
+            zIndex: zIndex,
+            fullscreen: fullscreen,
+            children: /*#__PURE__*/ jsx(Modal$1, {
+                ...restProps,
+                className: ({ isEntering, isExiting })=>cx(className, 'overflow-auto bg-white text-left shadow-xl', fullscreen ? 'fixed inset-0' : 'w-full max-w-md rounded-2xl p-4 align-middle', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+                    'motion-reduce:animate-none')
+            })
+        })
+    });
+};
+const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog$1, {
+        ...restProps,
+        className: cx(className, 'relative flex flex-col gap-y-5 outline-none', // Footer
+        '**:data-[slot="footer"]:flex **:data-[slot="footer"]:gap-x-2'),
+        children: ({ close })=>/*#__PURE__*/ jsx(Provider, {
+                values: [
+                    [
+                        ButtonContext$1,
+                        {
+                            // This is necessary to support multiple close buttons
+                            slots: {
+                                // We need to define default slot in order to also support non-slotted buttons (i.e. buttons without slot prop)
+                                [DEFAULT_SLOT]: {
+                                    className: 'w-fit'
+                                },
+                                close: {
+                                    onPress: close,
+                                    className: 'w-fit'
+                                }
+                            }
+                        }
+                    ]
+                ],
+                children: children
+            })
+    });
+/**
+ * Reset the ButtonContext from react-aria-components that Dialog provides
+ * (only allows "close" slot) so nested components can set up their own
+ * button slots (e.g. Carousel's "prev" / "next").
+ */ const _ModalButtonContextReset = ({ children })=>{
+    const isInsideOverlay = !!useContext(OverlayTriggerStateContext);
+    return isInsideOverlay ? /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                ButtonContext$1,
+                null
+            ]
+        ],
+        children: children
+    }) : children;
+};
+
 /**
  * Hook that detects the user's preference for reduced motion.
  *
@@ -1245,13 +1374,18 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
         loop,
         prefersReducedMotion
     ]);
-    const [emblaRef, emblaApi] = useEmblaCarousel({
+    const emblaOptions = useMemo(()=>({
+            align,
+            loop,
+            startIndex: initialIndex,
+            axis: orientation === 'horizontal' ? 'x' : 'y'
+        }), [
         align,
         loop,
-        startIndex: initialIndex,
-        axis: orientation === 'horizontal' ? 'x' : 'y',
-        inViewThreshold: 0.2
-    }, emblaPlugins);
+        initialIndex,
+        orientation
+    ]);
+    const [emblaRef, emblaApi] = useEmblaCarousel(emblaOptions, emblaPlugins);
     const [slidesInView, setSlidesInView] = useState([
         initialIndex
     ]);
@@ -1269,6 +1403,7 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
             switch(type){
                 case 'select':
                     onSelect?.(scrollSnapIndex);
+                    setSlidesInView(emblaApi.slidesInView());
                     setCanScrollNext(emblaApi.canScrollNext());
                     setCanScrollPrev(emblaApi.canScrollPrev());
                     break;
@@ -1289,6 +1424,7 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
                     }
                 case 'init':
                     {
+                        setSlidesInView(emblaApi.slidesInView());
                         setCanScrollNext(emblaApi.canScrollNext());
                         setCanScrollPrev(emblaApi.canScrollPrev());
                         break;
@@ -1362,6 +1498,19 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
         handlePrevPress,
         emblaApi
     ]);
+    useImperativeHandle(ref, ()=>{
+        const el = carouselRef.current;
+        if (!el) {
+            return el; // Just to satisfy the return type, this case should never actually happen
+        }
+        el.goToSlide = (index)=>emblaApi?.scrollTo(index, prefersReducedMotion);
+        el.goToNextSlide = ()=>emblaApi?.scrollNext(prefersReducedMotion);
+        el.goToPrevSlide = ()=>emblaApi?.scrollPrev(prefersReducedMotion);
+        return el;
+    }, [
+        emblaApi,
+        prefersReducedMotion
+    ]);
     const hasHeroContext = !!useContext(HeroContext);
     const nextPrevStyles = hasHeroContext ? {
         color: 'white',
@@ -1369,82 +1518,107 @@ const Carousel = ({ autoPlayDelay, align = 'center', children, initialIndex = 0,
     } : {
         variant: 'tertiary'
     };
+    const shouldUseAriaCarouselPattern = !autoPlayDelay;
     return(// oxlint-disable-next-line jsx-a11y/no-static-element-interactions
     /*#__PURE__*/ jsx("div", {
         ...rest,
+        role: shouldUseAriaCarouselPattern ? 'region' : undefined,
+        "aria-roledescription": shouldUseAriaCarouselPattern ? 'carousel' : undefined,
         "data-orientation": orientation,
         "data-slot": "carousel",
-        ref: mergeRefs(ref, carouselRef),
+        ref: carouselRef,
         onKeyDown: handleKeyDown,
-        children: /*#__PURE__*/ jsx(Provider, {
-            values: [
-                [
-                    CarouselContext,
-                    {
-                        slidesInView,
-                        '~emblaRef': emblaRef,
-                        orientation
-                    }
-                ],
-                [
-                    ButtonContext,
-                    {
-                        slots: {
-                            [DEFAULT_SLOT]: {},
-                            prev: {
-                                'aria-label': translations$1.previous[locale],
-                                isDisabled: !canScrollPrev,
-                                onPress: handlePrevPress,
-                                ...nextPrevStyles
-                            },
-                            next: {
-                                'aria-label': translations$1.next[locale],
-                                isDisabled: !canScrollNext,
-                                onPress: handleNextPress,
-                                ...nextPrevStyles
+        children: /*#__PURE__*/ jsx(_ModalButtonContextReset, {
+            children: /*#__PURE__*/ jsx(Provider, {
+                values: [
+                    [
+                        CarouselContext,
+                        {
+                            slidesInView,
+                            '~emblaRef': emblaRef,
+                            orientation,
+                            '~shouldUseAriaCarouselPattern': shouldUseAriaCarouselPattern
+                        }
+                    ],
+                    [
+                        ButtonContext,
+                        {
+                            slots: {
+                                [DEFAULT_SLOT]: {},
+                                prev: {
+                                    'aria-label': translations$1.previous[locale],
+                                    isDisabled: !canScrollPrev,
+                                    onPress: handlePrevPress,
+                                    ...nextPrevStyles
+                                },
+                                next: {
+                                    'aria-label': translations$1.next[locale],
+                                    isDisabled: !canScrollNext,
+                                    onPress: handleNextPress,
+                                    ...nextPrevStyles
+                                }
                             }
                         }
-                    }
-                ]
-            ],
-            children: children
+                    ]
+                ],
+                children: children
+            })
         })
     }));
 };
+const CarouselItemIndexContext = /*#__PURE__*/ createContext(0);
 const CarouselContext = /*#__PURE__*/ createContext({
     '~emblaRef': null,
     orientation: 'horizontal',
-    slidesInView: []
+    slidesInView: [],
+    '~shouldUseAriaCarouselPattern': true
 });
 const CarouselItemsContainer = ({ children, className, ...rest })=>{
-    const { '~emblaRef': emblaRef } = useContext(CarouselContext);
+    const { '~emblaRef': emblaRef, '~shouldUseAriaCarouselPattern': shouldUseAriaCarouselPattern } = useContext(CarouselContext);
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'overflow-hidden'),
         ref: emblaRef,
         "data-slot": "carousel-items-container",
         ...rest,
+        "aria-live": shouldUseAriaCarouselPattern ? 'polite' : undefined,
+        "aria-atomic": shouldUseAriaCarouselPattern ? false : undefined,
         children: children
     });
 };
-const CarouselItems = ({ className, children })=>{
+const CarouselItems = ({ className, children, ...restProps })=>{
     const { orientation } = useContext(CarouselContext);
+    let itemIndex = 0;
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'flex', orientation === 'vertical' && 'flex-col'),
         "data-slot": "carousel-items",
-        children: children
+        ...restProps,
+        children: Children.map(children, (child)=>{
+            if (/*#__PURE__*/ isValidElement(child)) {
+                const currentIndex = itemIndex++;
+                return /*#__PURE__*/ jsx(CarouselItemIndexContext.Provider, {
+                    value: currentIndex,
+                    children: child
+                });
+            }
+            return child;
+        })
     });
 };
 /**
  * This is internal for now, but we will expose it in the future when we support more flexible positioning of prev/next and other actions.
  * It is used to render the prev/next buttons in the carousel for now.
- */ const CarouselControls = ({ children, className, ...rest })=>/*#__PURE__*/ jsx("div", {
+ */ const CarouselControls = ({ children, className, ...rest })=>{
+    const { '~shouldUseAriaCarouselPattern': shouldUseAriaCarouselPattern } = useContext(CarouselContext);
+    return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'flex justify-end gap-x-2'),
         "data-slot": "carousel-controls",
         ...rest,
-        // All items of the carousel are accessible to the screen reader at all times, so these controls will only confuse screen reader users
-        "aria-hidden": "true",
+        // When not using the aria carousel pattern, all items are accessible to the screen reader at all times,
+        // so these controls will only confuse screen reader users
+        "aria-hidden": !shouldUseAriaCarouselPattern,
         children: children
     });
+};
 const carouselButtonVariants = cva({
     base: 'group data-disabled:invisible'
 });
@@ -1503,10 +1677,15 @@ const CarouselButton = ({ className, isIconOnly = true, slot, ...rest })=>{
     });
 };
 const CarouselItem = ({ className, children, ...rest })=>{
+    const itemIndex = useContext(CarouselItemIndexContext);
+    const { slidesInView, '~shouldUseAriaCarouselPattern': shouldUseAriaCarouselPattern } = useContext(CarouselContext);
     return /*#__PURE__*/ jsx("div", {
         ...rest,
+        inert: shouldUseAriaCarouselPattern && !slidesInView.includes(itemIndex) ? true : undefined,
         className: cx(className, 'min-w-0 shrink-0 grow-0', '*:data-[slot=media]:aspect-square', '*:data-[slot=media]:max-sm:data-[fit="contain"]:*:object-cover', '*:data-[slot=media]:sm:aspect-4/3', '*:data-[slot=media]:md:aspect-3/2', '*:data-[slot=media]:lg:aspect-2/1', '*:data-[slot=media]:*:h-full', '*:data-[slot=media]:*:w-full', '*:data-[slot=media]:data-[fit="contain"]:bg-blue-dark'),
         "data-slot": "carousel-item",
+        role: shouldUseAriaCarouselPattern ? 'group' : undefined,
+        "aria-roledescription": shouldUseAriaCarouselPattern ? 'slide' : undefined,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
@@ -1802,8 +1981,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
@@ -2182,89 +2362,6 @@ const LinkListItem = ({ children, className, ...props })=>{
     });
 };
 
-const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
-        ...props
-    });
-const _ModalOverlay = ({ style = {}, zIndex = 10, ...restProps })=>/*#__PURE__*/ jsx(ModalOverlay, {
-        ...restProps,
-        className: ({ isEntering, isExiting })=>cx('fixed inset-0 flex min-h-full items-center justify-center overflow-y-auto bg-black/25 p-4 text-center backdrop-blur-sm', isEntering && 'fade-in animate-in duration-300 ease-out', isExiting && 'fade-out animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
-            'motion-reduce:animate-none'),
-        style: {
-            zIndex,
-            ...style
-        }
-    });
-const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex, ...restProps })=>{
-    const locale = _useLocale();
-    return /*#__PURE__*/ jsx(Provider, {
-        values: [
-            [
-                HeadingContext,
-                {
-                    slots: {
-                        [DEFAULT_SLOT]: {},
-                        title: {
-                            className: 'heading-s',
-                            _outerWrapper: (children)=>/*#__PURE__*/ jsxs("div", {
-                                    className: "flex items-center justify-between gap-x-2",
-                                    children: [
-                                        children,
-                                        isDismissable && /*#__PURE__*/ jsx(Button, {
-                                            slot: "close",
-                                            variant: "tertiary",
-                                            className: "data-focus-visible:outline-focus-inset px-2.5!",
-                                            "aria-label": translations$1.close[locale],
-                                            onPress: ()=>onOpenChange?.(false),
-                                            children: /*#__PURE__*/ jsx(Close, {})
-                                        })
-                                    ]
-                                })
-                        }
-                    }
-                }
-            ]
-        ],
-        children: /*#__PURE__*/ jsx(_ModalOverlay, {
-            isOpen: isOpen,
-            onOpenChange: onOpenChange,
-            defaultOpen: defaultOpen,
-            isDismissable: isDismissable,
-            zIndex: zIndex,
-            children: /*#__PURE__*/ jsx(Modal$1, {
-                ...restProps,
-                className: ({ isEntering, isExiting })=>cx(className, 'w-full max-w-md overflow-hidden rounded-2xl bg-white p-4 text-left align-middle shadow-xl', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
-                    'motion-reduce:animate-none')
-            })
-        })
-    });
-};
-const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog$1, {
-        ...restProps,
-        className: cx(className, 'relative grid gap-y-5 outline-none', // Footer
-        '**:data-[slot="footer"]:flex **:data-[slot="footer"]:gap-x-2'),
-        children: ({ close })=>/*#__PURE__*/ jsx(Provider, {
-                values: [
-                    [
-                        ButtonContext$1,
-                        {
-                            // This is necessary to support multiple close buttons
-                            slots: {
-                                // We need to define default slot in order to also support non-slotted buttons (i.e. buttons without slot prop)
-                                [DEFAULT_SLOT]: {
-                                    className: 'w-fit'
-                                },
-                                close: {
-                                    onPress: close,
-                                    className: 'w-fit'
-                                }
-                            }
-                        }
-                    ]
-                ],
-                children: children
-            })
-    });
-
 // This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
 const inputVariants$1 = compose(input, cva({
     base: '',
@@ -2346,7 +2443,7 @@ const defaultClasses = cx([
     'data-focus-visible:before:ring-focus-offset',
     // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
     // so we use an inner outline to artifically pad the border
-    'data-invalid:data-selected:before:bg-red! data-invalid:before:border-red data-invalid:before:outline-red data-invalid:before:outline data-invalid:before:outline-[3px] data-invalid:before:outline-offset-[-3px] data-invalid:before:outline-solid'
+    'data-invalid:data-selected:before:bg-red! data-invalid:before:border-red data-invalid:before:outline-red data-invalid:before:outline-3 data-invalid:before:outline-offset-[-3px] data-invalid:before:outline-solid'
 ]);
 function Radio(props) {
     const { children, className, description, ...restProps } = props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.4.4",
+  "version": "3.4.6",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {
@@ -18,24 +18,19 @@
     }
   },
   "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",
-    "use-debounce": "^10.0.4"
+    "react-aria": "^3.48.0",
+    "react-aria-components": "^1.17.0",
+    "react-stately": "^3.46.0",
+    "use-debounce": "^10.0.4",
+    "@obosbbl/grunnmuren-icons-react": "^2.2.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
-    "tailwindcss": "4.2.1"
+    "tailwindcss": "4.2.2"
   },
   "peerDependencies": {
     "react": "^19"