@navikt/ds-react 0.19.16 → 1.0.0-rc.1

package/cjs/accordion/Accordion.js

@@ -38,14 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const AccordionItem_1 = __importDefault(require("./AccordionItem"));
 const AccordionContent_1 = __importDefault(require("./AccordionContent"));
 const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
 exports.Accordion = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)("navds-accordion", className), ref: ref })));
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-accordion", className), ref: ref })));
 });
 exports.Accordion.Header = AccordionHeader_1.default;
 exports.Accordion.Content = AccordionContent_1.default;

package/cjs/accordion/AccordionContent.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 classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const react_collapse_1 = require("react-collapse");
 const AccordionItem_1 = require("./AccordionItem");
@@ -53,6 +53,6 @@ const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
         : react_collapse_1.UnmountClosed;
     return (react_1.default.createElement("div", Object.assign({ ref: ref, "aria-labelledby": context.buttonId }, rest),
         react_1.default.createElement(CollapseComponent, { isOpened: context.open },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-accordion__content", className) }, children))));
+            react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-accordion__content", className) }, children))));
 });
 exports.default = AccordionContent;

package/cjs/accordion/AccordionHeader.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 AccordionItem_1 = require("./AccordionItem");
 const __1 = require("..");
@@ -48,7 +48,8 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
     const newId = (0, __1.useId)(id);
     const setButtonId = context && context.setButtonId;
     (0, __1.useClientLayoutEffect)(() => {
-        setButtonId && setButtonId(id ? newId : `accordionContent-${newId}`);
+        var _a;
+        setButtonId && setButtonId((_a = (id ? newId : newId)) !== null && _a !== void 0 ? _a : "");
     }, [setButtonId, newId]);
     if (context === null) {
         console.error("<Accordion.Header> has to be used within an <Accordion.Item>");
@@ -58,12 +59,12 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
         context.toggleOpen();
         onClick && onClick(e);
     };
-    return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, id: context.buttonId, className: (0, classnames_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-expanded": context.open }),
+    return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, id: context.buttonId, className: (0, clsx_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-expanded": context.open }),
         children,
-        react_1.default.createElement(ds_icons_1.Expand, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", {
+        react_1.default.createElement(ds_icons_1.Expand, { "aria-hidden": true, className: (0, clsx_1.default)("navds-accordion__expand-icon", {
                 "navds-accordion__expand-icon--flip": context.open,
             }) }),
-        react_1.default.createElement(ds_icons_1.ExpandFilled, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
+        react_1.default.createElement(ds_icons_1.ExpandFilled, { "aria-hidden": true, className: (0, clsx_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
                 "navds-accordion__expand-icon--flip": context.open,
             }) })));
 });

package/cjs/accordion/AccordionItem.js

@@ -38,14 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionItemContext = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 exports.AccordionItemContext = (0, react_1.createContext)(null);
 const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, open, defaultOpen = false, renderContentWhenClosed = false, onClick, id } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen", "renderContentWhenClosed", "onClick", "id"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
     const [buttonId, setButtonId] = (0, react_1.useState)("");
-    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)("navds-accordion__item", className, {
+    return (react_1.default.createElement("div", Object.assign({ className: (0, clsx_1.default)("navds-accordion__item", className, {
             "navds-accordion__item--open": open !== null && open !== void 0 ? open : internalOpen,
         }), ref: ref }, rest),
         react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {

package/cjs/alert/Alert.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = 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 __1 = require("..");
 const Icon = (_a) => {
@@ -59,7 +59,7 @@ const Icon = (_a) => {
 };
 exports.Alert = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, variant, size = "medium", fullWidth = false, inline = false } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline"]);
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
         react_1.default.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
         react_1.default.createElement(__1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children)));
 });

package/cjs/button/Button.js

@@ -39,15 +39,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const react_1 = __importStar(require("react"));
-const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("../");
 const util_1 = require("../util");
 exports.Button = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, style } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "style"]);
     const buttonRef = (0, react_1.useRef)(null);
-    const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
     const [widthOverride, setWidthOverride] = (0, react_1.useState)();
+    const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([buttonRef, ref]), [ref]);
     (0, util_1.useClientLayoutEffect)(() => {
         if (loading) {
             const requestID = window.requestAnimationFrame(() => {
@@ -60,7 +59,7 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
             };
         }
     }, [loading, children]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: mergedRef, className: (0, classnames_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: mergedRef, className: (0, clsx_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
             "navds-button--loading": widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
         react_1.default.createElement(__1.BodyShort, { as: "span", className: "navds-button__inner", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, widthOverride ? react_1.default.createElement(__1.Loader, { size: size }) : children)));

package/cjs/{speech-bubble → chat}/Bubble.js

@@ -38,11 +38,14 @@ 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 typography_1 = require("../typography");
 const Bubble = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, topText, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "topText", "backgroundColor"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-speechbubble__bubble", className, "navds-body-long"), style: { backgroundColor: backgroundColor }, tabIndex: 0 }, rest),
-        topText && (react_1.default.createElement("span", { className: "navds-speechbubble__top-text navds-detail" }, topText)),
+    var { children, className, name, timestamp, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat__bubble", className), style: { backgroundColor: backgroundColor }, tabIndex: 0 }, rest),
+        (timestamp || name) && (react_1.default.createElement("div", { className: "navds-chat__top-text" },
+            name && react_1.default.createElement(typography_1.Detail, { className: "navds-chat__name" }, name),
+            timestamp && (react_1.default.createElement(typography_1.Detail, { className: "navds-chat__timestamp" }, timestamp)))),
         children));
 });
 exports.default = Bubble;

package/cjs/{speech-bubble/SpeechBubble.js → chat/Chat.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.SpeechBubble = void 0;
+exports.Chat = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const Bubble_1 = __importDefault(require("./Bubble"));
-exports.SpeechBubble = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, topText, illustration, position = "left", illustrationBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "topText", "illustration", "position", "illustrationBgColor", "backgroundColor"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-speechbubble", className, `navds-speechbubble--${position}`, "navds-body-long") }, rest),
-        react_1.default.createElement("div", { className: "navds-speechbubble__illustration", style: { backgroundColor: illustrationBgColor } }, illustration),
-        react_1.default.createElement("ol", { className: "navds-speechbubble__bubble-list" }, react_1.default.Children.map(children, (child, i) => {
+const __1 = require("..");
+exports.Chat = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position}`) }, rest),
+        react_1.default.createElement(__1.BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
+        react_1.default.createElement("ol", { className: "navds-chat__bubble-wrapper" }, react_1.default.Children.map(children, (child, i) => {
             if (react_1.default.isValidElement(child)) {
-                return (react_1.default.createElement("li", null, react_1.default.cloneElement(child, Object.assign({ topText: topText && i === 0 ? topText : undefined, backgroundColor }, child.props))));
+                return (react_1.default.createElement(__1.BodyLong, { as: "li" }, react_1.default.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
             }
         }))));
 });
-exports.SpeechBubble.Bubble = Bubble_1.default;
-exports.default = exports.SpeechBubble;
+exports.Chat.Bubble = Bubble_1.default;
+exports.default = exports.Chat;

package/cjs/{menu → chat}/index.js

@@ -3,6 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
-var Menu_1 = require("./Menu");
-Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return __importDefault(Menu_1).default; } });
+exports.Chat = void 0;
+var Chat_1 = require("./Chat");
+Object.defineProperty(exports, "Chat", { enumerable: true, get: function () { return __importDefault(Chat_1).default; } });

package/cjs/chat/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/chat/index.js",
+  "types": "../../esm/chat/index.d.ts"
+}

package/cjs/form/ConfirmationPanel.js

@@ -39,13 +39,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmationPanel = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 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, "confirmationPanel");
-    return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)("navds-confirmation-panel", "navds-form-field", className, {
+    return (react_1.default.createElement("div", { ref: ref, 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,

package/cjs/form/Fieldset/Fieldset.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fieldset = exports.FieldsetContext = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("../..");
 const useFieldset_1 = require("./useFieldset");
@@ -50,21 +50,21 @@ exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
     const { children, className, errorPropagation = true, legend, description, hideLegend } = props, rest = __rest(props, ["children", "className", "errorPropagation", "legend", "description", "hideLegend"]);
     return (react_1.default.createElement(exports.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, classnames_1.default)({
+            errorId: (0, clsx_1.default)({
                 [errorId]: showErrorMsg,
                 [(_b = fieldset === null || fieldset === void 0 ? void 0 : fieldset.errorId) !== null && _b !== void 0 ? _b : ""]: !!(fieldset === null || fieldset === void 0 ? void 0 : fieldset.error),
             }),
             size,
             disabled: (_c = props.disabled) !== null && _c !== void 0 ? _c : false,
         } },
-        react_1.default.createElement("fieldset", Object.assign({}, (0, __1.omit)(rest, ["errorId", "error", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, { "navds-fieldset--error": hasError }) }),
-            react_1.default.createElement(__1.Label, { size: size, as: "legend", className: (0, classnames_1.default)("navds-fieldset__legend", {
+        react_1.default.createElement("fieldset", Object.assign({}, (0, __1.omit)(rest, ["errorId", "error", "size"]), inputProps, { ref: ref, className: (0, clsx_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, { "navds-fieldset--error": hasError }) }),
+            react_1.default.createElement(__1.Label, { size: size, as: "legend", className: (0, clsx_1.default)("navds-fieldset__legend", {
                     "navds-sr-only": !!hideLegend,
                 }) }, legend),
             !!description &&
-                (size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-fieldset__description", {
+                (size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-fieldset__description", {
                         "navds-sr-only": !!hideLegend,
-                    }), id: inputDescriptionId, size: "small", as: "div" }, props.description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-fieldset__description", {
+                    }), id: inputDescriptionId, size: "small", as: "div" }, props.description)) : (react_1.default.createElement(__1.Detail, { className: (0, clsx_1.default)("navds-fieldset__description", {
                         "navds-sr-only": !!hideLegend,
                     }), id: inputDescriptionId, size: "small", as: "div" }, props.description))),
             children,

package/cjs/form/Select.js

@@ -39,27 +39,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = 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 useFormField_1 = require("./useFormField");
 exports.Select = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
     const { children, label, className, description, htmlSize, hideLabel = false, style } = props, rest = __rest(props, ["children", "label", "className", "description", "htmlSize", "hideLabel", "style"]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-select--error": hasError,
         }) },
-        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(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
-            }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-form-field__description", {
+            }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: "small", 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"]), inputProps, { ref: ref, className: (0, classnames_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
+            react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, clsx_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
             react_1.default.createElement(ds_icons_1.Expand, { 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)))));
 });

package/cjs/form/Switch.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Switch = void 0;
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
@@ -57,15 +57,15 @@ exports.Switch = (0, react_1.forwardRef)((props, ref) => {
         setChecked(e.target.checked);
         props.onChange && props.onChange(e);
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-switch", props.className, `navds-switch--${size}`, `navds-switch--${position}`, {
             "navds-switch--loading": loading,
             "navds-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
         }) },
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (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) => handleChange(e), className: (0, classnames_1.default)(className, "navds-switch__input") })),
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (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) => handleChange(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("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch__content", {
+            react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-switch__content", {
                     "navds-sr-only": hideLabel,
                     "navds-switch--with-description": !!description && !hideLabel,
                 }) },

package/cjs/form/TextField.js

@@ -39,26 +39,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
 exports.TextField = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
     const { label, className, description, htmlSize, hideLabel = false, type = "text" } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel", "type"]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-text-field--error": hasError,
             "navds-text-field--disabled": !!inputProps.disabled,
             "navds-form-field--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(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
-            }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-form-field__description", {
+            }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: "small", as: "div" }, description)))),
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, className: (0, classnames_1.default)("navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize })),
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, 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)))));
 });
 exports.default = exports.TextField;

package/cjs/form/Textarea.js

@@ -39,45 +39,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Counter = exports.Textarea = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const TextareaAutosize_1 = __importDefault(require("@material-ui/core/TextareaAutosize"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
 const __2 = require("..");
+const TextareaAutoSize_1 = __importDefault(require("../util/TextareaAutoSize"));
 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 } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize"]);
-    const maxLengthId = `TextareaMaxLength-${(0, __2.useId)()}`;
+    const maxLengthId = (0, __2.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 = () => {
-        let rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) && (rest === null || rest === void 0 ? void 0 : rest.minRows) >= 3 ? rest === null || rest === void 0 ? void 0 : rest.minRows : 3;
+        let rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) ? rest === null || rest === void 0 ? void 0 : rest.minRows : 3;
         if (size === "small") {
-            rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) && (rest === null || rest === void 0 ? void 0 : rest.minRows) >= 2 ? rest === null || rest === void 0 ? void 0 : rest.minRows : 2;
+            rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) ? rest === null || rest === void 0 ? void 0 : rest.minRows : 2;
         }
         return rows;
     };
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-form-field--disabled": !!inputProps.disabled,
             "navds-textarea--error": hasError,
             "navds-textarea--resize": resize,
         }) },
-        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(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-form-field__description", {
+        !!description && (react_1.default.createElement(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
-            }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-form-field__description", {
+            }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, clsx_1.default)("navds-form-field__description", {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: "small", 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, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
                     ? props.onChange(e)
-                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, className: (0, classnames_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
+                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, className: (0, clsx_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
                     "navds-textarea--counter": hasMaxLength,
-                }), "aria-describedby": (0, classnames_1.default)(inputProps["aria-describedby"], {
-                    [maxLengthId]: hasMaxLength,
+                }), "aria-describedby": (0, clsx_1.default)(inputProps["aria-describedby"], {
+                    [maxLengthId !== null && maxLengthId !== void 0 ? maxLengthId : ""]: hasMaxLength,
                 }) })),
             hasMaxLength && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { id: maxLengthId, className: "navds-sr-only" },
@@ -89,7 +89,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
 });
 const Counter = ({ maxLength, currentLength, size }) => {
     const difference = maxLength - currentLength;
-    return (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-textarea__counter", {
+    return (react_1.default.createElement(__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
         ? `Antall tegn for mye ${Math.abs(difference)}`

package/cjs/form/checkbox/Checkbox.js

@@ -28,13 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const useCheckbox_1 = __importDefault(require("./useCheckbox"));
 const __1 = require("../..");
 exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, hasError, size } = (0, useCheckbox_1.default)(props);
     const Description = size === "medium" ? __1.BodyShort : __1.Detail;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
         }) },
@@ -58,7 +58,7 @@ exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
                 }
             } })),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-checkbox__content", {
+            react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-checkbox__content", {
                     "navds-sr-only": props.hideLabel,
                 }) },
                 react_1.default.createElement(__1.BodyShort, { as: "div", size: size }, props.children),

package/cjs/form/checkbox/CheckboxGroup.js

@@ -39,7 +39,7 @@ 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 classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 exports.CheckboxGroupContext = (0, react_1.createContext)(null);
 exports.CheckboxGroup = (0, react_1.forwardRef)((_a, ref) => {
@@ -55,7 +55,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, classnames_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"}`) }),
+    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"}`) }),
         react_1.default.createElement(exports.CheckboxGroupContext.Provider, { value: {
                 value,
                 defaultValue,

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

@@ -39,15 +39,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorSummary = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("../..");
 const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
 const util_1 = require("../../util");
 exports.ErrorSummary = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, size = "medium", headingTag = "h2", heading } = _a, rest = __rest(_a, ["children", "className", "size", "headingTag", "heading"]);
     const headingId = (0, util_1.useId)();
-    return (react_1.default.createElement("section", Object.assign({ ref: ref }, rest, { className: (0, classnames_1.default)(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, "aria-live": "polite", "aria-relevant": "all", "aria-labelledby": `error-summary-${headingId}` }),
-        react_1.default.createElement(__1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small", id: `error-summary-${headingId}` }, heading),
+    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) => {
             return react_1.default.createElement("li", { key: child === null || child === void 0 ? void 0 : child.toString() }, child);
         }))));

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

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

package/cjs/form/radio/Radio.js

@@ -28,13 +28,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("../..");
 const useRadio_1 = require("./useRadio");
 exports.Radio = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size, hasError } = (0, useRadio_1.useRadio)(props);
     const Description = size === "medium" ? __1.BodyShort : __1.Detail;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-radio", `navds-radio--${size}`, {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(props.className, "navds-radio", `navds-radio--${size}`, {
             "navds-radio--error": hasError,
             "navds-radio--disabled": inputProps.disabled,
         }) },

package/cjs/form/radio/RadioGroup.js

@@ -39,7 +39,7 @@ 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 classnames_1 = __importDefault(require("classnames"));
+const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 const __2 = require("../..");
 exports.RadioGroupContext = react_1.default.createContext(null);
@@ -48,7 +48,7 @@ exports.RadioGroup = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, name, defaultValue, value, onChange = () => { }, required } = _a, rest = __rest(_a, ["children", "className", "name", "defaultValue", "value", "onChange", "required"]);
     const fieldset = (0, react_1.useContext)(__1.FieldsetContext);
     const nameId = (0, __2.useId)();
-    return (react_1.default.createElement(__1.Fieldset, Object.assign({}, rest, { ref: ref, className: (0, classnames_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"}`) }),
+    return (react_1.default.createElement(__1.Fieldset, Object.assign({}, rest, { 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"}`) }),
         react_1.default.createElement(exports.RadioGroupContext.Provider, { value: {
                 name: name !== null && name !== void 0 ? name : `radioGroupName-${nameId}`,
                 defaultValue,