@navikt/ds-react 5.6.4 → 5.7.0

package/cjs/expansion-card/ExpansionCardContent.js

@@ -39,16 +39,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const BodyLong_1 = require("../typography/BodyLong");
-const ExpansionCard_1 = require("./ExpansionCard");
+const typography_1 = require("../typography");
+const context_1 = require("./context");
 const ExpansionCardContent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    const panelContext = (0, react_1.useContext)(ExpansionCard_1.ExpansionCardContext);
+    const panelContext = (0, react_1.useContext)(context_1.ExpansionCardContext);
     if (panelContext === null) {
         console.error("<ExpansionCard.Content> has to be used within an <ExpansionCard>");
         return null;
     }
-    return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { ref: ref, as: "div", className: (0, clsx_1.default)("navds-expansioncard__content", className, {
+    return (react_1.default.createElement(typography_1.BodyLong, Object.assign({}, rest, { ref: ref, as: "div", className: (0, clsx_1.default)("navds-expansioncard__content", className, {
             "navds-expansioncard__content--closed": !panelContext.open,
         }), "aria-hidden": !panelContext.open, size: panelContext.size }),
         react_1.default.createElement("div", { className: "navds-expansioncard__content-inner" }, children)));

package/cjs/expansion-card/ExpansionCardDescription.js

@@ -38,16 +38,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpansionCardDescription = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const BodyLong_1 = require("../typography/BodyLong");
-const ExpansionCard_1 = require("./ExpansionCard");
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../typography");
+const context_1 = require("./context");
 exports.ExpansionCardDescription = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    const panelContext = (0, react_1.useContext)(ExpansionCard_1.ExpansionCardContext);
+    const panelContext = (0, react_1.useContext)(context_1.ExpansionCardContext);
     if (panelContext === null) {
         console.error("<ExpansionCard.Description> has to be used within an <ExpansionCard>");
         return null;
     }
-    return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className), size: panelContext.size })));
+    return (react_1.default.createElement(typography_1.BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className), size: panelContext.size })));
 });

package/cjs/expansion-card/ExpansionCardHeader.js

@@ -37,13 +37,13 @@ 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 ExpansionCard_1 = require("./ExpansionCard");
-const aksel_icons_1 = require("@navikt/aksel-icons");
+const context_1 = require("./context");
 const ExpansionCardHeader = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    const panelContext = (0, react_1.useContext)(ExpansionCard_1.ExpansionCardContext);
+    const panelContext = (0, react_1.useContext)(context_1.ExpansionCardContext);
     if (panelContext === null) {
         console.error("<ExpansionCard.Header> has to be used within an <ExpansionCard>");
         return null;

package/cjs/expansion-card/ExpansionCardTitle.js

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

package/cjs/expansion-card/context.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpansionCardContext = void 0;
+const react_1 = require("react");
+exports.ExpansionCardContext = (0, react_1.createContext)({
+    open: false,
+    toggleOpen: () => { },
+    size: "medium",
+});

package/cjs/form/ConfirmationPanel.js

@@ -38,9 +38,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmationPanel = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("..");
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../typography");
+const util_1 = require("../util");
+const checkbox_1 = require("./checkbox");
 const useFormField_1 = require("./useFormField");
 /**
  * A component that displays a confirmation checkbox with a label.
@@ -63,15 +65,15 @@ const useFormField_1 = require("./useFormField");
 exports.ConfirmationPanel = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
     const { errorId, showErrorMsg, hasError, size, inputProps } = (0, useFormField_1.useFormField)(props, "confirmation-panel");
-    const id = (0, __1.useId)();
+    const id = (0, util_1.useId)();
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-confirmation-panel", "navds-form-field", className, {
             "navds-confirmation-panel--small": size === "small",
             "navds-confirmation-panel--error": hasError,
             "navds-confirmation-panel--checked": !!props.checked,
         }) },
         react_1.default.createElement("div", { className: "navds-confirmation-panel__inner" },
-            children && (react_1.default.createElement(__1.BodyLong, { size: props.size, className: "navds-confirmation-panel__content", id: `confirmation-panel-${id}`, as: "div" }, children)),
-            react_1.default.createElement(__1.Checkbox, Object.assign({ ref: ref }, props, inputProps, { "aria-describedby": (0, clsx_1.default)(inputProps["aria-describedby"], children && `confirmation-panel-${id}`), error: hasError, size: size }), label)),
-        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, role: "alert" }, showErrorMsg && react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error))));
+            children && (react_1.default.createElement(typography_1.BodyLong, { size: props.size, className: "navds-confirmation-panel__content", id: `confirmation-panel-${id}`, as: "div" }, children)),
+            react_1.default.createElement(checkbox_1.Checkbox, Object.assign({ ref: ref }, props, inputProps, { "aria-describedby": (0, clsx_1.default)(inputProps["aria-describedby"], children && `confirmation-panel-${id}`), error: hasError, size: size }), label)),
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, role: "alert" }, showErrorMsg && react_1.default.createElement(typography_1.ErrorMessage, { size: size }, props.error))));
 });
 exports.default = exports.ConfirmationPanel;

package/cjs/form/Fieldset/Fieldset.js

@@ -37,19 +37,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Fieldset = exports.FieldsetContext = void 0;
+exports.Fieldset = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const __1 = require("../..");
-const useFieldset_1 = require("./useFieldset");
+const typography_1 = require("../../typography");
+const util_1 = require("../../util");
 const ReadOnlyIcon_1 = require("../ReadOnlyIcon");
-exports.FieldsetContext = react_1.default.createContext(null);
+const context_1 = require("./context");
+const useFieldset_1 = require("./useFieldset");
 exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, readOnly, inputDescriptionId, } = (0, useFieldset_1.useFieldset)(props);
-    const fieldset = (0, react_1.useContext)(exports.FieldsetContext);
+    const fieldset = (0, react_1.useContext)(context_1.FieldsetContext);
     const { children, className, errorPropagation = true, legend, description, hideLegend, nativeReadOnly = true } = props, rest = __rest(props, ["children", "className", "errorPropagation", "legend", "description", "hideLegend", "nativeReadOnly"]);
-    return (react_1.default.createElement(exports.FieldsetContext.Provider, { value: {
+    return (react_1.default.createElement(context_1.FieldsetContext.Provider, { value: {
             error: errorPropagation ? (_a = props.error) !== null && _a !== void 0 ? _a : fieldset === null || fieldset === void 0 ? void 0 : fieldset.error : undefined,
             errorId: (0, clsx_1.default)({
                 [errorId]: showErrorMsg,
@@ -59,19 +60,19 @@ exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
             disabled: (_c = props.disabled) !== null && _c !== void 0 ? _c : false,
             readOnly,
         } },
-        react_1.default.createElement("fieldset", Object.assign({}, (0, __1.omit)(rest, ["errorId", "error", "size", "readOnly"]), inputProps, { ref: ref, className: (0, clsx_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, {
+        react_1.default.createElement("fieldset", Object.assign({}, (0, util_1.omit)(rest, ["errorId", "error", "size", "readOnly"]), inputProps, { ref: ref, className: (0, clsx_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, {
                 "navds-fieldset--error": hasError,
                 "navds-fieldset--readonly": readOnly,
             }) }),
-            react_1.default.createElement(__1.Label, { size: size, as: "legend", className: (0, clsx_1.default)("navds-fieldset__legend", {
+            react_1.default.createElement(typography_1.Label, { size: size, as: "legend", className: (0, clsx_1.default)("navds-fieldset__legend", {
                     "navds-sr-only": !!hideLegend,
                 }) },
                 react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: nativeReadOnly }),
                 legend),
-            !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-fieldset__description", {
+            !!description && (react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-fieldset__description", {
                     "navds-sr-only": !!hideLegend,
                 }), id: inputDescriptionId, size: size !== null && size !== void 0 ? size : "medium", as: "div" }, props.description)),
             children,
-            react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite", className: "navds-fieldset__error" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error))))));
+            react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite", className: "navds-fieldset__error" }, showErrorMsg && (react_1.default.createElement(typography_1.ErrorMessage, { size: size }, props.error))))));
 });
 exports.default = exports.Fieldset;

package/cjs/form/Fieldset/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldsetContext = void 0;
+const react_1 = require("react");
+exports.FieldsetContext = (0, react_1.createContext)(null);

package/cjs/form/Fieldset/index.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldsetContext = exports.Fieldset = void 0;
 var Fieldset_1 = require("./Fieldset");
 Object.defineProperty(exports, "Fieldset", { enumerable: true, get: function () { return __importDefault(Fieldset_1).default; } });
-Object.defineProperty(exports, "FieldsetContext", { enumerable: true, get: function () { return Fieldset_1.FieldsetContext; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "FieldsetContext", { enumerable: true, get: function () { return context_1.FieldsetContext; } });

package/cjs/form/Select.js

@@ -38,12 +38,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = 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 __1 = require("..");
-const useFormField_1 = require("./useFormField");
+const typography_1 = require("../typography");
+const util_1 = require("../util");
 const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
+const useFormField_1 = require("./useFormField");
 /**
  * A component that displays a select input field.
  *
@@ -85,17 +86,17 @@ exports.Select = (0, react_1.forwardRef)((props, ref) => {
             "navds-select--error": hasError,
             "navds-select--readonly": readOnly,
         }) },
-        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
+        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,
             }) },
             react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: false }),
             label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size, as: "div" }, description)),
         react_1.default.createElement("div", { className: "navds-select__container", style: style },
-            react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size", "readOnly"]), inputProps, readOnlyEventHandlers, { ref: ref, className: (0, clsx_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize }), children),
+            react_1.default.createElement("select", Object.assign({}, (0, util_1.omit)(rest, ["error", "errorId", "size", "readOnly"]), inputProps, readOnlyEventHandlers, { ref: ref, className: (0, clsx_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize }), children),
             react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-select__chevron", "aria-hidden": true })),
-        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(typography_1.ErrorMessage, { size: size }, props.error)))));
 });
 exports.default = exports.Select;

package/cjs/form/Switch.js

@@ -40,9 +40,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
 const useFormField_1 = require("./useFormField");
 const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
+const loader_1 = require("../loader");
+const typography_1 = require("../typography");
+const util_1 = require("../util");
 const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z", fill: "currentColor" })));
 /**
@@ -69,7 +71,7 @@ exports.Switch = (0, react_1.forwardRef)((props, ref) => {
             "navds-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
             "navds-switch--readonly": readOnly,
         }) },
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size", "readOnly"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => {
+        react_1.default.createElement("input", Object.assign({}, (0, util_1.omit)(rest, ["size", "readOnly"]), (0, util_1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (e) => {
                 if (readOnly) {
                     return;
                 }
@@ -84,15 +86,15 @@ exports.Switch = (0, react_1.forwardRef)((props, ref) => {
                 (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
             }, className: (0, clsx_1.default)(className, "navds-switch__input") })),
         react_1.default.createElement("span", { className: "navds-switch__track" },
-            react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(__1.Loader, { size: "xsmall", "aria-live": "polite" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
+            react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading ? (react_1.default.createElement(loader_1.Loader, { size: "xsmall", "aria-live": "polite" })) : checked ? (react_1.default.createElement(SelectedIcon, null)) : null)),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
             react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-switch__content", {
                     "navds-sr-only": hideLabel,
                     "navds-switch--with-description": !!description && !hideLabel,
                 }) },
-                react_1.default.createElement(__1.BodyShort, { as: "div", size: size, className: "navds-switch__label" },
+                react_1.default.createElement(typography_1.BodyShort, { as: "div", size: size, className: "navds-switch__label" },
                     react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: false }),
                     children),
-                description && (react_1.default.createElement(__1.BodyShort, { size: size, as: "div", className: "navds-form-field__subdescription navds-switch__description" }, description))))));
+                description && (react_1.default.createElement(typography_1.BodyShort, { size: size, as: "div", className: "navds-form-field__subdescription navds-switch__description" }, description))))));
 });
 exports.default = exports.Switch;

package/cjs/form/TextField.js

@@ -40,7 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
+const typography_1 = require("../typography");
+const util_1 = require("../util");
 const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
 const useFormField_1 = require("./useFormField");
 /**
@@ -64,15 +65,15 @@ exports.TextField = (0, react_1.forwardRef)((props, ref) => {
             "navds-form-field--readonly": readOnly,
             "navds-text-field--readonly": readOnly,
         }) },
-        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
+        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,
             }) },
             react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly }),
             label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size, as: "div" }, description)),
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, readOnly: readOnly, className: (0, clsx_1.default)("navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize })),
-        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
+        react_1.default.createElement("input", Object.assign({}, (0, util_1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, readOnly: readOnly, className: (0, clsx_1.default)("navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize })),
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(typography_1.ErrorMessage, { size: size }, props.error)))));
 });
 exports.default = exports.TextField;

package/cjs/form/Textarea.js

@@ -40,10 +40,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Counter = exports.Textarea = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
+const typography_1 = require("../typography");
 const TextareaAutoSize_1 = __importDefault(require("../util/TextareaAutoSize"));
 const useFormField_1 = require("./useFormField");
 const ReadOnlyIcon_1 = require("./ReadOnlyIcon");
+const util_1 = require("../util");
 /**
  * A component that displays a textarea input field with a label.
  *
@@ -59,7 +60,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");
     const { label, className, description, maxLength, hideLabel = false, resize, i18n, readOnly } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize", "i18n", "readOnly"]);
-    const maxLengthId = (0, __1.useId)();
+    const maxLengthId = (0, util_1.useId)();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
     const [controlledValue, setControlledValue] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
     const getMinRows = () => {
@@ -79,16 +80,16 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
             "navds-textarea--error": hasError,
             "navds-textarea--resize": resize,
         }) },
-        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
+        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,
             }) },
             react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly }),
             label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size, as: "div" }, description)),
         react_1.default.createElement("div", { className: "navds-textarea__wrapper" },
-            react_1.default.createElement(TextareaAutoSize_1.default, Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
+            react_1.default.createElement(TextareaAutoSize_1.default, Object.assign({}, (0, util_1.omit)(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
                     ? props.onChange(e)
                     : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, readOnly: readOnly, className: (0, clsx_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
                     "navds-textarea--counter": hasMaxLength,
@@ -96,12 +97,12 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
             hasMaxLength && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { id: maxLengthId, className: "navds-sr-only" }, `Tekstområde med plass til ${maxLength} tegn.`),
                 react_1.default.createElement(exports.Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size, i18n: i18n })))),
-        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(typography_1.ErrorMessage, { size: size }, props.error)))));
 });
 const Counter = ({ maxLength, currentLength, size, i18n }) => {
     var _a, _b;
     const difference = maxLength - currentLength;
-    return (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-textarea__counter", {
+    return (react_1.default.createElement(typography_1.BodyShort, { className: (0, clsx_1.default)("navds-textarea__counter", {
             "navds-textarea__counter--error": difference < 0,
         }), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
         ? `${Math.abs(difference)} ${(_a = i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch) !== null && _a !== void 0 ? _a : "tegn for mye"}`

package/cjs/form/checkbox/Checkbox.js

@@ -31,8 +31,8 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../../typography");
 const util_1 = require("../../util");
-const useCheckbox_1 = __importDefault(require("./useCheckbox"));
 const ReadOnlyIcon_1 = require("../ReadOnlyIcon");
+const useCheckbox_1 = __importDefault(require("./useCheckbox"));
 exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, hasError, size, readOnly, nested } = (0, useCheckbox_1.default)(props);
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(props.className, "navds-checkbox", `navds-checkbox--${size}`, {

package/cjs/form/checkbox/CheckboxGroup.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroup = exports.CheckboxGroupContext = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("..");
+const react_1 = __importStar(require("react"));
+const Fieldset_1 = require("../Fieldset");
 exports.CheckboxGroupContext = (0, react_1.createContext)(null);
 /**
  * A component that allows users to select one or more options from a list.
@@ -60,7 +60,7 @@ exports.CheckboxGroupContext = (0, react_1.createContext)(null);
 exports.CheckboxGroup = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c;
     var { value, defaultValue, onChange = () => { }, children, className } = _a, rest = __rest(_a, ["value", "defaultValue", "onChange", "children", "className"]);
-    const fieldset = (0, react_1.useContext)(__1.FieldsetContext);
+    const fieldset = (0, react_1.useContext)(Fieldset_1.FieldsetContext);
     const [state, setState] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
     const toggleValue = (v) => {
         const newValue = value !== null && value !== void 0 ? value : state;
@@ -70,7 +70,7 @@ exports.CheckboxGroup = (0, react_1.forwardRef)((_a, ref) => {
         value === undefined && setState(newState);
         onChange(newState);
     };
-    return (react_1.default.createElement(__1.Fieldset, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-checkbox-group", `navds-checkbox-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 }),
+    return (react_1.default.createElement(Fieldset_1.Fieldset, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-checkbox-group", `navds-checkbox-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.CheckboxGroupContext.Provider, { value: {
                 value,
                 defaultValue,

package/cjs/form/checkbox/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/form/checkbox/useCheckbox.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const __1 = require("../..");
+const util_1 = require("../../util");
 const useFormField_1 = require("../useFormField");
 const CheckboxGroup_1 = require("./CheckboxGroup");
 /**
@@ -20,7 +20,7 @@ const CheckboxGroup_1 = require("./CheckboxGroup");
  */
 const useCheckbox = (props) => {
     const checkboxGroup = (0, react_1.useContext)(CheckboxGroup_1.CheckboxGroupContext);
-    const _a = (0, useFormField_1.useFormField)((0, __1.omit)(props, ["description", "children"]), "checkbox"), { inputProps, readOnly } = _a, rest = __rest(_a, ["inputProps", "readOnly"]);
+    const _a = (0, useFormField_1.useFormField)((0, util_1.omit)(props, ["description", "children"]), "checkbox"), { inputProps, readOnly } = _a, rest = __rest(_a, ["inputProps", "readOnly"]);
     if (checkboxGroup) {
         if (props.checked) {
             console.warn("`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead.");

package/cjs/form/combobox/Combobox.js

@@ -40,7 +40,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Combobox = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const __1 = require("../..");
 const ClearButton_1 = __importDefault(require("./ClearButton"));
 const FilteredOptions_1 = __importDefault(require("./FilteredOptions/FilteredOptions"));
 const filteredOptionsContext_1 = require("./FilteredOptions/filteredOptionsContext");
@@ -50,18 +49,20 @@ const selectedOptionsContext_1 = require("./SelectedOptions/selectedOptionsConte
 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");
 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 { currentOption, 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, __1.mergeRefs)([inputRef, ref]), [inputRef, ref]);
+    const mergedInputRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([inputRef, ref]), [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(__1.Label, { htmlFor: inputProps.id, size: size, className: (0, clsx_1.default)("navds-form-field__label", {
+        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,
             }) }, label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, clsx_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(typography_1.BodyShort, { as: "div", className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-combobox__wrapper" },
@@ -74,6 +75,6 @@ exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
                     value && clearButton && (react_1.default.createElement(ClearButton_1.default, { handleClear: clearInput, clearButtonLabel: clearButtonLabel, tabIndex: -1 })),
                     toggleListButton && (react_1.default.createElement(ToggleListButton_1.default, { toggleListButtonLabel: toggleListButtonLabel, ref: toggleListButtonRef })))),
             react_1.default.createElement(FilteredOptions_1.default, null)),
-        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(__1.ErrorMessage, { size: size }, error))));
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(typography_1.ErrorMessage, { size: size }, error))));
 });
 exports.default = exports.Combobox;

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

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("../../..");
 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 FilteredOptions = () => {
     const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isMouseLastUsedInputDevice, setIsMouseLastUsedInputDevice, isValueNew, setFilteredOptionsIndex, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
@@ -19,7 +20,7 @@ const FilteredOptions = () => {
             "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
-            react_1.default.createElement(__1.Loader, { "aria-label": "S\u00F8ker..." }))),
+            react_1.default.createElement(loader_1.Loader, { "aria-label": "S\u00F8ker..." }))),
         isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onMouseMove: () => {
                 if (filteredOptionsIndex !== -1) {
                     setFilteredOptionsIndex(-1);
@@ -33,10 +34,10 @@ const FilteredOptions = () => {
                 "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
             }), role: "option", "aria-selected": false },
             react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
-            react_1.default.createElement(__1.BodyShort, { size: size },
+            react_1.default.createElement(typography_1.BodyShort, { size: size },
                 "Legg til",
                 " ",
-                react_1.default.createElement(__1.Label, { as: "span", size: size },
+                react_1.default.createElement(typography_1.Label, { as: "span", size: size },
                     "\u201C",
                     value,
                     "\u201D")))),
@@ -54,7 +55,7 @@ const FilteredOptions = () => {
                 if (!isMultiSelect && !selectedOptions.includes(option))
                     toggleIsListOpen(false);
             }, role: "option", "aria-selected": selectedOptions.includes(option) },
-            react_1.default.createElement(__1.BodyShort, { size: size }, option),
+            react_1.default.createElement(typography_1.BodyShort, { size: size }, option),
             selectedOptions.includes(option) && react_1.default.createElement(aksel_icons_1.CheckmarkIcon, null))))));
 };
 exports.default = FilteredOptions;

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

@@ -37,7 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const __1 = require("../../..");
+const util_1 = require("../../../util");
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
@@ -147,6 +147,6 @@ const Input = (0, react_1.forwardRef)((_a, ref) => {
     const onBlur = () => {
         setFilteredOptionsIndex(-1);
     };
-    return (react_1.default.createElement("input", Object.assign({}, rest, (0, __1.omit)(inputProps, ["aria-invalid"]), { ref: ref, value: value, onChange: onChangeHandler, type: "text", role: "combobox", onBlur: onBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": `${inputProps.id}-filtered-options`, "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, "aria-invalid": inputProps["aria-invalid"], className: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
+    return (react_1.default.createElement("input", Object.assign({}, rest, (0, util_1.omit)(inputProps, ["aria-invalid"]), { ref: ref, value: value, onChange: onChangeHandler, type: "text", role: "combobox", onBlur: onBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, "aria-controls": `${inputProps.id}-filtered-options`, "aria-expanded": !!isListOpen, autoComplete: "off", "aria-autocomplete": shouldAutocomplete ? "both" : "list", "aria-activedescendant": activeDecendantId, "aria-describedby": ariaDescribedBy, "aria-invalid": inputProps["aria-invalid"], className: (0, clsx_1.default)(inputClassName, "navds-combobox__input", "navds-body-short", `navds-body-${size}`) })));
 });
 exports.default = Input;

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

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const __1 = require("../../..");
+const chips_1 = require("../../../chips");
 const selectedOptionsContext_1 = require("./selectedOptionsContext");
 const inputContext_1 = require("../Input/inputContext");
 const Option = ({ option }) => {
@@ -18,10 +18,10 @@ const Option = ({ option }) => {
     if (!isMultiSelect) {
         return (react_1.default.createElement("div", { className: "navds-combobox__selected-options--no-bg" }, option));
     }
-    return react_1.default.createElement(__1.Chips.Removable, { onClick: onClick }, option);
+    return react_1.default.createElement(chips_1.Chips.Removable, { onClick: onClick }, option);
 };
 const SelectedOptions = ({ selectedOptions = [], size, children, }) => {
-    return (react_1.default.createElement(__1.Chips, { className: "navds-combobox__selected-options", size: size },
+    return (react_1.default.createElement(chips_1.Chips, { className: "navds-combobox__selected-options", size: size },
         selectedOptions.length
             ? selectedOptions.map((option, i) => (react_1.default.createElement(Option, { key: option + i, option: option })))
             : [],

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

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorSummary = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("../..");
+const typography_1 = require("../../typography");
 const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
 const util_1 = require("../../util");
 /**
@@ -65,8 +65,8 @@ 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)();
     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(__1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: headingId }, heading),
-        react_1.default.createElement(__1.BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, react_1.default.Children.map(children, (child) => {
+        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) => {
             return react_1.default.createElement("li", { key: child === null || child === void 0 ? void 0 : child.toString() }, child);
         }))));
 });