@navikt/ds-react 5.6.4 → 5.7.0

package/cjs/form/radio/RadioGroup.js

@@ -38,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroup = exports.RadioGroupContext = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("..");
-const __2 = require("../..");
+const react_1 = __importStar(require("react"));
+const util_1 = require("../../util");
+const Fieldset_1 = require("../Fieldset");
 exports.RadioGroupContext = react_1.default.createContext(null);
 /**
  * Form radio group
@@ -56,9 +56,9 @@ exports.RadioGroupContext = react_1.default.createContext(null);
 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)(__1.FieldsetContext);
-    const nameId = (0, __2.useId)();
-    return (react_1.default.createElement(__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 }),
+    const fieldset = (0, react_1.useContext)(Fieldset_1.FieldsetContext);
+    const nameId = (0, util_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}`,
                 defaultValue,

package/cjs/form/radio/types.js

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

package/cjs/form/radio/useRadio.js

@@ -13,15 +13,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRadio = void 0;
 const react_1 = require("react");
+const util_1 = require("../../util");
 const useFormField_1 = require("../useFormField");
 const RadioGroup_1 = require("./RadioGroup");
-const __1 = require("../..");
 /**
  * Handles props for Radios in context with Fieldset and RadioGroup
  */
 const useRadio = (props) => {
     const radioGroup = (0, react_1.useContext)(RadioGroup_1.RadioGroupContext);
-    const _a = (0, useFormField_1.useFormField)((0, __1.omit)(props, ["description"]), "radio"), { inputProps, readOnly } = _a, rest = __rest(_a, ["inputProps", "readOnly"]);
+    const _a = (0, useFormField_1.useFormField)((0, util_1.omit)(props, ["description"]), "radio"), { inputProps, readOnly } = _a, rest = __rest(_a, ["inputProps", "readOnly"]);
     if (!radioGroup) {
         console.warn("<Radio> must be used inside <RadioGroup>.");
     }

package/cjs/form/search/Search.js

@@ -37,14 +37,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Search = exports.SearchContext = void 0;
+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 __1 = require("../..");
+const typography_1 = require("../../typography");
+const util_1 = require("../../util");
 const useFormField_1 = require("../useFormField");
 const SearchButton_1 = __importDefault(require("./SearchButton"));
-exports.SearchContext = react_1.default.createContext(null);
+const context_1 = require("./context");
 /**
  * A component that displays a search input field.
  *
@@ -62,7 +63,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, __1.mergeRefs)([searchRef, ref]), [ref]);
+    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([searchRef, ref]), [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);
@@ -93,26 +94,26 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
             "navds-search--disabled": !!inputProps.disabled,
             "navds-search--with-size": !!htmlSize,
         }) },
-        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, { 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-search__wrapper" },
             react_1.default.createElement("div", { className: "navds-search__wrapper-inner" },
                 variant === "simple" && (react_1.default.createElement(aksel_icons_1.MagnifyingGlassIcon, { "aria-hidden": true, className: "navds-search__search-icon" })),
-                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["error", "errorId", "size", "readOnly"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, clsx_1.default)(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) }, (htmlSize ? { size: Number(htmlSize) } : {}))),
+                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, util_1.omit)(rest, ["error", "errorId", "size", "readOnly"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, clsx_1.default)(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) }, (htmlSize ? { size: Number(htmlSize) } : {}))),
                 (value !== null && value !== void 0 ? value : internalValue) && clearButton && (react_1.default.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
                     react_1.default.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
                     react_1.default.createElement(aksel_icons_1.XMarkIcon, { "aria-hidden": true })))),
-            react_1.default.createElement(exports.SearchContext.Provider, { value: {
+            react_1.default.createElement(context_1.SearchContext.Provider, { value: {
                     size,
                     disabled: inputProps.disabled,
                     variant,
                     handleClick,
                 } }, children ? children : variant !== "simple" && react_1.default.createElement(SearchButton_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 }, 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.Search.Button = SearchButton_1.default;
 exports.default = exports.Search;

package/cjs/form/search/SearchButton.js

@@ -37,21 +37,21 @@ 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 __1 = require("../..");
-const Search_1 = require("./Search");
-const aksel_icons_1 = require("@navikt/aksel-icons");
+const button_1 = require("../../button");
+const context_1 = require("./context");
 const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { className, children, disabled, onClick } = _a, rest = __rest(_a, ["className", "children", "disabled", "onClick"]);
-    const context = (0, react_1.useContext)(Search_1.SearchContext);
+    const context = (0, react_1.useContext)(context_1.SearchContext);
     if (context === null) {
         console.warn("<Search.Button> has to be wrapped in <Search />");
         return null;
     }
     const { size, variant, handleClick } = context;
-    return (react_1.default.createElement(__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) => {
+    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));

package/cjs/form/search/context.js

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

package/cjs/form/useFormField.js

@@ -4,18 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormField = void 0;
-const react_1 = require("react");
 const clsx_1 = __importDefault(require("clsx"));
-const index_1 = require("./index");
-const index_2 = require("../index");
+const react_1 = require("react");
+const util_1 = require("../util");
+const context_1 = require("./Fieldset/context");
 /**
  * Handles props and their state for various form-fields in context with Fieldset
  */
 const useFormField = (props, prefix) => {
     var _a, _b, _c;
     const { size, error, errorId: propErrorId } = props;
-    const fieldset = (0, react_1.useContext)(index_1.FieldsetContext);
-    const genId = (0, index_2.useId)();
+    const fieldset = (0, react_1.useContext)(context_1.FieldsetContext);
+    const genId = (0, util_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/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 __1 = require("..");
+const util_1 = require("../util");
 const DefaultIllustration = (_a) => {
     var { title, titleId: _titleId } = _a, props = __rest(_a, ["title", "titleId"]);
-    let titleId = (0, __1.useId)();
+    let titleId = (0, util_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

@@ -40,7 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpText = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
+const popover_1 = require("../popover");
+const util_1 = require("../util");
 const HelpTextIcon_1 = require("./HelpTextIcon");
 /**
  * A component that displays a help text button with a popover.
@@ -58,7 +59,7 @@ 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"]);
     const buttonRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([buttonRef, ref]), [ref]);
+    const mergedRef = (0, react_1.useMemo)(() => (0, util_1.mergeRefs)([buttonRef, ref]), [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) => {
@@ -67,7 +68,7 @@ exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
             }, 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(__1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
-            react_1.default.createElement(__1.Popover.Content, { className: "navds-body-short" }, children))));
+        react_1.default.createElement(popover_1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+            react_1.default.createElement(popover_1.Popover.Content, { className: "navds-body-short" }, children))));
 });
 exports.default = exports.HelpText;

package/cjs/link-panel/LinkPanel.js

@@ -39,11 +39,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelComponent = void 0;
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
 const clsx_1 = __importDefault(require("clsx"));
 const LinkPanelTitle_1 = require("./LinkPanelTitle");
 const LinkPanelDescription_1 = require("./LinkPanelDescription");
 const aksel_icons_1 = require("@navikt/aksel-icons");
+const panel_1 = require("../panel");
 /**
  * A component that displays a link panel.
  *
@@ -63,7 +63,7 @@ const aksel_icons_1 = require("@navikt/aksel-icons");
  */
 exports.LinkPanelComponent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as = "a", border = true, className } = _a, rest = __rest(_a, ["children", "as", "border", "className"]);
-    return (react_1.default.createElement(__1.Panel, Object.assign({}, rest, { as: as, border: border, ref: ref, className: (0, clsx_1.default)("navds-link-panel", className) }),
+    return (react_1.default.createElement(panel_1.Panel, Object.assign({}, rest, { as: as, border: border, ref: ref, className: (0, clsx_1.default)("navds-link-panel", className) }),
         react_1.default.createElement("div", { className: "navds-link-panel__content" }, children),
         react_1.default.createElement(aksel_icons_1.ChevronRightIcon, { className: "navds-link-panel__chevron", "aria-hidden": true })));
 });

package/cjs/link-panel/LinkPanelDescription.js

@@ -40,8 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelDescription = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("..");
+const typography_1 = require("../typography");
 exports.LinkPanelDescription = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement(__1.BodyLong, Object.assign({}, rest, { as: "div", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className) })));
+    return (react_1.default.createElement(typography_1.BodyLong, Object.assign({}, rest, { as: "div", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className) })));
 });

package/cjs/list/List.js

@@ -37,24 +37,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = exports.ListContext = void 0;
+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 ListItem_1 = require("./ListItem");
-exports.ListContext = (0, react_1.createContext)({
-    listType: "ul",
-    isNested: null,
-    size: "medium",
-});
+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 { isNested, size: _size } = (0, react_1.useContext)(exports.ListContext);
+    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(exports.ListContext.Provider, { value: {
+    return (react_1.default.createElement(context_1.ListContext.Provider, { value: {
             listType: ListTag,
             isNested: isNested === null ? false : true,
             size: listSize,

package/cjs/list/ListItem.js

@@ -41,10 +41,10 @@ exports.ListItem = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
-const List_1 = require("./List");
+const context_1 = require("./context");
 exports.ListItem = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, title, icon } = _a, rest = __rest(_a, ["className", "children", "title", "icon"]);
-    const { listType, size } = (0, react_1.useContext)(List_1.ListContext);
+    const { listType, size } = (0, react_1.useContext)(context_1.ListContext);
     if (listType === "ol" && icon) {
         console.warn("<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.");
     }

package/cjs/list/context.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListContext = void 0;
+const react_1 = require("react");
+exports.ListContext = (0, react_1.createContext)({
+    listType: "ul",
+    isNested: null,
+    size: "medium",
+});

package/cjs/list/types.js

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

package/cjs/loader/Loader.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("..");
+const react_1 = __importStar(require("react"));
+const util_1 = require("../util");
 /**
  * A component that displays a loading spinner.
  *
@@ -54,10 +54,10 @@ const __1 = require("..");
  */
 exports.Loader = (0, react_1.forwardRef)((_a, ref) => {
     var { className, size = "medium", title = "venter...", transparent = false, variant = "neutral", id } = _a, rest = __rest(_a, ["className", "size", "title", "transparent", "variant", "id"]);
-    const internalId = (0, __1.useId)();
+    const internalId = (0, util_1.useId)();
     return (react_1.default.createElement("svg", Object.assign({ "aria-labelledby": id !== null && id !== void 0 ? id : `loader-${internalId}`, ref: ref, className: (0, clsx_1.default)("navds-loader", className, `navds-loader--${size}`, `navds-loader--${variant}`, {
             "navds-loader--transparent": transparent,
-        }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, (0, __1.omit)(rest, ["children"])),
+        }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, (0, util_1.omit)(rest, ["children"])),
         react_1.default.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
         react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none" }),
         react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", fill: "none", strokeDasharray: "50 155" })));

package/cjs/modal/Modal.js

@@ -38,17 +38,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
-const react_2 = require("@floating-ui/react");
+const react_1 = require("@floating-ui/react");
 const clsx_1 = __importDefault(require("clsx"));
-const dialog_polyfill_1 = __importStar(require("./dialog-polyfill"));
-const __1 = require("..");
+const react_2 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const provider_1 = require("../provider");
+const typography_1 = require("../typography");
+const util_1 = require("../util");
 const ModalBody_1 = __importDefault(require("./ModalBody"));
-const ModalHeader_1 = __importDefault(require("./ModalHeader"));
+const ModalContext_1 = require("./ModalContext");
 const ModalFooter_1 = __importDefault(require("./ModalFooter"));
+const ModalHeader_1 = __importDefault(require("./ModalHeader"));
 const ModalUtils_1 = require("./ModalUtils");
-const ModalContext_1 = require("./ModalContext");
+const dialog_polyfill_1 = __importStar(require("./dialog-polyfill"));
 /**
  * A component that displays a modal dialog.
  *
@@ -95,18 +97,18 @@ const ModalContext_1 = require("./ModalContext");
  * </Modal>
  * ```
  */
-exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
+exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
     var _b, _c;
     var { header, children, open, onBeforeClose, onCancel, width, portal, className, "aria-labelledby": ariaLabelledby, style } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "width", "portal", "className", "aria-labelledby", "style"]);
-    const modalRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([modalRef, ref]), [ref]);
-    const ariaLabelId = (0, __1.useId)();
-    const rootElement = (_b = (0, __1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
-    const portalNode = (0, react_2.useFloatingPortalNode)({ root: rootElement });
-    if ((0, react_1.useContext)(ModalContext_1.ModalContext)) {
+    const modalRef = (0, react_2.useRef)(null);
+    const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([modalRef, ref]), [ref]);
+    const ariaLabelId = (0, util_1.useId)();
+    const rootElement = (_b = (0, provider_1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
+    const portalNode = (0, react_1.useFloatingPortalNode)({ root: rootElement });
+    if ((0, react_2.useContext)(ModalContext_1.ModalContext)) {
         console.error("Modals should not be nested");
     }
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         // If using portal, modalRef.current will not be set before portalNode is set.
         // If not using portal, modalRef.current is available first.
         // We check both to avoid activating polyfill twice when not using portal.
@@ -114,7 +116,7 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
             dialog_polyfill_1.default.registerDialog(modalRef.current);
         }
     }, [modalRef, portalNode]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         // We need to have this in a useEffect so that the content renders before the modal is displayed,
         // and in case `open` is true initially.
         // We need to check both modalRef.current and portalNode to make sure the polyfill has been activated.
@@ -129,7 +131,7 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
     }, [modalRef, portalNode, open]);
     (0, ModalUtils_1.useBodyScrollLock)(modalRef, portalNode);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    const component = (react_1.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className, {
+    const component = (react_2.default.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className, {
             "navds-modal--polyfilled": dialog_polyfill_1.needPolyfill,
             "navds-modal--autowidth": !width,
             [`navds-modal--${width}`]: isWidthPreset,
@@ -143,13 +145,13 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
         }, "aria-labelledby": !ariaLabelledby && !rest["aria-label"] && header
             ? ariaLabelId
             : ariaLabelledby }),
-        react_1.default.createElement(ModalContext_1.ModalContext.Provider, { value: {
+        react_2.default.createElement(ModalContext_1.ModalContext.Provider, { value: {
                 closeHandler: (0, ModalUtils_1.getCloseHandler)(modalRef, header, onBeforeClose),
             } },
-            header && (react_1.default.createElement(ModalHeader_1.default, null,
-                header.label && (react_1.default.createElement(__1.Detail, { className: "navds-modal__label" }, header.label)),
-                react_1.default.createElement(__1.Heading, { size: (_c = header.size) !== null && _c !== void 0 ? _c : "medium", level: "1", id: ariaLabelId },
-                    react_1.default.createElement("span", { className: "navds-modal__header-icon" }, header.icon),
+            header && (react_2.default.createElement(ModalHeader_1.default, null,
+                header.label && (react_2.default.createElement(typography_1.Detail, { className: "navds-modal__label" }, header.label)),
+                react_2.default.createElement(typography_1.Heading, { size: (_c = header.size) !== null && _c !== void 0 ? _c : "medium", level: "1", id: ariaLabelId },
+                    react_2.default.createElement("span", { className: "navds-modal__header-icon" }, header.icon),
                     header.heading))),
             children)));
     if (portal) {

package/cjs/modal/types.js

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

package/cjs/pagination/Pagination.js

@@ -41,7 +41,7 @@ exports.Pagination = exports.getSteps = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
-const __1 = require("..");
+const typography_1 = require("../typography");
 const PaginationItem_1 = __importDefault(require("./PaginationItem"));
 const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
     var _a, _b;
@@ -108,13 +108,13 @@ exports.Pagination = (0, react_1.forwardRef)((_a, ref) => {
                         "navds-pagination--prev-next--with-text": prevNextTexts,
                     }), disabled: page === 1, onClick: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page - 1), page: page - 1, size: size, icon: react_1.default.createElement(aksel_icons_1.ChevronLeftIcon, Object.assign({ className: "navds-pagination__prev-next-icon" }, (prevNextTexts
                         ? { "aria-hidden": true }
-                        : { title: "Forrige" }))) }, prevNextTexts && (react_1.default.createElement(__1.BodyShort, { size: size === "xsmall" ? "small" : size, className: "navds-pagination__prev-text" }, "Forrige")))),
+                        : { title: "Forrige" }))) }, prevNextTexts && (react_1.default.createElement(typography_1.BodyShort, { size: size === "xsmall" ? "small" : size, className: "navds-pagination__prev-text" }, "Forrige")))),
             (0, exports.getSteps)({ page, count, siblingCount, boundaryCount }).map((step, i) => {
                 const n = Number(step);
                 return isNaN(n) ? (react_1.default.createElement("li", { className: "navds-pagination__ellipsis", key: `${step}${i}` },
-                    react_1.default.createElement(__1.BodyShort, { size: size === "xsmall" ? "small" : size }, "..."))) : (react_1.default.createElement("li", { key: step },
+                    react_1.default.createElement(typography_1.BodyShort, { size: size === "xsmall" ? "small" : size }, "..."))) : (react_1.default.createElement("li", { key: step },
                     react_1.default.createElement(Item, { onClick: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(n), selected: page === n, page: n, size: size },
-                        react_1.default.createElement(__1.BodyShort, { size: size === "xsmall" ? "small" : size }, n))));
+                        react_1.default.createElement(typography_1.BodyShort, { size: size === "xsmall" ? "small" : size }, n))));
             }),
             react_1.default.createElement("li", null,
                 react_1.default.createElement(Item, { className: (0, clsx_1.default)("navds-pagination__prev-next", {
@@ -122,7 +122,7 @@ exports.Pagination = (0, react_1.forwardRef)((_a, ref) => {
                         "navds-pagination--prev-next--with-text": prevNextTexts,
                     }), disabled: page === count, onClick: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page + 1), page: page + 1, size: size, icon: react_1.default.createElement(aksel_icons_1.ChevronRightIcon, Object.assign({ className: "navds-pagination__prev-next-icon" }, (prevNextTexts
                         ? { "aria-hidden": true }
-                        : { title: "Neste" }))), iconPosition: "right" }, prevNextTexts && (react_1.default.createElement(__1.BodyShort, { size: size === "xsmall" ? "small" : size, className: "navds-pagination__next-text" }, "Neste")))))));
+                        : { title: "Neste" }))), iconPosition: "right" }, prevNextTexts && (react_1.default.createElement(typography_1.BodyShort, { size: size === "xsmall" ? "small" : size, className: "navds-pagination__next-text" }, "Neste")))))));
 });
 exports.Pagination.Item = PaginationItem_1.default;
 exports.default = exports.Pagination;

package/cjs/pagination/PaginationItem.js

@@ -40,10 +40,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const __1 = require("..");
+const button_1 = require("../button");
 exports.Item = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as: Component = "button", selected = false, className } = _a, rest = __rest(_a, ["children", "as", "selected", "className"]);
-    return (react_1.default.createElement(__1.Button, Object.assign({ as: Component, variant: "tertiary", "aria-current": selected, ref: ref, className: (0, clsx_1.default)("navds-pagination__item", className, {
+    return (react_1.default.createElement(button_1.Button, Object.assign({ as: Component, variant: "tertiary", "aria-current": selected, ref: ref, className: (0, clsx_1.default)("navds-pagination__item", className, {
             "navds-pagination__item--selected": selected,
         }) }, (Component === "button" && { type: "button" }), rest), children));
 });

package/cjs/popover/Popover.js

@@ -41,10 +41,9 @@ exports.Popover = void 0;
 const react_1 = require("@floating-ui/react");
 const clsx_1 = __importDefault(require("clsx"));
 const react_2 = __importStar(require("react"));
-const __1 = require("..");
+const ModalContext_1 = require("../modal/ModalContext");
 const util_1 = require("../util");
 const PopoverContent_1 = __importDefault(require("./PopoverContent"));
-const ModalContext_1 = require("../modal/ModalContext");
 /**
  * A component that displays a popover.
  *
@@ -66,7 +65,7 @@ const ModalContext_1 = require("../modal/ModalContext");
  * ```
  */
 exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
-    var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy, bubbleEscape = false } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy", "bubbleEscape"]);
+    var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy, bubbleEscape = false, flip: _flip = true } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy", "bubbleEscape", "flip"]);
     const arrowRef = (0, react_2.useRef)(null);
     const isInModal = (0, react_2.useContext)(ModalContext_1.ModalContext) !== null;
     const chosenStrategy = userStrategy !== null && userStrategy !== void 0 ? userStrategy : (isInModal ? "fixed" : "absolute");
@@ -77,7 +76,7 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
         onOpenChange: () => onClose(),
         middleware: [
             (0, react_1.offset)(offset !== null && offset !== void 0 ? offset : (arrow ? 16 : 4)),
-            (0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            _flip && (0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
             (0, react_1.shift)({ padding: 12 }),
             (0, react_1.arrow)({ element: arrowRef, padding: 8 }),
         ],
@@ -93,7 +92,7 @@ exports.Popover = (0, react_2.forwardRef)((_a, ref) => {
     (0, util_1.useClientLayoutEffect)(() => {
         refs.setReference(anchorEl);
     }, [anchorEl]);
-    const floatingRef = (0, react_2.useMemo)(() => (0, __1.mergeRefs)([refs.setFloating, ref]), [refs.setFloating, ref]);
+    const floatingRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setFloating, ref]), [refs.setFloating, ref]);
     (0, util_1.useClientLayoutEffect)(() => {
         if (!refs.reference.current || !refs.floating.current || !open)
             return;

package/cjs/stepper/Step.js

@@ -40,13 +40,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Step = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const __1 = require("..");
-const Stepper_1 = require("./Stepper");
+const typography_1 = require("../typography");
+const context_1 = require("./context");
 const CompletedIcon = () => (react_1.default.createElement("svg", { width: "14", height: "10", viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Fullf\u00F8rt" },
     react_1.default.createElement("path", { d: "M4.93563 6.41478L11.3755 0.404669C11.9796 -0.160351 12.9294 -0.130672 13.4959 0.47478C14.0624 1.08027 14.0299 2.03007 13.4249 2.59621L5.92151 9.59934C5.64138 9.85904 5.27598 10 4.90064 10C4.5069 10 4.12756 9.84621 3.83953 9.56111L1.33953 7.06111C0.75401 6.47558 0.75401 5.52542 1.33953 4.93989C1.92506 4.35437 2.87522 4.35437 3.46075 4.93989L4.93563 6.41478Z", fill: "currentColor" })));
 exports.Step = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, as: Component = "a", unsafe_index = 0, completed = false, interactive } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index", "completed", "interactive"]);
-    const context = (0, react_1.useContext)(Stepper_1.StepperContext);
+    const context = (0, react_1.useContext)(context_1.StepperContext);
     if (context === null) {
         console.error("<Stepper.Step> has to be used within <Stepper>");
         return null;
@@ -65,7 +65,7 @@ exports.Step = (0, react_1.forwardRef)((_a, ref) => {
             (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         } }),
         completed ? (react_1.default.createElement("span", { className: "navds-stepper__circle navds-stepper__circle--success" },
-            react_1.default.createElement(CompletedIcon, null))) : (react_1.default.createElement(__1.Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1)),
-        react_1.default.createElement(__1.Label, { as: "span", className: "navds-stepper__content" }, children)));
+            react_1.default.createElement(CompletedIcon, null))) : (react_1.default.createElement(typography_1.Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1)),
+        react_1.default.createElement(typography_1.Label, { as: "span", className: "navds-stepper__content" }, children)));
 });
 exports.default = exports.Step;

package/cjs/stepper/Stepper.js

@@ -37,11 +37,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Stepper = exports.StepperContext = void 0;
-const react_1 = __importStar(require("react"));
+exports.Stepper = void 0;
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const Step_1 = __importDefault(require("./Step"));
-exports.StepperContext = (0, react_1.createContext)(null);
+const context_1 = require("./context");
 /**
  * A component that displays a stepper with clickable steps.
  *
@@ -70,7 +70,7 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, activeStep, orientation = "vertical", onStepChange = () => { }, interactive = true } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange", "interactive"]);
     activeStep = activeStep - 1;
     return (react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-stepper", orientation === "horizontal" ? "navds-stepper--horizontal" : "", className) }),
-        react_1.default.createElement(exports.StepperContext.Provider, { value: {
+        react_1.default.createElement(context_1.StepperContext.Provider, { value: {
                 activeStep,
                 onStepChange,
                 lastIndex: react_1.default.Children.count(children),

package/cjs/stepper/context.js

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