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

package/dist/cjs/components/Tag/Tag.js

@@ -11,9 +11,8 @@ var Paragraph = require('../Typography/Paragraph/Paragraph.js');
  * @example
  * <Tag color='success'>Success</Tag>
  */
-const Tag = React.forwardRef(({ size = 'md', color = 'neutral', children, className, ...rest }, ref) => {
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("span", { className: lite.clsx('ds-tag', `ds-tag--${color}`, `ds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
+const Tag = React.forwardRef(function Tag({ size = 'md', color = 'neutral', className, ...rest }, ref) {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("span", { className: lite.clsx('ds-tag', className), "data-color": color, "data-size": size, ref: ref, ...rest }) }));
 });
-Tag.displayName = 'Tag';
 
 exports.Tag = Tag;

package/dist/cjs/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js

@@ -13,11 +13,9 @@ var Button = require('../../Button/Button.js');
  * @example
  * <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  */
-const ToggleGroupItem = React.forwardRef((props, ref) => {
-    const { children, icon, className, ...rest } = props;
-    const { active, size = 'md', buttonProps, value } = useToggleGroupitem.useToggleGroupItem(props);
-    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(Button.Button, { className: lite.clsx('ds-togglegroup__item', className), icon: icon, variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
+const ToggleGroupItem = React.forwardRef(function ToggleGroupItem({ className, ...rest }, ref) {
+    const { active, size = 'md', buttonProps, value } = useToggleGroupitem.useToggleGroupItem(rest);
+    return (jsxRuntime.jsx(RovingFocusItem.RovingFocusItem, { asChild: true, value: value, children: jsxRuntime.jsx(Button.Button, { className: lite.clsx('ds-togglegroup__item', className), variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps }) }));
 });
-ToggleGroupItem.displayName = 'ToggleGroupItem';
 
 exports.ToggleGroupItem = ToggleGroupItem;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -5,29 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_react = require('../../node_modules/@floating-ui/react/dist/floating-ui.react.js');
 var lite = require('../../node_modules/clsx/dist/lite.js');
 var React = require('react');
-var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_reactDom = require('../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 var Paragraph = require('../Typography/Paragraph/Paragraph.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const ARROW_HEIGHT = 7;
 const ARROW_GAP = 4;
 /**
@@ -39,8 +20,8 @@ const ARROW_GAP = 4;
  */
 const Tooltip = React.forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
     const [isOpen, setIsOpen] = React.useState(defaultOpen);
-    const Container = portal ? floatingUi_react.FloatingPortal : React__namespace.Fragment;
-    const arrowRef = React__namespace.useRef(null);
+    const Container = portal ? floatingUi_react.FloatingPortal : React.Fragment;
+    const arrowRef = React.useRef(null);
     const internalOpen = userOpen ?? isOpen;
     const { refs, floatingStyles, context } = floatingUi_react.useFloating({
         open: internalOpen,
@@ -77,9 +58,9 @@ const Tooltip = React.forwardRef(({ children, content, placement = 'top', delay
         refs.setReference,
     ]);
     if (!children ||
-        children?.type === React__namespace.Fragment ||
-        children === React__namespace.Fragment) {
-        console.error('<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>');
+        children?.type === React.Fragment ||
+        children === React.Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement and not: <Fragment/> | <></>');
         return null;
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.cloneElement(children, getReferenceProps({

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

@@ -12,8 +12,8 @@ var React = require('react');
  * @example
  * <Heading size='lg' level={2}>Heading</Heading>
  */
-const Heading = React.forwardRef(({ size = 'xl', level = 1, spacing = false, className, asChild, ...rest }, ref) => {
-    const Component = asChild ? index.Slot : `h${level ?? 1}`;
+const Heading = React.forwardRef(({ size = 'xl', level = 2, spacing = false, className, asChild, ...rest }, ref) => {
+    const Component = asChild ? index.Slot : `h${level}`;
     return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx('ds-heading', `ds-heading--${size}`, spacing && 'ds-heading--spacing', className), ...rest }));
 });
 Heading.displayName = 'Heading';

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

@@ -18,8 +18,7 @@ var useCombobox = require('./useCombobox.js');
 var useComboboxKeyboard = require('./useComboboxKeyboard.js');
 var useFloatingCombobox = require('./useFloatingCombobox.js');
 var utilities = require('./utilities.js');
-var Box = require('../../Box/Box.js');
-var Spinner = require('../../Spinner/Spinner.js');
+var Spinner = require('../../loaders/Spinner/Spinner.js');
 var useDebounceCallback = require('../../../utilities/hooks/useDebounceCallback/useDebounceCallback.js');
 var omit = require('../../../utilities/omit/omit.js');
 
@@ -180,7 +179,7 @@ const ComboboxComponent = React.forwardRef(({ value, initialValue = [], onValueC
             setListRef: (index, node) => {
                 listRef.current[index] = node;
             },
-        }, children: [jsxRuntime.jsxs(Box.Box, { className: lite.clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(floatingUi_react.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs(Box.Box, { id: listId, shadow: 'md', borderRadius: 'md', borderColor: 'default', "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
+        }, children: [jsxRuntime.jsxs("div", { className: lite.clsx('ds-combobox', `ds-combobox--${size}`, disabled && 'ds-combobox__disabled', className), style: style, ref: portalRef, children: [name && (jsxRuntime.jsx(ComboboxNative, { name: name, selectedOptions: selectedOptions, multiple: multiple })), jsxRuntime.jsx(ComboboxLabel, { label: label, description: description, size: size, readOnly: readOnly, hideLabel: hideLabel, formFieldProps: formFieldProps }), jsxRuntime.jsx(ComboboxInput, { ...omit.omit(['inputValue'], rest), hideClearButton: hideClearButton, listId: listId, error: error, hideChips: hideChips, handleKeyDown: handleKeyDown, "aria-busy": loading }), jsxRuntime.jsx(ComboboxError, { size: size, error: error, formFieldProps: formFieldProps })] }), open && (jsxRuntime.jsx(floatingUi_react.FloatingPortal, { root: portal ? null : portalRef, children: jsxRuntime.jsx(floatingUi_react.FloatingFocusManager, { context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: jsxRuntime.jsxs("div", { id: listId, "aria-labelledby": formFieldProps.inputProps.id, "aria-autocomplete": 'list', tabIndex: -1, ...getFloatingProps({
                             ref: refs.setFloating,
                             style: {
                                 ...floatingStyles,

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

@@ -11,7 +11,6 @@ var ComboboxIdContext = require('../ComboboxIdContext.js');
 var utilities = require('../utilities.js');
 var ComboboxChips = require('./ComboboxChips.js');
 var ComboboxClearButton = require('./ComboboxClearButton.js');
-var Box = require('../../../Box/Box.js');
 var Paragraph = require('../../../Typography/Paragraph/Paragraph.js');
 var omit = require('../../../../utilities/omit/omit.js');
 
@@ -71,7 +70,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled ? 'true' : undefined, className: lite.clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+    return (jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: lite.clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips, {}), jsxRuntime.jsx(Paragraph.Paragraph, { size: size, asChild: true, children: jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange?.(e);

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

@@ -5,7 +5,7 @@ var floatingUi_react = require('../../../node_modules/@floating-ui/react/dist/fl
 var React = require('react');
 var ReactDOM = require('react-dom');
 var ComboboxIdContext = require('./ComboboxIdContext.js');
-var floatingUi_dom = require('../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
+var floatingUi_dom = require('../../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js');
 var floatingUi_reactDom = require('../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js');
 
 const useFloatingCombobox = ({ listRef }) => {

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

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+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 useSelect = require('./useSelect.js');
+var Label = require('../../Typography/Label/Label.js');
+var omit = require('../../../utilities/omit/omit.js');
+var ErrorMessage = require('../../Typography/ErrorMessage/ErrorMessage.js');
+var Paragraph = require('../../Typography/Paragraph/Paragraph.js');
+
+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 }) }))] }) }));
+});
+
+exports.Select = Select;

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

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

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

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

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var Select$1 = require('./Select.js');
+var SelectOptgroup = require('./SelectOptgroup.js');
+var SelectOption = require('./SelectOption.js');
+
+const Select = Select$1.Select;
+Select.Option = SelectOption.SelectOption;
+Select.Optgroup = SelectOptgroup.SelectOptgroup;
+Select.Option.displayName = 'Select.Option';
+Select.Optgroup.displayName = 'Select.Optgroup';
+
+exports.SelectOptgroup = SelectOptgroup.SelectOptgroup;
+exports.SelectOption = SelectOption.SelectOption;
+exports.Select = Select;

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

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+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 { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = useFormField.useFormField(props, 'select');
+    return {
+        ...rest,
+        readOnly,
+        size,
+        selectProps: {
+            ...selectProps,
+            readOnly,
+            onClick: (event) => {
+                if (readOnly)
+                    return event.preventDefault();
+                props?.onClick?.(event);
+            },
+            onKeyDown: (event) => {
+                if (readOnly) {
+                    if (event.key === 'Tab')
+                        return;
+                    return event.preventDefault();
+                }
+                props?.onKeyDown?.(event);
+            },
+            onMouseDown: (event) => {
+                if (readOnly) {
+                    if (event.target instanceof HTMLElement)
+                        event.target.focus();
+                    return event.preventDefault();
+                }
+                props?.onMouseDown?.(event);
+            },
+            onChange: (event) => {
+                if (readOnly)
+                    return event.preventDefault();
+                props?.onChange?.(event);
+            },
+        },
+    };
+};
+
+exports.useSelect = useSelect;

package/dist/cjs/components/{Skeleton → loaders/Skeleton}/Circle/Circle.js

@@ -2,8 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var lite = require('../../../../node_modules/clsx/dist/lite.js');
+var useSynchronizedAnimation = require('../../../../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/cjs/components/{Skeleton → loaders/Skeleton}/Rectangle/Rectangle.js

@@ -2,8 +2,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lite = require('../../../node_modules/clsx/dist/lite.js');
-var useSynchronizedAnimation = require('../../../utilities/hooks/useSynchronizedAnimation/useSynchronizedAnimation.js');
+var lite = require('../../../../node_modules/clsx/dist/lite.js');
+var useSynchronizedAnimation = require('../../../../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/cjs/components/{Skeleton → loaders/Skeleton}/Text/Text.js

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

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

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lite = require('../../../node_modules/clsx/dist/lite.js');
+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 })] }));
+};
+Spinner.displayName = 'Spinner';
+
+exports.Spinner = Spinner;

package/dist/cjs/index.js

@@ -1,13 +1,13 @@
 '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');
@@ -17,102 +17,99 @@ 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 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 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 index$2 = 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$2 = require('./components/Accordion/index.js');
-var AccordionRoot = require('./components/Accordion/AccordionRoot.js');
+var index$3 = 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 NativeSelect = require('./components/form/NativeSelect/NativeSelect.js');
+var index$4 = 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$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 usePagination = require('./components/Pagination/usePagination.js');
-var index$4 = require('./components/Pagination/index.js');
+var index$6 = 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$7 = 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$8 = 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 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$8 = require('./components/ToggleGroup/index.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$9 = require('./components/Popover/index.js');
-var PopoverRoot = require('./components/Popover/PopoverRoot.js');
-var PopoverContent = require('./components/Popover/PopoverContent.js');
+var index$b = 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$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 ModalTrigger = require('./components/Modal/ModalTrigger.js');
 var ModalDialog = require('./components/Modal/ModalDialog.js');
-var index$b = require('./components/DropdownMenu/index.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 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 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$e = require('./components/form/Combobox/index.js');
+var index$f = 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$f = require('./components/Table/index.js');
+var index$g = 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$g = require('./components/ErrorSummary/index.js');
+var index$h = 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,6 +118,7 @@ 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;
@@ -131,34 +129,37 @@ 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.Link = Link.Link;
-exports.List = index$1.List;
-exports.ListRoot = ListRoot.ListRoot;
+exports.List = index$2.List;
+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.Accordion = index$2.Accordion;
-exports.AccordionRoot = AccordionRoot.AccordionRoot;
+exports.Accordion = index$3.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.AccordionContent = AccordionContent.AccordionContent;
 exports.AccordionHeading = AccordionHeading.AccordionHeading;
-exports.NativeSelect = NativeSelect.NativeSelect;
+exports.Select = index$4.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$5.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$6.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,61 +167,56 @@ exports.PaginationNext = PaginationNextPrev.PaginationNext;
 exports.PaginationPrevious = PaginationNextPrev.PaginationPrevious;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Tooltip = Tooltip.Tooltip;
-exports.Checkbox = index$5.Checkbox;
+exports.Checkbox = index$7.Checkbox;
 exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
-exports.Radio = index$6.Radio;
+exports.Radio = index$8.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.Tabs = index$9.Tabs;
 exports.TabsRoot = TabsRoot.TabsRoot;
 exports.Tab = Tab.Tab;
 exports.TabList = TabList.TabList;
 exports.TabContent = TabContent.TabContent;
-exports.ToggleGroup = index$8.ToggleGroup;
+exports.ToggleGroup = index$a.ToggleGroup;
 exports.ToggleGroupRoot = ToggleGroupRoot.ToggleGroupRoot;
 exports.ToggleGroupItem = ToggleGroupItem.ToggleGroupItem;
-exports.Popover = index$9.Popover;
-exports.PopoverRoot = PopoverRoot.PopoverRoot;
-exports.PopoverContent = PopoverContent.PopoverContent;
+exports.Popover = index$b.Popover;
+exports.PopoverContext = PopoverContext.PopoverContext;
 exports.PopoverTrigger = PopoverTrigger.PopoverTrigger;
 exports.Divider = Divider.Divider;
-exports.Modal = index$a.Modal;
+exports.Modal = index$c.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.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.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.Card = index$e.Card;
 exports.CardHeader = CardHeader.CardHeader;
 exports.CardContent = CardContent.CardContent;
 exports.CardFooter = CardFooter.CardFooter;
 exports.CardMedia = CardMedia.CardMedia;
-exports.Combobox = index$e.Combobox;
+exports.Combobox = index$f.Combobox;
 exports.ComboboxOption = Option.ComboboxOption;
 exports.ComboboxEmpty = Empty.ComboboxEmpty;
-exports.Table = index$f.Table;
+exports.Table = index$g.Table;
 exports.TableHead = TableHead.TableHead;
 exports.TableBody = TableBody.TableBody;
 exports.TableRow = TableRow.TableRow;
 exports.TableCell = TableCell.TableCell;
 exports.TableHeaderCell = TableHeaderCell.TableHeaderCell;
-exports.ErrorSummary = index$g.ErrorSummary;
+exports.ErrorSummary = index$h.ErrorSummary;
 exports.ErrorSummaryRoot = ErrorSummaryRoot.ErrorSummaryRoot;
 exports.ErrorSummaryItem = ErrorSummaryItem.ErrorSummaryItem;
 exports.ErrorSummaryHeading = ErrorSummaryHeading.ErrorSummaryHeading;
+exports.ErrorSummaryList = ErrorSummaryList.ErrorSummaryList;