@digdir/designsystemet-react 1.0.0-next.32 → 1.0.0-next.34

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

@@ -3,14 +3,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 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 omit = require('../../../utilities/omit/omit.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var ValidationMessage = require('../../Typography/ValidationMessage/ValidationMessage.js');
 
 /** Text input field
  *
@@ -19,17 +19,17 @@ var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
  * <Textfield label="Textfield label">
  * ```
  */
-const Textfield = React.forwardRef((props, ref) => {
+const Textfield = react.forwardRef((props, ref) => {
     const { label, description, suffix, prefix, style, characterLimit, hideLabel, type = 'text', htmlSize = 20, className, ...rest } = props;
     const { inputProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextfield.useTextfield(props);
-    const [inputValue, setInputValue] = React.useState(props.value || props.defaultValue);
-    const characterLimitId = `textfield-charactercount-${React.useId()}`;
+    const [inputValue, setInputValue] = react.useState(props.value || props.defaultValue);
+    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, ...omit.omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
+    const describedBy = cl(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl(`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: cl(`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: cl(`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: cl(`ds-textfield__adornment`, `ds-textfield__prefix`), "aria-hidden": 'true', children: prefix }) })), jsxRuntime.jsx("input", { className: cl(`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 }) })] }) }));
+                            } }), suffix && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, variant: 'short', children: jsxRuntime.jsx("div", { className: cl(`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(ValidationMessage.ValidationMessage, { size: size, children: props.error })) })] }) }));
 });
 Textfield.displayName = 'Textfield';
 

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

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var FieldsetContext = require('../Fieldset/FieldsetContext.js');
 var useFormField = require('../useFormField.js');
 
 /** Handles props for `Textfield` in context with `Fieldset` */
 const useTextfield = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
     const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'textfield');
     return {
         ...rest,

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

@@ -1,16 +1,16 @@
 'use client';
 'use strict';
 
-var lite = require('../../node_modules/clsx/dist/lite.js');
-var React = require('react');
+var cl = require('clsx/lite');
+var react = require('react');
 var FieldsetContext = require('./Fieldset/FieldsetContext.js');
 
 /**
  * Handles props and their state for various form-fields in context with Fieldset
  */
 const useFormField = (props, prefix) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
-    const randomId = React.useId();
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
+    const randomId = react.useId();
     const id = props.id ?? `${prefix}-${randomId}`;
     const errorId = props.errorId ?? `${prefix}-error-${randomId}`;
     const descriptionId = `${prefix}-description-${randomId}`;
@@ -28,7 +28,7 @@ const useFormField = (props, prefix) => {
             id,
             disabled,
             'aria-invalid': hasError ? true : undefined,
-            'aria-describedby': lite.clsx(props['aria-describedby'], !!props?.description &&
+            'aria-describedby': cl(props['aria-describedby'], !!props?.description &&
                 typeof props?.description === 'string' &&
                 descriptionId, hasError && !fieldset?.error && errorId, hasError && !!fieldset?.error && fieldset?.errorId) || undefined,
         },

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

@@ -0,0 +1,18 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var cl = require('clsx/lite');
+var react = require('react');
+var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+
+const Skeleton = react.forwardRef(function Skeleton({ asChild, className, height, style, variant = 'rectangle', width, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'span';
+    const animationRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-skeleton-opacity-fade');
+    const mergedRefs = react$1.useMergeRefs([animationRef, ref]);
+    return (jsxRuntime.jsx(Component, { "aria-hidden": 'true', className: cl('ds-skeleton', className), "data-variant": variant, ref: mergedRefs, style: { width, height, ...style }, ...rest }));
+});
+
+exports.Skeleton = Skeleton;

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cl = require('clsx/lite');
+var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+
+/**  Spinner component used for indicating busy or indeterminate loading */
+const Spinner = ({ title, color = 'neutral', size = 'md', className, ...rest }) => {
+    const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-rotate-animation');
+    const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('ds-spinner-stroke-animation');
+    return (jsxRuntime.jsxs("svg", { className: cl('ds-spinner', className), viewBox: '0 0 50 50', ref: svgRef, "data-color": color, "data-size": size, ...rest, children: [jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("circle", { className: cl('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: cl(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+};
+Spinner.displayName = 'Spinner';
+
+exports.Spinner = Spinner;

package/dist/cjs/index.js

@@ -1,96 +1,86 @@
 'use client';
 'use strict';
 
-var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.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 Avatar = require('./components/Avatar/Avatar.js');
 var Button = require('./components/Button/Button.js');
 var Badge = require('./components/Badge/Badge.js');
 var index = require('./components/Breadcrumbs/index.js');
-var BreadcrumbsRoot = require('./components/Breadcrumbs/BreadcrumbsRoot.js');
-var BreadcrumbsNav = require('./components/Breadcrumbs/BreadcrumbsNav.js');
 var BreadcrumbsList = require('./components/Breadcrumbs/BreadcrumbsList.js');
 var BreadcrumbsItem = require('./components/Breadcrumbs/BreadcrumbsItem.js');
 var BreadcrumbsLink = require('./components/Breadcrumbs/BreadcrumbsLink.js');
 var HelpText = require('./components/HelpText/HelpText.js');
-var Spinner = require('./components/Spinner/Spinner.js');
+var Spinner = require('./components/loaders/Spinner/Spinner.js');
+var Skeleton = require('./components/loaders/Skeleton/Skeleton.js');
 var Link = require('./components/Link/Link.js');
 var index$1 = require('./components/List/index.js');
-var ListRoot = require('./components/List/ListRoot.js');
-var ListItem = require('./components/List/ListItem.js');
-var ListHeading = require('./components/List/ListHeading.js');
 var Lists = require('./components/List/Lists.js');
+var ListItem = require('./components/List/ListItem.js');
 var Paragraph = require('./components/Typography/Paragraph/Paragraph.js');
 var Heading = require('./components/Typography/Heading/Heading.js');
 var Ingress = require('./components/Typography/Ingress/Ingress.js');
 var Label = require('./components/Typography/Label/Label.js');
-var ErrorMessage = require('./components/Typography/ErrorMessage/ErrorMessage.js');
+var ValidationMessage = require('./components/Typography/ValidationMessage/ValidationMessage.js');
 var index$2 = require('./components/Accordion/index.js');
-var AccordionRoot = require('./components/Accordion/AccordionRoot.js');
 var AccordionItem = require('./components/Accordion/AccordionItem.js');
 var AccordionContent = require('./components/Accordion/AccordionContent.js');
 var AccordionHeading = require('./components/Accordion/AccordionHeading.js');
-var NativeSelect = require('./components/form/NativeSelect/NativeSelect.js');
+var index$3 = require('./components/form/Select/index.js');
+var SelectOption = require('./components/form/Select/SelectOption.js');
+var SelectOptgroup = require('./components/form/Select/SelectOptgroup.js');
 var Alert = require('./components/Alert/Alert.js');
 var Tag = require('./components/Tag/Tag.js');
-var index$3 = require('./components/Chip/index.js');
+var index$4 = require('./components/Chip/index.js');
 var Group = require('./components/Chip/Group/Group.js');
 var Removable = require('./components/Chip/Removable/Removable.js');
 var Toggle = require('./components/Chip/Toggle/Toggle.js');
 var usePagination = require('./components/Pagination/usePagination.js');
-var index$4 = require('./components/Pagination/index.js');
+var index$5 = require('./components/Pagination/index.js');
 var PaginationRoot = require('./components/Pagination/PaginationRoot.js');
-var PaginationContent = require('./components/Pagination/PaginationContent.js');
+var PaginationList = require('./components/Pagination/PaginationList.js');
 var PaginationItem = require('./components/Pagination/PaginationItem.js');
 var PaginationButton = require('./components/Pagination/PaginationButton.js');
 var PaginationEllipsis = require('./components/Pagination/PaginationEllipsis.js');
 var PaginationNextPrev = require('./components/Pagination/PaginationNextPrev.js');
 var SkipLink = require('./components/SkipLink/SkipLink.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
-var index$5 = require('./components/form/Checkbox/index.js');
+var index$6 = require('./components/form/Checkbox/index.js');
 var CheckboxGroup = require('./components/form/Checkbox/CheckboxGroup.js');
-var index$6 = require('./components/form/Radio/index.js');
+var index$7 = require('./components/form/Radio/index.js');
 var RadioGroup = require('./components/form/Radio/RadioGroup.js');
 var Fieldset = require('./components/form/Fieldset/Fieldset.js');
 var Switch = require('./components/form/Switch/Switch.js');
 var Textfield = require('./components/form/Textfield/Textfield.js');
 var Textarea = require('./components/form/Textarea/Textarea.js');
-var index$7 = require('./components/Tabs/index.js');
-var TabsRoot = require('./components/Tabs/TabsRoot.js');
-var Tab = require('./components/Tabs/Tab.js');
-var TabList = require('./components/Tabs/TabList.js');
-var TabContent = require('./components/Tabs/TabContent.js');
-var index$8 = require('./components/ToggleGroup/index.js');
-var ToggleGroupRoot = require('./components/ToggleGroup/ToggleGroupRoot.js');
-var ToggleGroupItem = require('./components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js');
-var index$9 = require('./components/Popover/index.js');
-var PopoverRoot = require('./components/Popover/PopoverRoot.js');
-var PopoverContent = require('./components/Popover/PopoverContent.js');
+var index$8 = require('./components/Tabs/index.js');
+var TabsTab = require('./components/Tabs/TabsTab.js');
+var TabsList = require('./components/Tabs/TabsList.js');
+var TabsPanel = require('./components/Tabs/TabsPanel.js');
+var index$9 = require('./components/ToggleGroup/index.js');
+var ToggleGroupItem = require('./components/ToggleGroup/ToggleGroupItem.js');
+var index$a = require('./components/Popover/index.js');
+var PopoverContext = require('./components/Popover/PopoverContext.js');
 var PopoverTrigger = require('./components/Popover/PopoverTrigger.js');
 var Divider = require('./components/Divider/Divider.js');
-var index$a = require('./components/Modal/index.js');
+var index$b = require('./components/Modal/index.js');
 var ModalRoot = require('./components/Modal/ModalRoot.js');
 var ModaContent = require('./components/Modal/ModaContent.js');
 var ModalFooter = require('./components/Modal/ModalFooter.js');
 var ModalHeader = require('./components/Modal/ModalHeader.js');
 var ModalTrigger = require('./components/Modal/ModalTrigger.js');
 var ModalDialog = require('./components/Modal/ModalDialog.js');
-var index$b = require('./components/DropdownMenu/index.js');
-var DropdownMenuRoot = require('./components/DropdownMenu/DropdownMenuRoot.js');
-var DropdownMenuContent = require('./components/DropdownMenu/DropdownMenuContent.js');
-var DropdownMenuGroup = require('./components/DropdownMenu/DropdownMenuGroup.js');
-var DropdownMenuItem = require('./components/DropdownMenu/DropdownMenuItem.js');
-var DropdownMenuTrigger = require('./components/DropdownMenu/DropdownMenuTrigger.js');
+var index$c = require('./components/Dropdown/index.js');
+var DropdownContext = require('./components/Dropdown/DropdownContext.js');
+var DropdownList = require('./components/Dropdown/DropdownList.js');
+var DropdownHeading = require('./components/Dropdown/DropdownHeading.js');
+var DropdownItem = require('./components/Dropdown/DropdownItem.js');
+var DropdownTrigger = require('./components/Dropdown/DropdownTrigger.js');
 var Search = require('./components/form/Search/Search.js');
-var index$c = require('./components/Skeleton/index.js');
-var Circle = require('./components/Skeleton/Circle/Circle.js');
-var Rectangle = require('./components/Skeleton/Rectangle/Rectangle.js');
-var Text = require('./components/Skeleton/Text/Text.js');
-var Box = require('./components/Box/Box.js');
 var index$d = require('./components/Card/index.js');
 var CardHeader = require('./components/Card/CardHeader.js');
 var CardContent = require('./components/Card/CardContent.js');
@@ -106,13 +96,12 @@ var TableRow = require('./components/Table/TableRow.js');
 var TableCell = require('./components/Table/TableCell.js');
 var TableHeaderCell = require('./components/Table/TableHeaderCell.js');
 var index$g = require('./components/ErrorSummary/index.js');
-var ErrorSummaryRoot = require('./components/ErrorSummary/ErrorSummaryRoot.js');
 var ErrorSummaryItem = require('./components/ErrorSummary/ErrorSummaryItem.js');
 var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading.js');
+var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
 
 
 
-exports.ErrorSummaryList = ErrorSummaryList;
 exports.useSynchronizedAnimation = useSynchronizedAnimation.useSynchronizedAnimation;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
 exports.RovingFocusRoot = RovingFocusRoot.RovingFocusRoot;
@@ -121,44 +110,43 @@ exports.RovingFocusItem = RovingFocusItem.RovingFocusItem;
 exports.getNextFocusableValue = RovingFocusItem.getNextFocusableValue;
 exports.getPrevFocusableValue = RovingFocusItem.getPrevFocusableValue;
 exports.omit = omit.omit;
+exports.Avatar = Avatar.Avatar;
 exports.Button = Button.Button;
 exports.Badge = Badge.Badge;
 exports.Breadcrumbs = index.Breadcrumbs;
-exports.BreadcrumbsRoot = BreadcrumbsRoot.BreadcrumbsRoot;
-exports.BreadcrumbsNav = BreadcrumbsNav.BreadcrumbsNav;
 exports.BreadcrumbsList = BreadcrumbsList.BreadcrumbsList;
 exports.BreadcrumbsItem = BreadcrumbsItem.BreadcrumbsItem;
 exports.BreadcrumbsLink = BreadcrumbsLink.BreadcrumbsLink;
 exports.HelpText = HelpText.HelpText;
 exports.Spinner = Spinner.Spinner;
+exports.Skeleton = Skeleton.Skeleton;
 exports.Link = Link.Link;
 exports.List = index$1.List;
-exports.ListRoot = ListRoot.ListRoot;
+exports.ListOrdered = Lists.ListOrdered;
+exports.ListUnordered = Lists.ListUnordered;
 exports.ListItem = ListItem.ListItem;
-exports.ListHeading = ListHeading.ListHeading;
-exports.ListOrdered = Lists.Ordered;
-exports.ListUnordered = Lists.Unordered;
 exports.Paragraph = Paragraph.Paragraph;
 exports.Heading = Heading.Heading;
 exports.Ingress = Ingress.Ingress;
 exports.Label = Label.Label;
-exports.ErrorMessage = ErrorMessage.ErrorMessage;
+exports.ValidationMessage = ValidationMessage.ValidationMessage;
 exports.Accordion = index$2.Accordion;
-exports.AccordionRoot = AccordionRoot.AccordionRoot;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.AccordionContent = AccordionContent.AccordionContent;
 exports.AccordionHeading = AccordionHeading.AccordionHeading;
-exports.NativeSelect = NativeSelect.NativeSelect;
+exports.Select = index$3.Select;
+exports.SelectOption = SelectOption.SelectOption;
+exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
 exports.Alert = Alert.Alert;
 exports.Tag = Tag.Tag;
-exports.Chip = index$3.Chip;
+exports.Chip = index$4.Chip;
 exports.ChipGroup = Group.Group;
 exports.ChipRemovable = Removable.RemovableChip;
 exports.ChipToggle = Toggle.ToggleChip;
 exports.usePagination = usePagination.usePagination;
-exports.Pagination = index$4.Pagination;
+exports.Pagination = index$5.Pagination;
 exports.PaginationRoot = PaginationRoot.PaginationRoot;
-exports.PaginationContent = PaginationContent.PaginationContent;
+exports.PaginationList = PaginationList.PaginationList;
 exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
 exports.PaginationEllipsis = PaginationEllipsis.PaginationEllipsis;
@@ -166,46 +154,38 @@ exports.PaginationNext = PaginationNextPrev.PaginationNext;
 exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Tooltip = Tooltip.Tooltip;
-exports.Checkbox = index$5.Checkbox;
+exports.Checkbox = index$6.Checkbox;
 exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
-exports.Radio = index$6.Radio;
+exports.Radio = index$7.Radio;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.Fieldset = Fieldset.Fieldset;
 exports.Switch = Switch.Switch;
 exports.Textfield = Textfield.Textfield;
 exports.Textarea = Textarea.Textarea;
-exports.Tabs = index$7.Tabs;
-exports.TabsRoot = TabsRoot.TabsRoot;
-exports.Tab = Tab.Tab;
-exports.TabList = TabList.TabList;
-exports.TabContent = TabContent.TabContent;
-exports.ToggleGroup = index$8.ToggleGroup;
-exports.ToggleGroupRoot = ToggleGroupRoot.ToggleGroupRoot;
+exports.Tabs = index$8.Tabs;
+exports.TabsTab = TabsTab.TabsTab;
+exports.TabsList = TabsList.TabsList;
+exports.TabsPanel = TabsPanel.TabsPanel;
+exports.ToggleGroup = index$9.ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
-exports.Popover = index$9.Popover;
-exports.PopoverRoot = PopoverRoot.PopoverRoot;
-exports.PopoverContent = PopoverContent.PopoverContent;
+exports.Popover = index$a.Popover;
+exports.PopoverContext = PopoverContext.PopoverContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
-exports.Modal = index$a.Modal;
+exports.Modal = index$b.Modal;
 exports.ModalRoot = ModalRoot.ModalRoot;
 exports.ModalContent = ModaContent.ModalContent;
 exports.ModalFooter = ModalFooter.ModalFooter;
 exports.ModalHeader = ModalHeader.ModalHeader;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
 exports.ModalDialog = ModalDialog.ModalDialog;
-exports.DropdownMenu = index$b.DropdownMenu;
-exports.DropdownMenuRoot = DropdownMenuRoot.DropdownMenuRoot;
-exports.DropdownMenuContent = DropdownMenuContent.DropdownMenuContent;
-exports.DropdownMenuGroup = DropdownMenuGroup.DropdownMenuGroup;
-exports.DropdownMenuItem = DropdownMenuItem.DropdownMenuItem;
-exports.DropdownMenuTrigger = DropdownMenuTrigger.DropdownMenuTrigger;
+exports.Dropdown = index$c.Dropdown;
+exports.DropdownContext = DropdownContext.DropdownContext;
+exports.DropdownList = DropdownList.DropdownList;
+exports.DropdownHeading = DropdownHeading.DropdownHeading;
+exports.DropdownItem = DropdownItem.DropdownItem;
+exports.DropdownTrigger = DropdownTrigger.DropdownTrigger;
 exports.Search = Search.Search;
-exports.Skeleton = index$c.Skeleton;
-exports.SkeletonCircle = Circle.Circle;
-exports.SkeletonRectangle = Rectangle.Rectangle;
-exports.SkeletonText = Text.Text;
-exports.Box = Box.Box;
 exports.Card = index$d.Card;
 exports.CardHeader = CardHeader.CardHeader;
 exports.CardContent = CardContent.CardContent;
@@ -221,6 +201,6 @@ exports.TableRow = TableRow.TableRow;
 exports.TableCell = TableCell.TableCell;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
 exports.ErrorSummary = index$g.ErrorSummary;
-exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
+exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;

package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js

@@ -2,9 +2,9 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-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 React = require('react');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 var useRovingFocus = require('./useRovingFocus.js');
 
 /** Get the next focusable RovingFocusItem */
@@ -17,8 +17,8 @@ function getPrevFocusableValue(items, value) {
     const currIndex = items.findIndex((item) => item.value === value);
     return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
-const RovingFocusItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'div';
+const RovingFocusItem = react.forwardRef(({ value, asChild, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
     const focusValue = value ?? (typeof rest.children === 'string' ? rest.children : '');
     const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.useRovingFocus(focusValue);
     const rovingProps = getRovingProps({
@@ -63,7 +63,7 @@ const RovingFocusItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
             }
         },
     });
-    const mergedRefs = floatingUi_react.useMergeRefs([ref, rovingProps.ref]);
+    const mergedRefs = react$1.useMergeRefs([ref, rovingProps.ref]);
     return (jsxRuntime.jsx(Component, { ...rest, ...rovingProps, ref: mergedRefs, children: rest.children }));
 });
 

package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-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 React = require('react');
+var react$1 = require('@floating-ui/react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const RovingFocusContext = React.createContext({
+const RovingFocusContext = react.createContext({
     elements: { current: new Map() },
     getOrderedItems: () => [],
     setFocusableValue: () => {
@@ -18,13 +18,13 @@ const RovingFocusContext = React.createContext({
     focusableValue: null,
     orientation: 'horizontal',
 });
-const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : 'div';
-    const [focusableValue, setFocusableValue] = React.useState(null);
-    const [isShiftTabbing, setIsShiftTabbing] = React.useState(false);
-    const elements = React.useRef(new Map());
-    const myRef = React.useRef();
-    const refs = floatingUi_react.useMergeRefs([ref, myRef]);
+const RovingFocusRoot = react.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
+    const Component = asChild ? reactSlot.Slot : 'div';
+    const [focusableValue, setFocusableValue] = react.useState(null);
+    const [isShiftTabbing, setIsShiftTabbing] = react.useState(false);
+    const elements = react.useRef(new Map());
+    const myRef = react.useRef();
+    const refs = react$1.useMergeRefs([ref, myRef]);
     const getOrderedItems = () => {
         if (!myRef.current)
             return [];
@@ -33,7 +33,7 @@ const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, orientation =
             .sort((a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]))
             .map(([value, element]) => ({ value, element }));
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
         setFocusableValue(activeValue ?? null);
     }, [activeValue]);
     return (jsxRuntime.jsx(RovingFocusContext.Provider, { value: {

package/dist/cjs/utilities/RovingFocus/useRovingFocus.js

@@ -1,14 +1,14 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 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 `RovingFocus` in context with `RovingFocusRoot` */
 const useRovingFocus = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = React.useContext(RovingFocusRoot.RovingFocusContext);
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = react.useContext(RovingFocusRoot.RovingFocusContext);
     return {
         getOrderedItems,
         isFocusable: focusableValue === value,

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

@@ -1,11 +1,11 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 
 function useDebounceCallback(callback, delay = 50) {
-    const timeoutRef = React.useRef(null);
-    React.useEffect(() => {
+    const timeoutRef = react.useRef(null);
+    react.useEffect(() => {
         // Cleanup the previous timeout on re-render
         return () => {
             if (timeoutRef.current) {

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

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

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

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js');
 
 // Inspired by Sam Selikoff
@@ -19,7 +19,7 @@ var useIsomorphicLayoutEffect = require('../useIsomorphicLayoutEffect/useIsomorp
  * ```
  */
 function useSynchronizedAnimation(animationName) {
-    const ref = React.useRef(null);
+    const ref = react.useRef(null);
     useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
         const animations = document
             .getAnimations()
@@ -31,11 +31,13 @@ function useSynchronizedAnimation(animationName) {
         if (myAnimation && myAnimation === firstOfType) {
             myAnimation.currentTime = 0;
         }
-        if (myAnimation && firstOfType && myAnimation !== firstOfType) {
+        if (myAnimation &&
+            firstOfType?.currentTime &&
+            myAnimation !== firstOfType) {
             myAnimation.currentTime = firstOfType.currentTime;
         }
         return () => {
-            if (myAnimation && firstOfType) {
+            if (myAnimation && firstOfType?.currentTime) {
                 myAnimation.currentTime = firstOfType.currentTime;
             }
         };

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import cl from 'clsx/lite';
+import { forwardRef } from 'react';
+
+/**
+ * Accordion component, contains `Accordion.Item` components.
+ */
+const Accordion = forwardRef(function Accordion({ border = false, color = 'neutral', className, ...rest }, ref) {
+    return (jsx("div", { className: cl('ds-accordion-group', className), "data-border": border || undefined, "data-color": color, ref: ref, ...rest }));
+});
+
+export { Accordion };

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

@@ -1,9 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import { forwardRef, useContext } from 'react';
-import { AccordionItemContext } from './AccordionItem.js';
-import { AnimateHeight } from '../../utilities/AnimateHeight/AnimateHeight.js';
+import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
 /**
@@ -11,14 +8,8 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * @example
  * <AccordionContent>Content</AccordionContent>
  */
-const AccordionContent = forwardRef(({ children, className, ...rest }, ref) => {
-    const context = useContext(AccordionItemContext);
-    if (context === null) {
-        console.error('<Accordion.Content> has to be used within an <Accordion.Item>');
-        return null;
-    }
-    return (jsx(AnimateHeight, { id: context.contentId, open: context.open, children: jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, className: clsx('ds-accordion__content', className), ...rest, children: children }) }) }));
+const AccordionContent = forwardRef(function AccordionContent(rest, ref) {
+    return (jsx(Paragraph, { asChild: true, size: 'sm', children: jsx("div", { ref: ref, ...rest }) }));
 });
-AccordionContent.displayName = 'AccordionContent';
 
 export { AccordionContent };