@digdir/designsystemet-react 0.54.0 → 0.55.1-alpha.0

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","small":"fds-chip-small-4563db0f","medium":"fds-chip-medium-4563db0f","large":"fds-chip-large-4563db0f","icon":"fds-chip-icon-4563db0f","spacing":"fds-chip-spacing-4563db0f","checkmarkIcon":"fds-chip-checkmarkIcon-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","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"};
 
 module.exports = classes;

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

@@ -21,7 +21,7 @@ var floatingUi_dom = require('../../../node_modules/@floating-ui/dom/dist/floati
 var floatingUi_core = require('../../../node_modules/@floating-ui/core/dist/floating-ui.core.js');
 var objectUtils = require('../../../utilities/objectUtils.js');
 
-const Combobox = React.forwardRef(({ value, onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, cleanButtonLabel = 'Fjern alt', error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter = (inputValue, option) => {
+const Combobox = React.forwardRef(({ value, initialValue = [], onValueChange, label, hideLabel = false, description, multiple = false, size = 'medium', disabled = false, readOnly = false, hideChips = false, cleanButtonLabel = 'Fjern alt', clearButtonLabel = 'Fjern alt', hideClearButton = false, error, errorId, id, name, portal = true, htmlSize = 0, virtual = false, children, style, loading, loadingLabel = 'Laster...', filter = (inputValue, option) => {
     return option.label.toLowerCase().startsWith(inputValue.toLowerCase());
 }, chipSrLabel = (option) => 'Slett ' + option.label, className, ...rest }, forwareddRef) => {
     const inputRef = React.useRef(null);
@@ -30,9 +30,14 @@ const Combobox = React.forwardRef(({ value, onValueChange, label, hideLabel = fa
     const [open, setOpen] = React.useState(false);
     const [inputValue, setInputValue] = React.useState(rest.inputValue || '');
     const [activeIndex, setActiveIndex] = React.useState(null);
-    const [selectedOptions, setSelectedOptions] = React.useState([]);
+    const { selectedOptions, setSelectedOptions, options, optionsChildren, restChildren, optionValues, customIds, prevSelectedHash, setPrevSelectedHash, } = useCombobox.default({
+        children,
+        inputValue,
+        filter,
+        multiple,
+        initialValue,
+    });
     const [activeDescendant, setActiveDescendant] = React.useState(undefined);
-    const [prevSelectedHash, setPrevSelectedHash] = React.useState(JSON.stringify(selectedOptions));
     React.useEffect(() => {
         if (rest.inputValue !== undefined) {
             setInputValue(rest.inputValue);
@@ -48,13 +53,6 @@ const Combobox = React.forwardRef(({ value, onValueChange, label, hideLabel = fa
         id,
     }, 'combobox');
     const listRef = React.useRef([]);
-    const { options, optionsChildren, restChildren, optionValues, customIds } = useCombobox.default({
-        children,
-        inputValue,
-        filter,
-        multiple,
-        selectedOptions,
-    });
     // if value is set, set input value to the label of the value
     React.useEffect(() => {
         if (value && value.length > 0 && !multiple) {
@@ -110,7 +108,7 @@ const Combobox = React.forwardRef(({ value, onValueChange, label, hideLabel = fa
         const values = selectedOptions.map((option) => option.value);
         onValueChange?.(values);
         setPrevSelectedHash(selectedHash);
-    }, [onValueChange, selectedOptions, prevSelectedHash]);
+    }, [onValueChange, selectedOptions, prevSelectedHash, setPrevSelectedHash]);
     React.useEffect(() => {
         if (value && options.length > 0) {
             const updatedSelectedOptions = value.map((option) => {
@@ -119,7 +117,7 @@ const Combobox = React.forwardRef(({ value, onValueChange, label, hideLabel = fa
             });
             setSelectedOptions(updatedSelectedOptions);
         }
-    }, [multiple, prevSelectedHash, value, options]);
+    }, [multiple, prevSelectedHash, value, options, setSelectedOptions]);
     // handle click on option, either select or deselect - Handles single or multiple
     const handleSelectOption = (option) => {
         // if option is already selected, remove it
@@ -250,7 +248,8 @@ const Combobox = React.forwardRef(({ value, onValueChange, label, hideLabel = fa
             htmlSize,
             optionValues,
             hideChips,
-            cleanButtonLabel,
+            clearButtonLabel: cleanButtonLabel || clearButtonLabel,
+            hideClearButton,
             listId,
             setInputValue,
             setActiveIndex,

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

@@ -16,7 +16,7 @@ const ComboboxClearButton = () => {
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { size, readOnly, disabled, cleanButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
+    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: () => {
             if (readOnly)
                 return;
@@ -35,7 +35,7 @@ const ComboboxClearButton = () => {
                 setInputValue('');
                 inputRef.current?.focus();
             }
-        }, type: 'button', "aria-label": cleanButtonLabel, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
+        }, type: 'button', "aria-label": clearButtonLabel, children: jsxRuntime.jsx(akselIcons.XMarkIcon, { fontSize: '1.5em', title: 'Clear selection' }) }));
 };
 ComboboxClearButton.displayName = 'ComboboxClearButton';
 var ComboboxClearButton$1 = ComboboxClearButton;

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

@@ -21,7 +21,7 @@ const ComboboxInput = ({ ...rest }) => {
     if (!context) {
         throw new Error('ComboboxContext is missing');
     }
-    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
+    const { forwareddRef, listId, size, readOnly, disabled, open, inputRef, refs, inputValue, activeDescendant, error, multiple, selectedOptions, formFieldProps, htmlSize, options, hideChips, hideClearButton, setOpen, setActiveIndex, handleKeyDown, getReferenceProps, setInputValue, handleSelectOption, } = context;
     const mergedRefs = floatingUi_react.useMergeRefs([forwareddRef, inputRef]);
     // we need to check if input is in focus, to add focus styles to the wrapper
     const [inputInFocus, setInputInFocus] = React.useState(false);
@@ -68,6 +68,7 @@ const ComboboxInput = ({ ...rest }) => {
             }, 0);
         }
     };
+    const showClearButton = multiple && !hideClearButton && selectedOptions.length > 0;
     return (jsxRuntime.jsxs(Box.Box
     /* Props from floating-ui */
     , { ...getReferenceProps({
@@ -99,7 +100,7 @@ const ComboboxInput = ({ ...rest }) => {
         }), "aria-disabled": disabled, className: clsx.clsx(Textfield_module.input, Combobox_module.inputWrapper, Combobox_module[size], inputInFocus && Combobox_module.inFocus, readOnly && Combobox_module.readonly, error && Combobox_module.error), children: [jsxRuntime.jsxs("div", { className: Combobox_module.chipAndInput, children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": activeDescendant, readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, onChange: (e) => {
                             onChange(e);
                             rest.onChange && rest.onChange(e);
-                        } })] }), multiple && selectedOptions.length > 0 && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: Combobox_module.arrow, children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
+                        } })] }), showClearButton && jsxRuntime.jsx(ComboboxClearButton.default, {}), jsxRuntime.jsx("div", { className: Combobox_module.arrow, children: open ? (jsxRuntime.jsx(akselIcons.ChevronUpIcon, { title: 'arrow up', fontSize: '1.5em' })) : (jsxRuntime.jsx(akselIcons.ChevronDownIcon, { title: 'arrow down', fontSize: '1.5em' })) })] }));
 };
 ComboboxInput.displayName = 'ComboboxInput';
 var ComboboxInput$1 = ComboboxInput;

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

@@ -7,36 +7,27 @@ var React = require('react');
 var Option = require('./Option/Option.js');
 var Custom = require('./Custom/Custom.js');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
+const isOption = (option) => !!option;
+function isComboboxOption(child) {
+    return React.isValidElement(child) && child.type === Option.ComboboxOption;
 }
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-function useCombobox({ children, inputValue, multiple, selectedOptions, filter, }) {
+function isComboboxCustom(child) {
+    return React.isValidElement(child) && child.type === Custom.default;
+}
+function isInteractiveComboboxCustom(child) {
+    return isComboboxCustom(child) && child.props.interactive === true;
+}
+function useCombobox({ children, inputValue, multiple, filter, initialValue, }) {
     const options = React.useMemo(() => {
         const allOptions = [];
-        React__namespace.Children.forEach(children, (child) => {
+        React.Children.forEach(children, (child) => {
             if (isComboboxOption(child)) {
                 const props = child.props;
                 let label = props.displayValue || '';
                 if (!props.displayValue) {
                     let childrenLabel = '';
                     // go over children and find all strings
-                    React__namespace.Children.forEach(props.children, (child) => {
+                    React.Children.forEach(props.children, (child) => {
                         if (typeof child === 'string') {
                             childrenLabel += child;
                         }
@@ -56,9 +47,14 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
         });
         return allOptions;
     }, [children]);
+    const preSelectedOptions = (initialValue || [])
+        .map((value) => options.find((option) => option.value === value))
+        .filter(isOption);
+    const [selectedOptions, setSelectedOptions] = React.useState(preSelectedOptions);
+    const [prevSelectedHash, setPrevSelectedHash] = React.useState(JSON.stringify(selectedOptions));
     const optionsChildren = React.useMemo(() => {
         const valuesArray = Array.from(options);
-        const children_ = React__namespace.Children.toArray(children).filter((child) => isComboboxOption(child));
+        const children_ = React.Children.toArray(children).filter((child) => isComboboxOption(child));
         const activeValue = valuesArray.find((item) => item.label === inputValue);
         if (activeValue && !multiple)
             return children_;
@@ -76,7 +72,7 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
     }, [options, children, multiple, inputValue, selectedOptions, filter]);
     const customIds = React.useMemo(() => {
         // find all custom components with `interactive=true` and generate random values for them
-        const children_ = React__namespace.Children.toArray(children).filter((child) => {
+        const children_ = React.Children.toArray(children).filter((child) => {
             return isInteractiveComboboxCustom(child);
         });
         // return all ids
@@ -95,7 +91,7 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
         return [...customIds, ...options];
     }, [customIds, optionsChildren]);
     const restChildren = React.useMemo(() => {
-        return React__namespace.Children.toArray(children).filter((child) => {
+        return React.Children.toArray(children).filter((child) => {
             return !isComboboxOption(child);
         });
     }, [children]);
@@ -105,17 +101,12 @@ function useCombobox({ children, inputValue, multiple, selectedOptions, filter,
         restChildren,
         options,
         customIds,
+        selectedOptions,
+        setSelectedOptions,
+        prevSelectedHash,
+        setPrevSelectedHash,
     };
 }
-function isComboboxOption(child) {
-    return React__namespace.isValidElement(child) && child.type === Option.ComboboxOption;
-}
-function isComboboxCustom(child) {
-    return React__namespace.isValidElement(child) && child.type === Custom.default;
-}
-function isInteractiveComboboxCustom(child) {
-    return isComboboxCustom(child) && child.props.interactive === true;
-}
 
 exports.default = useCombobox;
 exports.isComboboxCustom = isComboboxCustom;

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

@@ -43,7 +43,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: Search_module.field, 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, Search_module[size], 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 && 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 }) })] }) }));
 });
 Search.displayName = 'Search';
 

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

@@ -79,7 +79,7 @@
   gap: var(--fds-sizing-1);
   font: var(--fds-typography-paragraph-short-small);
   font-family: inherit;
-  min-height: var(--fds-sizing-8);
+  min-height: var(--fds-sizing-10);
 }
 
 .fds-button-medium-8fa00f0f {
@@ -88,7 +88,7 @@
   gap: var(--fds-sizing-2);
   font: var(--fds-typography-paragraph-short-medium);
   font-family: inherit;
-  min-height: var(--fds-sizing-10);
+  min-height: var(--fds-sizing-12);
 }
 
 .fds-button-large-8fa00f0f {
@@ -97,7 +97,7 @@
   gap: var(--fds-sizing-2);
   font: var(--fds-typography-paragraph-short-large);
   font-family: inherit;
-  min-height: var(--fds-sizing-12);
+  min-height: var(--fds-sizing-14);
 }
 
 .fds-button-fullWidth-8fa00f0f {
@@ -1064,19 +1064,19 @@
 .fds-nativeselect-select-2e95d79c.fds-nativeselect-small-2e95d79c {
   padding: 0 var(--fds-spacing-2);
   padding-right: var(--fds-spacing-8);
-  height: var(--fds-sizing-8);
+  height: var(--fds-sizing-10);
 }
 
 .fds-nativeselect-select-2e95d79c.fds-nativeselect-medium-2e95d79c {
   padding: 0 var(--fds-spacing-3);
   padding-right: var(--fds-spacing-10);
-  height: var(--fds-sizing-10);
+  height: var(--fds-sizing-12);
 }
 
 .fds-nativeselect-select-2e95d79c.fds-nativeselect-large-2e95d79c {
   padding: 0 var(--fds-spacing-4);
   padding-right: var(--fds-spacing-12);
-  height: var(--fds-sizing-12);
+  height: var(--fds-sizing-14);
 }
 
 .fds-nativeselect-formField-2e95d79c {
@@ -1179,18 +1179,18 @@
 }
 
 .fds-tag-small-40d841d9 {
-  --fdsc-tag-padding: var(--fds-spacing-1);
-  --fdsc-tag-min-height: var(--fds-sizing-5);
+  --fdsc-tag-padding: var(--fds-spacing-2);
+  --fdsc-tag-min-height: var(--fds-sizing-7);
 }
 
 .fds-tag-medium-40d841d9 {
-  --fdsc-tag-padding: var(--fds-spacing-1);
-  --fdsc-tag-min-height: var(--fds-sizing-6);
+  --fdsc-tag-padding: var(--fds-spacing-2);
+  --fdsc-tag-min-height: var(--fds-sizing-8);
 }
 
 .fds-tag-large-40d841d9 {
-  --fdsc-tag-padding: var(--fds-spacing-2);
-  --fdsc-tag-min-height: var(--fds-sizing-7);
+  --fdsc-tag-padding: var(--fds-spacing-3);
+  --fdsc-tag-min-height: var(--fds-sizing-9);
 }
 
 .fds-tag-neutral-40d841d9 {
@@ -1292,7 +1292,7 @@
   background: var(--fdsc-removable-background);
   border: 0;
   padding-right: 0;
-  min-height: var(--fdsc-removable-chip-size);
+  min-height: var(--fdsc-chip-height);
 }
 
 .fds-chip-xMark-4563db0f {
@@ -1302,18 +1302,6 @@
   padding-right: var(--fdsc-removable-chip-xmark-padding_right);
 }
 
-.fds-chip-removable-4563db0f.fds-chip-small-4563db0f {
-  --fdsc-removable-chip-size: var(--fds-sizing-6);
-}
-
-.fds-chip-removable-4563db0f.fds-chip-medium-4563db0f {
-  --fdsc-removable-chip-size: var(--fds-sizing-7);
-}
-
-.fds-chip-removable-4563db0f.fds-chip-large-4563db0f {
-  --fdsc-removable-chip-size: var(--fds-sizing-8);
-}
-
 .fds-chip-xMark-4563db0f .fds-chip-icon-4563db0f {
   height: var(--fdsc-removable-chip-xmark-size);
   width: var(--fdsc-removable-chip-xmark-size);
@@ -1387,20 +1375,20 @@
 }
 
 .fds-chip-small-4563db0f {
-  --fdsc-chip-height: var(--fds-sizing-6);
-  --fdsc-chip-padding: var(--fds-spacing-2);
+  --fdsc-chip-height: var(--fds-sizing-7);
+  --fdsc-chip-padding: var(--fds-spacing-3);
   --fdsc-removable-chip-xmark-size: var(--fds-sizing-5);
 }
 
 .fds-chip-medium-4563db0f {
-  --fdsc-chip-height: var(--fds-sizing-7);
+  --fdsc-chip-height: var(--fds-sizing-8);
   --fdsc-chip-padding: var(--fds-spacing-3);
   --fdsc-removable-chip-xmark-size: var(--fds-sizing-6);
 }
 
 .fds-chip-large-4563db0f {
-  --fdsc-chip-height: var(--fds-sizing-8);
-  --fdsc-chip-padding: var(--fds-spacing-3);
+  --fdsc-chip-height: var(--fds-sizing-9);
+  --fdsc-chip-padding: var(--fds-spacing-4);
   --fdsc-removable-chip-xmark-size: var(--fds-sizing-7);
 }
 
@@ -1444,17 +1432,17 @@
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-small-ddc0278f) {
   --fsdc-pagination-listitem-margin: var(--fds-spacing-2);
-  --fdsc-pagination-ellipsis-width: var(--fds-sizing-8);
+  --fdsc-pagination-ellipsis-width: var(--fds-sizing-10);
 }
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-medium-ddc0278f) {
   --fsdc-pagination-listitem-margin: var(--fds-spacing-4);
-  --fdsc-pagination-ellipsis-width: var(--fds-sizing-10);
+  --fdsc-pagination-ellipsis-width: var(--fds-sizing-12);
 }
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-large-ddc0278f) {
   --fsdc-pagination-listitem-margin: var(--fds-spacing-6);
-  --fdsc-pagination-ellipsis-width: var(--fds-sizing-12);
+  --fdsc-pagination-ellipsis-width: var(--fds-sizing-14);
 }
 
 .fds-pagination-listitem-ddc0278f:where(.fds-pagination-compact-ddc0278f) {
@@ -1647,23 +1635,23 @@
 
 .fds-checkbox-small-ad9a8b9c,
 .fds-checkbox-small-ad9a8b9c .fds-checkbox-label-ad9a8b9c {
-  min-height: var(--fds-sizing-8);
+  min-height: var(--fds-sizing-5);
 }
 
 .fds-checkbox-medium-ad9a8b9c,
 .fds-checkbox-medium-ad9a8b9c .fds-checkbox-label-ad9a8b9c {
-  min-height: var(--fds-sizing-10);
+  min-height: var(--fds-sizing-6);
 }
 
 .fds-checkbox-large-ad9a8b9c,
 .fds-checkbox-large-ad9a8b9c .fds-checkbox-label-ad9a8b9c {
-  min-height: var(--fds-sizing-12);
+  min-height: var(--fds-sizing-7);
 }
 
 .fds-checkbox-small-ad9a8b9c {
-  --fds-checkbox-size: 1.5rem;
+  --fds-checkbox-size: var(--fds-sizing-5);
 
-  min-width: var(--fds-sizing-8);
+  min-width: var(--fds-sizing-5);
 }
 
 .fds-checkbox-small-ad9a8b9c .fds-checkbox-input-ad9a8b9c {
@@ -1672,9 +1660,9 @@
 }
 
 .fds-checkbox-medium-ad9a8b9c {
-  --fds-checkbox-size: 1.75rem;
+  --fds-checkbox-size: var(--fds-sizing-6);
 
-  min-width: var(--fds-sizing-10);
+  min-width: var(--fds-sizing-6);
 }
 
 .fds-checkbox-medium-ad9a8b9c .fds-checkbox-input-ad9a8b9c {
@@ -1683,9 +1671,9 @@
 }
 
 .fds-checkbox-large-ad9a8b9c {
-  --fds-checkbox-size: 2rem;
+  --fds-checkbox-size: var(--fds-sizing-7);
 
-  min-width: var(--fds-sizing-12);
+  min-width: var(--fds-sizing-7);
 }
 
 .fds-checkbox-large-ad9a8b9c .fds-checkbox-input-ad9a8b9c {
@@ -1817,23 +1805,23 @@
 
 .fds-radio-small-7a9bd584,
 .fds-radio-small-7a9bd584 .fds-radio-label-7a9bd584 {
-  min-height: var(--fds-sizing-8);
+  min-height: var(--fds-sizing-5);
 }
 
 .fds-radio-medium-7a9bd584,
 .fds-radio-medium-7a9bd584 .fds-radio-label-7a9bd584 {
-  min-height: var(--fds-sizing-10);
+  min-height: var(--fds-sizing-6);
 }
 
 .fds-radio-large-7a9bd584,
 .fds-radio-large-7a9bd584 .fds-radio-label-7a9bd584 {
-  min-height: var(--fds-sizing-12);
+  min-height: var(--fds-sizing-7);
 }
 
 .fds-radio-small-7a9bd584 {
-  --fds-radio-size: 1.5rem;
+  --fds-radio-size: var(--fds-sizing-5);
 
-  min-width: var(--fds-sizing-8);
+  min-width: var(--fds-sizing-5);
 }
 
 .fds-radio-small-7a9bd584 .fds-radio-input-7a9bd584 {
@@ -1842,9 +1830,9 @@
 }
 
 .fds-radio-medium-7a9bd584 {
-  --fds-radio-size: 1.75rem;
+  --fds-radio-size: var(--fds-sizing-6);
 
-  min-width: var(--fds-sizing-10);
+  min-width: var(--fds-sizing-6);
 }
 
 .fds-radio-medium-7a9bd584 .fds-radio-input-7a9bd584 {
@@ -1853,9 +1841,9 @@
 }
 
 .fds-radio-large-7a9bd584 {
-  --fds-radio-size: 2rem;
+  --fds-radio-size: var(--fds-sizing-7);
 
-  min-width: var(--fds-sizing-12);
+  min-width: var(--fds-sizing-7);
 }
 
 .fds-radio-large-7a9bd584 .fds-radio-input-7a9bd584 {
@@ -1973,22 +1961,22 @@
 
 .fds-switch-small-9a6b03bc,
 .fds-switch-small-9a6b03bc .fds-switch-label-9a6b03bc {
-  min-height: var(--fds-sizing-8);
+  min-height: var(--fds-sizing-6);
 }
 
 .fds-switch-medium-9a6b03bc,
 .fds-switch-medium-9a6b03bc .fds-switch-label-9a6b03bc {
-  min-height: var(--fds-sizing-10);
+  min-height: var(--fds-sizing-7);
 }
 
 .fds-switch-large-9a6b03bc,
 .fds-switch-large-9a6b03bc .fds-switch-label-9a6b03bc {
-  min-height: var(--fds-sizing-12);
+  min-height: var(--fds-sizing-8);
 }
 
 .fds-switch-small-9a6b03bc {
-  --fds-switch-height: 1.5rem;
-  --fds-switch-width: 2.5rem;
+  --fds-switch-height: var(--fds-sizing-6);
+  --fds-switch-width: var(--fds-sizing-11);
 }
 
 .fds-switch-small-9a6b03bc .fds-switch-input-9a6b03bc {
@@ -1997,8 +1985,8 @@
 }
 
 .fds-switch-medium-9a6b03bc {
-  --fds-switch-height: 1.75rem;
-  --fds-switch-width: 3rem;
+  --fds-switch-height: var(--fds-sizing-7);
+  --fds-switch-width: var(--fds-sizing-13);
 }
 
 .fds-switch-medium-9a6b03bc .fds-switch-input-9a6b03bc {
@@ -2007,8 +1995,8 @@
 }
 
 .fds-switch-large-9a6b03bc {
-  --fds-switch-height: 2rem;
-  --fds-switch-width: 3.5rem;
+  --fds-switch-height: var(--fds-sizing-8);
+  --fds-switch-width: var(--fds-sizing-15);
 }
 
 .fds-switch-large-9a6b03bc .fds-switch-input-9a6b03bc {
@@ -2138,27 +2126,27 @@
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-small-d98267a0 .fds-textfield-adornment-d98267a0 {
-  padding: 6.5px var(--fds-spacing-3);
+  padding: var(--fds-sizing-2) var(--fds-spacing-3);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-medium-d98267a0 .fds-textfield-adornment-d98267a0 {
-  padding: 9px var(--fds-spacing-4);
+  padding: 0.65rem var(--fds-spacing-4);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-large-d98267a0 .fds-textfield-adornment-d98267a0 {
-  padding: 11px var(--fds-spacing-5);
+  padding: 0.85rem var(--fds-spacing-5);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-small-d98267a0 .fds-textfield-field-d98267a0 {
-  height: var(--fds-sizing-8);
+  height: var(--fds-sizing-10);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-medium-d98267a0 .fds-textfield-field-d98267a0 {
-  height: var(--fds-sizing-10);
+  height: var(--fds-sizing-12);
 }
 
 .fds-textfield-formField-d98267a0.fds-textfield-large-d98267a0 .fds-textfield-field-d98267a0 {
-  height: var(--fds-sizing-12);
+  height: var(--fds-sizing-14);
 }
 
 .fds-textfield-label-d98267a0 {
@@ -2646,8 +2634,9 @@
   position: absolute;
   height: 100%;
   z-index: 2;
-  left: var(--fds-spacing-3);
+  left: var(--fds-spacing-4);
   transform: scale(1.5);
+  pointer-events: none;
 }
 
 [type='search']::-webkit-search-decoration,
@@ -2716,30 +2705,42 @@
   z-index: 2;
 }
 
-.fds-search-input-a6b5fe3c.fds-search-small-a6b5fe3c {
+.fds-search-small-a6b5fe3c .fds-search-input-a6b5fe3c {
   --f-search-button-clear-size: var(--fds-sizing-4);
 
-  height: var(--fds-sizing-8);
-  padding: 0 var(--fds-spacing-2);
+  height: var(--fds-sizing-10);
+  padding: 0 var(--fds-spacing-3);
   padding-right: 2.5em;
 }
 
-.fds-search-input-a6b5fe3c.fds-search-medium-a6b5fe3c {
+.fds-search-small-a6b5fe3c .fds-search-icon-a6b5fe3c {
+  left: var(--fds-spacing-3);
+}
+
+.fds-search-medium-a6b5fe3c .fds-search-input-a6b5fe3c {
   --f-search-button-clear-size: var(--fds-sizing-6);
 
-  height: var(--fds-sizing-10);
-  padding: 0 var(--fds-spacing-3);
+  height: var(--fds-sizing-12);
+  padding: 0 var(--fds-spacing-4);
   padding-right: 2.2em;
 }
 
-.fds-search-input-a6b5fe3c.fds-search-large-a6b5fe3c {
+.fds-search-medium-a6b5fe3c .fds-search-icon-a6b5fe3c {
+  left: var(--fds-spacing-4);
+}
+
+.fds-search-large-a6b5fe3c .fds-search-input-a6b5fe3c {
   --f-search-button-clear-size: var(--fds-sizing-12);
 
-  height: var(--fds-sizing-12);
-  padding: 0 var(--fds-spacing-4);
+  height: var(--fds-sizing-14);
+  padding: 0 var(--fds-spacing-5);
   padding-right: 2em;
 }
 
+.fds-search-large-a6b5fe3c .fds-search-icon-a6b5fe3c {
+  left: var(--fds-spacing-5);
+}
+
 .fds-search-input-a6b5fe3c.fds-search-simple-a6b5fe3c {
   padding-left: 2.4em;
 }
@@ -3235,6 +3236,7 @@
 }
 
 .fds-combobox-inputWrapper-249a725c.fds-combobox-small-249a725c {
+  min-height: var(--fds-sizing-10);
   font: var(--fds-typography-paragraph-small);
   font-family: inherit;
   padding: 5px var(--fds-spacing-2);
@@ -3246,6 +3248,7 @@
 }
 
 .fds-combobox-inputWrapper-249a725c.fds-combobox-medium-249a725c {
+  min-height: var(--fds-sizing-12);
   font: var(--fds-typography-paragraph-medium);
   font-family: inherit;
   padding: 7px var(--fds-spacing-3);
@@ -3257,6 +3260,7 @@
 }
 
 .fds-combobox-inputWrapper-249a725c.fds-combobox-large-249a725c {
+  min-height: var(--fds-sizing-14);
   font: var(--fds-typography-paragraph-large);
   font-family: inherit;
   padding: 7px var(--fds-spacing-4);