@obosbbl/grunnmuren-react 3.3.0 → 3.3.2

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { DisclosureProps as DisclosureProps$1, ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, 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, 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';
+import { DisclosureProps as DisclosureProps$1, ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, 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, ProgressBarProps as ProgressBarProps$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 * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
@@ -456,8 +456,14 @@ declare const LinkListItem: (props: LinkListItemProps) => react_jsx_runtime.JSX.
 
 type DialogTriggerProps = DialogTriggerProps$1;
 declare const DialogTrigger: (props: DialogTriggerProps) => react_jsx_runtime.JSX.Element;
-type ModalProps = Omit<ModalOverlayProps, 'isDismissable'>;
-declare const Modal: ({ className, ...restProps }: ModalProps) => react_jsx_runtime.JSX.Element;
+type ModalOverlayProps = Omit<ModalOverlayProps$1, 'isDismissable'> & {
+    /** @default 10 Controls the z-index of the modal overlay */
+    zIndex?: number;
+    /** @default true Makes the modal dismissable */
+    isDismissable?: boolean;
+};
+type ModalProps = ModalOverlayProps;
+declare const Modal: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, ...restProps }: ModalProps) => react_jsx_runtime.JSX.Element;
 type DialogProps = DialogProps$1 & {
     children: React.ReactNode;
 };
@@ -498,6 +504,13 @@ type NumberFieldProps = {
 } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
 declare function NumberField(props: NumberFieldProps): react_jsx_runtime.JSX.Element;
 
+type ProgressBarProps = ProgressBarProps$1;
+type ProgressBarValueTextProps = Omit<HTMLProps<HTMLSpanElement>, 'children'> & {
+    className?: string;
+};
+declare const ProgressBarValueText: ({ className, ...restProps }: ProgressBarValueTextProps) => react_jsx_runtime.JSX.Element;
+declare const ProgressBar: ({ children, className, ...restProps }: ProgressBarProps) => react_jsx_runtime.JSX.Element;
+
 type RadioProps = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
@@ -745,5 +758,5 @@ 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, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, Modal as UNSAFE_Modal, 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, _LinkContext, _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, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, 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 { 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, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, 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, _LinkContext, _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, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, ProgressBarProps as UNSAFE_ProgressBarProps, ProgressBarValueTextProps as UNSAFE_ProgressBarValueTextProps, 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,5 +1,5 @@
 '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, 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, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, 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';
+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, 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, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay, NumberField as NumberField$1, ProgressBar as ProgressBar$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva, cx, compose } from 'cva';
@@ -279,6 +279,7 @@ function AccordionItem(props) {
     const _defaultExpanded = defaultOpen ?? defaultExpanded;
     const _isExpanded = controlledIsOpen ?? isExpanded;
     const _onExpandedChange = onOpenChange ?? onExpandedChange;
+    const buttonId = useId();
     return /*#__PURE__*/ jsx(Disclosure, {
         ...restProps,
         className: cx('relative px-2', className),
@@ -299,6 +300,7 @@ function AccordionItem(props) {
                                 className: "flex min-h-11 w-full gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus-inset!",
                                 type: "button",
                                 withChevron: true,
+                                id: buttonId,
                                 children: children
                             })
                     }
@@ -308,8 +310,9 @@ function AccordionItem(props) {
                     {
                         className: // Uses pseudo elements for vertical padding, since that doesn't affect the height when the accordion is closed
                         'text-sm font-light leading-6 px-3.5 data-[expanded]:after:h-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
-                        role: 'region',
                         _outerWrapper: (children)=>/*#__PURE__*/ jsx(DisclosurePanel, {
+                                "aria-labelledby": buttonId,
+                                role: "region",
                                 children: children
                             })
                     }
@@ -972,6 +975,27 @@ const cardLinkVariants = cva({
     });
 };
 
+/**
+ * Hook that detects the user's preference for reduced motion.
+ *
+ * Keep in mind that this hook relies on a browser API's and doesn't run on the server.
+ * You can supply an initial value that will be used for server side rendering.
+ */ function usePrefersReducedMotion(initialValue = true) {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(initialValue);
+    useEffect(()=>{
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        setPrefersReducedMotion(mediaQuery.matches);
+        const changeListener = (event)=>{
+            setPrefersReducedMotion(event.matches);
+        };
+        mediaQuery.addEventListener('change', changeListener);
+        return ()=>{
+            mediaQuery.removeEventListener('change', changeListener);
+        };
+    }, []);
+    return prefersReducedMotion;
+}
+
 const Carousel = ({ className, children, onChange, ...rest })=>{
     const carouselRef = useRef(null);
     const carouselItemsRef = useRef(null);
@@ -983,6 +1007,7 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
     const scrollQueue = useRef([]);
     const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
     const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
+    const prefersReducedMotion = usePrefersReducedMotion();
     useEffect(()=>{
         setHasReachedScrollStart(scrollTargetIndex === 0);
         setHasReachedScrollEnd(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
@@ -1014,7 +1039,6 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
         }
         isScrollingProgrammatically.current = true;
         const elementWithFocusVisible = carouselRef.current?.querySelector(':focus-visible');
-        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
         carouselItemsRef.current.children[scrollTargetIndex]?.scrollIntoView({
             behavior: prefersReducedMotion ? 'instant' : 'smooth',
             inline: 'start',
@@ -1063,7 +1087,8 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
             processQueue(); // Process any queued scrolls
         }, 500);
     }, [
-        scrollTargetIndex
+        scrollTargetIndex,
+        prefersReducedMotion
     ]);
     // Clean up timeout on unmount
     useEffect(()=>{
@@ -1218,16 +1243,7 @@ const CarouselItemsContext = /*#__PURE__*/ createContext({
 });
 const CarouselItems = ({ className, children })=>{
     const { carouselItemsRef, onScroll, activeIndex, handlePrevious, handleNext } = useContext(CarouselItemsContext);
-    const prefersReducedMotion = useRef(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
-    // Update the ref when the media query changes
-    useEffect(()=>{
-        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-        const handleChange = (e)=>{
-            prefersReducedMotion.current = e.matches;
-        };
-        mediaQuery.addEventListener('change', handleChange);
-        return ()=>mediaQuery.removeEventListener('change', handleChange);
-    }, []);
+    const prefersReducedMotion = usePrefersReducedMotion();
     const handleKeyDown = (event)=>{
         // Prevent default behavior when holding down arrow keys (when repeat is true)
         // The default behavior in scroll snapping causes a staggering scroll effect that feels janky
@@ -1236,7 +1252,7 @@ const CarouselItems = ({ className, children })=>{
             return;
         }
         // For users with prefers-reduced-motion, trigger button click behavior instead of native scroll
-        if (prefersReducedMotion.current) {
+        if (prefersReducedMotion) {
             if (event.key === 'ArrowLeft' && handlePrevious) {
                 event.preventDefault();
                 handlePrevious();
@@ -2031,52 +2047,66 @@ const LinkListItem = (props)=>/*#__PURE__*/ jsx("li", {
 const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
         ...props
     });
-const ModalOverlay = (props)=>/*#__PURE__*/ jsx(ModalOverlay$1, {
-        ...props,
-        isDismissable: true,
-        className: ({ isEntering, isExiting })=>cx('fixed inset-0 z-10 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')
+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 = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ModalOverlay, {
-        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 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: "px-2.5! data-focus-visible:outline-focus-inset",
+                                            "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 })=>{
-    const locale = _useLocale();
-    return /*#__PURE__*/ jsx(Dialog$1, {
+};
+const Dialog = ({ className, children, ...restProps })=>/*#__PURE__*/ jsx(Dialog$1, {
         ...restProps,
         className: cx('relative grid gap-y-5 outline-none', // Footer
         '[&_[data-slot="footer"]]:flex [&_[data-slot="footer"]]:gap-x-2'),
         children: ({ close })=>/*#__PURE__*/ jsx(Fragment, {
                 children: /*#__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,
-                                                    /*#__PURE__*/ jsx(Button, {
-                                                        slot: "close",
-                                                        variant: "tertiary",
-                                                        className: "!px-2.5 data-focus-visible:outline-focus-inset",
-                                                        "aria-label": translations$1.close[locale],
-                                                        children: /*#__PURE__*/ jsx(Close, {})
-                                                    })
-                                                ]
-                                            })
-                                    }
-                                }
-                            }
-                        ],
                         [
                             ButtonContext$1,
                             {
@@ -2098,7 +2128,6 @@ const Dialog = ({ className, children, ...restProps })=>{
                 })
             })
     });
-};
 
 // 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({
@@ -2164,6 +2193,44 @@ function NumberField(props) {
     });
 }
 
+const _ProgressBarValueTextContext = /*#__PURE__*/ createContext(undefined);
+const _ProgressBarValueTextProvider = _ProgressBarValueTextContext.Provider;
+const ProgressBarValueText = ({ className, ...restProps })=>{
+    const value = useContext(_ProgressBarValueTextContext);
+    return /*#__PURE__*/ jsx("span", {
+        ...restProps,
+        className: cx(className, 'px-2 leading-7'),
+        "data-slot": "progress-bar-value-text",
+        children: value
+    });
+};
+const ProgressBar = ({ children, className, ...restProps })=>{
+    return /*#__PURE__*/ jsx(ProgressBar$1, {
+        "data-slot": "progress-bar",
+        ...restProps,
+        className: cx(className, 'max-w-full'),
+        children: ({ percentage, valueText, ...restArgs })=>/*#__PURE__*/ jsxs(_ProgressBarValueTextProvider, {
+                value: valueText,
+                children: [
+                    typeof children === 'function' ? children({
+                        percentage,
+                        valueText,
+                        ...restArgs
+                    }) : children,
+                    /*#__PURE__*/ jsx("div", {
+                        className: "relative h-0.75 rounded bg-gray-light",
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "h-0.75 rounded bg-blue-dark transition-all duration-300 ease-in-out",
+                            style: {
+                                width: `${percentage}%`
+                            }
+                        })
+                    })
+                ]
+            })
+    });
+};
+
 const defaultClasses = cx([
     '-ml-2.5 relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
     // the radio button itself
@@ -2814,15 +2881,14 @@ const VideoLoop = ({ src, format, alt, className })=>{
     const [shouldPlay, setShouldPlay] = useState(false);
     // Needed to show the pause button when the video is actually playing (refer to google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
     const [isPlaying, setIsPlaying] = useState(false);
-    // We need to check if the user prefers reduced motion, so that we can prevent the video from autoplaying if so
-    const [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(null);
+    const prefersReducedMotion = usePrefersReducedMotion(null);
     const videoRef = useRef(null);
     useEffect(()=>{
-        const { matches: userPrefersReducedMotion } = matchMedia('(prefers-reduced-motion: reduce)');
-        setUserPrefersReducedMotion(userPrefersReducedMotion);
         // Autoplay the video if the user does not prefer reduced motion
-        setShouldPlay(!userPrefersReducedMotion);
-    }, []);
+        setShouldPlay(!prefersReducedMotion);
+    }, [
+        prefersReducedMotion
+    ]);
     // Follow google's autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
     // "Don't assume a video will play, and don't show a pause button when the video is not actually playing."
     // "You should always look at the Promise returned by the play function to see if it was rejected:"
@@ -2839,7 +2905,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
         shouldPlay
     ]);
     return /*#__PURE__*/ jsxs("div", {
-        className: cx(className, 'relative', userPrefersReducedMotion === null && 'opacity-0'),
+        className: cx(className, 'relative', prefersReducedMotion === null && 'opacity-0'),
         children: [
             /*#__PURE__*/ jsx("video", {
                 "aria-hidden": true,
@@ -2847,11 +2913,11 @@ const VideoLoop = ({ src, format, alt, className })=>{
                 // cursor-pointer is not working on the button below, so we add it here for the same effect
                 className: "h-full max-h-[inherit] w-full cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
-                loop: userPrefersReducedMotion === false,
-                autoPlay: userPrefersReducedMotion === false,
+                loop: prefersReducedMotion === false,
+                autoPlay: prefersReducedMotion === false,
                 muted: true,
                 onEnded: (event)=>{
-                    if (userPrefersReducedMotion) {
+                    if (prefersReducedMotion) {
                         // Reset the video to the beginning if the user prefers reduced motion, since the video will not loop
                         event.currentTarget.currentTime = 0;
                         setShouldPlay(false);
@@ -2863,7 +2929,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                     type: `video/${format}`
                 })
             }),
-            userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
+            prefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
                 "data-slot": "video-loop-button",
                 "aria-hidden": true,
                 type: "button",
@@ -2888,4 +2954,4 @@ const VideoLoop = ({ src, format, alt, className })=>{
     });
 };
 
-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, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, Modal as UNSAFE_Modal, 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, _LinkContext, _useLocale as useLocale };
+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, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, 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, _LinkContext, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"