@navikt/ds-react 0.19.17 → 1.0.0-rc.2

package/cjs/form/search/Search.js

@@ -39,9 +39,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Search = exports.SearchContext = void 0;
 const ds_icons_1 = require("@navikt/ds-icons");
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("../..");
 const useFormField_1 = require("../useFormField");
 const SearchButton_1 = __importDefault(require("./SearchButton"));
@@ -50,7 +49,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 } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange"]);
     const searchRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_merge_refs_1.default)([searchRef, ref]);
+    const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([searchRef, ref]), [ref]);
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
     const handleChange = (0, react_1.useCallback)((v) => {
@@ -69,20 +68,20 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
             handleClear({ trigger: "Escape", event: e });
         }
     }, [handleClear]), wrapperRef);
-    return (react_1.default.createElement("div", { ref: setWrapperRef, className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+    return (react_1.default.createElement("div", { ref: setWrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
         }) },
-        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-form-field__label", {
+        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", 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, classnames_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(__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-search__wrapper" },
             react_1.default.createElement("div", { className: "navds-search__wrapper-inner" },
                 variant === "simple" && (react_1.default.createElement(ds_icons_1.Search, { "aria-hidden": true, className: "navds-search__search-icon" })),
-                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, classnames_1.default)(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) })),
+                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["error", "errorId", "size"]), 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}`) })),
                 (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(ds_icons_1.Close, { "aria-hidden": true })))),

package/cjs/form/search/SearchButton.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const ds_icons_1 = require("@navikt/ds-icons");
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("../..");
 const Search_1 = require("./Search");
@@ -51,7 +51,7 @@ const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
         return null;
     }
     const { size, variant } = context;
-    return (react_1.default.createElement(__1.Button, Object.assign({ type: "submit" }, rest, { ref: ref, size: size, variant: variant === "secondary" ? "secondary" : "primary", className: (0, classnames_1.default)("navds-search__button-search", className), disabled: (_b = context === null || context === void 0 ? void 0 : context.disabled) !== null && _b !== void 0 ? _b : disabled }),
+    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 }),
         react_1.default.createElement(ds_icons_1.Search, { "aria-hidden": true }),
         children ? children : react_1.default.createElement("span", { className: "navds-sr-only" }, "S\u00F8k")));
 });

package/cjs/form/useFormField.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormField = void 0;
 const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const index_1 = require("./index");
 const index_2 = require("../index");
 /**
@@ -31,7 +31,7 @@ const useFormField = (props, prefix) => {
         inputProps: {
             id,
             "aria-invalid": hasError,
-            "aria-describedby": (0, classnames_1.default)(props["aria-describedby"], {
+            "aria-describedby": (0, clsx_1.default)(props["aria-describedby"], {
                 [inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description) && typeof (props === null || props === void 0 ? void 0 : props.description) === "string",
                 [errorId]: showErrorMsg,
                 [(_c = fieldset === null || fieldset === void 0 ? void 0 : fieldset.errorId) !== null && _c !== void 0 ? _c : ""]: hasError && !!(fieldset === null || fieldset === void 0 ? void 0 : fieldset.error),

package/cjs/grid/Cell.js

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Cell = (0, react_1.forwardRef)((_a, ref) => {
     var { children, xs, sm, md, lg, className } = _a, rest = __rest(_a, ["children", "xs", "sm", "md", "lg", "className"]);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-grid__cell", xs && `navds-grid__cell--xs-${xs}`, sm && `navds-grid__cell--sm-${sm}`, md && `navds-grid__cell--md-${md}`, lg && `navds-grid__cell--lg-${lg}`, className) }), children));
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-grid__cell", xs && `navds-grid__cell--xs-${xs}`, sm && `navds-grid__cell--sm-${sm}`, md && `navds-grid__cell--md-${md}`, lg && `navds-grid__cell--lg-${lg}`, className) }), children));
 });
 exports.default = exports.Cell;

package/cjs/grid/ContentContainer.js

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentContainer = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 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, classnames_1.default)("navds-content-container", className) }, rest)));
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-content-container", className) }, rest)));
 });
 exports.default = exports.ContentContainer;

package/cjs/grid/Grid.js

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

package/cjs/guide-panel/Guide.js

@@ -38,11 +38,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const Illustration_1 = require("./Illustration");
 const Guide = (0, react_1.forwardRef)((_a, ref) => {
     var { className, illustration, size = "medium", color } = _a, rest = __rest(_a, ["className", "illustration", "size", "color"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-guide", className) }, rest),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-guide__illustration", `navds-guide__illustration--${size}`) }, illustration !== null && illustration !== void 0 ? illustration : react_1.default.createElement(Illustration_1.DefaultIllustration, null))));
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-guide", className) }, rest),
+        react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-guide__illustration", `navds-guide__illustration--${size}`) }, illustration !== null && illustration !== void 0 ? illustration : react_1.default.createElement(Illustration_1.DefaultIllustration, null))));
 });
 exports.default = Guide;

package/cjs/guide-panel/GuidePanel.js

@@ -40,10 +40,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GuidePanel = void 0;
 const react_1 = __importStar(require("react"));
 const Guide_1 = __importDefault(require("./Guide"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.GuidePanel = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, illustration, poster = false, color } = _a, rest = __rest(_a, ["children", "className", "illustration", "poster", "color"]);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-guide-panel", className, {
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-guide-panel", className, {
             "navds-guide-panel--poster": poster,
         }) }),
         react_1.default.createElement(Guide_1.default, { size: poster ? "medium" : "small", illustration: illustration }),

package/cjs/help-text/HelpText.js

@@ -39,21 +39,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HelpText = void 0;
 const ds_icons_1 = require("@navikt/ds-icons");
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("..");
 exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
+    const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([buttonRef, ref]), [ref]);
     const [open, setOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { className: "navds-help-text" },
         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, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
-            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", title: title })),
+            }, className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
+            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", title: title }),
+            react_1.default.createElement(ds_icons_1.HelptextFilled, { className: "navds-help-text__icon navds-help-text__icon--filled", 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))));
 });

package/cjs/index.js

@@ -24,14 +24,12 @@ __exportStar(require("./guide-panel"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./link-panel"), exports);
 __exportStar(require("./loader"), exports);
-__exportStar(require("./menu"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./pagination"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./read-more"), exports);
-__exportStar(require("./speech-bubble"), exports);
-__exportStar(require("./step-indicator"), exports);
+__exportStar(require("./chat"), exports);
 __exportStar(require("./stepper"), exports);
 __exportStar(require("./tag"), exports);
 __exportStar(require("./toggle-group"), exports);
@@ -40,6 +38,3 @@ __exportStar(require("./tabs"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
-/* Navno spesific packages */
-__exportStar(require("./card"), exports);
-__exportStar(require("./page-header"), exports);

package/cjs/link/Link.js

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

package/cjs/link-panel/LinkPanel.js

@@ -41,12 +41,12 @@ exports.LinkPanelComponent = void 0;
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const ds_icons_1 = require("@navikt/ds-icons");
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const LinkPanelTitle_1 = require("./LinkPanelTitle");
 const LinkPanelDescription_1 = require("./LinkPanelDescription");
 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, classnames_1.default)("navds-link-panel", 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) }),
         react_1.default.createElement("div", { className: "navds-link-panel__content" }, children),
         react_1.default.createElement(ds_icons_1.Next, { className: "navds-link-panel__chevron", "aria-hidden": true })));
 });

package/cjs/link-panel/LinkPanelDescription.js

@@ -39,9 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelDescription = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 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, classnames_1.default)("navds-link-panel__description", 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) })));
 });

package/cjs/link-panel/LinkPanelTitle.js

@@ -39,8 +39,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 classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 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, classnames_1.default)("navds-link-panel__title", "navds-heading", "navds-heading--medium", className) })));
+    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/loader/Loader.js

@@ -39,12 +39,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loader = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 exports.Loader = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, size = "medium", title = "venter...", transparent = false, variant = "neutral", id } = _a, rest = __rest(_a, ["children", "className", "size", "title", "transparent", "variant", "id"]);
     const internalId = (0, __1.useId)();
-    return (react_1.default.createElement("svg", Object.assign({ "aria-labelledby": id !== null && id !== void 0 ? id : `loader-${internalId}`, ref: ref, className: (0, classnames_1.default)("navds-loader", className, `navds-loader--${size}`, `navds-loader--${variant}`, {
+    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" }, rest),
         react_1.default.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),

package/cjs/modal/Modal.js

@@ -39,16 +39,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_modal_1 = __importDefault(require("react-modal"));
-const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const ds_icons_1 = require("@navikt/ds-icons");
 const __1 = require("..");
 const ModalContent_1 = __importDefault(require("./ModalContent"));
 exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
     var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label"]);
     const modalRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_merge_refs_1.default)([modalRef, ref]);
+    const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([modalRef, ref]), [ref]);
     const buttonRef = (0, react_1.useRef)(null);
     const onModalCloseRequest = (e) => {
         if (shouldCloseOnOverlayClick || e.type === "keydown") {
@@ -58,13 +57,13 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
             buttonRef.current.focus();
         }
     };
-    return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: (0, classnames_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
+    return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
             describedby: ariaDescribedBy,
             labelledby: ariaLabelledBy,
             modal: ariaModal,
         }, contentLabel: contentLabel }),
         children,
-        closeButton && (react_1.default.createElement(__1.Button, { className: (0, classnames_1.default)("navds-modal__button", {
+        closeButton && (react_1.default.createElement(__1.Button, { className: (0, clsx_1.default)("navds-modal__button", {
                 "navds-modal__button--shake": shouldCloseOnOverlayClick,
             }), size: "small", variant: "tertiary", ref: buttonRef, onClick: onClose },
             react_1.default.createElement(ds_icons_1.Close, { title: "Lukk modalvindu" })))));

package/cjs/modal/ModalContent.js

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

package/cjs/pagination/Pagination.js

@@ -39,9 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = exports.getSteps = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const ds_icons_1 = require("@navikt/ds-icons");
 const __1 = require("..");
+const PaginationItem_1 = __importDefault(require("./PaginationItem"));
 const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
     var _a, _b;
     const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
@@ -65,7 +66,7 @@ const getSteps = ({ page, count, boundaryCount = 1, siblingCount = 1, }) => {
 };
 exports.getSteps = getSteps;
 exports.Pagination = (0, react_1.forwardRef)((_a, ref) => {
-    var { page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false } = _a, rest = __rest(_a, ["page", "onPageChange", "count", "boundaryCount", "siblingCount", "className", "size", "prevNextTexts"]);
+    var { page, onPageChange, count, boundaryCount = 1, siblingCount = 1, className, size = "medium", prevNextTexts = false, renderItem: Item = (item) => (react_1.default.createElement(PaginationItem_1.default, Object.assign({}, item))) } = _a, rest = __rest(_a, ["page", "onPageChange", "count", "boundaryCount", "siblingCount", "className", "size", "prevNextTexts", "renderItem"]);
     if (page < 1) {
         console.error("page cannot be less than 1");
         return null;
@@ -82,33 +83,27 @@ exports.Pagination = (0, react_1.forwardRef)((_a, ref) => {
         console.error("siblingCount cannot be less than 0");
         return null;
     }
-    return (react_1.default.createElement("nav", Object.assign({ ref: ref }, rest, { className: (0, classnames_1.default)("navds-pagination", `navds-pagination--${size}`, className) }),
-        prevNextTexts && (react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
-                "navds-pagination--invisible": page === 1,
-            }), disabled: page === 1, onClick: () => onPageChange(page - 1) },
-            react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", role: "presentation" }),
-            react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__prev-text" }, "Forrige"))),
+    return (react_1.default.createElement("nav", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)("navds-pagination", `navds-pagination--${size}`, className) }),
         react_1.default.createElement("ul", { className: "navds-pagination__list" },
-            !prevNextTexts && (react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
+            react_1.default.createElement("li", null,
+                react_1.default.createElement(Item, { className: (0, clsx_1.default)("navds-pagination__prev-next", {
                         "navds-pagination--invisible": page === 1,
-                    }), disabled: page === 1, onClick: () => onPageChange(page - 1) },
-                    react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", title: "Forrige" })))),
+                    }), disabled: page === 1, onClick: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page - 1), page: page - 1, size: size },
+                    react_1.default.createElement(ds_icons_1.Back, { className: "navds-pagination__prev-next-icon", title: "Forrige" }),
+                    prevNextTexts && (react_1.default.createElement(__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 }, "..."))) : (react_1.default.createElement("li", { key: step },
-                    react_1.default.createElement(__1.BodyShort, { size: size, as: "button", className: "navds-pagination__item", onClick: () => onPageChange(n), "aria-current": page === n ? true : undefined }, n)));
+                    react_1.default.createElement(__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))));
             }),
-            !prevNextTexts && (react_1.default.createElement("li", null,
-                react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
+            react_1.default.createElement("li", null,
+                react_1.default.createElement(Item, { className: (0, clsx_1.default)("navds-pagination__prev-next", {
                         "navds-pagination--invisible": page === count,
-                    }), disabled: page === count, onClick: () => onPageChange(page + 1) },
-                    react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", title: "Neste" }))))),
-        prevNextTexts && (react_1.default.createElement("button", { className: (0, classnames_1.default)("navds-pagination__prev-next", {
-                "navds-pagination--invisible": page === count,
-            }), disabled: page === count, onClick: () => onPageChange(page + 1) },
-            react_1.default.createElement(__1.BodyShort, { size: size, className: "navds-pagination__next-text" }, "Neste"),
-            react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", role: "presentation" })))));
+                    }), disabled: page === count, onClick: () => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page + 1), page: page + 1, size: size },
+                    prevNextTexts && (react_1.default.createElement(__1.BodyShort, { size: size === "xsmall" ? "small" : size, className: "navds-pagination__next-text" }, "Neste")),
+                    react_1.default.createElement(ds_icons_1.Next, { className: "navds-pagination__prev-next-icon", title: "Neste" }))))));
 });
+exports.Pagination.Item = PaginationItem_1.default;
 exports.default = exports.Pagination;

package/cjs/{menu/MenuItem.js → pagination/PaginationItem.js}

@@ -39,11 +39,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
+const __1 = require("..");
 exports.Item = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, as: Component = "a", active = false, className } = _a, rest = __rest(_a, ["children", "as", "active", "className"]);
-    return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-menu-item", className, {
-            "navds-menu-item--active": active,
+    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, {
+            "navds-pagination__item--selected": selected,
         }) }, rest), children));
 });
 exports.default = exports.Item;

package/cjs/panel/Panel.js

@@ -39,10 +39,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 exports.Panel = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, border = false, as: Component = "div" } = _a, rest = __rest(_a, ["children", "className", "border", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-panel", className, {
+    return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-panel", className, {
             "navds-panel--border": border,
         }) }, rest), children));
 });

package/cjs/popover/Popover.js

@@ -38,60 +38,70 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const react_dom_interactions_1 = require("@floating-ui/react-dom-interactions");
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
-const react_popper_1 = require("react-popper");
 const __1 = require("..");
+const util_1 = require("../util");
 const PopoverContent_1 = __importDefault(require("./PopoverContent"));
-const useEventLister = (event, callback) => (0, react_1.useEffect)(() => {
-    document.addEventListener(event, callback);
-    return () => {
-        document.removeEventListener(event, callback);
-    };
-}, [event, callback]);
 exports.Popover = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, anchorEl, arrow = true, open, onClose, placement = "right", offset, strategy = "absolute" } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy"]);
-    const popoverRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_merge_refs_1.default)([popoverRef, ref]);
-    const close = (0, react_1.useCallback)(() => open && onClose(), [open, onClose]);
-    useEventLister("click", (0, react_1.useCallback)((e) => {
-        if (![anchorEl, popoverRef.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
-            close();
-        }
-    }, [anchorEl, close]));
-    useEventLister("keydown", (0, react_1.useCallback)((e) => e.key === "Escape" && close(), [close]));
-    useEventLister("focusin", (0, react_1.useCallback)((e) => {
-        if (![anchorEl, popoverRef.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
-            close();
-        }
-    }, [anchorEl, close]));
-    const { styles, attributes, update } = (0, react_popper_1.usePopper)(anchorEl, popoverRef.current, {
+    var { className, children, anchorEl, arrow = true, open, onClose, placement = "top", offset, strategy: userStrategy = "absolute" } = _a, rest = __rest(_a, ["className", "children", "anchorEl", "arrow", "open", "onClose", "placement", "offset", "strategy"]);
+    const arrowRef = (0, react_1.useRef)(null);
+    const { x, y, reference, floating, strategy, context, update, refs, placement: flPlacement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = (0, react_dom_interactions_1.useFloating)({
+        strategy: userStrategy,
         placement,
-        modifiers: [
-            {
-                name: "offset",
-                options: {
-                    offset: [0, offset !== null && offset !== void 0 ? offset : (arrow ? 16 : 4)],
-                },
-            },
-            {
-                name: "arrow",
-                options: {
-                    padding: 8,
-                },
-            },
+        open: open,
+        onOpenChange: onClose,
+        middleware: [
+            (0, react_dom_interactions_1.offset)(offset !== null && offset !== void 0 ? offset : (arrow ? 16 : 4)),
+            (0, react_dom_interactions_1.shift)(),
+            (0, react_dom_interactions_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            (0, react_dom_interactions_1.arrow)({ element: arrowRef, padding: 8 }),
         ],
-        strategy,
     });
-    (0, __1.useClientLayoutEffect)(() => {
-        open && update && update();
-    }, [open, update]);
-    return (react_1.default.createElement("div", Object.assign({ ref: mergedRef, className: (0, classnames_1.default)("navds-popover", className, {
+    const { getFloatingProps } = (0, react_dom_interactions_1.useInteractions)([
+        (0, react_dom_interactions_1.useClick)(context),
+        (0, react_dom_interactions_1.useDismiss)(context),
+    ]);
+    (0, util_1.useClientLayoutEffect)(() => {
+        reference(anchorEl);
+    }, [anchorEl]);
+    const floatingRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([floating, ref]), [floating, ref]);
+    (0, react_1.useEffect)(() => {
+        update();
+    }, [open, update, anchorEl]);
+    (0, react_1.useEffect)(() => {
+        if (!refs.reference.current || !refs.floating.current || !open)
+            return;
+        const cleanup = (0, react_dom_interactions_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
+        return () => cleanup();
+    }, [refs.floating, refs.reference, update, open, anchorEl]);
+    (0, util_1.useEventListener)("focusin", (0, react_1.useCallback)((e) => {
+        var _a;
+        if (![anchorEl, (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
+            open && onClose();
+        }
+    }, [anchorEl, refs, open, onClose]));
+    const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+    }[flPlacement.split("-")[0]];
+    return (react_1.default.createElement("div", Object.assign({ className: (0, clsx_1.default)("navds-popover", className, {
             "navds-popover--hidden": !open || !anchorEl,
-        }), "aria-hidden": !open || !anchorEl, tabIndex: -1 }, attributes.popper, rest, { style: styles.popper }),
+        }), "data-placement": flPlacement, "aria-hidden": !open || !anchorEl, tabIndex: -1 }, getFloatingProps({
+        ref: floatingRef,
+        style: {
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : 0,
+            left: x !== null && x !== void 0 ? x : 0,
+        },
+    }), rest),
         children,
-        arrow && (react_1.default.createElement("div", { "data-popper-arrow": true, style: styles.arrow, className: "navds-popover__arrow" }))));
+        arrow && (react_1.default.createElement("div", { ref: (node) => {
+                arrowRef.current = node;
+            }, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-popover__arrow" }))));
 });
 exports.Popover.Content = PopoverContent_1.default;
 exports.default = exports.Popover;

package/cjs/popover/PopoverContent.js

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

package/cjs/read-more/ReadMore.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReadMore = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_collapse_1 = require("react-collapse");
 const ds_icons_1 = require("@navikt/ds-icons");
 const typography_1 = require("../typography");
@@ -52,7 +52,7 @@ exports.ReadMore = (0, react_1.forwardRef)((_a, ref) => {
         : react_collapse_1.UnmountClosed;
     const isOpened = open !== null && open !== void 0 ? open : internalOpen;
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement("button", Object.assign({ type: "button" }, rest, { className: (0, classnames_1.default)("navds-read-more", "navds-body-short", `navds-read-more--${size}`, className, {
+        react_1.default.createElement("button", Object.assign({ type: "button" }, rest, { className: (0, clsx_1.default)("navds-read-more", "navds-body-short", `navds-read-more--${size}`, className, {
                 "navds-read-more--open": isOpened,
                 "navds-body-short--small": size === "small",
             }), onClick: (e) => {