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

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

@@ -9,7 +9,7 @@ var CharacterCounter = require('../CharacterCounter.js');
 var useTextfield = require('./useTextfield.js');
 var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
 var Label = require('../../Typography/Label/Label.js');
-var objectUtils = require('../../../utilities/objectUtils.js');
+var omit = require('../../../utilities/omit/omit.js');
 var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
 
 /** Text input field
@@ -26,7 +26,7 @@ const Textfield = React.forwardRef((props, ref) => {
     const characterLimitId = `textfield-charactercount-${React.useId()}`;
     const hasCharacterLimit = characterLimit != null;
     const describedBy = lite.clsx(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: lite.clsx(`ds-textfield`, `ds-textfield--${size}`, readOnly && `ds-textfield--readonly`, hasError && `ds-textfield--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: lite.clsx(`ds-textfield__label`, hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textfield__readonly__icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx(`ds-textfield__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsxs("div", { className: 'ds-textfield__field', children: [prefix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: lite.clsx(`ds-textfield__adornment`, `ds-textfield__prefix`), "aria-hidden": 'true', children: prefix }) })), jsxRuntime.jsx("input", { className: lite.clsx(`ds-textfield__input`, `ds-focus`, prefix && `ds-textfield__input--with-prefix`, suffix && `ds-textfield__input--with-suffix`), ref: ref, type: type, disabled: inputProps.disabled, "aria-describedby": describedBy, size: htmlSize, ...objectUtils.omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: lite.clsx(`ds-textfield`, `ds-textfield--${size}`, readOnly && `ds-textfield--readonly`, hasError && `ds-textfield--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: lite.clsx(`ds-textfield__label`, hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textfield__readonly__icon' })), jsxRuntime.jsx("span", { children: label })] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx(`ds-textfield__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsxs("div", { className: 'ds-textfield__field', children: [prefix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: lite.clsx(`ds-textfield__adornment`, `ds-textfield__prefix`), "aria-hidden": 'true', children: prefix }) })), jsxRuntime.jsx("input", { className: lite.clsx(`ds-textfield__input`, `ds-focus`, prefix && `ds-textfield__input--with-prefix`, suffix && `ds-textfield__input--with-suffix`), ref: ref, type: type, disabled: inputProps.disabled, "aria-describedby": describedBy, size: htmlSize, ...omit.omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
                                 inputProps?.onChange?.(e);
                                 setInputValue(e.target.value);
                             } }), suffix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: lite.clsx(`ds-textfield__adornment`, `ds-textfield__suffix`), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textfield__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));

package/dist/cjs/index.js

@@ -2,8 +2,12 @@
 'use strict';
 
 var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
-var useSynchronizedAnimation = require('./hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
-var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+var useSynchronizedAnimation = require('./utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var useIsomorphicLayoutEffect = require('./utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+var RovingFocusRoot = require('./utilities/RovingFocus/RovingFocusRoot.js');
+var useRovingFocus = require('./utilities/RovingFocus/useRovingFocus.js');
+var RovingFocusItem = require('./utilities/RovingFocus/RovingFocusItem.js');
+var omit = require('./utilities/omit/omit.js');
 var Button = require('./components/Button/Button.js');
 var HelpText = require('./components/HelpText/HelpText.js');
 var Spinner = require('./components/Spinner/Spinner.js');
@@ -103,6 +107,12 @@ var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading
 exports.ErrorSummaryList = ErrorSummaryList;
 exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;
+exports.useRovingFocus = useRovingFocus.useRovingFocus;
+exports.RovingFocusItem = RovingFocusItem.RovingFocusItem;
+exports.getNextFocusableValue = RovingFocusItem.getNextFocusableValue;
+exports.getPrevFocusableValue = RovingFocusItem.getPrevFocusableValue;
+exports.omit = omit.omit;
 exports.Button = Button.Button;
 exports.HelpText = HelpText.HelpText;
 exports.Spinner = Spinner.Spinner;
@@ -132,11 +142,11 @@ exports.ChipRemovable = Removable.RemovableChip;
 exports.ChipToggle = Toggle.ToggleChip;
 exports.usePagination = usePagination.usePagination;
 exports.Pagination = index$3.Pagination;
-exports.PaginationRoot = PaginationRoot.default;
+exports.PaginationRoot = PaginationRoot.PaginationRoot;
 exports.PaginationContent = PaginationContent.PaginationContent;
-exports.PaginationItem = PaginationItem.default;
+exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
-exports.PaginationEllipsis = PaginationEllipsis.default;
+exports.PaginationEllipsis = PaginationEllipsis.PaginationEllipsis;
 exports.PaginationNext = PaginationNextPrev.PaginationNext;
 exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
 exports.SkipLink = SkipLink.SkipLink;

package/dist/cjs/node_modules/@floating-ui/{react-dom/node_modules/@floating-ui/dom → dom}/dist/floating-ui.dom.js

@@ -1,9 +1,9 @@
 'use client';
 'use strict';
 
-var floatingUi_core = require('../../../../../core/dist/floating-ui.core.js');
-var floatingUi_utils = require('../../../../../utils/dist/floating-ui.utils.js');
-var floatingUi_utils_dom = require('../../../../../utils/dist/floating-ui.utils.dom.js');
+var floatingUi_core = require('../../core/dist/floating-ui.core.js');
+var floatingUi_utils = require('../../utils/dist/floating-ui.utils.js');
+var floatingUi_utils_dom = require('../../utils/dist/floating-ui.utils.dom.js');
 
 function getCssDimensions(element) {
   const css = floatingUi_utils_dom.getComputedStyle(element);

package/dist/cjs/node_modules/@floating-ui/react/dist/floating-ui.react.js

@@ -8,7 +8,7 @@ var floatingUi_reactDom = require('../../react-dom/dist/floating-ui.react-dom.js
 var floatingUi_utils_dom = require('../../utils/dist/floating-ui.utils.dom.js');
 var index_esm = require('../../../tabbable/dist/index.esm.js');
 var ReactDOM = require('react-dom');
-var floatingUi_dom = require('../../react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../dom/dist/floating-ui.dom.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/dist/cjs/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var floatingUi_dom = require('../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../dom/dist/floating-ui.dom.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
 

package/dist/cjs/utilities/AnimateHeight/AnimateHeight.js

@@ -4,8 +4,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var lite = require('../../node_modules/clsx/dist/lite.js');
-var usePrevious = require('../../hooks/usePrevious.js');
-var useMediaQuery = require('../../hooks/useMediaQuery.js');
+var usePrevious = require('../hooks/usePrevious.js');
+var useMediaQuery = require('../hooks/useMediaQuery/useMediaQuery.js');
 
 const transitionDurationInMilliseconds = 250;
 /**

package/dist/cjs/utilities/{RovingTabIndex/RovingTabindexItem.js → RovingFocus/RovingFocusItem.js}

@@ -5,22 +5,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var useRovingTabindex = require('./useRovingTabindex.js');
+var useRovingFocus = require('./useRovingFocus.js');
 
-/** Get the next focusable RovingTabindexItem */
+/** Get the next focusable RovingFocusItem */
 function getNextFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === items.length - 1 ? 0 : currIndex + 1);
 }
-/** Get the previous focusable RovingTabindexItem */
+/** Get the previous focusable RovingFocusItem */
 function getPrevFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
-const RovingTabindexItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
+const RovingFocusItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
     const focusValue = value ?? (typeof rest.children == 'string' ? rest.children : '');
-    const { getOrderedItems, getRovingProps } = useRovingTabindex.useRovingTabindex(focusValue);
+    const { getOrderedItems, getRovingProps } = useRovingFocus.useRovingFocus(focusValue);
     const rovingProps = getRovingProps({
         onKeyDown: (e) => {
             rest?.onKeyDown?.(e);
@@ -39,6 +39,6 @@ const RovingTabindexItem = React.forwardRef(({ value, asChild, ...rest }, ref) =
     return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
 });
 
-exports.RovingTabindexItem = RovingTabindexItem;
+exports.RovingFocusItem = RovingFocusItem;
 exports.getNextFocusableValue = getNextFocusableValue;
 exports.getPrevFocusableValue = getPrevFocusableValue;

package/dist/cjs/utilities/{RovingTabIndex/RovingTabindexRoot.js → RovingFocus/RovingFocusRoot.js}

@@ -6,7 +6,7 @@ var React = require('react');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 
-const RovingTabindexContext = React.createContext({
+const RovingFocusContext = React.createContext({
     elements: { current: new Map() },
     getOrderedItems: () => [],
     setFocusableValue: () => {
@@ -17,7 +17,7 @@ const RovingTabindexContext = React.createContext({
     },
     focusableValue: null,
 });
-const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus, ...rest }, ref) => {
+const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, onBlur, onFocus, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
     const [focusableValue, setFocusableValue] = React.useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = React.useState(false);
@@ -32,7 +32,10 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
             .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
             .map(([value, element]) => ({ value, element }));
     };
-    return (jsxRuntime.jsx(RovingTabindexContext.Provider, { value: {
+    React.useEffect(() => {
+        setFocusableValue(activeValue ?? null);
+    }, [activeValue]);
+    return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {
             elements,
             getOrderedItems,
             focusableValue,
@@ -43,6 +46,7 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
         }, children: jsxRuntime.jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
                 onBlur?.(e);
                 setIsShiftTabbing(false);
+                setFocusableValue(activeValue ?? null);
             }, onFocus: (e) => {
                 onFocus?.(e);
                 if (e.target !== e.currentTarget)
@@ -53,8 +57,8 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
                 if (focusableValue != null) {
                     elements.current.get(focusableValue)?.focus();
                 }
-                else if (valueId != null) {
-                    elements.current.get(valueId)?.focus();
+                else if (activeValue != null) {
+                    elements.current.get(activeValue)?.focus();
                 }
                 else {
                     orderedItems.at(0)?.element.focus();
@@ -62,5 +66,5 @@ const RovingTabindexRoot = React.forwardRef(({ valueId, asChild, onBlur, onFocus
             }, ref: refs }) }));
 });
 
-exports.RovingTabindexContext = RovingTabindexContext;
-exports.RovingTabindexRoot = RovingTabindexRoot;
+exports.RovingFocusContext = RovingFocusContext;
+exports.RovingFocusRoot = RovingFocusRoot;

package/dist/cjs/utilities/{RovingTabIndex/useRovingTabindex.js → RovingFocus/useRovingFocus.js}

@@ -2,13 +2,13 @@
 'use strict';
 
 var React = require('react');
-var RovingTabindexRoot = require('./RovingTabindexRoot.js');
+var RovingFocusRoot = require('./RovingFocusRoot.js');
 
 // Logic from: https://www.joshuawootonn.com/react-roving-tabindex
 // Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
-/** Handles props for `RovingTabIndex` in context with `RovingTabIndexRoot` */
-const useRovingTabindex = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = React.useContext(RovingTabindexRoot.RovingTabindexContext);
+/** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
+const useRovingFocus = (value) => {
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = React.useContext(RovingFocusRoot.RovingFocusContext);
     return {
         getOrderedItems,
         isFocusable: focusableValue === value,
@@ -39,4 +39,4 @@ const useRovingTabindex = (value) => {
     };
 };
 
-exports.useRovingTabindex = useRovingTabindex;
+exports.useRovingFocus = useRovingFocus;

package/dist/cjs/utilities/{useDebounce.js → hooks/useDebounceCallback/useDebounceCallback.js}

@@ -3,7 +3,7 @@
 
 var React = require('react');
 
-function useDebounce(callback, delay = 50) {
+function useDebounceCallback(callback, delay = 50) {
     const timeoutRef = React.useRef(null);
     React.useEffect(() => {
         // Cleanup the previous timeout on re-render
@@ -24,4 +24,4 @@ function useDebounce(callback, delay = 50) {
     return debouncedCallback;
 }
 
-module.exports = useDebounce;
+exports.useDebounceCallback = useDebounceCallback;

package/dist/cjs/utilities/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
+
+// from https://usehooks-ts.com/react-hook/use-media-query
+const IS_SERVER = typeof window === 'undefined';
+function useMediaQuery(query, { defaultValue = false, initializeWithValue = true, } = {}) {
+    const getMatches = (query) => {
+        if (IS_SERVER) {
+            return defaultValue;
+        }
+        return window.matchMedia(query).matches;
+    };
+    const [matches, setMatches] = React.useState(() => {
+        if (initializeWithValue) {
+            return getMatches(query);
+        }
+        return defaultValue;
+    });
+    // Handles the change event of the media query.
+    function handleChange() {
+        setMatches(getMatches(query));
+    }
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+        if (matchMedia.addListener) {
+            matchMedia.addListener(handleChange);
+        }
+        else {
+            matchMedia.addEventListener('change', handleChange);
+        }
+        return () => {
+            if (matchMedia.removeListener) {
+                matchMedia.removeListener(handleChange);
+            }
+            else {
+                matchMedia.removeEventListener('change', handleChange);
+            }
+        };
+    }, [query]);
+    return matches;
+}
+
+exports.useMediaQuery = useMediaQuery;

package/dist/esm/components/Accordion/AccordionContent.js

@@ -6,6 +6,11 @@ import { AccordionItemContext } from './AccordionItem.js';
 import { AnimateHeight } from '../../utilities/AnimateHeight/AnimateHeight.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
+/**
+ * Accordion content component, contains the content of the accordion item.
+ * @example
+ * <AccordionContent>Content</AccordionContent>
+ */
 const AccordionContent = forwardRef(({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
     if (context === null) {

package/dist/esm/components/Accordion/AccordionHeading.js

@@ -7,6 +7,11 @@ import { AccordionItemContext } from './AccordionItem.js';
 import { Heading } from '../Typography/Heading/Heading.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
+/**
+ * Accordion header component, contains a button to toggle the content.
+ * @example
+ * <AccordionHeader>Header</AccordionHeader>
+ */
 const AccordionHeading = forwardRef(({ level = 1, children, className, onHeaderClick, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
     if (context === null) {

package/dist/esm/components/Accordion/AccordionItem.js

@@ -4,6 +4,14 @@ import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { createContext, forwardRef, useState, useId } from 'react';
 
 const AccordionItemContext = createContext(null);
+/**
+ * Accordion item component, contains `Accordion.Header` and `Accordion.Content` components.
+ * @example
+ * <AccordionItem>
+ *  <AccordionHeader>Header</AccordionHeader>
+ *  <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ */
 const AccordionItem = forwardRef(({ children, className, open, defaultOpen = false, ...rest }, ref) => {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const contentId = useId();

package/dist/esm/components/Accordion/AccordionRoot.js

@@ -3,6 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 
+/**
+ * Accordion root component, contains `Accordion.Item` components.
+ */
 const AccordionRoot = forwardRef(({ border = false, color = 'neutral', className, ...rest }, ref) => {
     return (jsx("div", { className: clsx('ds-accordion', border && 'ds-accordion--border', color && `ds-accordion--${color}`, className), ref: ref, ...rest }));
 });

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

@@ -4,6 +4,16 @@ import { AccordionItem } from './AccordionItem.js';
 import { AccordionContent } from './AccordionContent.js';
 import { AccordionHeading } from './AccordionHeading.js';
 
+/**
+ * Accordions are used to toggle the visibility of content.
+ * @example
+ * <Accordion.Root>
+ *  <Accordion.Item>
+ *   <Accordion.Heading>Heading 1</Accordion.Heading>
+ *  <Accordion.Content>Content 1</Accordion.Content>
+ * </Accordion.Item>
+ * <Accordion.Item>
+ */
 const Accordion = {};
 Accordion.Root = AccordionRoot;
 Accordion.Heading = AccordionHeading;

package/dist/esm/components/Alert/Alert.js

@@ -17,9 +17,14 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, children, size = 'md', className, ...rest }, ref) => {
+/**
+ * Alerts are used to inform users about important information, warnings, errors, or success.
+ * @example
+ * <Alert severity='info'>Dette er en informasjonsmelding</Alert>
+ */
+const Alert = forwardRef(({ severity = 'info', iconTitle, children, size = 'md', className, ...rest }, ref) => {
     const { Icon, title } = icons[severity];
-    return (jsx("div", { ref: ref, className: clsx('ds-alert', `ds-alert--${size}`, `ds-alert--${severity}`, elevated && `ds-alert--elevated`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'ds-alert__icon' }), jsx(Paragraph, { asChild: true, size: size, className: 'ds-alert__content', children: jsx("span", { children: children }) })] }) }));
+    return (jsx("div", { ref: ref, className: clsx('ds-alert', `ds-alert--${size}`, `ds-alert--${severity}`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'ds-alert__icon' }), jsx(Paragraph, { asChild: true, size: size, className: 'ds-alert__content', children: jsx("span", { children: children }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

package/dist/esm/components/Button/Button.js

@@ -7,6 +7,8 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
  * Button used for interaction
+ * @example
+ * <Button>Click me</Button>
  */
 const Button = forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';

package/dist/esm/components/Card/Card.js

@@ -4,6 +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';
 
+/**
+ * Card component to present content in a structured way.
+ * @example
+ * <Card>
+ *  <Card.Header>Header</Card.Header>
+ *  <Card.Content>Content</Card.Content>
+ *  <Card.Footer>Footer</Card.Footer>
+ * </Card>
+ */
 const Card = forwardRef(({ isLink = false, asChild = false, color = 'neutral', className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
     return (jsx(Component, { ref: ref, className: clsx(`ds-card`, `ds-card--${color}`, isLink && `ds-card--link`, isLink && `ds-focus`, className), ...rest }));

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

@@ -5,9 +5,9 @@ import { forwardRef, useContext, useRef } from 'react';
 import { useFloating, useInteractions, useFocus, useClick, useDismiss, useRole, useMergeRefs, FloatingFocusManager, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 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 { autoUpdate, shift } from '../../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/useIsomorphicLayoutEffect.js';
+import { useIsomorphicLayoutEffect } from '../../utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
 
 const GAP = 4;
 const DropdownMenuContent = forwardRef(({ className, children, ...rest }, ref) => {

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

@@ -2,6 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, createContext } from 'react';
 
+/**
+ * DropdownMenuRoot is the root component for the DropdownMenu component.
+ * @example
+ * <DropdownMenu.Root>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu.Content>
+ *    <DropdownMenu.Group heading='Heading'>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.Group>
+ *  </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ */
 const DropdownMenuRoot = ({ open, onClose, placement = 'bottom-end', portal, size = 'md', children, }) => {
     const triggerRef = useRef(null);
     const [internalOpen, setInternalOpen] = useState(open ?? false);

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

@@ -5,6 +5,17 @@ import { DropdownMenuItem } from './DropdownMenuItem.js';
 import { DropdownMenuTrigger } from './DropdownMenuTrigger.js';
 import { DropdownMenuContent } from './DropdownMenuContent.js';
 
+/**
+ * @example
+ * <DropdownMenu.Root>
+ *  <DropdownMenu.Trigger>Dropdown</DropdownMenu.Trigger>
+ *  <DropdownMenu.Content>
+ *    <DropdownMenu.Group heading='Heading'>
+ *      <DropdownMenu.Item>Button 1</DropdownMenu.Item>
+ *    </DropdownMenu.Group>
+ *  </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ */
 const DropdownMenu = {};
 DropdownMenu.Root = DropdownMenuRoot;
 DropdownMenu.Content = DropdownMenuContent;

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

@@ -4,6 +4,15 @@ import { ErrorSummaryHeading } from './ErrorSummaryHeading.js';
 import { ErrorSummaryItem } from './ErrorSummaryItem.js';
 import ErrorSummaryList from './ErrorSummaryList.js';
 
+/**
+ * @example
+ * <ErrorSummary.Root>
+ *  <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *  <ErrorSummary.List>
+ *    <ErrorSummary.Item>Item 1</ErrorSummary.Item>
+ *  </ErrorSummary.List>
+ * </ErrorSummary.Root>
+ */
 const ErrorSummary = {};
 ErrorSummary.Root = ErrorSummaryRoot;
 ErrorSummary.Item = ErrorSummaryItem;

package/dist/esm/components/Pagination/PaginationEllipsis.js

@@ -10,6 +10,5 @@ const PaginationEllipsis = forwardRef(({ className, ...rest }, ref) => {
     return (jsx(Paragraph, { ref: ref, className: clsx('ds-pagination__ellipsis', className), size: size, ...rest, children: "\u2026" }));
 });
 PaginationEllipsis.displayName = 'PaginationEllipsis';
-var PaginationEllipsis$1 = PaginationEllipsis;
 
-export { PaginationEllipsis, PaginationEllipsis$1 as default };
+export { PaginationEllipsis };

package/dist/esm/components/Pagination/PaginationItem.js

@@ -11,6 +11,5 @@ const PaginationItem = forwardRef(({ asChild, className, ...rest }, ref) => {
     return (jsx(Component, { ref: ref, className: clsx('ds-pagination__item', `ds-pagination--${size}`, compact && 'ds-pagination--compact', className), ...rest }));
 });
 PaginationItem.displayName = 'PaginationItem';
-var PaginationItem$1 = PaginationItem;
 
-export { PaginationItem, PaginationItem$1 as default };
+export { PaginationItem };

package/dist/esm/components/Pagination/PaginationRoot.js

@@ -12,6 +12,5 @@ const PaginationRoot = forwardRef(({ asChild, compact = false, size = 'md', ...r
     return (jsx(PaginationContext.Provider, { value: { size, compact }, children: jsx(Component, { ref: ref, "aria-label": 'Pagination', ...rest }) }));
 });
 PaginationRoot.displayName = 'PaginationRoot';
-var PaginationRoot$1 = PaginationRoot;
 
-export { PaginationContext, PaginationRoot, PaginationRoot$1 as default };
+export { PaginationContext, PaginationRoot };

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

@@ -1,11 +1,11 @@
 'use client';
 import { Pagination as Pagination$1 } from './Pagination.js';
 import { PaginationContent } from './PaginationContent.js';
-import PaginationEllipsis from './PaginationEllipsis.js';
-import PaginationItem from './PaginationItem.js';
+import { PaginationEllipsis } from './PaginationEllipsis.js';
+import { PaginationItem } from './PaginationItem.js';
 import { PaginationButton } from './PaginationButton.js';
 import { PaginationPrevious, PaginationNext } from './PaginationNextPrev.js';
-import PaginationRoot from './PaginationRoot.js';
+import { PaginationRoot } from './PaginationRoot.js';
 
 const Pagination = Pagination$1;
 Pagination.Root = PaginationRoot;

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

@@ -5,10 +5,10 @@ import { forwardRef, useContext, useRef, useEffect, useMemo } from 'react';
 import { useFloating, useInteractions, useFocus, useClick, useDismiss, useRole, useMergeRefs, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 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 { autoUpdate, flip, shift } from '../../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/useIsomorphicLayoutEffect.js';
+import { useIsomorphicLayoutEffect } from '../../utilities/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/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../../utilities/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/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../../utilities/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/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../../utilities/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/useSynchronizedAnimation.js';
+import { useSynchronizedAnimation } from '../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js';
 
 const sizeMap = {
     '2xs': 13,

package/dist/esm/components/Tabs/Tab.js

@@ -3,13 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { useTabItem } from './useTab.js';
-import { RovingTabindexItem } from '../../utilities/RovingTabIndex/RovingTabindexItem.js';
+import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
+/**
+ * A single item in a Tabs component.
+ * @example
+ * <Tabs.Tab value='1'>Tab 1</Tabs.Tab>
+ */
 const Tab = forwardRef((props, ref) => {
     const { children, className, ...rest } = props;
     const { size, ...useTabRest } = useTabItem(props);
-    return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("button", { ...useTabRest, type: 'button', className: clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
+    return (jsx(RovingFocusItem, { ...rest, asChild: true, children: jsx(Paragraph, { asChild: true, variant: 'short', size: size, children: jsx("button", { ...useTabRest, type: 'button', className: clsx('ds-tabs__tab', 'ds-focus', className), ref: ref, children: children }) }) }));
 });
 Tab.displayName = 'Tab';
 

package/dist/esm/components/Tabs/TabContent.js

@@ -5,6 +5,13 @@ import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { TabsContext } from './TabsRoot.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
+/**
+ * A single content item in a Tabs component.
+ * @example
+ * ```tsx
+ * <Tabs.Content value='1'>content 1</Tabs.Content>
+ * ```
+ */
 const TabContent = forwardRef(({ children, value, className, ...rest }, ref) => {
     const { value: tabsValue, size } = useContext(TabsContext);
     const active = value == tabsValue;