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

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

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

package/dist/cjs/components/Button/Button.js

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var utility_module = require('../../utilities/utility.module.css.js');
 var Button_module = require('./Button.module.css.js');
 
 /**
@@ -13,7 +12,7 @@ var Button_module = require('./Button.module.css.js');
  */
 const Button = React.forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : as;
-    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: clsx.clsx(Button_module.button, utility_module.focusable, Button_module[size], Button_module[variant], Button_module[color], { [Button_module.fullWidth]: fullWidth }, { [Button_module.onlyIcon]: icon }, className), ...rest, children: children }));
+    return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: clsx.clsx(Button_module.button, `fds-focus`, Button_module[size], Button_module[variant], Button_module[color], { [Button_module.fullWidth]: fullWidth }, { [Button_module.onlyIcon]: icon }, className), ...rest, children: children }));
 });
 Button.displayName = 'Button';
 

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

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-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"};
 
 module.exports = classes;

package/dist/cjs/components/Card/Card.js

@@ -5,12 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
-var utility_module = require('../../utilities/utility.module.css.js');
 var Card_module = require('./Card.module.css.js');
 
 const Card = React.forwardRef(({ color = 'neutral', as = 'div', isLink = false, asChild = false, className, ...rest }, ref) => {
     const Component = asChild ? index.Slot : as;
-    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Card_module.card, Card_module[color], isLink && Card_module.linkCard, isLink && utility_module.focusable, className), ...rest }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Card_module.card, Card_module[color], isLink && Card_module.linkCard, isLink && `fds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

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

@@ -1,6 +1,6 @@
 'use client';
 'use strict';
 
-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"};
 
 module.exports = classes;

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

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

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

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

package/dist/cjs/components/HelpText/HelpText.js

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

package/dist/cjs/components/SkipLink/SkipLink.js

@@ -3,11 +3,10 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var utility_module = require('../../utilities/utility.module.css.js');
 var SkipLink_module = require('./SkipLink.module.css.js');
 
 const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsxRuntime.jsx("a", { href: href, className: clsx.clsx(utility_module.visuallyHidden, SkipLink_module.skiplink, className), ...rest, children: children }));
+    return (jsxRuntime.jsx("a", { href: href, className: clsx.clsx(`fds-sr-only`, SkipLink_module.skiplink, className), ...rest, children: children }));
 };
 SkipLink.displayName = 'SkipLink';
 

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

@@ -5,7 +5,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var akselIcons = require('@navikt/aksel-icons');
 var React = require('react');
 var clsx = require('../../node_modules/clsx/dist/clsx.js');
-var utility_module = require('../../utilities/utility.module.css.js');
 var Table_module = require('./Table.module.css.js');
 
 function _interopNamespaceDefault(e) {
@@ -33,7 +32,7 @@ const SORT_ICON = {
 };
 const TableHeaderCell = React__namespace.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
     const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsxRuntime.jsx(akselIcons.ChevronUpDownIcon, {}));
-    return (jsxRuntime.jsxs("th", { className: clsx.clsx(sortable && Table_module.sortable, sort && Table_module.sorted, Table_module.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxRuntime.jsxs("button", { className: utility_module.focusable, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+    return (jsxRuntime.jsxs("th", { className: clsx.clsx(sortable && Table_module.sortable, sort && Table_module.sorted, Table_module.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxRuntime.jsxs("button", { className: `fds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';
 

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

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

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

@@ -2,7 +2,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var utility_module = require('../../utilities/utility.module.css.js');
 var ErrorMessage = require('../Typography/ErrorMessage/ErrorMessage.js');
 
 const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
@@ -11,7 +10,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: utility_module.visuallyHidden, id: id, children: srLabel }), jsxRuntime.jsx(ErrorMessage.ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsxRuntime.jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: `fds-sr-only`, id: id, children: srLabel }), jsxRuntime.jsx(ErrorMessage.ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsxRuntime.jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
 };
 CharacterCounter.displayName = 'CharacterCounter';
 

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

@@ -9,7 +9,6 @@ var akselIcons = require('@navikt/aksel-icons');
 var clsx = require('../../../../node_modules/clsx/dist/clsx.js');
 var Combobox = require('../Combobox.js');
 var Combobox_module = require('../Combobox.module.css.js');
-var utility_module = require('../../../../utilities/utility.module.css.js');
 
 const ComboboxClearButton = () => {
     const context = React.useContext(Combobox.ComboboxContext);
@@ -17,7 +16,7 @@ const ComboboxClearButton = () => {
         throw new Error('ComboboxContext is missing');
     }
     const { size, readOnly, disabled, clearButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
-    return (jsxRuntime.jsx("button", { disabled: disabled, className: clsx.clsx(Combobox_module.clearButton, Combobox_module[size], utility_module.focusable), onClick: () => {
+    return (jsxRuntime.jsx("button", { disabled: disabled, className: clsx.clsx(Combobox_module.clearButton, Combobox_module[size], `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)

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

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

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

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

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

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

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

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

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

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

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

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