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

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

@@ -0,0 +1,92 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { autoUpdate, computePosition, offset, flip, shift } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useRef, useContext, useState, useEffect } from 'react';
+import { Context } from './PopoverContext.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+
+const ARROW_HEIGHT = 7;
+const ARROW_GAP = 4;
+const Popover = forwardRef(function Popover({ id, className, onClose, onOpen, open, placement = 'top', size = 'md', variant = 'default', ...rest }, ref) {
+    const popoverRef = useRef(null);
+    const mergedRefs = useMergeRefs([popoverRef, ref]);
+    const { popoverId, setPopoverId } = useContext(Context);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const controlledOpen = open ?? internalOpen;
+    // NOTE: This code is purely to add React controlled component ability to Popover API
+    useEffect(() => {
+        const popover = popoverRef.current;
+        const handleClick = (event) => {
+            const el = event.target;
+            const isTrigger = el?.closest?.(`[popovertarget="${popover?.id}"]`);
+            const isOutside = !isTrigger && !popover?.contains(el);
+            if (isTrigger) {
+                event.preventDefault(); // Prevent native Popover API
+                setInternalOpen((open) => !open);
+                onOpen?.();
+            }
+            if (isOutside) {
+                setInternalOpen(false);
+                onClose?.();
+            }
+        };
+        const handleKeydown = (event) => {
+            if (event.key !== 'Escape' || !controlledOpen)
+                return;
+            event.preventDefault(); // Prevent closing fullscreen in Safari
+            setInternalOpen(false);
+            onClose?.();
+        };
+        popover?.togglePopover?.(controlledOpen);
+        document.addEventListener('click', handleClick);
+        document.addEventListener('keydown', handleKeydown);
+        return () => {
+            document.removeEventListener('click', handleClick);
+            document.removeEventListener('keydown', handleKeydown);
+        };
+    }, [controlledOpen]);
+    // Position with floating-ui
+    useEffect(() => {
+        const popover = popoverRef.current;
+        const trigger = document.querySelector(`[popovertarget="${popover?.id}"]`);
+        if (popover && trigger && controlledOpen)
+            return autoUpdate(trigger, popover, () => {
+                computePosition(trigger, popover, {
+                    placement,
+                    strategy: 'fixed',
+                    middleware: [
+                        offset(ARROW_HEIGHT + ARROW_GAP), // TODO: Should this be configurable?
+                        flip({ fallbackAxisSideDirection: 'start' }),
+                        shift(),
+                        arrowPseudoElement,
+                    ],
+                }).then(({ x, y }) => {
+                    popover.style.translate = `${x}px ${y}px`;
+                });
+            });
+    }, [controlledOpen, placement, id]);
+    // Update context with id
+    useEffect(() => {
+        if (id)
+            setPopoverId?.(id);
+    }, [id]);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { className: clsx('ds-popover', className), "data-size": size, "data-variant": variant, id: id || popoverId, 
+            // @ts-ignore @types/react-dom does not understand popover yet
+            popover: 'manual', ref: mergedRefs, ...rest }) }));
+});
+const arrowPseudoElement = {
+    name: 'ArrowPseudoElement',
+    fn(data) {
+        const { elements, rects, placement } = data;
+        const arrowX = rects.reference.width / 2 + rects.reference.x - data.x;
+        const arrowY = rects.reference.height / 2 + rects.reference.y - data.y;
+        elements.floating.setAttribute('data-placement', placement.split('-')[0]); // We only need top/left/right/bottom
+        elements.floating.style.setProperty('--ds-popover-arrow-x', `${arrowX}px`);
+        elements.floating.style.setProperty('--ds-popover-arrow-y', `${arrowY}px`);
+        return data;
+    },
+};
+
+export { Popover };

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, createContext } from 'react';
+
+const PopoverContext = ({ children }) => {
+    const randomPopoverId = useId();
+    const [popoverId, setPopoverId] = useState(randomPopoverId);
+    return (jsx(Context.Provider, { value: { popoverId, setPopoverId }, children: children }));
+};
+PopoverContext.displayName = 'PopoverContext';
+const Context = createContext({});
+
+export { Context, PopoverContext };

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

@@ -1,23 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import { forwardRef, useContext, useEffect } from 'react';
-import { PopoverContext } from './PopoverRoot.js';
+import { forwardRef, useContext } from 'react';
+import { Context } from './PopoverContext.js';
 import { Button } from '../Button/Button.js';
 
-const PopoverTrigger = forwardRef(({ id, asChild, ...rest }, ref) => {
-    const { triggerRef, internalOpen, setInternalOpen, isControlled, popoverId, triggerId, setTriggerId, } = useContext(PopoverContext);
-    const mergedRefs = useMergeRefs([ref, triggerRef]);
-    useEffect(() => {
-        id && setTriggerId?.(id);
-    }, [id, setTriggerId]);
+const PopoverTrigger = forwardRef(function PopoverTrigger({ id, asChild, ...rest }, ref) {
+    const { popoverId } = useContext(Context);
     const Component = asChild ? Slot : Button;
-    return (jsx(Component, { ref: mergedRefs, onClick: () => {
-            if (!isControlled)
-                setInternalOpen(!internalOpen);
-        }, "aria-expanded": internalOpen, "aria-controls": internalOpen ? popoverId : undefined, id: triggerId, ...rest }));
+    return jsx(Component, { ref: ref, popovertarget: popoverId, ...rest });
 });
-PopoverTrigger.displayName = 'PopoverTrigger';
 
 export { PopoverTrigger };

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

@@ -1,14 +1,12 @@
 'use client';
-import { PopoverContent } from './PopoverContent.js';
-import { PopoverRoot } from './PopoverRoot.js';
+import { Popover as Popover$1 } from './Popover.js';
+import { PopoverContext } from './PopoverContext.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
 
-const Popover = {};
-Popover.Root = PopoverRoot;
-Popover.Content = PopoverContent;
+const Popover = Popover$1;
+Popover.Context = PopoverContext;
 Popover.Trigger = PopoverTrigger;
-Popover.Root.displayName = 'Popover.Root';
-Popover.Content.displayName = 'Popover.Content';
+Popover.Context.displayName = 'Popover.Context';
 Popover.Trigger.displayName = 'Popover.Trigger';
 
-export { Popover, PopoverContent, PopoverRoot, PopoverTrigger };
+export { Popover, PopoverContext, PopoverTrigger };

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

@@ -1,12 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
-const Table = React.forwardRef(({ zebra = false, stickyHeader = false, border = false, hover = false, size = 'md', className, children, ...rest }, ref) => {
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { ref: ref, className: clsx('ds-table', `ds-table--${size}`, zebra && 'ds-table--zebra', stickyHeader && 'ds-table--sticky-header', border && 'ds-table--border', hover && 'ds-table--hover', `ds-paragraph--${size}`, className), ...rest, children: children }) }));
+const Table = forwardRef(function Table({ zebra = false, stickyHeader = false, border = false, hover = false, size = 'md', className, children, ...rest }, ref) {
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsx("table", { className: clsx('ds-table', className), "data-border": border || undefined, "data-hover": hover || undefined, "data-size": size, "data-sticky-header": stickyHeader || undefined, "data-zebra": zebra || undefined, ref: ref, ...rest, children: children }) }));
 });
-Table.displayName = 'Table';
 
 export { Table };

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

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
+import { forwardRef } from 'react';
 
-const TableBody = React.forwardRef(({ children, ...rest }, ref) => {
-    return (jsx("tbody", { ref: ref, ...rest, children: children }));
+const TableBody = forwardRef(function TableBody(rest, ref) {
+    return jsx("tbody", { ref: ref, ...rest });
 });
-TableBody.displayName = 'TableBody';
 
 export { TableBody };

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

@@ -1,11 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
+import { forwardRef } from 'react';
 
-const TableCell = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("td", { ref: ref, className: clsx('ds-table__cell', className), ...rest, children: children }));
+const TableCell = forwardRef(function TableCell(rest, ref) {
+    return jsx("td", { ref: ref, ...rest });
 });
-TableCell.displayName = 'TableCell';
 
 export { TableCell };

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

@@ -1,11 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
+import { forwardRef } from 'react';
 
-const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("thead", { ref: ref, className: clsx('ds-table__head', className), ...rest, children: children }));
+const TableHead = forwardRef(function TableHead(rest, ref) {
+    return jsx("thead", { ref: ref, ...rest });
 });
-TableHead.displayName = 'TableHead';
 
 export { TableHead };

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

@@ -1,17 +1,9 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 
-const SORT_ICON = {
-    ascending: jsx(ChevronUpIcon, {}),
-    descending: jsx(ChevronDownIcon, {}),
-};
-const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
-    const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
-    return (jsxs("th", { className: clsx('ds-table__header__cell', 'ds-font-weight--medium', sortable && 'ds-table__header__cell--sortable', sort && `ds-table__header__cell--sorted`, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: 'ds-focus', onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+const TableHeaderCell = forwardRef(function TableHeaderCell({ sort, children, ...rest }, ref) {
+    return (jsx("th", { "aria-sort": sort, ref: ref, ...rest, children: sort ? (jsx("button", { type: 'button', className: 'ds-focus', children: children })) : (children) }));
 });
-TableHeaderCell.displayName = 'TableHeaderCell';
 
 export { TableHeaderCell };

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

@@ -1,11 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
+import { forwardRef } from 'react';
 
-const TableRow = React.forwardRef(({ className, children, ...rest }, ref) => {
-    return (jsx("tr", { className: clsx('ds-table__row', className), ref: ref, ...rest, children: children }));
+const TableRow = forwardRef(function TableRow(rest, ref) {
+    return jsx("tr", { ref: ref, ...rest });
 });
-TableRow.displayName = 'TableRow';
 
 export { TableRow };

package/dist/esm/components/Tag/Tag.js

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

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

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

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,10 +1,9 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
 import { useFloating, useTransitionStyles, useInteractions, useHover, useFocus, useDismiss, useRole, useMergeRefs, FloatingArrow, FloatingPortal } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
-import * as React from 'react';
-import { forwardRef, useState, cloneElement } from 'react';
-import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { forwardRef, useState, useRef, Fragment, cloneElement } from 'react';
+import { autoUpdate } from '../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { offset, flip, shift, arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
 
@@ -19,8 +18,8 @@ const ARROW_GAP = 4;
  */
 const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150, open: userOpen, defaultOpen = false, portal = false, className, style, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useState(defaultOpen);
-    const Container = portal ? FloatingPortal : React.Fragment;
-    const arrowRef = React.useRef(null);
+    const Container = portal ? FloatingPortal : Fragment;
+    const arrowRef = useRef(null);
     const internalOpen = userOpen ?? isOpen;
     const { refs, floatingStyles, context } = useFloating({
         open: internalOpen,
@@ -57,12 +56,12 @@ const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150,
         refs.setReference,
     ]);
     if (!children ||
-        children?.type === React.Fragment ||
-        children === React.Fragment) {
-        console.error('<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>');
+        children?.type === Fragment ||
+        children === Fragment) {
+        console.error('<Tooltip> children needs to be a single ReactElement and not: <Fragment/> | <></>');
         return null;
     }
-    return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps({
+    return (jsxs(Fragment$1, { children: [cloneElement(children, getReferenceProps({
                 ref: childMergedRef,
             })), internalOpen && (jsx(Container, { children: jsx(Paragraph, { size: 'xs', asChild: true, children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
                             className: clsx('ds-tooltip', className),

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

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

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

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

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

@@ -9,7 +9,6 @@ import { useComboboxIdDispatch } from '../ComboboxIdContext.js';
 import { prefix } from '../utilities.js';
 import ComboboxChips from './ComboboxChips.js';
 import ComboboxClearButton from './ComboboxClearButton.js';
-import { Box } from '../../../Box/Box.js';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
 import { omit } from '../../../../utilities/omit/omit.js';
 
@@ -69,7 +68,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
             }
         },
     });
-    return (jsx(Paragraph, { size: size, asChild: true, children: jsxs(Box, { ...props, "aria-disabled": disabled ? 'true' : undefined, className: clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { size: size, asChild: true, children: 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(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
+    return (jsx(Paragraph, { size: size, asChild: true, children: jsxs("div", { ...props, "aria-disabled": disabled ? 'true' : undefined, className: clsx('ds-textfield__input', 'ds-combobox__input__wrapper', readOnly && 'ds-combobox--readonly', error && 'ds-combobox--error'), children: [jsxs("div", { className: 'ds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx(Paragraph, { size: size, asChild: true, children: 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(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'ds-combobox__input', onChange: (e) => {
                                     onChange(e);
                                     !open && setOpen(true);
                                     rest.onChange?.(e);

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

@@ -3,7 +3,7 @@ import { useFloating, useRole, useDismiss, useListNavigation, useInteractions }
 import { useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useComboboxId, useComboboxIdDispatch } from './ComboboxIdContext.js';
-import { autoUpdate } from '../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { autoUpdate } from '../../../node_modules/@floating-ui/react-dom/node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 import { flip, size, offset } from '../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 
 const useFloatingCombobox = ({ listRef }) => {

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
+import { useSelect } from './useSelect.js';
+import { Label } from '../../Typography/Label/Label.js';
+import { omit } from '../../../utilities/omit/omit.js';
+import { ErrorMessage } from '../../Typography/ErrorMessage/ErrorMessage.js';
+import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
+
+const Select = 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(props);
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx('ds-select--container', readOnly && 'ds-select--readonly', error && 'ds-select--error'), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx('ds-select__label', hideLabel && 'ds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: 'ds-select__readonly__icon' })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(`ds-select__description`, hideLabel && `ds-sr-only`), children: description }) })), jsx("div", { className: 'ds-select__wrapper', children: jsx("select", { disabled: disabled, ref: ref, size: htmlSize, className: clsx('ds-select', `ds-select--${size}`, `ds-focus`, props.multiple && 'ds-select--multiple', className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }) }), error && (jsx("div", { id: errorId, className: 'ds-select__error-message', "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
+});
+
+export { Select };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { forwardRef } from 'react';
+
+const SelectOptgroup = forwardRef(function SelectOptgroup({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'optgroup';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { SelectOptgroup };

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { forwardRef } from 'react';
+
+const SelectOption = forwardRef(function SelectOption({ asChild, ...rest }, ref) {
+    const Component = asChild ? Slot : 'option';
+    return jsx(Component, { ...rest, ref: ref });
+});
+
+export { SelectOption };

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

@@ -0,0 +1,12 @@
+'use client';
+import { Select as Select$1 } from './Select.js';
+import { SelectOptgroup } from './SelectOptgroup.js';
+import { SelectOption } from './SelectOption.js';
+
+const Select = Select$1;
+Select.Option = SelectOption;
+Select.Optgroup = SelectOptgroup;
+Select.Option.displayName = 'Select.Option';
+Select.Optgroup.displayName = 'Select.Optgroup';
+
+export { Select, SelectOptgroup, SelectOption };

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

@@ -0,0 +1,47 @@
+'use client';
+import { useContext } from 'react';
+import { FieldsetContext } from '../Fieldset/FieldsetContext.js';
+import { useFormField } from '../useFormField.js';
+
+/** Handles props for `Select` in context with `Fieldset` */
+const useSelect = (props) => {
+    const fieldset = useContext(FieldsetContext);
+    const { inputProps: selectProps, readOnly = false, size = fieldset?.size ?? 'md', ...rest } = 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);
+            },
+        },
+    };
+};
+
+export { useSelect };

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

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

package/dist/esm/components/{Skeleton → loaders/Skeleton}/Rectangle/Rectangle.js

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

package/dist/esm/components/{Skeleton → loaders/Skeleton}/Text/Text.js

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

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../../node_modules/clsx/dist/lite.js';
+import { useSynchronizedAnimation } from '../../../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('ds-spinner-rotate-animation');
+    const strokeRef = useSynchronizedAnimation('ds-spinner-stroke-animation');
+    return (jsxs("svg", { className: clsx('ds-spinner', className), viewBox: '0 0 50 50', ref: svgRef, "data-color": color, "data-size": size, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx('ds-spinner__background'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(`ds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
+};
+Spinner.displayName = 'Spinner';
+
+export { Spinner };