@digdir/designsystemet-react 1.0.0-rc.10 → 1.0.0-rc.12

package/dist/cjs/components/DropdownMenu/DropdownMenuContent.js

@@ -8,7 +8,7 @@ var lite = require('../../node_modules/clsx/dist/lite.js');
 var DropdownMenuRoot = require('./DropdownMenuRoot.js');
 var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
-var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
+var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);

package/dist/cjs/components/Modal/ModalDialog.js

@@ -15,14 +15,15 @@ const ModalDialog = React.forwardRef(({ onInteractOutside, onClose, onBeforeClos
     // This local ref is used to make sure the modal works without a ModalRoot
     const modalDialogRef = React.useRef(null);
     const { context } = floatingUi_react.useFloating();
-    const modal = React.useContext(ModalRoot.ModalContext);
+    const { modalRef, setOpen, setCloseModal } = React.useContext(ModalRoot.ModalContext);
     const open = useModalState.useModalState(modalDialogRef);
-    const { modalRef, setOpen } = modal;
-    modal.closeModal = () => {
-        if (onBeforeClose && onBeforeClose() === false)
-            return;
-        modalDialogRef.current?.close();
-    };
+    React.useEffect(() => {
+        setCloseModal?.(() => {
+            if (onBeforeClose && onBeforeClose() === false)
+                return;
+            modalDialogRef.current?.close();
+        });
+    }, [onBeforeClose, setCloseModal]);
     const mergedRefs = floatingUi_react.useMergeRefs([modalRef, ref, modalDialogRef]);
     useScrollLock.useScrollLock(modalDialogRef, 'ds-modal--lock-scroll');
     React.useEffect(() => {

package/dist/cjs/components/Modal/ModalHeader.js

@@ -13,8 +13,8 @@ var Heading = require('../Typography/Heading/Heading.js');
 
 const ModalHeader = React.forwardRef(({ closeButton = true, children, subtitle, asChild, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
-    const context = React.useContext(ModalRoot.ModalContext);
-    return (jsxRuntime.jsxs(Component, { ref: ref, className: lite.clsx('ds-modal__header', !closeButton && 'ds-modal__header--no-button', className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: context?.closeModal, autoFocus: true, icon: true, className: 'ds-modal__header__button', children: jsxRuntime.jsx(akselIcons.XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
+    const { closeModal } = React.useContext(ModalRoot.ModalContext);
+    return (jsxRuntime.jsxs(Component, { ref: ref, className: lite.clsx('ds-modal__header', !closeButton && 'ds-modal__header--no-button', className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: () => closeModal?.(), autoFocus: true, icon: true, className: 'ds-modal__header__button', children: jsxRuntime.jsx(akselIcons.XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
 });
 ModalHeader.displayName = 'ModalHeader';
 

package/dist/cjs/components/Modal/ModalRoot.js

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
 const ModalContext = React.createContext({
+    setCloseModal: () => { },
     modalRef: { current: null },
     open: false,
     setOpen: () => { },
@@ -12,8 +13,13 @@ const ModalContext = React.createContext({
 const ModalRoot = ({ children }) => {
     const modalRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
+    const [closeModal, setCloseModal] = React.useState();
+    const setCloseModalInContext = React.useCallback((fn) => {
+        setCloseModal(() => fn);
+    }, []);
     return (jsxRuntime.jsx(ModalContext.Provider, { value: {
-            closeModal: () => { },
+            setCloseModal: setCloseModalInContext,
+            closeModal,
             modalRef,
             open,
             setOpen,

package/dist/cjs/components/Modal/index.js

@@ -8,7 +8,7 @@ var ModalFooter = require('./ModalFooter.js');
 var ModalHeader = require('./ModalHeader.js');
 var ModalTrigger = require('./ModalTrigger.js');
 
-const Modal = ModalDialog.ModalDialog;
+const Modal = {};
 Modal.Root = ModalRoot.ModalRoot;
 Modal.Content = ModaContent.ModalContent;
 Modal.Footer = ModalFooter.ModalFooter;

package/dist/cjs/components/Popover/PopoverContent.js

@@ -9,7 +9,7 @@ var PopoverRoot = require('./PopoverRoot.js');
 var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_core = require('../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
-var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
+var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
 function _interopNamespaceDefault(e) {

package/dist/cjs/components/Skeleton/Circle/Circle.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of circular shape */
 const Circle = ({ width, height, className, children, style, ...rest }) => {

package/dist/cjs/components/Skeleton/Rectangle/Rectangle.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of rectangle shape */
 const Rectangle = ({ width, height, className, children, style, ...rest }) => {

package/dist/cjs/components/Skeleton/Text/Text.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 /**  Skeleton component used for indicating loading elements of text */
 const Text = ({ width, height, className, style, children, ...rest }) => {

package/dist/cjs/components/Spinner/Spinner.js

@@ -3,7 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lite = require('../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../hooks/useSynchronizedAnimation.js');
+var useSynchronizedAnimation = require('../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
 
 const sizeMap = {
     '2xs': 13,

package/dist/cjs/components/Table/TableHeaderCell.js

@@ -31,7 +31,7 @@ const SORT_ICON = {
 };
 const TableHeaderCell = React__namespace.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
     const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsxRuntime.jsx(akselIcons.ChevronUpDownIcon, {}));
-    return (jsxRuntime.jsxs("th", { className: lite.clsx('ds-table__header__cell', sortable && 'ds-table__header__cell--sortable', sort && `ds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxRuntime.jsxs("button", { className: `ds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+    return (jsxRuntime.jsxs("th", { className: lite.clsx('ds-table__header__cell', 'ds-font-weight--medium', sortable && 'ds-table__header__cell--sortable', sort && `ds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxRuntime.jsxs("button", { className: 'ds-focus', onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';
 

package/dist/cjs/components/Typography/Paragraph/Paragraph.js

@@ -6,13 +6,15 @@ var React = require('react');
 var lite = require('../../../node_modules/clsx/dist/lite.js');
 var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
 
+const lineHeightMap = {
+    short: 'ds-line-height--sm',
+    default: 'ds-line-height--md',
+    long: 'ds-line-height--lg',
+};
 /** Use `Paragraph` to display text with paragraph text styles. */
 const Paragraph = React.forwardRef(({ className, spacing, size = 'md', asChild, variant, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'p';
-    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-paragraph', spacing && 'ds-paragraph--spacing', variant
-            ? `ds-paragraph-${variant}--${size}`
-            : `ds-paragraph--${size}`, // TODO find a better solution for this
-        className), ...rest }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-paragraph', spacing && 'ds-paragraph--spacing', `ds-paragraph--${size}`, lineHeightMap[variant ?? 'default'], className), ...rest }));
 });
 Paragraph.displayName = 'Paragraph';
 

package/dist/cjs/components/form/Checkbox/Checkbox.js

@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: `ds-checkbox__label`, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...objectUtils.omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: lite.clsx(`ds-checkbox__label`), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/cjs/components/form/Combobox/Combobox.js

@@ -169,6 +169,9 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
             chipSrLabel,
             listRef,
             forwareddRef,
+            setListRef: (index, node) => {
+                listRef.current[index] = node;
+            },
         }, children: [jsxRuntime.jsxs(Box.Box, { className: lite.clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative.default, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel.default, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput.default, { ...objectUtils.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError.default, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(floatingUi_react.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs(Box.Box, { id: listId, shadow: 'md', borderRadius: 'md', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {

package/dist/cjs/components/form/Combobox/Custom.js

@@ -24,11 +24,11 @@ const ComboboxCustom = React.forwardRef(({ asChild, interactive, id, className,
     if (!context) {
         throw new Error('ComboboxCustom must be used within a Combobox');
     }
-    const { customIds, listRef, getItemProps, size } = context;
+    const { customIds, setListRef, getItemProps, size } = context;
     const index$1 = React.useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
     const combinedRef = floatingUi_react.useMergeRefs([
         (node) => {
-            listRef.current[index$1] = node;
+            setListRef(index$1, node);
         },
         ref,
     ]);

package/dist/cjs/components/form/Fieldset/Fieldset.js

@@ -21,7 +21,7 @@ const Fieldset = React.forwardRef((props, ref) => {
             size,
             disabled: props?.disabled,
             readOnly,
-        }, children: jsxRuntime.jsxs("fieldset", { ...fieldsetProps, className: lite.clsx('ds-fieldset', !hideLegend && 'ds-fieldset--spacing', readOnly && 'ds-fieldset--readonly', className), disabled: props?.disabled, ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { className: 'ds-fieldset__legend', children: jsxRuntime.jsxs("span", { className: lite.clsx('ds-fieldset__legend__content', hideLegend && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { className: 'ds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, variant: 'short', asChild: true, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx('ds-fieldset__description', hideLegend && `ds-sr-only`), children: description }) })), children, jsxRuntime.jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'ds-fieldset__error-message', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) })] }) }));
+        }, children: jsxRuntime.jsxs("fieldset", { ...fieldsetProps, className: lite.clsx('ds-fieldset', !hideLegend && 'ds-fieldset--spacing', readOnly && 'ds-fieldset--readonly', className), disabled: props?.disabled, ref: ref, ...rest, children: [jsxRuntime.jsx(Label.Label, { asChild: true, size: size, children: jsxRuntime.jsx("legend", { className: 'ds-fieldset__legend', children: jsxRuntime.jsxs("span", { className: lite.clsx('ds-fieldset__legend__content', hideLegend && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { className: 'ds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, variant: 'short', asChild: true, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx('ds-fieldset__description', 'ds-font-weight--regular', hideLegend && `ds-sr-only`), children: description }) })), children, jsxRuntime.jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'ds-fieldset__error-message', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) })] }) }));
 });
 Fieldset.displayName = 'Fieldset';
 

package/dist/cjs/components/form/Radio/Radio.js

@@ -12,7 +12,7 @@ var Label = require('../../Typography/Label/Label.js');
 const Radio = React.forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useRadio.useRadio(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: 'ds-radio__label', htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsxRuntime.jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...objectUtils.omit(['size', 'error'], rest), ...inputProps }), children && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label.Label, { className: lite.clsx('ds-radio__label'), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsxRuntime.jsx("span", { children: children }) }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
 });
 Radio.displayName = 'Radio';
 

package/dist/cjs/hooks/{useIsomorphicLayoutEffect.js → useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js}

@@ -3,6 +3,7 @@
 
 var React = require('react');
 
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/cjs/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js

@@ -0,0 +1,46 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+
+// Inspired by Sam Selikoff
+// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+function useSynchronizedAnimation(animationName) {
+    const ref = React.useRef(null);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const firstOfType = animations.find((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation && myAnimation === firstOfType) {
+            myAnimation.currentTime = 0;
+        }
+        if (myAnimation && firstOfType && myAnimation !== firstOfType) {
+            myAnimation.currentTime = firstOfType.currentTime;
+        }
+        return () => {
+            if (myAnimation && firstOfType) {
+                myAnimation.currentTime = firstOfType.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/cjs/index.js

@@ -2,6 +2,8 @@
 'use strict';
 
 var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
+var useSynchronizedAnimation = require('./hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 var Button = require('./components/Button/Button.js');
 var HelpText = require('./components/HelpText/HelpText.js');
 var Spinner = require('./components/Spinner/Spinner.js');
@@ -99,6 +101,8 @@ var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading
 
 
 exports.ErrorSummaryList = ErrorSummaryList;
+exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
 exports.Button = Button.Button;
 exports.HelpText = HelpText.HelpText;
 exports.Spinner = Spinner.Spinner;

package/dist/esm/components/DropdownMenu/DropdownMenuContent.js

@@ -7,7 +7,7 @@ import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { DropdownMenuContext } from './DropdownMenuRoot.js';
 import { autoUpdate, shift } from '../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
-import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 
 const GAP = 4;
 const DropdownMenuContent = forwardRef(({ className, children, ...rest }, ref) => {

package/dist/esm/components/Modal/ModalDialog.js

@@ -13,14 +13,15 @@ const ModalDialog = forwardRef(({ onInteractOutside, onClose, onBeforeClose, asC
     // This local ref is used to make sure the modal works without a ModalRoot
     const modalDialogRef = useRef(null);
     const { context } = useFloating();
-    const modal = useContext(ModalContext);
+    const { modalRef, setOpen, setCloseModal } = useContext(ModalContext);
     const open = useModalState(modalDialogRef);
-    const { modalRef, setOpen } = modal;
-    modal.closeModal = () => {
-        if (onBeforeClose && onBeforeClose() === false)
-            return;
-        modalDialogRef.current?.close();
-    };
+    useEffect(() => {
+        setCloseModal?.(() => {
+            if (onBeforeClose && onBeforeClose() === false)
+                return;
+            modalDialogRef.current?.close();
+        });
+    }, [onBeforeClose, setCloseModal]);
     const mergedRefs = useMergeRefs([modalRef, ref, modalDialogRef]);
     useScrollLock(modalDialogRef, 'ds-modal--lock-scroll');
     useEffect(() => {

package/dist/esm/components/Modal/ModalHeader.js

@@ -11,8 +11,8 @@ import { Heading } from '../Typography/Heading/Heading.js';
 
 const ModalHeader = forwardRef(({ closeButton = true, children, subtitle, asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
-    const context = useContext(ModalContext);
-    return (jsxs(Component, { ref: ref, className: clsx('ds-modal__header', !closeButton && 'ds-modal__header--no-button', className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: context?.closeModal, autoFocus: true, icon: true, className: 'ds-modal__header__button', children: jsx(XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
+    const { closeModal } = useContext(ModalContext);
+    return (jsxs(Component, { ref: ref, className: clsx('ds-modal__header', !closeButton && 'ds-modal__header--no-button', className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: () => closeModal?.(), autoFocus: true, icon: true, className: 'ds-modal__header__button', children: jsx(XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
 });
 ModalHeader.displayName = 'ModalHeader';
 

package/dist/esm/components/Modal/ModalRoot.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useRef, useState } from 'react';
+import { createContext, useRef, useState, useCallback } from 'react';
 
 const ModalContext = createContext({
+    setCloseModal: () => { },
     modalRef: { current: null },
     open: false,
     setOpen: () => { },
@@ -10,8 +11,13 @@ const ModalContext = createContext({
 const ModalRoot = ({ children }) => {
     const modalRef = useRef(null);
     const [open, setOpen] = useState(false);
+    const [closeModal, setCloseModal] = useState();
+    const setCloseModalInContext = useCallback((fn) => {
+        setCloseModal(() => fn);
+    }, []);
     return (jsx(ModalContext.Provider, { value: {
-            closeModal: () => { },
+            setCloseModal: setCloseModalInContext,
+            closeModal,
             modalRef,
             open,
             setOpen,

package/dist/esm/components/Modal/index.js

@@ -6,7 +6,7 @@ import { ModalFooter } from './ModalFooter.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalTrigger } from './ModalTrigger.js';
 
-const Modal = ModalDialog;
+const Modal = {};
 Modal.Root = ModalRoot;
 Modal.Content = ModalContent;
 Modal.Footer = ModalFooter;

package/dist/esm/components/Popover/PopoverContent.js

@@ -8,7 +8,7 @@ import { PopoverContext } from './PopoverRoot.js';
 import { autoUpdate, flip, shift } from '../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
 import { arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
-import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 const ARROW_HEIGHT = 7;

package/dist/esm/components/Skeleton/Circle/Circle.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of circular shape */
 const Circle = ({ width, height, className, children, style, ...rest }) => {

package/dist/esm/components/Skeleton/Rectangle/Rectangle.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of rectangle shape */
 const Rectangle = ({ width, height, className, children, style, ...rest }) => {

package/dist/esm/components/Skeleton/Text/Text.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
 /**  Skeleton component used for indicating loading elements of text */
 const Text = ({ width, height, className, style, children, ...rest }) => {

package/dist/esm/components/Spinner/Spinner.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { useSynchronizedAnimation } from '../../hooks/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
 const sizeMap = {
     '2xs': 13,

package/dist/esm/components/Table/TableHeaderCell.js

@@ -10,7 +10,7 @@ const SORT_ICON = {
 };
 const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
     const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
-    return (jsxs("th", { className: clsx('ds-table__header__cell', sortable && 'ds-table__header__cell--sortable', sort && `ds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `ds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+    return (jsxs("th", { className: clsx('ds-table__header__cell', 'ds-font-weight--medium', sortable && 'ds-table__header__cell--sortable', sort && `ds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: 'ds-focus', onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';
 

package/dist/esm/components/Typography/Paragraph/Paragraph.js

@@ -4,13 +4,15 @@ import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/lite.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
 
+const lineHeightMap = {
+    short: 'ds-line-height--sm',
+    default: 'ds-line-height--md',
+    long: 'ds-line-height--lg',
+};
 /** Use `Paragraph` to display text with paragraph text styles. */
 const Paragraph = forwardRef(({ className, spacing, size = 'md', asChild, variant, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'p';
-    return (jsx(Component, { ref: ref, className: clsx('ds-paragraph', spacing && 'ds-paragraph--spacing', variant
-            ? `ds-paragraph-${variant}--${size}`
-            : `ds-paragraph--${size}`, // TODO find a better solution for this
-        className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx('ds-paragraph', spacing && 'ds-paragraph--spacing', `ds-paragraph--${size}`, lineHeightMap[variant ?? 'default'], className), ...rest }));
 });
 Paragraph.displayName = 'Paragraph';
 

package/dist/esm/components/form/Checkbox/Checkbox.js

@@ -19,7 +19,7 @@ const Checkbox = forwardRef((props, ref) => {
             }
         },
     ]);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: `ds-checkbox__label`, htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-checkbox', `ds-checkbox--${size}`, hasError && `ds-checkbox--error`, readOnly && `ds-checkbox--readonly`, className), style: style, children: [jsx("input", { className: `ds-checkbox__input`, ref: inputRef, ...omit(['size', 'error', 'indeterminate'], rest), ...inputProps, type: 'checkbox', disabled: inputProps.disabled, "aria-checked": rest.indeterminate ? 'mixed' : inputProps.checked }), children && (jsxs(Fragment, { children: [jsx(Label, { className: clsx(`ds-checkbox__label`), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: `ds-checkbox__description`, children: description }) }))] }))] }) }));
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/esm/components/form/Combobox/Combobox.js

@@ -167,6 +167,9 @@ const ComboboxComponent = forwardRef(({ value, initialValue = [], onValueChange,
             chipSrLabel,
             listRef,
             forwareddRef,
+            setListRef: (index, node) => {
+                listRef.current[index] = node;
+            },
         }, children: [jsxs(Box, { className: clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsx(ComboboxInput, { ...omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsx(FloatingPortal, { root: portal ? null : portalRef, children: jsx(FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxs(Box, { id: listId, shadow: 'md', borderRadius: 'md', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {

package/dist/esm/components/form/Combobox/Custom.js

@@ -20,11 +20,11 @@ const ComboboxCustom = forwardRef(({ asChild, interactive, id, className, ...res
     if (!context) {
         throw new Error('ComboboxCustom must be used within a Combobox');
     }
-    const { customIds, listRef, getItemProps, size } = context;
+    const { customIds, setListRef, getItemProps, size } = context;
     const index = useMemo(() => (id && customIds.indexOf(id)) || 0, [id, customIds]);
     const combinedRef = useMergeRefs([
         (node) => {
-            listRef.current[index] = node;
+            setListRef(index, node);
         },
         ref,
     ]);

package/dist/esm/components/form/Fieldset/Fieldset.js

@@ -19,7 +19,7 @@ const Fieldset = forwardRef((props, ref) => {
             size,
             disabled: props?.disabled,
             readOnly,
-        }, children: jsxs("fieldset", { ...fieldsetProps, className: clsx('ds-fieldset', !hideLegend && 'ds-fieldset--spacing', readOnly && 'ds-fieldset--readonly', className), disabled: props?.disabled, ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { className: 'ds-fieldset__legend', children: jsxs("span", { className: clsx('ds-fieldset__legend__content', hideLegend && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { className: 'ds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsx(Paragraph, { size: size, variant: 'short', asChild: true, children: jsx("div", { id: descriptionId, className: clsx('ds-fieldset__description', hideLegend && `ds-sr-only`), children: description }) })), children, jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'ds-fieldset__error-message', children: hasError && jsx(ErrorMessage, { size: size, children: error }) })] }) }));
+        }, children: jsxs("fieldset", { ...fieldsetProps, className: clsx('ds-fieldset', !hideLegend && 'ds-fieldset--spacing', readOnly && 'ds-fieldset--readonly', className), disabled: props?.disabled, ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { className: 'ds-fieldset__legend', children: jsxs("span", { className: clsx('ds-fieldset__legend__content', hideLegend && `ds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { className: 'ds-fieldset__readonly__icon', "aria-hidden": true })), legend] }) }) }), description && (jsx(Paragraph, { size: size, variant: 'short', asChild: true, children: jsx("div", { id: descriptionId, className: clsx('ds-fieldset__description', 'ds-font-weight--regular', hideLegend && `ds-sr-only`), children: description }) })), children, jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: 'ds-fieldset__error-message', children: hasError && jsx(ErrorMessage, { size: size, children: error }) })] }) }));
 });
 Fieldset.displayName = 'Fieldset';
 

package/dist/esm/components/form/Radio/Radio.js

@@ -10,7 +10,7 @@ import { Label } from '../../Typography/Label/Label.js';
 const Radio = forwardRef((props, ref) => {
     const { children, description, className, style, ...rest } = props;
     const { inputProps, descriptionId, hasError, size = 'md', readOnly, } = useRadio(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), children && (jsxs(Fragment, { children: [jsx(Label, { className: 'ds-radio__label', htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-radio', `ds-radio--${size}`, hasError && `ds-radio--error`, readOnly && `ds-radio--readonly`, className), style: style, children: [jsx("input", { className: 'ds-radio__input', disabled: inputProps.disabled, ref: ref, ...omit(['size', 'error'], rest), ...inputProps }), children && (jsxs(Fragment, { children: [jsx(Label, { className: clsx('ds-radio__label'), htmlFor: inputProps.id, size: size, weight: 'regular', children: jsx("span", { children: children }) }), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: 'ds-radio__description', children: description }) }))] }))] }) }));
 });
 Radio.displayName = 'Radio';
 

package/dist/esm/hooks/{useIsomorphicLayoutEffect.js → useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js}

@@ -1,6 +1,7 @@
 'use client';
 import { useLayoutEffect, useEffect } from 'react';
 
+// https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export { useIsomorphicLayoutEffect };

package/dist/esm/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js

@@ -0,0 +1,44 @@
+'use client';
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
+
+// Inspired by Sam Selikoff
+// https://github.com/samselikoff/2022-02-24-use-synchronized-animation/blob/main/src/App.js
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+function useSynchronizedAnimation(animationName) {
+    const ref = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        const animations = document
+            .getAnimations()
+            .filter((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const firstOfType = animations.find((animation) => 'animationName' in animation &&
+            animation.animationName === animationName);
+        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
+        if (myAnimation && myAnimation === firstOfType) {
+            myAnimation.currentTime = 0;
+        }
+        if (myAnimation && firstOfType && myAnimation !== firstOfType) {
+            myAnimation.currentTime = firstOfType.currentTime;
+        }
+        return () => {
+            if (myAnimation && firstOfType) {
+                myAnimation.currentTime = firstOfType.currentTime;
+            }
+        };
+    }, [animationName]);
+    return ref;
+}
+
+export { useSynchronizedAnimation };

package/dist/esm/index.js

@@ -1,5 +1,7 @@
 'use client';
 export { default as ErrorSummaryList } from './components/ErrorSummary/ErrorSummaryList.js';
+export { useSynchronizedAnimation } from './hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
+export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 export { Button } from './components/Button/Button.js';
 export { HelpText } from './components/HelpText/HelpText.js';
 export { Spinner } from './components/Spinner/Spinner.js';

package/dist/types/components/Box/Box.d.ts

@@ -36,7 +36,7 @@ export declare const Box: import("react").ForwardRefExoticComponent<{
      * Border color of the box
      * @default undefined
      */
-    borderColor?: "strong" | "default" | "subtle" | undefined;
+    borderColor?: "default" | "strong" | "subtle" | undefined;
     /**
      * Border radius of the box
      * @default undefined

package/dist/types/components/Divider/Divider.d.ts

@@ -11,6 +11,6 @@ export declare const Divider: React.ForwardRefExoticComponent<{
      * The color of the divider.
      * @default 'default'
      */
-    color?: "strong" | "default" | "subtle" | undefined;
+    color?: "default" | "strong" | "subtle" | undefined;
 } & React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>>;
 //# sourceMappingURL=Divider.d.ts.map

package/dist/types/components/Modal/ModalRoot.d.ts

@@ -1,4 +1,5 @@
 export type ModalContextProps = {
+    setCloseModal: (fn: () => void) => void;
     closeModal?: () => void;
     modalRef: React.RefObject<HTMLDialogElement>;
     open: boolean;

package/dist/types/components/Modal/ModalRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/ModalRoot.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,4CAIvB,CAAC;AAEH,eAAO,MAAM,SAAS;mBAAkB,cAAc;;CAgBrD,CAAC"}
+{"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/ModalRoot.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,4CAKvB,CAAC;AAEH,eAAO,MAAM,SAAS;mBAAkB,cAAc;;CAsBrD,CAAC"}

package/dist/types/components/Modal/index.d.ts

@@ -10,7 +10,7 @@ export type { ModalContentProps } from './ModaContent';
 export type { ModalFooterProps } from './ModalFooter';
 export type { ModalDialogProps } from './ModalDialog';
 export type { ModalTriggerProps } from './ModalTrigger';
-type ModalComponent = typeof ModalDialog & {
+type ModalComponent = {
     Root: typeof ModalRoot;
     Content: typeof ModalContent;
     Footer: typeof ModalFooter;

package/dist/types/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,KAAK,cAAc,GAAG,OAAO,WAAW,GAAG;IACzC,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,KAAK,gBAAgC,CAAC;AAgB5C,OAAO,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,KAAK,gBAAuB,CAAC;AAgBnC,OAAO,EACL,KAAK,EACL,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,GACZ,CAAC"}

package/dist/types/components/Table/TableHeaderCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAEjD,eAAO,MAAM,eAAe;IAjB1B;;;OAGG;;IAEH;;;OAGG;WACI,cAAc,CAAC,WAAW,CAAC;IAClC;;;OAGG;uBACe,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,IAAI;6FA2C/D,CAAC"}
+{"version":3,"file":"TableHeaderCell.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableHeaderCell.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAEjD,eAAO,MAAM,eAAe;IAjB1B;;;OAGG;;IAEH;;;OAGG;WACI,cAAc,CAAC,WAAW,CAAC;IAClC;;;OAGG;uBACe,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,IAAI;6FA4C/D,CAAC"}

package/dist/types/components/Typography/Paragraph/Paragraph.d.ts

@@ -9,8 +9,11 @@ export type ParagraphProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /** Adds margin-bottom */
     spacing?: boolean;
-    /** Adjusts styling for paragraph length */
-    variant?: 'long' | 'short';
+    /**
+     *  Adjusts styling for paragraph length
+     *  @default `default`
+     */
+    variant?: 'long' | 'default' | 'short';
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -28,8 +31,11 @@ export declare const Paragraph: import("react").ForwardRefExoticComponent<{
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     /** Adds margin-bottom */
     spacing?: boolean | undefined;
-    /** Adjusts styling for paragraph length */
-    variant?: "long" | "short" | undefined;
+    /**
+     *  Adjusts styling for paragraph length
+     *  @default `default`
+     */
+    variant?: "long" | "default" | "short" | undefined;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false

package/dist/types/components/Typography/Paragraph/Paragraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAEzC,kEAAkE;AAClE,eAAO,MAAM,SAAS;IAnBpB;;;;;OAKG;;IAEH,yBAAyB;;IAEzB,2CAA2C;;IAE3C;;;OAGG;;+FAyBJ,CAAC"}
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../../src/components/Typography/Paragraph/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AAQzC,kEAAkE;AAClE,eAAO,MAAM,SAAS;IA5BpB;;;;;OAKG;;IAEH,yBAAyB;;IAEzB;;;OAGG;;IAEH;;;OAGG;;+FA8BJ,CAAC"}

package/dist/types/components/form/Combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/Combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAY5C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C,GAAG,WAAW,GACb,cAAc,GACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5D,eAAO,MAAM,iBAAiB;IA5F5B;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;6BACqB,MAAM,EAAE,KAAK,IAAI;IACzC;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;OAEG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;;OAOG;2BACmB,MAAM,UAAU,MAAM,KAAK,OAAO;IACxD;;;;;;OAMG;4BACoB,MAAM,KAAK,MAAM;;;;;;;;;oKAsWzC,CAAC;AAEF,eAAO,MAAM,QAAQ;IA/bnB;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;6BACqB,MAAM,EAAE,KAAK,IAAI;IACzC;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;OAEG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;;OAOG;2BACmB,MAAM,UAAU,MAAM,KAAK,OAAO;IACxD;;;;;;OAMG;4BACoB,MAAM,KAAK,MAAM;;;;;;;;;oKAiXzC,CAAC"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/Combobox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAY5C,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;CAC1C,GAAG,WAAW,GACb,cAAc,GACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5D,eAAO,MAAM,iBAAiB;IA5F5B;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;6BACqB,MAAM,EAAE,KAAK,IAAI;IACzC;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;OAEG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;;OAOG;2BACmB,MAAM,UAAU,MAAM,KAAK,OAAO;IACxD;;;;;;OAMG;4BACoB,MAAM,KAAK,MAAM;;;;;;;;;oKAyWzC,CAAC;AAEF,eAAO,MAAM,QAAQ;IAlcnB;;OAEG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;6BACqB,MAAM,EAAE,KAAK,IAAI;IACzC;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;OAEG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;IAEH;;;;;;;OAOG;2BACmB,MAAM,UAAU,MAAM,KAAK,OAAO;IACxD;;;;;;OAMG;4BACoB,MAAM,KAAK,MAAM;;;;;;;;;oKAoXzC,CAAC"}

package/dist/types/components/form/Combobox/ComboboxContext.d.ts

@@ -36,6 +36,7 @@ export type ComboboxContextType = {
     }) => void;
     listRef: UseListNavigationProps['listRef'];
     forwareddRef: React.Ref<HTMLInputElement>;
+    setListRef: (index: number, ref: HTMLElement | null) => void;
 };
 export declare const ComboboxContext: import("react").Context<ComboboxContextType | undefined>;
 //# sourceMappingURL=ComboboxContext.d.ts.map

package/dist/types/components/form/Combobox/ComboboxContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/ComboboxContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACtB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACjE,eAAe,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACnE,OAAO,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,eAAe,EAAE;QACf,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IACzC,cAAc,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;IAChD,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,iBAAiB,EAAE,CACjB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC5B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,YAAY,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,cAAc,CAAC,CAAC;IACjE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;IACvD,kBAAkB,EAAE,CAAC,IAAI,EAAE;QACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,KAAK,IAAI,CAAC;IACX,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,eAAe,0DAE3B,CAAC"}
+{"version":3,"file":"ComboboxContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Combobox/ComboboxContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,sBAAsB,EACtB,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,WAAW,MAAM,eAAe,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,WAAW,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;IACjD,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACpC,gBAAgB,EAAE,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACjE,eAAe,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACnE,OAAO,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,eAAe,EAAE;QACf,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,IAAI,EAAE,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IACzC,cAAc,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;IAChD,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,iBAAiB,EAAE,CACjB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC5B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7B,YAAY,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,cAAc,CAAC,CAAC;IACjE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;IACvD,kBAAkB,EAAE,CAAC,IAAI,EAAE;QACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,OAAO,CAAC;KACjB,KAAK,IAAI,CAAC;IACX,OAAO,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;IAC3C,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC1C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,eAAO,MAAM,eAAe,0DAE3B,CAAC"}

package/dist/types/components/form/Fieldset/Fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Fieldset/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKtD,MAAM,MAAM,aAAa,GAAG;IAC1B,wEAAwE;IACxE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC;IAClB;yEACqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAC9B,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAE9C,eAAO,MAAM,QAAQ;IAhBnB,wEAAwE;kBAC1D,SAAS;IACvB,8DAA8D;;IAE9D,+EAA+E;YACvE,SAAS;IACjB,kCAAkC;YAC1B,SAAS;IACjB;yEACqE;;IAErE,qFAAqF;;oIA+FtF,CAAC"}
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Fieldset/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAM/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKtD,MAAM,MAAM,aAAa,GAAG;IAC1B,wEAAwE;IACxE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC;IAClB;yEACqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,GAC9B,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAE9C,eAAO,MAAM,QAAQ;IAhBnB,wEAAwE;kBAC1D,SAAS;IACvB,8DAA8D;;IAE9D,+EAA+E;YACvE,SAAS;IACjB,kCAAkC;YAC1B,SAAS;IACjB;yEACqE;;IAErE,qFAAqF;;oIAgGtF,CAAC"}

package/dist/types/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export { useMediaQuery } from './useMediaQuery';
 export { usePrevious } from './usePrevious';
-export { useSynchronizedAnimation } from './useSynchronizedAnimation';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+export { useSynchronizedAnimation } from './useSynchronizedAnimation/useSynchronizedAnimation';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AAC/F,OAAO,EAAE,yBAAyB,EAAE,MAAM,uDAAuD,CAAC"}

package/dist/types/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEnD,eAAO,MAAM,yBAAyB,kBACuB,CAAC"}

package/dist/types/hooks/useSynchronizedAnimation/useSynchronizedAnimation.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Synchronizes the css animation of multiple elements with the same `animationName`.
+ *
+ * @example
+ * ```tsx
+ *  const ref = useSynchronizedAnimation<HTMLDivElement>('spin');
+ *
+ *  <div
+ *   ref={ref}
+ *  />
+ * ```
+ */
+export declare function useSynchronizedAnimation<T>(animationName: string): import("react").RefObject<T>;
+//# sourceMappingURL=useSynchronizedAnimation.d.ts.map

package/dist/types/hooks/useSynchronizedAnimation/useSynchronizedAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSynchronizedAnimation.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSynchronizedAnimation/useSynchronizedAnimation.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,gCAuChE"}

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export { useSynchronizedAnimation, useIsomorphicLayoutEffect } from './hooks';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/utilities/RovingTabIndex/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/RovingTabIndex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/RovingTabIndex/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.12",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -39,5 +39,5 @@
     "rollup": "^4.12.1",
     "typescript": "^5.4.2"
   },
-  "gitHead": "e5a7d422ac514afc08329d2e58497f7f0e8d3396"
+  "gitHead": "da315701edbee97727abade0a6ff67619edcf3a7"
 }

package/dist/cjs/hooks/useSynchronizedAnimation.js

@@ -1,33 +0,0 @@
-'use client';
-'use strict';
-
-var React = require('react');
-var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.js');
-
-const stashedTime = {};
-function useSynchronizedAnimation(animationName) {
-    const ref = React.useRef(null);
-    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-        const animations = document
-            .getAnimations()
-            .filter((animation) => 'animationName' in animation &&
-            animation.animationName === animationName);
-        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
-        if (myAnimation &&
-            myAnimation === animations[0] &&
-            stashedTime[animationName]) {
-            myAnimation.currentTime = stashedTime[animationName];
-        }
-        if (myAnimation && myAnimation !== animations[0]) {
-            myAnimation.currentTime = animations[0].currentTime;
-        }
-        return () => {
-            if (myAnimation && myAnimation === animations[0]) {
-                stashedTime[animationName] = myAnimation.currentTime;
-            }
-        };
-    }, [animationName]);
-    return ref;
-}
-
-exports.useSynchronizedAnimation = useSynchronizedAnimation;

package/dist/esm/hooks/useSynchronizedAnimation.js

@@ -1,31 +0,0 @@
-'use client';
-import { useRef } from 'react';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
-
-const stashedTime = {};
-function useSynchronizedAnimation(animationName) {
-    const ref = useRef(null);
-    useIsomorphicLayoutEffect(() => {
-        const animations = document
-            .getAnimations()
-            .filter((animation) => 'animationName' in animation &&
-            animation.animationName === animationName);
-        const myAnimation = animations.find((animation) => animation.effect?.target === ref.current);
-        if (myAnimation &&
-            myAnimation === animations[0] &&
-            stashedTime[animationName]) {
-            myAnimation.currentTime = stashedTime[animationName];
-        }
-        if (myAnimation && myAnimation !== animations[0]) {
-            myAnimation.currentTime = animations[0].currentTime;
-        }
-        return () => {
-            if (myAnimation && myAnimation === animations[0]) {
-                stashedTime[animationName] = myAnimation.currentTime;
-            }
-        };
-    }, [animationName]);
-    return ref;
-}
-
-export { useSynchronizedAnimation };

package/dist/types/hooks/useIsomorphicLayoutEffect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIsomorphicLayoutEffect.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIsomorphicLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAC;AAEnD,eAAO,MAAM,yBAAyB,kBACuB,CAAC"}

package/dist/types/hooks/useSynchronizedAnimation.d.ts

@@ -1,2 +0,0 @@
-export declare function useSynchronizedAnimation<T>(animationName: string): import("react").RefObject<T>;
-//# sourceMappingURL=useSynchronizedAnimation.d.ts.map

package/dist/types/hooks/useSynchronizedAnimation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSynchronizedAnimation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSynchronizedAnimation.ts"],"names":[],"mappings":"AAMA,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,gCAqChE"}