@digdir/designsystemet-react 0.56.3-alpha.1 → 0.58.0

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

@@ -4,7 +4,6 @@ import { ChevronDownIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { forwardRef, useContext } from 'react';
 import classes from '../Accordion.module.css.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { AccordionItemContext } from '../AccordionItem/AccordionItem.js';
 import { Heading } from '../../Typography/Heading/Heading.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
@@ -19,7 +18,7 @@ const AccordionHeader = forwardRef(({ level = 1, children, className, onHeaderCl
         context.toggleOpen();
         onHeaderClick && onHeaderClick(e);
     };
-    return (jsx(Heading, { ref: ref, size: 'xsmall', level: level, className: clsx(classes.header, className), ...rest, children: jsxs("button", { type: 'button', className: clsx(classes.accordionButton, utilityClasses.focusable), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: classes.expandIcon, fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'small', children: jsx("span", { children: children }) })] }) }));
+    return (jsx(Heading, { ref: ref, size: 'xsmall', level: level, className: clsx(classes.header, className), ...rest, children: jsxs("button", { type: 'button', className: clsx(classes.accordionButton, `fds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: classes.expandIcon, fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'small', children: jsx("span", { children: children }) })] }) }));
 });
 AccordionHeader.displayName = 'AccordionHeader';
 

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

@@ -3,7 +3,6 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './Button.module.css.js';
 
 /**
@@ -11,7 +10,7 @@ import classes from './Button.module.css.js';
  */
 const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, type: type, className: clsx(classes.button, utilityClasses.focusable, classes[size], classes[variant], classes[color], { [classes.fullWidth]: fullWidth }, { [classes.onlyIcon]: icon }, className), ...rest, children: children }));
+    return (jsx(Component, { ref: ref, type: type, className: clsx(classes.button, `fds-focus`, classes[size], classes[variant], classes[color], { [classes.fullWidth]: fullWidth }, { [classes.onlyIcon]: icon }, className), ...rest, children: children }));
 });
 Button.displayName = 'Button';
 

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

@@ -1,4 +1,4 @@
 'use client';
-var classes = {"button":"fds-button-button-8fa00f0f","small":"fds-button-small-8fa00f0f","medium":"fds-button-medium-8fa00f0f","large":"fds-button-large-8fa00f0f","fullWidth":"fds-button-fullWidth-8fa00f0f","secondary":"fds-button-secondary-8fa00f0f","tertiary":"fds-button-tertiary-8fa00f0f","onlyIcon":"fds-button-onlyIcon-8fa00f0f","primary":"fds-button-primary-8fa00f0f","first":"fds-button-first-8fa00f0f","second":"fds-button-second-8fa00f0f","success":"fds-button-success-8fa00f0f","danger":"fds-button-danger-8fa00f0f","inverted":"fds-button-inverted-8fa00f0f"};
+var classes = {"button":"fds-button-button-8fa00f0f","small":"fds-button-small-8fa00f0f","medium":"fds-button-medium-8fa00f0f","large":"fds-button-large-8fa00f0f","fullWidth":"fds-button-fullWidth-8fa00f0f","secondary":"fds-button-secondary-8fa00f0f","tertiary":"fds-button-tertiary-8fa00f0f","onlyIcon":"fds-button-onlyIcon-8fa00f0f","primary":"fds-button-primary-8fa00f0f","first":"fds-button-first-8fa00f0f","second":"fds-button-second-8fa00f0f","success":"fds-button-success-8fa00f0f","danger":"fds-button-danger-8fa00f0f"};
 
 export { classes as default };

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

@@ -3,12 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './Card.module.css.js';
 
 const Card = forwardRef(({ color = 'neutral', as = 'div', isLink = false, asChild = false, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.card, classes[color], isLink && classes.linkCard, isLink && utilityClasses.focusable, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx(classes.card, classes[color], isLink && classes.linkCard, isLink && `fds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

package/dist/esm/components/Chip/Chip.module.css.js

@@ -1,4 +1,4 @@
 'use client';
-var classes = {"chip":"fds-chip-chip-4563db0f","chipButton":"fds-chip-chipButton-4563db0f","label":"fds-chip-label-4563db0f","removable":"fds-chip-removable-4563db0f","xMark":"fds-chip-xMark-4563db0f","icon":"fds-chip-icon-4563db0f","spacing":"fds-chip-spacing-4563db0f","small":"fds-chip-small-4563db0f","checkmarkIcon":"fds-chip-checkmarkIcon-4563db0f","medium":"fds-chip-medium-4563db0f","large":"fds-chip-large-4563db0f","groupContainer":"fds-chip-groupContainer-4563db0f"};
+var classes = {"chip":"fds-chip-chip-4563db0f","chipButton":"fds-chip-chipButton-4563db0f","label":"fds-chip-label-4563db0f","removable":"fds-chip-removable-4563db0f","small":"fds-chip-small-4563db0f","large":"fds-chip-large-4563db0f","xMark":"fds-chip-xMark-4563db0f","icon":"fds-chip-icon-4563db0f","spacing":"fds-chip-spacing-4563db0f","checkmarkIcon":"fds-chip-checkmarkIcon-4563db0f","medium":"fds-chip-medium-4563db0f","groupContainer":"fds-chip-groupContainer-4563db0f"};
 
 export { classes as default };

package/dist/esm/components/Chip/Removable/Removable.js

@@ -5,12 +5,11 @@ import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import classes from '../Chip.module.css.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const RemovableChip = forwardRef(({ children, size = 'medium', className, ...rest }, ref) => {
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { type: 'button', ref: ref, className: clsx(classes.chipButton, utilityClasses.focusable, classes[group?.size || size], classes.removable, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [jsx("span", { children: children }), jsx("span", { className: classes.xMark, "aria-hidden": true, children: jsx(XMarkIcon, { className: classes.icon }) })] }) }) }));
+    return (jsx("button", { type: 'button', ref: ref, className: clsx(classes.chipButton, `fds-focus`, classes[group?.size || size], classes.removable, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [jsx("span", { children: children }), jsx("span", { className: classes.xMark, "aria-hidden": true, children: jsx(XMarkIcon, { className: classes.icon }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

package/dist/esm/components/Chip/Toggle/Toggle.js

@@ -4,14 +4,13 @@ import { forwardRef, useContext } from 'react';
 import { CheckmarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import classes from '../Chip.module.css.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const ToggleChip = forwardRef(({ children, size = 'medium', selected = false, checkmark = true, className, ...rest }, ref) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(classes.chipButton, utilityClasses.focusable, classes[group?.size || size], { [classes.spacing]: shouldDisplayCheckmark }, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: classes.checkmarkIcon, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
+    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(classes.chipButton, `fds-focus`, classes[group?.size || size], { [classes.spacing]: shouldDisplayCheckmark }, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: classes.checkmarkIcon, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
 });
 ToggleChip.displayName = 'ChipToggle';
 

package/dist/esm/components/HelpText/HelpText.js

@@ -3,13 +3,12 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Popover } from '../Popover/index.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './HelpText.module.css.js';
 import { HelpTextIcon } from './HelpTextIcon.js';
 
 const HelpText = ({ title, placement = 'right', size = 'medium', portal, className, children, ...rest }) => {
     const [open, setOpen] = useState(false);
-    return (jsx(Fragment, { children: jsxs(Popover, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsx(Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxs("button", { className: clsx(classes.helpTextButton, utilityClasses.focusable, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsx(HelpTextIcon, { filled: true, className: clsx(classes.helpTextIcon, classes.helpTextIconFilled, classes[size], className), openState: open }), jsx(HelpTextIcon, { className: clsx(classes.helpTextIcon, classes[size], className), openState: open }), jsx("span", { className: utilityClasses.visuallyHidden, children: title })] }) }), jsx(Popover.Content, { className: classes.helpTextContent, children: children })] }) }));
+    return (jsx(Fragment, { children: jsxs(Popover, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsx(Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxs("button", { className: clsx(classes.helpTextButton, `fds-focus`, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsx(HelpTextIcon, { filled: true, className: clsx(classes.helpTextIcon, classes.helpTextIconFilled, classes[size], className), openState: open }), jsx(HelpTextIcon, { className: clsx(classes.helpTextIcon, classes[size], className), openState: open }), jsx("span", { className: `fds-sr-only`, children: title })] }) }), jsx(Popover.Content, { className: classes.helpTextContent, children: children })] }) }));
 };
 HelpText.displayName = 'HelpText';
 

package/dist/esm/components/SkipLink/SkipLink.js

@@ -1,11 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './SkipLink.module.css.js';
 
 const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsx("a", { href: href, className: clsx(utilityClasses.visuallyHidden, classes.skiplink, className), ...rest, children: children }));
+    return (jsx("a", { href: href, className: clsx(`fds-sr-only`, classes.skiplink, className), ...rest, children: children }));
 };
 SkipLink.displayName = 'SkipLink';
 

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

@@ -3,7 +3,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
 import * as React from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './Table.module.css.js';
 
 const SORT_ICON = {
@@ -12,7 +11,7 @@ const SORT_ICON = {
 };
 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(sortable && classes.sortable, sort && classes.sorted, classes.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: utilityClasses.focusable, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+    return (jsxs("th", { className: clsx(sortable && classes.sortable, sort && classes.sorted, classes.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `fds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';
 

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

@@ -3,13 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Ingress.module.css.js';
 
 /** Use `Ingress` to display text as ingress. */
 const Ingress = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.ingress, classes[size], {
-            [classes.spacing]: !!spacing,
+    return (jsx(Component, { ref: ref, className: clsx(`fds-ingress`, `fds-ingress--${size}`, {
+            'fds-ingress--spacing': !!spacing,
         }, className), ...rest }));
 });
 Ingress.displayName = 'Ingress';

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

@@ -1,6 +1,5 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import { ErrorMessage } from '../Typography/ErrorMessage/ErrorMessage.js';
 
 const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
@@ -9,7 +8,7 @@ const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCoun
     const currentCount = maxCount - value.length;
     const hasExceededLimit = value.length > maxCount;
     const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
-    return (jsxs(Fragment, { children: [jsx("span", { className: utilityClasses.visuallyHidden, id: id, children: srLabel }), jsx(ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
+    return (jsxs(Fragment, { children: [jsx("span", { className: `fds-sr-only`, id: id, children: srLabel }), jsx(ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
 };
 CharacterCounter.displayName = 'CharacterCounter';
 

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

@@ -5,7 +5,6 @@ import { XMarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
 import { ComboboxContext } from '../Combobox.js';
 import classes from '../Combobox.module.css.js';
-import utilityClasses from '../../../../utilities/utility.module.css.js';
 
 const ComboboxClearButton = () => {
     const context = useContext(ComboboxContext);
@@ -13,7 +12,7 @@ const ComboboxClearButton = () => {
         throw new Error('ComboboxContext is missing');
     }
     const { size, readOnly, disabled, clearButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
-    return (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], utilityClasses.focusable), onClick: () => {
+    return (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)

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

@@ -3,12 +3,11 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import classes from '../Combobox.module.css.js';
-import utilityClasses from '../../../../utilities/utility.module.css.js';
 import { Label } from '../../../Typography/Label/Label.js';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph.js';
 
 const ComboboxLabel = ({ label, description, hideLabel, size, readOnly, formFieldProps, }) => {
-    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx(classes.description, hideLabel && utilityClasses.visuallyHidden), children: description }) }))] }));
+    return (jsxs(Fragment, { children: [label && (jsxs(Label, { size: size, htmlFor: formFieldProps.inputProps.id, className: clsx(classes.label, hideLabel && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: formFieldProps.descriptionId, className: clsx(classes.description, hideLabel && `fds-sr-only`), children: description }) }))] }));
 };
 ComboboxLabel.displayName = 'ComboboxLabel';
 var ComboboxLabel$1 = ComboboxLabel;

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

@@ -3,7 +3,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { useFieldset } from './useFieldset.js';
 import classes from './Fieldset.module.css.js';
 import { FieldsetContext } from './FieldsetContext.js';
@@ -21,7 +20,7 @@ const Fieldset = forwardRef((props, ref) => {
             size,
             disabled: props?.disabled,
             readOnly,
-        }, children: jsxs("fieldset", { ...fieldsetProps, className: clsx(classes.fieldset, !hideLegend && classes.withSpacing, readOnly && classes.readonly, props?.disabled && classes.disabled, className), ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { className: classes.legend, children: jsxs("span", { className: clsx(classes.legendContent, hideLegend && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { className: classes.padlock, "aria-hidden": true })), legend] }) }) }), description && (jsx(Paragraph, { size: size, asChild: true, short: true, children: jsx("div", { id: descriptionId, className: clsx(classes.description, hideLegend && utilityClasses.visuallyHidden), children: description }) })), children, jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: classes.errorWrapper, children: hasError && jsx(ErrorMessage, { size: size, children: error }) })] }) }));
+        }, children: jsxs("fieldset", { ...fieldsetProps, className: clsx(classes.fieldset, !hideLegend && classes.withSpacing, readOnly && classes.readonly, props?.disabled && classes.disabled, className), ref: ref, ...rest, children: [jsx(Label, { asChild: true, size: size, children: jsx("legend", { className: classes.legend, children: jsxs("span", { className: clsx(classes.legendContent, hideLegend && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { className: classes.padlock, "aria-hidden": true })), legend] }) }) }), description && (jsx(Paragraph, { size: size, asChild: true, short: true, children: jsx("div", { id: descriptionId, className: clsx(classes.description, hideLegend && `fds-sr-only`), children: description }) })), children, jsx("div", { id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', className: classes.errorWrapper, children: hasError && jsx(ErrorMessage, { size: size, children: error }) })] }) }));
 });
 Fieldset.displayName = 'Fieldset';
 

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

@@ -4,7 +4,6 @@ import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import classes from './NativeSelect.module.css.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { useNativeSelect } from './useNativeSelect.js';
 import { Label } from '../../Typography/Label/Label.js';
 import { omit } from '../../../utilities/objectUtils.js';
@@ -14,7 +13,7 @@ import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 const NativeSelect = forwardRef((props, ref) => {
     const { children, disabled = false, label, hideLabel = false, error, className, htmlSize = 0, ...rest } = props;
     const { selectProps, errorId, readOnly = false, size = 'medium', } = useNativeSelect(props);
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.formField, disabled && classes.disabled, readOnly && classes.readOnly, error && classes.error), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx(classes.select, classes[size], utilityClasses.focusable, props.multiple && classes.multiple, className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }), error && (jsx("div", { id: errorId, className: classes.errorMessage, "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { className: clsx(classes.formField, disabled && classes.disabled, readOnly && classes.readOnly, error && classes.error), children: [label && (jsxs(Label, { weight: 'medium', size: size, htmlFor: selectProps.id, className: clsx(classes.label, hideLabel && 'fds-sr-only'), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), label] })), jsx("select", { disabled: disabled || readOnly, ref: ref, size: htmlSize, className: clsx(classes.select, classes[size], `fds-focus`, props.multiple && classes.multiple, className), ...omit(['size', 'error', 'errorId'], rest), ...omit(['readOnly', 'disabled'], selectProps), children: children }), error && (jsx("div", { id: errorId, className: classes.errorMessage, "aria-live": 'polite', "aria-relevant": 'additions removals', children: jsx(ErrorMessage, { size: size, children: error }) }))] }) }));
 });
 NativeSelect.displayName = 'NativeSelect';
 

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

@@ -6,7 +6,6 @@ import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '../../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { useSearch } from './useSearch.js';
 import classes from './Search.module.css.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { Button } from '../../Button/Button.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { Label } from '../../Typography/Label/Label.js';
@@ -41,7 +40,7 @@ const Search = forwardRef((props, ref) => {
     };
     const isSimple = variant === 'simple';
     const showClearButton = Boolean(value ?? internalValue) && !disabled;
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(classes.formField, inputProps.disabled && classes.disabled, classes[size], className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: jsx("span", { children: label }) })), jsxs("div", { className: classes.field, children: [jsxs("div", { className: clsx(classes.field, classes[size]), children: [isSimple && (jsx(MagnifyingGlassIcon, { className: classes.icon, "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx(classes.input, utilityClasses.focusable, isSimple && classes.simple, !isSimple && classes.withSearchButton), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: clsx(classes.clearButton, utilityClasses.focusable), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: utilityClasses.visuallyHidden, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: classes.searchButton, size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsx("div", { className: classes.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(classes.formField, inputProps.disabled && classes.disabled, classes[size], className), children: [label && (jsx(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx(classes.label, hideLabel && 'fds-sr-only'), children: jsx("span", { children: label }) })), jsxs("div", { className: classes.field, children: [jsxs("div", { className: clsx(classes.field, classes[size]), children: [isSimple && (jsx(MagnifyingGlassIcon, { className: classes.icon, "aria-hidden": true })), jsx("input", { ref: mergedRef, size: htmlSize, value: value ?? internalValue, disabled: disabled, className: clsx(classes.input, `fds-focus`, isSimple && classes.simple, !isSimple && classes.withSearchButton), ...omit(['size', 'error', 'errorId', 'readOnly'], rest), ...inputProps, onChange: handleChange }), showClearButton && (jsxs("button", { className: clsx(classes.clearButton, `fds-focus`), type: 'button', onClick: handleClear, disabled: disabled, children: [jsx("span", { className: `fds-sr-only`, children: clearButtonLabel }), jsx(XMarkIcon, { "aria-hidden": true })] }))] }), !isSimple && (jsx(Button, { className: classes.searchButton, size: size, variant: variant, type: 'submit', onClick: handleSearchClick, disabled: disabled, children: searchButtonLabel }))] }), jsx("div", { className: classes.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));
 });
 Search.displayName = 'Search';
 

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

@@ -6,7 +6,6 @@ import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import { CharacterCounter } from '../CharacterCounter.js';
 import { useTextarea } from './useTextarea.js';
 import classes from './Textarea.module.css.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { Label } from '../../Typography/Label/Label.js';
 import { omit } from '../../../utilities/objectUtils.js';
@@ -26,7 +25,7 @@ const Textarea = forwardRef((props, ref) => {
     const characterLimitId = `${textareaProps.id}-charactercount}`;
     const hasCharacterLimit = characterLimit != null;
     const describedBy = clsx(textareaProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(classes.formField, textareaProps.disabled && classes.disabled, readOnly && classes.readonly, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: clsx(classes.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(classes.description, hideLabel && utilityClasses.visuallyHidden), children: description }) })), jsx("textarea", { className: clsx(classes.textarea, utilityClasses.focusable, classes[size]), ref: ref, "aria-describedby": describedBy, ...omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(classes.formField, textareaProps.disabled && classes.disabled, readOnly && classes.readonly, hasError && classes.error, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: textareaProps.id, className: clsx(classes.label, hideLabel && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: classes.padlock })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(classes.description, hideLabel && `fds-sr-only`), children: description }) })), jsx("textarea", { className: clsx(classes.textarea, `fds-focus`, classes[size]), ref: ref, "aria-describedby": describedBy, ...omit(['size', 'error', 'errorId'], rest), ...textareaProps, onChange: (e) => {
                         textareaProps?.onChange?.(e);
                         setValue(e.target.value);
                     } }), hasCharacterLimit && (jsx(CharacterCounter, { size: size, value: value ? value.toString() : '', id: characterLimitId, ...characterLimit })), jsx("div", { className: classes.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));

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

@@ -6,7 +6,6 @@ import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import { CharacterCounter } from '../CharacterCounter.js';
 import { useTextfield } from './useTextfield.js';
 import textFieldClasses from './Textfield.module.css.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 import { Label } from '../../Typography/Label/Label.js';
 import { omit } from '../../../utilities/objectUtils.js';
@@ -26,7 +25,7 @@ const Textfield = forwardRef((props, ref) => {
     const characterLimitId = `textfield-charactercount-${useId()}`;
     const hasCharacterLimit = characterLimit != null;
     const describedBy = clsx(inputProps['aria-describedby'], hasCharacterLimit && characterLimitId) || undefined;
-    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(textFieldClasses.formField, textFieldClasses[size], inputProps.disabled && textFieldClasses.disabled, readOnly && textFieldClasses.readonly, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx(textFieldClasses.label, hideLabel && utilityClasses.visuallyHidden), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: textFieldClasses.padlock })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(textFieldClasses.description, hideLabel && utilityClasses.visuallyHidden), children: description }) })), jsxs("div", { className: clsx(textFieldClasses.field, hasError && textFieldClasses.error), children: [prefix && (jsx(Paragraph, { asChild: true, size: size, short: true, children: jsx("div", { className: clsx(textFieldClasses.adornment, textFieldClasses.prefix), "aria-hidden": 'true', children: prefix }) })), jsx("input", { className: clsx(textFieldClasses.input, textFieldClasses[size], utilityClasses.focusable, prefix && textFieldClasses.inputPrefix, suffix && textFieldClasses.inputSuffix), ref: ref, type: type, "aria-describedby": describedBy, size: htmlSize, ...omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
+    return (jsx(Paragraph, { asChild: true, size: size, children: jsxs("div", { style: style, className: clsx(textFieldClasses.formField, textFieldClasses[size], inputProps.disabled && textFieldClasses.disabled, readOnly && textFieldClasses.readonly, className), children: [label && (jsxs(Label, { size: size, weight: 'medium', htmlFor: inputProps.id, className: clsx(textFieldClasses.label, hideLabel && `fds-sr-only`), children: [readOnly && (jsx(PadlockLockedFillIcon, { "aria-hidden": true, className: textFieldClasses.padlock })), jsx("span", { children: label })] })), description && (jsx(Paragraph, { asChild: true, size: size, children: jsx("div", { id: descriptionId, className: clsx(textFieldClasses.description, hideLabel && `fds-sr-only`), children: description }) })), jsxs("div", { className: clsx(textFieldClasses.field, hasError && textFieldClasses.error), children: [prefix && (jsx(Paragraph, { asChild: true, size: size, short: true, children: jsx("div", { className: clsx(textFieldClasses.adornment, textFieldClasses.prefix), "aria-hidden": 'true', children: prefix }) })), jsx("input", { className: clsx(textFieldClasses.input, textFieldClasses[size], `fds-focus`, prefix && textFieldClasses.inputPrefix, suffix && textFieldClasses.inputSuffix), ref: ref, type: type, "aria-describedby": describedBy, size: htmlSize, ...omit(['size', 'error', 'errorId'], rest), ...inputProps, onChange: (e) => {
                                 inputProps?.onChange?.(e);
                                 setInputValue(e.target.value);
                             } }), suffix && (jsx(Paragraph, { asChild: true, size: size, short: true, children: jsx("div", { className: clsx(textFieldClasses.adornment, textFieldClasses.suffix), "aria-hidden": 'true', children: suffix }) }))] }), hasCharacterLimit && (jsx(CharacterCounter, { size: size, value: inputValue ? inputValue.toString() : '', id: characterLimitId, ...characterLimit })), jsx("div", { className: textFieldClasses.errorMessage, id: errorId, "aria-live": 'polite', "aria-relevant": 'additions removals', children: hasError && jsx(ErrorMessage, { size: size, children: props.error }) })] }) }));