@navikt/ds-react 5.12.5 → 5.14.0

package/cjs/form/combobox/Combobox.js

@@ -40,24 +40,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Combobox = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const typography_1 = require("../../typography");
+const useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
 const ClearButton_1 = __importDefault(require("./ClearButton"));
+const ComboboxWrapper_1 = __importDefault(require("./ComboboxWrapper"));
 const FilteredOptions_1 = __importDefault(require("./FilteredOptions/FilteredOptions"));
 const filteredOptionsContext_1 = require("./FilteredOptions/filteredOptionsContext");
+const Input_1 = __importDefault(require("./Input/Input"));
+const inputContext_1 = require("./Input/inputContext");
 const SelectedOptions_1 = __importDefault(require("./SelectedOptions/SelectedOptions"));
-const ToggleListButton_1 = __importDefault(require("./ToggleListButton"));
 const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsContext");
-const ComboboxWrapper_1 = __importDefault(require("./ComboboxWrapper"));
-const inputContext_1 = require("./Input/inputContext");
-const Input_1 = __importDefault(require("./Input/Input"));
-const util_1 = require("../../util");
-const typography_1 = require("../../typography");
+const ToggleListButton_1 = __importDefault(require("./ToggleListButton"));
 exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
     const { className, hideLabel = false, description, label, clearButton = true, clearButtonLabel, toggleListButton = true, toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true } = props, rest = __rest(props, ["className", "hideLabel", "description", "label", "clearButton", "clearButtonLabel", "toggleListButton", "toggleListButtonLabel", "inputClassName", "shouldShowSelectedOptions"]);
     const toggleListButtonRef = (0, react_1.useRef)(null);
     const { activeDecendantId, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { selectedOptions } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     const { clearInput, error, errorId, focusInput, hasError, inputDescriptionId, inputProps, inputRef, value, showErrorMsg, size = "medium", } = (0, inputContext_1.useInputContext)();
-    const mergedInputRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([inputRef, ref]), [inputRef, ref]);
+    const mergedInputRef = (0, useMergeRefs_1.useMergeRefs)(inputRef, ref);
     return (react_1.default.createElement(ComboboxWrapper_1.default, { className: className, hasError: hasError, inputProps: inputProps, inputSize: size, toggleIsListOpen: toggleIsListOpen, toggleListButtonRef: toggleListButtonRef },
         react_1.default.createElement(typography_1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
                 "navds-sr-only": hideLabel,

package/cjs/form/combobox/ComboboxProvider.js

@@ -40,9 +40,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const Combobox_1 = __importDefault(require("./Combobox"));
 const filteredOptionsContext_1 = require("./FilteredOptions/filteredOptionsContext");
-const customOptionsContext_1 = require("./customOptionsContext");
-const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsContext");
 const inputContext_1 = require("./Input/inputContext");
+const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsContext");
+const customOptionsContext_1 = require("./customOptionsContext");
 /**
  * A component that allows the user to search in a list of options
  *

package/cjs/form/combobox/FilteredOptions/FilteredOptions.js

@@ -3,15 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importDefault(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
-const filteredOptionsContext_1 = require("./filteredOptionsContext");
-const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
-const inputContext_1 = require("../Input/inputContext");
 const loader_1 = require("../../../loader");
 const typography_1 = require("../../../typography");
+const inputContext_1 = require("../Input/inputContext");
+const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
 const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
+const filteredOptionsContext_1 = require("./filteredOptionsContext");
 const FilteredOptions = () => {
     const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, setFilteredOptionsRef, isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice, isValueNew, toggleIsListOpen, activeDecendantId, virtualFocus, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();

package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js

@@ -27,12 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFilteredOptionsContext = exports.FilteredOptionsProvider = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const customOptionsContext_1 = require("../customOptionsContext");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../../util/hooks");
 const inputContext_1 = require("../Input/inputContext");
-const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
-const util_1 = require("../../../util");
+const customOptionsContext_1 = require("../customOptionsContext");
 const filtered_options_util_1 = __importDefault(require("./filtered-options-util"));
 const useVirtualFocus_1 = __importDefault(require("./useVirtualFocus"));
 const FilteredOptionsContext = (0, react_1.createContext)({});
@@ -50,14 +49,14 @@ const FilteredOptionsProvider = ({ children, value: props, }) => {
         const opts = [...customOptions, ...options];
         return filtered_options_util_1.default.getMatchingValuesFromList(searchTerm, opts);
     }, [customOptions, externalFilteredOptions, options, searchTerm]);
-    const previousSearchTerm = (0, usePrevious_1.default)(searchTerm);
+    const previousSearchTerm = (0, hooks_1.usePrevious)(searchTerm);
     const [isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice] = (0, react_1.useState)(false);
     const filteredOptionsMap = (0, react_1.useMemo)(() => options.reduce((map, _option) => (Object.assign(Object.assign({}, map), { [filtered_options_util_1.default.getOptionId(id, _option)]: _option })), {
         [filtered_options_util_1.default.getAddNewOptionId(id)]: allowNewValues
             ? value
             : undefined,
     }), [allowNewValues, id, options, value]);
-    (0, util_1.useClientLayoutEffect)(() => {
+    (0, hooks_1.useClientLayoutEffect)(() => {
         if (shouldAutocomplete &&
             filtered_options_util_1.default.normalizeText(searchTerm) !== "" &&
             ((previousSearchTerm === null || previousSearchTerm === void 0 ? void 0 : previousSearchTerm.length) || 0) < searchTerm.length &&

package/cjs/form/combobox/Input/inputContext.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useInputContext = exports.InputContextProvider = void 0;
 const react_1 = __importStar(require("react"));
-const util_1 = require("../../../util");
+const hooks_1 = require("../../../util/hooks");
 const useFormField_1 = require("../../useFormField");
 const InputContext = (0, react_1.createContext)({});
 const InputContextProvider = ({ children, value: props }) => {
@@ -61,7 +61,7 @@ const InputContextProvider = ({ children, value: props }) => {
         var _a, _b;
         (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
     }, []);
-    (0, util_1.useClientLayoutEffect)(() => {
+    (0, hooks_1.useClientLayoutEffect)(() => {
         var _a, _b;
         if (shouldAutocomplete && inputRef && value !== searchTerm) {
             (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, searchTerm.length, value.length);

package/cjs/form/combobox/SelectedOptions/SelectedOptions.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const chips_1 = require("../../../chips");
-const selectedOptionsContext_1 = require("./selectedOptionsContext");
 const inputContext_1 = require("../Input/inputContext");
+const selectedOptionsContext_1 = require("./selectedOptionsContext");
 const Option = ({ option }) => {
     const { isMultiSelect, removeSelectedOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     const { focusInput } = (0, inputContext_1.useInputContext)();

package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -22,13 +22,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSelectedOptionsContext = exports.SelectedOptionsProvider = void 0;
 const react_1 = __importStar(require("react"));
-const usePrevious_1 = __importDefault(require("../../../util/usePrevious"));
+const hooks_1 = require("../../../util/hooks");
 const inputContext_1 = require("../Input/inputContext");
 const customOptionsContext_1 = require("../customOptionsContext");
 const SelectedOptionsContext = (0, react_1.createContext)({});
@@ -92,7 +89,7 @@ const SelectedOptionsProvider = ({ children, value, }) => {
         removeSelectedOption,
         selectedOptions,
     ]);
-    const prevSelectedOptions = (0, usePrevious_1.default)(selectedOptions);
+    const prevSelectedOptions = (0, hooks_1.usePrevious)(selectedOptions);
     const selectedOptionsState = {
         addSelectedOption,
         isMultiSelect,

package/cjs/form/error-summary/ErrorSummary.js

@@ -38,11 +38,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorSummary = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../../typography");
+const hooks_1 = require("../../util/hooks");
 const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
-const util_1 = require("../../util");
 /**
  * A component that displays a summary of errors.
  *
@@ -63,7 +63,7 @@ const util_1 = require("../../util");
  */
 exports.ErrorSummary = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, size = "medium", headingTag = "h2", heading } = _a, rest = __rest(_a, ["children", "className", "size", "headingTag", "heading"]);
-    const headingId = (0, util_1.useId)();
+    const headingId = (0, hooks_1.useId)();
     return (react_1.default.createElement("section", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": headingId }),
         react_1.default.createElement(typography_1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: headingId }, heading),
         react_1.default.createElement(typography_1.BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, react_1.default.Children.map(children, (child) => {

package/cjs/form/error-summary/ErrorSummaryItem.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorSummaryItem = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.ErrorSummaryItem = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as: Component = "a", className } = _a, rest = __rest(_a, ["children", "as", "className"]);
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-error-summary__item", "navds-link") }), children));

package/cjs/form/radio/Radio.js

@@ -31,11 +31,12 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../../typography");
 const util_1 = require("../../util");
+const hooks_1 = require("../../util/hooks");
 const useRadio_1 = require("./useRadio");
 exports.Radio = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size, hasError, readOnly } = (0, useRadio_1.useRadio)(props);
-    const labelId = (0, util_1.useId)();
-    const descriptionId = (0, util_1.useId)();
+    const labelId = (0, hooks_1.useId)();
+    const descriptionId = (0, hooks_1.useId)();
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(props.className, "navds-radio", `navds-radio--${size}`, {
             "navds-radio--error": hasError,
             "navds-radio--disabled": inputProps.disabled,

package/cjs/form/radio/RadioGroup.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = exports.RadioGroupContext = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const util_1 = require("../../util");
+const hooks_1 = require("../../util/hooks");
 const Fieldset_1 = require("../Fieldset");
 exports.RadioGroupContext = react_1.default.createContext(null);
 /**
@@ -57,7 +57,7 @@ exports.RadioGroup = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c;
     var { children, className, name, defaultValue, value, onChange = () => { }, required, readOnly } = _a, rest = __rest(_a, ["children", "className", "name", "defaultValue", "value", "onChange", "required", "readOnly"]);
     const fieldset = (0, react_1.useContext)(Fieldset_1.FieldsetContext);
-    const nameId = (0, util_1.useId)();
+    const nameId = (0, hooks_1.useId)();
     return (react_1.default.createElement(Fieldset_1.Fieldset, Object.assign({}, rest, { readOnly: readOnly, ref: ref, className: (0, clsx_1.default)(className, "navds-radio-group", `navds-radio-group--${(_c = (_b = rest.size) !== null && _b !== void 0 ? _b : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _c !== void 0 ? _c : "medium"}`), nativeReadOnly: false }),
         react_1.default.createElement(exports.RadioGroupContext.Provider, { value: {
                 name: name !== null && name !== void 0 ? name : `radioGroupName-${nameId}`,

package/cjs/form/search/Search.js

@@ -38,11 +38,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Search = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../../typography");
 const util_1 = require("../../util");
+const useMergeRefs_1 = require("../../util/hooks/useMergeRefs");
 const useFormField_1 = require("../useFormField");
 const SearchButton_1 = __importDefault(require("./SearchButton"));
 const context_1 = require("./context");
@@ -63,7 +64,7 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, "searchfield");
     const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, variant = "primary", defaultValue, onChange, onSearchClick, htmlSize } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange", "onSearchClick", "htmlSize"]);
     const searchRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([searchRef, ref]), [ref]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(searchRef, ref);
     const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
     const handleChange = (0, react_1.useCallback)((v) => {
         value === undefined && setInternalValue(v);

package/cjs/form/search/SearchButton.js

@@ -37,10 +37,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../../button");
+const composeEventHandlers_1 = require("../../util/composeEventHandlers");
 const context_1 = require("./context");
 const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
@@ -51,9 +52,6 @@ const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     const { size, variant, handleClick } = context;
-    return (react_1.default.createElement(button_1.Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant === "secondary" ? "secondary" : "primary", className: (0, clsx_1.default)("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (e) => {
-            handleClick();
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, icon: react_1.default.createElement(aksel_icons_1.MagnifyingGlassIcon, Object.assign({}, (children ? { "aria-hidden": true } : { title: "Søk" }))) }), children));
+    return (react_1.default.createElement(button_1.Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant === "secondary" ? "secondary" : "primary", className: (0, clsx_1.default)("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleClick), icon: react_1.default.createElement(aksel_icons_1.MagnifyingGlassIcon, Object.assign({}, (children ? { "aria-hidden": true } : { title: "Søk" }))) }), children));
 });
 exports.default = SearchButton;

package/cjs/form/useFormField.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormField = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = require("react");
-const util_1 = require("../util");
+const hooks_1 = require("../util/hooks");
 const context_1 = require("./Fieldset/context");
 /**
  * Handles props and their state for various form-fields in context with Fieldset
@@ -15,7 +15,7 @@ const useFormField = (props, prefix) => {
     var _a, _b, _c;
     const { size, error, errorId: propErrorId } = props;
     const fieldset = (0, react_1.useContext)(context_1.FieldsetContext);
-    const genId = (0, util_1.useId)();
+    const genId = (0, hooks_1.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
     const errorId = propErrorId !== null && propErrorId !== void 0 ? propErrorId : `${prefix}-error-${genId}`;
     const inputDescriptionId = `${prefix}-description-${genId}`;

package/cjs/grid/Cell.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)

package/cjs/grid/Grid.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)

package/cjs/guide-panel/GuidePanel.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GuidePanel = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const Illustration_1 = require("./Illustration");
 /**
  * A component for guiding users on the website

package/cjs/guide-panel/Illustration.js

@@ -16,10 +16,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultIllustration = void 0;
 const react_1 = __importDefault(require("react"));
-const util_1 = require("../util");
+const hooks_1 = require("../util/hooks");
 const DefaultIllustration = (_a) => {
     var { title, titleId: _titleId } = _a, props = __rest(_a, ["title", "titleId"]);
-    let titleId = (0, util_1.useId)();
+    let titleId = (0, hooks_1.useId)();
     titleId = title ? (_titleId ? _titleId : "title-" + titleId) : undefined;
     return (react_1.default.createElement("svg", Object.assign({ width: "56", height: "85", viewBox: "0 0 56 85", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "NAV veileder illustrasjon", focusable: false, role: "img", "aria-labelledby": titleId }, props),
         title ? react_1.default.createElement("title", { id: titleId }, title) : null,

package/cjs/help-text/HelpText.js

@@ -41,7 +41,8 @@ exports.HelpText = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const popover_1 = require("../popover");
-const util_1 = require("../util");
+const composeEventHandlers_1 = require("../util/composeEventHandlers");
+const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
 const HelpTextIcon_1 = require("./HelpTextIcon");
 /**
  * A component that displays a help text button with a popover.
@@ -57,15 +58,12 @@ const HelpTextIcon_1 = require("./HelpTextIcon");
  * ```
  */
 exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
+    var { className, children, placement, strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
     const buttonRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([buttonRef, ref]), [ref]);
+    const mergedRef = (0, useMergeRefs_1.useMergeRefs)(buttonRef, ref);
     const [open, setOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-help-text", wrapperClassName) },
-        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
-                setOpen((x) => !x);
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => setOpen((x) => x)), className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
             react_1.default.createElement(HelpTextIcon_1.HelpTextIcon, { title: title }),
             react_1.default.createElement(HelpTextIcon_1.HelpTextIcon, { filled: true, title: title })),
         react_1.default.createElement(popover_1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy, offset: 12 },

package/cjs/help-text/HelpTextIcon.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpTextIcon = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importDefault(require("react"));
-const useId_1 = require("../util/useId");
+const hooks_1 = require("../util/hooks");
 const HelpTextIcon = ({ title, filled = false, }) => {
-    let titleId = (0, useId_1.useId)();
+    let titleId = (0, hooks_1.useId)();
     titleId = title ? `title-${titleId}` : undefined;
     return (react_1.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-labelledby": titleId, className: (0, clsx_1.default)("navds-help-text__icon", {
             "navds-help-text__icon--filled": filled,

package/cjs/internal-header/InternalHeaderButton.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeaderButton = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.InternalHeaderButton = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "button", className } = _a, rest = __rest(_a, ["as", "className"]);
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-internalheader__button", className) })));

package/cjs/internal-header/InternalHeaderTitle.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeaderTitle = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.InternalHeaderTitle = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "a", children, className } = _a, rest = __rest(_a, ["as", "children", "className"]);
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, size: "xsmall", className: (0, clsx_1.default)("navds-internalheader__title", "navds-body-short", className) }),

package/cjs/internal-header/InternalHeaderUser.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeaderUser = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 exports.InternalHeaderUser = (0, react_1.forwardRef)((_a, ref) => {
     var { className, name, description } = _a, rest = __rest(_a, ["className", "name", "description"]);

package/cjs/internal-header/InternalHeaderUserButton.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeaderUserButton = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../typography");
 const InternalHeaderButton_1 = __importDefault(require("./InternalHeaderButton"));
 exports.InternalHeaderUserButton = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/layout/bleed/Bleed.js

@@ -40,8 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bleed = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const css_1 = require("../utilities/css");
 const Slot_1 = require("../../util/Slot");
+const css_1 = require("../utilities/css");
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
  *

package/cjs/layout/content-container/ContentContainer.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentContainer = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.ContentContainer = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-content-container", className) }, rest)));

package/cjs/layout/grid/HGrid.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HGrid = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const css_1 = require("../utilities/css");
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.

package/cjs/layout/page/parts/PageBlock.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageBlock = exports.widths = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-exports.widths = ["md", "lg", "xl", "2xl"];
+exports.widths = ["text", "md", "lg", "xl", "2xl"];
 /**
  * Acts as a top-level container for defining max-width, gutters and horizontal centering
  *

package/cjs/layout/sidemal-test/AvatarPanel.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarPanel = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const box_1 = require("../box");
 const stack_1 = require("../stack");
 function AvatarPanel({ children }) {

package/cjs/layout/sidemal-test/Content.js

@@ -4,17 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const accordion_1 = require("../../accordion");
 const copybutton_1 = require("../../copybutton");
+const link_1 = require("../../link");
+const list_1 = require("../../list");
 const read_more_1 = require("../../read-more");
 const typography_1 = require("../../typography");
 const box_1 = require("../box");
 const stack_1 = require("../stack");
 const AvatarPanel_1 = require("./AvatarPanel");
-const list_1 = require("../../list");
-const link_1 = require("../../link");
 function Content() {
     return (react_1.default.createElement(AvatarPanel_1.AvatarPanel, null,
         react_1.default.createElement(box_1.Box, { paddingBlock: "0 6" },

package/cjs/layout/sidemal-test/Filter.js

@@ -25,11 +25,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterCard = void 0;
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const form_1 = require("../../form");
 const typography_1 = require("../../typography");
 const box_1 = require("../box");
 const stack_1 = require("../stack");
-const aksel_icons_1 = require("@navikt/aksel-icons");
 function FilterCard() {
     const [filter, setFilter] = (0, react_1.useState)([]);
     return (react_1.default.createElement(box_1.Box, { background: "bg-default", padding: { xs: "4", md: "5" }, borderWidth: "5", borderColor: "border-alt-3", borderRadius: "medium" },

package/cjs/layout/sidemal-test/Intro.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IntroCard = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const copybutton_1 = require("../../copybutton");
 const typography_1 = require("../../typography");
 const box_1 = require("../box");

package/cjs/link-panel/LinkPanel.js

@@ -38,12 +38,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelComponent = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const LinkPanelTitle_1 = require("./LinkPanelTitle");
-const LinkPanelDescription_1 = require("./LinkPanelDescription");
+const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const panel_1 = require("../panel");
+const LinkPanelDescription_1 = require("./LinkPanelDescription");
+const LinkPanelTitle_1 = require("./LinkPanelTitle");
 /**
  * A component that displays a link panel.
  *

package/cjs/link-panel/LinkPanelDescription.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelDescription = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 exports.LinkPanelDescription = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);

package/cjs/link-panel/LinkPanelTitle.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelTitle = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.LinkPanelTitle = (0, react_1.forwardRef)((_a, ref) => {
     var { className, as: Component = "div" } = _a, rest = __rest(_a, ["className", "as"]);
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-link-panel__title", "navds-heading", "navds-heading--medium", className) })));

package/cjs/list/List.js

@@ -41,13 +41,13 @@ exports.List = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
-const useId_1 = require("../util/useId");
+const hooks_1 = require("../util/hooks");
 const ListItem_1 = require("./ListItem");
 const context_1 = require("./context");
 exports.List = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { children, className, as: ListTag = "ul", title, description, headingTag = "h3", size } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag", "size"]);
-    const ariaId = (0, useId_1.useId)();
+    const ariaId = (0, hooks_1.useId)();
     const { isNested, size: _size } = (0, react_1.useContext)(context_1.ListContext);
     const listSize = (_b = size !== null && size !== void 0 ? size : _size) !== null && _b !== void 0 ? _b : "medium";
     return (react_1.default.createElement(context_1.ListContext.Provider, { value: {