@digdir/designsystemet-react 0.57.0 → 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/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 }) })] }) }));

package/dist/cjs/react-css-modules.css

@@ -1,30 +1,3 @@
-@layer fds.utilities {
-  /**
- * Visually hide an element, but leave it available for screen readers
- */
-  .fds-utility-visuallyHidden-1ed11112 {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  /**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-  .fds-utility-focusable-1ed11112:focus-visible {
-    --fds-focus-border-width: 3px;
-
-    outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-    outline-offset: var(--fds-focus-border-width);
-    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  }
-}
-
 @layer fds.button {
   .fds-button-button-8fa00f0f {
     --fc-button-padding: 0 var(--fds-spacing-4);
@@ -134,12 +107,6 @@
       background-color: var(--fds-semantic-surface-danger-hover);
     }
 
-    .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-      background-color: var(--fds-semantic-surface-on_inverted-hover);
-    }
-
     .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
       --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
@@ -168,10 +135,6 @@
       background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
 
-    .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
-
     .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
       --fc-button-color: var(--fds-semantic-text-action-first-hover);
 
@@ -195,12 +158,6 @@
 
       background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
   }
 
   /* Primary button colors */
@@ -220,12 +177,6 @@
     background-color: var(--fds-semantic-surface-danger-default);
   }
 
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-default);
-  }
-
   .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
     background-color: var(--fds-semantic-surface-action-first-active);
   }
@@ -242,12 +193,6 @@
     background-color: var(--fds-semantic-surface-danger-active);
   }
 
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-active);
-  }
-
   /* Secondary button colors */
   .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
     --fc-button-color: var(--fds-semantic-text-action-first-default);
@@ -277,13 +222,6 @@
     background-color: var(--fds-semantic-surface-danger-no_fill);
   }
 
-  .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    border: 1px solid var(--fds-semantic-border-on_inverted-default);
-    background-color: transparent;
-  }
-
   .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
     --fc-button-color: var(--fds-semantic-text-action-first-active);
 
@@ -312,12 +250,6 @@
     background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
 
-  .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
-
   /* Tertiary button colors */
   .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
     --fc-button-color: var(--fds-semantic-text-action-first-default);
@@ -335,12 +267,6 @@
     --fc-button-color: var(--fds-semantic-text-danger-default);
   }
 
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: transparent;
-  }
-
   .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
     --fc-button-color: var(--fds-semantic-text-action-first-active);
 
@@ -364,12 +290,6 @@
 
     background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
 }
 
 @layer fds.paragraph {
@@ -524,26 +444,6 @@
   }
 }
 
-@layer fds.ingress {
-  .fds-ingress-ingress-9b33da65 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    margin: 0;
-    color: var(--fds-semantic-text-neutral-default);
-  }
-
-  .fds-ingress-ingress-9b33da65.fds-ingress-spacing-9b33da65 {
-    margin-bottom: var(--fdsc-bottom-spacing);
-  }
-
-  .fds-ingress-ingress-9b33da65.fds-ingress-medium-9b33da65 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    font: var(--fds-typography-ingress-medium);
-    font-family: inherit;
-  }
-}
-
 @layer fds.label {
   .fds-label-label-e0249167 {
     --fdsc-bottom-spacing: var(--fds-spacing-1);
@@ -1018,7 +918,7 @@
   .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
-    border-top: 1px solid var(--fds-semantic-border-on_inverted-default);
+    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -2083,7 +1983,7 @@
     }
 
     .fds-switch-input-9a6b03bc:not(:disabled, [readonly]):checked:hover + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc > .fds-switch-thumb-9a6b03bc {
-      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 0.8));
+      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))));
       background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%230c6536' /%3E%3C/svg%3E");
     }
 

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/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';