@digdir/designsystemet-react 1.0.0-next.33 → 1.0.0-next.35

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

@@ -3,18 +3,18 @@
 
 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 useSelect = require('./useSelect.js');
-var Label = require('../../Typography/Label/Label.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+var Label = require('../../Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
-const Select = React.forwardRef(function Select(props, ref) {
+const Select = react.forwardRef(function Select(props, ref) {
     const { children, disabled = false, label, description, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
     const { selectProps, descriptionId, errorId, readOnly, size = 'md', } = useSelect.useSelect(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: lite.clsx('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: lite.clsx(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: lite.clsx('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit.omit(['size', 'error', 'errorId'], rest), ...omit.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: error }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: cl('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxRuntime.jsxs(Label.Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: cl('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: cl(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("div", { className: 'ds-select__wrapper', children: jsxRuntime.jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: cl('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit.omit(['size', 'error', 'errorId'], rest), ...omit.omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsxRuntime.jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: error }) }))] }) }));
 });
 
 exports.Select = Select;

package/dist/cjs/components/form/Select/SelectOptgroup.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const SelectOptgroup = React.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
-    const Component = asChild ? index.Slot : 'optgroup';
+const SelectOptgroup = react.forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'optgroup';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
 

package/dist/cjs/components/form/Select/SelectOption.js

@@ -2,11 +2,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('../../../node_modules/@radix-ui/react-slot/dist/index.js');
-var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
 
-const SelectOption = React.forwardRef(function SelectOption({ asChild, ...rest }, ref) {
-    const Component = asChild ? index.Slot : 'option';
+const SelectOption = react.forwardRef(function SelectOption({ asChild, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'option';
     return jsxRuntime.jsx(Component, { ...rest, ref: ref });
 });
 

package/dist/cjs/components/form/Select/useSelect.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 `Select` in context with `Fieldset` */
 const useSelect = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
     const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'select');
     return {
         ...rest,

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

@@ -3,17 +3,17 @@
 
 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 useSwitch = require('./useSwitch.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
 var omit = require('../../../utilities/omit/omit.js');
-var Label = require('../../Typography/Label/Label.js');
+var Label = require('../../Label/Label.js');
 
-const Switch = React.forwardRef((props, ref) => {
+const Switch = react.forwardRef((props, ref) => {
     const { children, description, position = 'left', className, ...rest } = props;
     const { inputProps, descriptionId, size = 'md', readOnly, } = useSwitch.useSwitch(props);
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { className: lite.clsx(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsxRuntime.jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: lite.clsx(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: `ds-switch__track`, children: jsxRuntime.jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, ...(inputProps.disabled && { 'aria-disabled': true }), children: jsxRuntime.jsxs("div", { className: cl(`ds-switch`, `ds-switch--${size}`, inputProps.disabled && `ds-switch--disabled`, readOnly && `ds-switch--readonly`, className), children: [jsxRuntime.jsx("input", { className: `ds-switch__input`, disabled: inputProps.disabled, ref: ref, ...omit.omit(['size', 'error'], rest), ...inputProps }), jsxRuntime.jsxs(Label.Label, { className: cl(`ds-switch__label`, position === 'right' && `ds-switch__label--right`), htmlFor: inputProps.id, size: size, weight: 'regular', children: [jsxRuntime.jsx("span", { className: `ds-switch__track`, children: jsxRuntime.jsx("span", { className: `ds-switch__thumb` }) }), readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: `ds-switch__readonly__icon` })), children && jsxRuntime.jsx("span", { children: children })] }), description && (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("div", { id: descriptionId, className: `ds-switch__description`, children: description }) }))] }) }));
 });
 Switch.displayName = 'Switch';
 

package/dist/cjs/components/form/Switch/useSwitch.js

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
-var React = require('react');
+var react = require('react');
 var CheckboxGroup = require('../Checkbox/CheckboxGroup.js');
 var useFormField = require('../useFormField.js');
 
 /** Handles props for `Switch` in context with `Checkbox.Group` (and `Fieldset`) */
 const useSwitch = (props) => {
-    const checkboxGroup = React.useContext(CheckboxGroup.CheckboxGroupContext);
+    const checkboxGroup = react.useContext(CheckboxGroup.CheckboxGroupContext);
     const { inputProps, readOnly, ...rest } = useFormField.useFormField(props, 'switch');
     const propsValue = props.value || '';
     return {

package/dist/cjs/components/form/Textarea/Textarea.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 useTextarea = require('./useTextarea.js');
-var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
-var Label = require('../../Typography/Label/Label.js');
+var Paragraph = require('../../Paragraph/Paragraph.js');
+var Label = require('../../Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var ValidationMessage = require('../../ValidationMessage/ValidationMessage.js');
 
 /** Textarea field
  *
@@ -19,17 +19,17 @@ var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
  * <Textarea label="Textarea label">
  * ```
  */
-const Textarea = React.forwardRef((props, ref) => {
+const Textarea = react.forwardRef((props, ref) => {
     const { label, description, style, characterLimit, hideLabel, className, ...rest } = props;
     const { textareaProps, descriptionId, hasError, errorId, size = 'md', readOnly, } = useTextarea.useTextarea(props);
-    const [value, setValue] = React.useState(props.defaultValue);
+    const [value, setValue] = react.useState(props.defaultValue);
     const characterLimitId = `${textareaProps.id}-charactercount}`;
     const hasCharacterLimit = characterLimit != null;
-    const describedBy = lite.clsx(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: lite.clsx('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: lite.clsx('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__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-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: lite.clsx('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
+    const describedBy = cl(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsxs("div", { style: style, className: cl('ds-textarea', `ds-textarea--${size}`, hasError && `ds-textarea--error`, className), children: [label && (jsxRuntime.jsxs(Label.Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: cl('ds-textarea__label', hideLabel && `ds-sr-only`), children: [readOnly && (jsxRuntime.jsx(akselIcons.PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-textarea__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-textarea__description', hideLabel && `ds-sr-only`), children: description }) })), jsxRuntime.jsx("textarea", { className: cl('ds-textarea__input', `ds-focus`), ref: ref, "aria-describedby": describedBy, disabled: textareaProps.disabled, readOnly: readOnly, ...omit.omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
                         textareaProps?.onChange?.(e);
                         setValue(e.target.value);
-                    } }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsxRuntime.jsx(ErrorMessage.ErrorMessage, { size: size, children: props.error }) })] }) }));
+                    } }), hasCharacterLimit && (jsxRuntime.jsx(CharacterCounter.CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsxRuntime.jsx("div", { className: 'ds-textarea__error-message', id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && (jsxRuntime.jsx(ValidationMessage.ValidationMessage, { size: size, children: props.error })) })] }) }));
 });
 Textarea.displayName = 'Textarea';
 

package/dist/cjs/components/form/Textarea/useTextarea.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 `Textarea` in context with `Fieldset` */
 const useTextarea = (props) => {
-    const fieldset = React.useContext(FieldsetContext.FieldsetContext);
+    const fieldset = react.useContext(FieldsetContext.FieldsetContext);
     const { inputProps, readOnly, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'textarea');
     return {
         ...rest,

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 Paragraph = require('../../Paragraph/Paragraph.js');
+var Label = require('../../Label/Label.js');
 var omit = require('../../../utilities/omit/omit.js');
-var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var ValidationMessage = require('../../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,20 @@
+'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, children, height, style, variant = 'rectangle', width, ...rest }, ref) {
+    const Component = asChild ? reactSlot.Slot : 'span';
+    const isText = variant === 'text';
+    const childrenText = isText && '-'.repeat(Number(width) || 1); // s followed by a ­ makes the most average character length
+    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: isText ? style : { width, height, ...style }, ...rest, children: children || childrenText }));
+});
+
+exports.Skeleton = Skeleton;

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

@@ -2,14 +2,14 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
+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: lite.clsx('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: lite.clsx('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: lite.clsx(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+    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';
 

package/dist/cjs/index.js

@@ -11,99 +11,79 @@ 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/loaders/Spinner/Spinner.js');
-var index$1 = require('./components/loaders/Skeleton/index.js');
-var Circle = require('./components/loaders/Skeleton/Circle/Circle.js');
-var Rectangle = require('./components/loaders/Skeleton/Rectangle/Rectangle.js');
-var Text = require('./components/loaders/Skeleton/Text/Text.js');
+var Skeleton = require('./components/loaders/Skeleton/Skeleton.js');
 var Link = require('./components/Link/Link.js');
-var index$2 = require('./components/List/index.js');
+var index$1 = require('./components/List/index.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 index$3 = require('./components/Accordion/index.js');
+var Label = require('./components/Label/Label.js');
+var Heading = require('./components/Heading/Heading.js');
+var Paragraph = require('./components/Paragraph/Paragraph.js');
+var ValidationMessage = require('./components/ValidationMessage/ValidationMessage.js');
+var index$2 = require('./components/Accordion/index.js');
 var AccordionItem = require('./components/Accordion/AccordionItem.js');
 var AccordionContent = require('./components/Accordion/AccordionContent.js');
 var AccordionHeading = require('./components/Accordion/AccordionHeading.js');
-var index$4 = require('./components/form/Select/index.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$5 = 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 index$4 = require('./components/Chip/index.js');
+var Chips = require('./components/Chip/Chips.js');
 var usePagination = require('./components/Pagination/usePagination.js');
-var index$6 = require('./components/Pagination/index.js');
-var PaginationRoot = require('./components/Pagination/PaginationRoot.js');
+var index$5 = require('./components/Pagination/index.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$7 = 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$8 = 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$9 = 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$a = require('./components/ToggleGroup/index.js');
-var ToggleGroupRoot = require('./components/ToggleGroup/ToggleGroupRoot.js');
-var ToggleGroupItem = require('./components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js');
-var index$b = require('./components/Popover/index.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$c = 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 index$b = require('./components/Modal/index.js');
+var ModalBlock = require('./components/Modal/ModalBlock.js');
+var ModalContext = require('./components/Modal/ModalContext.js');
 var ModalTrigger = require('./components/Modal/ModalTrigger.js');
-var ModalDialog = require('./components/Modal/ModalDialog.js');
-var index$d = 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$e = require('./components/Card/index.js');
-var CardHeader = require('./components/Card/CardHeader.js');
-var CardContent = require('./components/Card/CardContent.js');
-var CardFooter = require('./components/Card/CardFooter.js');
-var CardMedia = require('./components/Card/CardMedia.js');
-var index$f = require('./components/form/Combobox/index.js');
+var index$d = require('./components/Card/index.js');
+var CardBlock = require('./components/Card/CardBlock.js');
+var index$e = require('./components/form/Combobox/index.js');
 var Option = require('./components/form/Combobox/Option/Option.js');
 var Empty = require('./components/form/Combobox/Empty.js');
-var index$g = require('./components/Table/index.js');
+var index$f = require('./components/Table/index.js');
 var TableHead = require('./components/Table/TableHead.js');
 var TableBody = require('./components/Table/TableBody.js');
 var TableRow = require('./components/Table/TableRow.js');
 var TableCell = require('./components/Table/TableCell.js');
 var TableHeaderCell = require('./components/Table/TableHeaderCell.js');
-var index$h = require('./components/ErrorSummary/index.js');
-var ErrorSummaryRoot = require('./components/ErrorSummary/ErrorSummaryRoot.js');
+var index$g = require('./components/ErrorSummary/index.js');
 var ErrorSummaryItem = require('./components/ErrorSummary/ErrorSummaryItem.js');
 var ErrorSummaryHeading = require('./components/ErrorSummary/ErrorSummaryHeading.js');
 var ErrorSummaryList = require('./components/ErrorSummary/ErrorSummaryList.js');
@@ -122,101 +102,83 @@ 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 = index$1.Skeleton;
-exports.SkeletonCircle = Circle.Circle;
-exports.SkeletonRectangle = Rectangle.Rectangle;
-exports.SkeletonText = Text.Text;
+exports.Skeleton = Skeleton.Skeleton;
 exports.Link = Link.Link;
-exports.List = index$2.List;
+exports.List = index$1.List;
 exports.ListOrdered = Lists.ListOrdered;
 exports.ListUnordered = Lists.ListUnordered;
 exports.ListItem = ListItem.ListItem;
-exports.Paragraph = Paragraph.Paragraph;
-exports.Heading = Heading.Heading;
-exports.Ingress = Ingress.Ingress;
 exports.Label = Label.Label;
-exports.ErrorMessage = ErrorMessage.ErrorMessage;
-exports.Accordion = index$3.Accordion;
+exports.Heading = Heading.Heading;
+exports.Paragraph = Paragraph.Paragraph;
+exports.ValidationMessage = ValidationMessage.ValidationMessage;
+exports.Accordion = index$2.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.AccordionContent = AccordionContent.AccordionContent;
 exports.AccordionHeading = AccordionHeading.AccordionHeading;
-exports.Select = index$4.Select;
+exports.Select = index$3.Select;
 exports.SelectOption = SelectOption.SelectOption;
 exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
 exports.Alert = Alert.Alert;
 exports.Tag = Tag.Tag;
-exports.Chip = index$5.Chip;
-exports.ChipGroup = Group.Group;
-exports.ChipRemovable = Removable.RemovableChip;
-exports.ChipToggle = Toggle.ToggleChip;
+exports.Chip = index$4.Chip;
+exports.ChipButton = Chips.ChipButton;
+exports.ChipCheckbox = Chips.ChipCheckbox;
+exports.ChipRadio = Chips.ChipRadio;
+exports.ChipRemovable = Chips.ChipRemovable;
 exports.usePagination = usePagination.usePagination;
-exports.Pagination = index$6.Pagination;
-exports.PaginationRoot = PaginationRoot.PaginationRoot;
+exports.Pagination = index$5.Pagination;
 exports.PaginationList = PaginationList.PaginationList;
 exports.PaginationItem = PaginationItem.PaginationItem;
 exports.PaginationButton = PaginationButton.PaginationButton;
-exports.PaginationEllipsis = PaginationEllipsis.PaginationEllipsis;
-exports.PaginationNext = PaginationNextPrev.PaginationNext;
-exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Tooltip = Tooltip.Tooltip;
-exports.Checkbox = index$7.Checkbox;
+exports.Checkbox = index$6.Checkbox;
 exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
-exports.Radio = index$8.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$9.Tabs;
-exports.TabsRoot = TabsRoot.TabsRoot;
-exports.Tab = Tab.Tab;
-exports.TabList = TabList.TabList;
-exports.TabContent = TabContent.TabContent;
-exports.ToggleGroup = index$a.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$b.Popover;
+exports.Popover = index$a.Popover;
 exports.PopoverContext = PopoverContext.PopoverContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
-exports.Modal = index$c.Modal;
-exports.ModalRoot = ModalRoot.ModalRoot;
-exports.ModalContent = ModaContent.ModalContent;
-exports.ModalFooter = ModalFooter.ModalFooter;
-exports.ModalHeader = ModalHeader.ModalHeader;
+exports.Modal = index$b.Modal;
+exports.ModalBlock = ModalBlock.ModalBlock;
+exports.ModalContext = ModalContext.ModalContext;
 exports.ModalTrigger = ModalTrigger.ModalTrigger;
-exports.ModalDialog = ModalDialog.ModalDialog;
-exports.DropdownMenu = index$d.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.Card = index$e.Card;
-exports.CardHeader = CardHeader.CardHeader;
-exports.CardContent = CardContent.CardContent;
-exports.CardFooter = CardFooter.CardFooter;
-exports.CardMedia = CardMedia.CardMedia;
-exports.Combobox = index$f.Combobox;
+exports.Card = index$d.Card;
+exports.CardBlock = CardBlock.CardBlock;
+exports.Combobox = index$e.Combobox;
 exports.ComboboxOption = Option.ComboboxOption;
 exports.ComboboxEmpty = Empty.ComboboxEmpty;
-exports.Table = index$g.Table;
+exports.Table = index$f.Table;
 exports.TableHead = TableHead.TableHead;
 exports.TableBody = TableBody.TableBody;
 exports.TableRow = TableRow.TableRow;
 exports.TableCell = TableCell.TableCell;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
-exports.ErrorSummary = index$h.ErrorSummary;
-exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
+exports.ErrorSummary = index$g.ErrorSummary;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
 exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;