@navikt/ds-react 2.9.7 → 3.0.0

package/_docs.json

@@ -3,6 +3,69 @@
     "filePath": "src/accordion/Accordion.tsx",
     "displayName": "Accordion",
     "props": {
+      "variant": {
+        "defaultValue": {
+          "value": "'default'"
+        },
+        "description": "",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/accordion/Accordion.tsx",
+          "name": "AccordionProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/accordion/Accordion.tsx",
+            "name": "AccordionProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"default\" | \"neutral\""
+        }
+      },
+      "headingSize": {
+        "defaultValue": {
+          "value": "'large'"
+        },
+        "description": "",
+        "name": "headingSize",
+        "parent": {
+          "fileName": "src/accordion/Accordion.tsx",
+          "name": "AccordionProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/accordion/Accordion.tsx",
+            "name": "AccordionProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"large\" | \"medium\" | \"small\" | \"xsmall\""
+        }
+      },
+      "size": {
+        "defaultValue": {
+          "value": "\"medium\""
+        },
+        "description": "",
+        "name": "size",
+        "parent": {
+          "fileName": "src/accordion/Accordion.tsx",
+          "name": "AccordionProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/accordion/Accordion.tsx",
+            "name": "AccordionProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"large\" | \"medium\" | \"small\""
+        }
+      },
       "children": {
         "defaultValue": null,
         "description": "Instances of Accordion.Item",
@@ -3876,6 +3939,44 @@
       }
     }
   },
+  {
+    "filePath": "src/help-text/HelpTextIcon.tsx",
+    "displayName": "HelpTextIcon",
+    "props": {
+      "title": {
+        "defaultValue": null,
+        "description": "",
+        "name": "title",
+        "declarations": [
+          {
+            "fileName": "src/help-text/HelpTextIcon.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "filled": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "",
+        "name": "filled",
+        "declarations": [
+          {
+            "fileName": "src/help-text/HelpTextIcon.tsx",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/link/Link.tsx",
     "displayName": "Link",

package/cjs/accordion/Accordion.js

@@ -43,9 +43,15 @@ const react_1 = __importStar(require("react"));
 const AccordionItem_1 = __importDefault(require("./AccordionItem"));
 const AccordionContent_1 = __importDefault(require("./AccordionContent"));
 const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
+const AccordionContext_1 = require("./AccordionContext");
 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, clsx_1.default)("navds-accordion", className), ref: ref })));
+    var { className, variant = "default", headingSize = "medium", size = "medium" } = _a, rest = __rest(_a, ["className", "variant", "headingSize", "size"]);
+    return (react_1.default.createElement(AccordionContext_1.AccordionContext.Provider, { value: {
+            variant,
+            headingSize,
+            size,
+        } },
+        react_1.default.createElement("div", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-accordion", className, `navds-accordion--${size}`), ref: ref }))));
 });
 exports.Accordion.Header = AccordionHeader_1.default;
 exports.Accordion.Content = AccordionContent_1.default;

package/cjs/accordion/AccordionContent.js

@@ -39,7 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const AnimateHeight_1 = __importDefault(require("../util/AnimateHeight"));
 const BodyLong_1 = require("../typography/BodyLong");
 const AccordionItem_1 = require("./AccordionItem");
 const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
@@ -49,7 +48,8 @@ const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
         console.error("<Accordion.Content> has to be used within an <Accordion.Item>");
         return null;
     }
-    return (react_1.default.createElement(AnimateHeight_1.default, { height: context.open ? "auto" : 0, duration: 250 },
-        react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { as: "div", ref: ref, className: (0, clsx_1.default)("navds-accordion__content", className) }), children)));
+    return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { as: "div", ref: ref, className: (0, clsx_1.default)("navds-accordion__content", {
+            "navds-accordion__content--closed": !context.open,
+        }, className) }), children));
 });
 exports.default = AccordionContent;

package/cjs/accordion/AccordionContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContext = void 0;
+const react_1 = require("react");
+exports.AccordionContext = (0, react_1.createContext)({
+    variant: "default",
+    headingSize: "small",
+    size: "medium",
+    openItems: [],
+});

package/cjs/accordion/AccordionHeader.js

@@ -37,25 +37,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const ds_icons_1 = require("@navikt/ds-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const Heading_1 = require("../typography/Heading");
+const AccordionContext_1 = require("./AccordionContext");
 const AccordionItem_1 = require("./AccordionItem");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
+    var _b;
     var { children, className, onClick } = _a, rest = __rest(_a, ["children", "className", "onClick"]);
-    const context = (0, react_1.useContext)(AccordionItem_1.AccordionItemContext);
-    if (context === null) {
-        console.error("<Accordion.Header> has to be used within an <Accordion.Item>");
+    const itemContext = (0, react_1.useContext)(AccordionItem_1.AccordionItemContext);
+    const accordionContext = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
+    if (accordionContext === null || itemContext === null) {
+        console.error("<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>");
         return null;
     }
-    const handleClick = (e) => {
-        context.toggleOpen();
-        onClick && onClick(e);
-    };
-    return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-accordion__header", className), type: "button", onClick: handleClick, "aria-expanded": context.open }),
-        react_1.default.createElement(Heading_1.Heading, { size: "small", as: "span", className: "navds-accordion__header-content" }, children),
-        react_1.default.createElement(ds_icons_1.Expand, { "aria-hidden": true, className: "navds-accordion__expand-icon" }),
-        react_1.default.createElement(ds_icons_1.ExpandFilled, { "aria-hidden": true, className: "navds-accordion__expand-icon navds-accordion__expand-icon--filled" })));
+    return (react_1.default.createElement("button", Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)("navds-accordion__header", className), onClick: (e) => {
+            itemContext.toggleOpen();
+            onClick && onClick(e);
+        }, "aria-expanded": itemContext.open, type: "button" }),
+        react_1.default.createElement("div", { className: "navds-accordion__icon-wrapper" },
+            react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-accordion__header-chevron", title: "Vis mer", "aria-hidden": true })),
+        react_1.default.createElement(Heading_1.Heading, { size: (_b = accordionContext.headingSize) !== null && _b !== void 0 ? _b : "small", as: "span", className: "navds-accordion__header-content" }, children)));
 });
 exports.default = AccordionHeader;

package/cjs/accordion/AccordionItem.js

@@ -40,20 +40,33 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionItemContext = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const AccordionContext_1 = require("./AccordionContext");
 exports.AccordionItemContext = (0, react_1.createContext)(null);
 const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, open, defaultOpen = false, onClick, id } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen", "onClick", "id"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const context = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
+    const [_open, _setOpen] = (0, react_1.useState)(defaultOpen);
+    const shouldAnimate = (0, react_1.useRef)(!(Boolean(open) || defaultOpen));
+    const handleOpen = () => {
+        if (open === undefined) {
+            const newOpen = !_open;
+            _setOpen(newOpen);
+            setInternalOpen(newOpen);
+        }
+        else {
+            setInternalOpen(!open);
+        }
+        shouldAnimate.current = true;
+    };
     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,
+            "navds-accordion__item--neutral": (context === null || context === void 0 ? void 0 : context.variant) === "neutral",
+            "navds-accordion__item--no-animation": !shouldAnimate.current,
         }), ref: ref }, rest),
         react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {
                 open: open !== null && open !== void 0 ? open : internalOpen,
-                toggleOpen: () => {
-                    if (open === undefined) {
-                        setInternalOpen((iOpen) => !iOpen);
-                    }
-                },
+                toggleOpen: handleOpen,
             } }, children)));
 });
 exports.default = AccordionItem;

package/cjs/alert/Alert.js

@@ -38,7 +38,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 aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const BodyLong_1 = require("../typography/BodyLong");
@@ -46,13 +46,13 @@ const Icon = (_a) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);
     switch (variant) {
         case "error":
-            return react_1.default.createElement(ds_icons_1.ErrorFilled, Object.assign({ title: "Feil" }, props));
+            return react_1.default.createElement(aksel_icons_1.XMarkOctagonFillIcon, Object.assign({ title: "Feil" }, props));
         case "warning":
-            return react_1.default.createElement(ds_icons_1.WarningFilled, Object.assign({ title: "Advarsel" }, props));
+            return react_1.default.createElement(aksel_icons_1.ExclamationmarkTriangleFillIcon, Object.assign({ title: "Advarsel" }, props));
         case "info":
-            return react_1.default.createElement(ds_icons_1.InformationFilled, Object.assign({ title: "Informasjon" }, props));
+            return react_1.default.createElement(aksel_icons_1.InformationSquareFillIcon, Object.assign({ title: "Informasjon" }, props));
         case "success":
-            return react_1.default.createElement(ds_icons_1.SuccessFilled, Object.assign({ title: "Suksess" }, props));
+            return react_1.default.createElement(aksel_icons_1.CheckmarkCircleFillIcon, Object.assign({ title: "Suksess" }, props));
         default:
             return null;
     }

package/cjs/chips/Removable.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemovableChips = void 0;
-const ds_icons_1 = require("@navikt/ds-icons");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 exports.RemovableChips = (0, react_1.forwardRef)((_a, ref) => {
@@ -50,6 +50,6 @@ exports.RemovableChips = (0, react_1.forwardRef)((_a, ref) => {
         } }),
         react_1.default.createElement("span", { className: "navds-chips__chip-text" }, children),
         react_1.default.createElement("span", { className: "navds-chips__removable-icon" },
-            react_1.default.createElement(ds_icons_1.Close, { "aria-hidden": true }))));
+            react_1.default.createElement(aksel_icons_1.XMarkIcon, { "aria-hidden": true }))));
 });
 exports.default = exports.RemovableChips;

package/cjs/chips/Toggle.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleChips = void 0;
-const ds_icons_1 = require("@navikt/ds-icons");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 exports.ToggleChips = (0, react_1.forwardRef)((_a, ref) => {
@@ -46,7 +46,7 @@ exports.ToggleChips = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__toggle", className, {
             "navds-chips--icon-left": selected,
         }), "aria-pressed": selected }),
-        selected && (react_1.default.createElement(ds_icons_1.SuccessStroke, { "aria-hidden": true, className: "navds-chips__toggle-icon" })),
+        selected && (react_1.default.createElement(aksel_icons_1.CheckmarkIcon, { "aria-hidden": true, className: "navds-chips__toggle-icon" })),
         react_1.default.createElement("span", { className: "navds-chips__chip-text" }, children)));
 });
 exports.default = exports.ToggleChips;

package/cjs/date/DateInput.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MonthPickerInput = exports.DatePickerInput = void 0;
-const ds_icons_1 = require("@navikt/ds-icons");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
@@ -70,7 +70,7 @@ const DateInput = (0, react_1.forwardRef)((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-date__field-wrapper" },
             react_1.default.createElement("input", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { autoComplete: "off", "aria-controls": ariaId, className: (0, clsx_1.default)("navds-date__field-input", "navds-text-field__input", "navds-body-short", `navds-body-${size}`), size: 14 })),
-            react_1.default.createElement(__1.Button, { variant: "tertiary", type: "button", size: "small", onClick: () => onOpen(), className: "navds-date__field-button", tabIndex: open ? -1 : 0, disabled: inputProps.disabled, icon: react_1.default.createElement(ds_icons_1.Calender, { title: open
+            react_1.default.createElement(__1.Button, { variant: "tertiary", type: "button", size: "small", onClick: () => onOpen(), className: "navds-date__field-button", tabIndex: open ? -1 : 0, disabled: inputProps.disabled, icon: react_1.default.createElement(aksel_icons_1.CalendarIcon, { title: open
                         ? conditionalVariables.iconTitle.close
                         : conditionalVariables.iconTitle.open }) })),
         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/date/datepicker/caption/Caption.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerCaption = void 0;
-const ds_icons_1 = require("@navikt/ds-icons");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importDefault(require("react"));
 const react_day_picker_1 = require("react-day-picker");
 const __1 = require("../../..");
@@ -16,8 +16,8 @@ const DatePickerCaption = ({ displayMonth, id }) => {
     return (react_1.default.createElement("div", { className: "navds-date__caption" },
         react_1.default.createElement(__1.Label, { as: "span", "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-date__caption-label" }, formatCaption(displayMonth, { locale })),
         react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
-            react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(ds_icons_1.Left, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
-            react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(ds_icons_1.Right, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" }))));
+            react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
+            react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" }))));
 };
 exports.DatePickerCaption = DatePickerCaption;
 exports.default = exports.DatePickerCaption;

package/cjs/date/datepicker/caption/DropdownCaption.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownCaption = void 0;
-const ds_icons_1 = require("@navikt/ds-icons");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const setMonth_1 = __importDefault(require("date-fns/setMonth"));
 const setYear_1 = __importDefault(require("date-fns/setYear"));
 const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
@@ -34,11 +34,11 @@ const DropdownCaption = ({ displayMonth, id }) => {
     const MonthDropdownLabel = (0, labels_1.labelMonthDropdown)(locale);
     return (react_1.default.createElement("div", { className: "navds-date__caption-dropdown" },
         react_1.default.createElement("span", { "aria-live": "polite", "aria-atomic": "true", id: id, className: "navds-sr-only" }, formatCaption(displayMonth, { locale })),
-        react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(ds_icons_1.Left, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
+        react_1.default.createElement(__1.Button, { "aria-label": previousLabel, variant: "tertiary", disabled: !previousMonth, onClick: () => previousMonth && goToMonth(previousMonth), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { title: "velg forrige m\u00E5ned" }), className: "navds-date__caption-button", type: "button" }),
         react_1.default.createElement("div", { className: "navds-date__caption__month-wrapper" },
             react_1.default.createElement(__1.Select, { label: MonthDropdownLabel, hideLabel: true, className: "navds-date__caption__month", value: displayMonth.getMonth(), onChange: handleMonthChange }, months.map((m) => (react_1.default.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale }))))),
             react_1.default.createElement(__1.Select, { label: yearDropdownLabel, hideLabel: true, value: displayMonth.getFullYear(), onChange: handleYearChange, className: "navds-date__caption__year" }, years.map((year) => (react_1.default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))),
-        react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(ds_icons_1.Right, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" })));
+        react_1.default.createElement(__1.Button, { "aria-label": nextLabel, icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { title: "velg neste m\u00E5ned" }), onClick: () => nextMonth && goToMonth(nextMonth), disabled: !nextMonth, variant: "tertiary", className: "navds-date__caption-button", type: "button" })));
 };
 exports.DropdownCaption = DropdownCaption;
 exports.default = exports.DropdownCaption;

package/cjs/date/monthpicker/MonthCaption.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MonthCaption = void 0;
-const ds_icons_1 = require("@navikt/ds-icons");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const setYear_1 = __importDefault(require("date-fns/setYear"));
 const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
 const startOfYear_1 = __importDefault(require("date-fns/startOfYear"));
@@ -45,9 +45,9 @@ const MonthCaption = () => {
             : true;
     };
     return (react_1.default.createElement("div", { className: "navds-date__caption" },
-        react_1.default.createElement(__1.Button, { className: "navds-date__caption-button", disabled: hasPrevYear(), onClick: () => handleButtonClick(-1), "aria-label": (0, utils_1.labelPrevYear)(locale === null || locale === void 0 ? void 0 : locale.code), icon: react_1.default.createElement(ds_icons_1.Left, { "aria-hidden": true }), variant: "tertiary", type: "button" }),
+        react_1.default.createElement(__1.Button, { className: "navds-date__caption-button", disabled: hasPrevYear(), onClick: () => handleButtonClick(-1), "aria-label": (0, utils_1.labelPrevYear)(locale === null || locale === void 0 ? void 0 : locale.code), icon: react_1.default.createElement(aksel_icons_1.ArrowLeftIcon, { "aria-hidden": true }), variant: "tertiary", type: "button" }),
         hasDropdown ? (react_1.default.createElement(__1.Select, { label: "velg \u00E5r", hideLabel: true, value: year === null || year === void 0 ? void 0 : year.getFullYear(), onChange: handleYearChange, className: "navds-date__caption__year" }, years.map((year) => (react_1.default.createElement("option", { key: year.getFullYear(), value: year.getFullYear() }, formatYearCaption(year, { locale })))))) : (react_1.default.createElement("span", { className: "navds-date__year-label", "aria-live": "polite" }, year.getFullYear())),
-        react_1.default.createElement(__1.Button, { className: "navds-date__caption-button", disabled: hasNextYear(), onClick: () => handleButtonClick(1), "aria-label": (0, utils_1.labelNextYear)(locale === null || locale === void 0 ? void 0 : locale.code), icon: react_1.default.createElement(ds_icons_1.Right, { "aria-hidden": true }), variant: "tertiary", type: "button" })));
+        react_1.default.createElement(__1.Button, { className: "navds-date__caption-button", disabled: hasNextYear(), onClick: () => handleButtonClick(1), "aria-label": (0, utils_1.labelNextYear)(locale === null || locale === void 0 ? void 0 : locale.code), icon: react_1.default.createElement(aksel_icons_1.ArrowRightIcon, { "aria-hidden": true }), variant: "tertiary", type: "button" })));
 };
 exports.MonthCaption = MonthCaption;
 exports.default = exports.MonthCaption;

package/cjs/expansion-card/ExpansionCard.js

@@ -67,7 +67,7 @@ exports.ExpansionCard = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement(exports.ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen, size } },
         react_1.default.createElement("section", Object.assign({}, rest, { className: (0, clsx_1.default)("navds-expansioncard", className, `navds-expansioncard--${size}`, {
                 "navds-expansioncard--open": open !== null && open !== void 0 ? open : _open,
-                "navds-expansioncard--no-fade": !shouldFade.current,
+                "navds-expansioncard--no-animation": !shouldFade.current,
             }), ref: ref }))));
 });
 exports.ExpansionCard.Header = ExpansionCardHeader_1.default;

package/cjs/expansion-card/ExpansionCardDescription.js

@@ -46,7 +46,7 @@ exports.ExpansionCardDescription = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
     const panelContext = (0, react_1.useContext)(ExpansionCard_1.ExpansionCardContext);
     if (panelContext === null) {
-        console.error("<ExpansionCard.Header> has to be used within an <ExpansionCard>");
+        console.error("<ExpansionCard.Description> has to be used within an <ExpansionCard>");
         return null;
     }
     return (react_1.default.createElement(BodyLong_1.BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: (0, clsx_1.default)("navds-link-panel__description", className), size: panelContext.size })));

package/cjs/form/Select.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const ds_icons_1 = require("@navikt/ds-icons");
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
 exports.Select = (0, react_1.forwardRef)((props, ref) => {
@@ -60,7 +60,7 @@ exports.Select = (0, react_1.forwardRef)((props, ref) => {
             }), 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, 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(aksel_icons_1.ChevronDownIcon, { className: "navds-select__chevron", "aria-hidden": true })),
         react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
 });
 exports.default = exports.Select;

package/cjs/form/Switch.js

@@ -42,8 +42,8 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
 const useFormField_1 = require("./useFormField");
-const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12px", height: "12px", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
-    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.01386 8L10.25 2L11 2.75L4.01386 9.5L1 6.5L1.75 5.75L4.01386 8Z", fill: "currentColor", stroke: "currentColor" })));
+const SelectedIcon = () => (react_1.default.createElement("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true, "aria-label": "Deaktiver valg" },
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z", fill: "currentColor" })));
 exports.Switch = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");

package/cjs/form/search/Search.js

@@ -38,7 +38,7 @@ 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 aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("../..");
@@ -83,11 +83,11 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
             }), 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" })),
+                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"]), 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 })))),
+                    react_1.default.createElement(aksel_icons_1.XMarkIcon, { "aria-hidden": true })))),
             react_1.default.createElement(exports.SearchContext.Provider, { value: {
                     size,
                     disabled: inputProps.disabled,

package/cjs/form/search/SearchButton.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 });
-const ds_icons_1 = require("@navikt/ds-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 SearchButton = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
     var { className, children, disabled, onClick } = _a, rest = __rest(_a, ["className", "children", "disabled", "onClick"]);
@@ -54,6 +54,6 @@ const SearchButton = (0, react_1.forwardRef)((_a, ref) => {
     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) => {
             handleClick();
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        }, icon: react_1.default.createElement(ds_icons_1.Search, Object.assign({}, (children ? { "aria-hidden": true } : { title: "Søk" }))) }), children));
+        }, icon: react_1.default.createElement(aksel_icons_1.MagnifyingGlassIcon, Object.assign({}, (children ? { "aria-hidden": true } : { title: "Søk" }))) }), children));
 });
 exports.default = SearchButton;

package/cjs/help-text/HelpText.js

@@ -38,10 +38,10 @@ 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 clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
+const HelpTextIcon_1 = require("./HelpTextIcon");
 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);
@@ -52,8 +52,8 @@ exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
                 setOpen((x) => !x);
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
             }, className: (0, clsx_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open }),
-            react_1.default.createElement(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(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))));
 });

package/cjs/help-text/HelpTextIcon.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelpTextIcon = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importDefault(require("react"));
+const useId_1 = require("../util/useId");
+const HelpTextIcon = ({ title, filled = false, }) => {
+    let titleId = (0, useId_1.useId)();
+    titleId = title ? `title-${titleId}` : undefined;
+    return (react_1.default.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-labelledby": titleId, className: (0, clsx_1.default)("navds-help-text__icon", {
+            "navds-help-text__icon--filled": filled,
+        }) },
+        title ? react_1.default.createElement("title", { id: titleId }, title) : null,
+        react_1.default.createElement("circle", { cx: "12", cy: "12", r: "11", strokeWidth: "2", stroke: "currentColor", fill: filled ? "currentColor" : "transparent" }),
+        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.75 9C9.75 7.75736 10.7574 6.75 12 6.75H12.1716C13.3195 6.75 14.25 7.68054 14.25 8.82843C14.25 9.37966 14.031 9.90832 13.6412 10.2981L12.6412 11.2981C11.7504 12.1889 11.25 13.3971 11.25 14.6569C11.25 15.0711 11.5858 15.4069 12 15.4069C12.4142 15.4069 12.75 15.0711 12.75 14.6569C12.75 13.7949 13.0924 12.9682 13.7019 12.3588L14.7019 11.3588C15.373 10.6877 15.75 9.77748 15.75 8.82843C15.75 6.85212 14.1479 5.25 12.1716 5.25H12C9.92893 5.25 8.25 6.92893 8.25 9V9.5C8.25 9.91421 8.58579 10.25 9 10.25C9.41421 10.25 9.75 9.91421 9.75 9.5V9ZM12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5Z", fill: filled ? "var(--a-surface-default)" : "currentColor" })));
+};
+exports.HelpTextIcon = HelpTextIcon;

package/cjs/link-panel/LinkPanel.js

@@ -40,15 +40,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelComponent = void 0;
 const react_1 = __importStar(require("react"));
 const __1 = require("..");
-const ds_icons_1 = require("@navikt/ds-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const LinkPanelTitle_1 = require("./LinkPanelTitle");
 const LinkPanelDescription_1 = require("./LinkPanelDescription");
+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) }),
         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 })));
+        react_1.default.createElement(aksel_icons_1.ChevronRightIcon, { className: "navds-link-panel__chevron", "aria-hidden": true })));
 });
 const LinkPanel = exports.LinkPanelComponent;
 LinkPanel.Title = LinkPanelTitle_1.LinkPanelTitle;

package/cjs/modal/Modal.js

@@ -41,9 +41,9 @@ exports.Modal = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_modal_1 = __importDefault(require("react-modal"));
-const ds_icons_1 = require("@navikt/ds-icons");
 const __1 = require("..");
 const ModalContent_1 = __importDefault(require("./ModalContent"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
     var _b, _c;
     var { children, open, onClose, className, overlayClassName, shouldCloseOnOverlayClick = true, shouldCloseOnEsc = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel, style, parentSelector } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "overlayClassName", "shouldCloseOnOverlayClick", "shouldCloseOnEsc", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label", "style", "parentSelector"]);
@@ -79,7 +79,7 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
         children,
         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, icon: react_1.default.createElement(ds_icons_1.Close, { title: "Lukk modalvindu" }) }))));
+            }), size: "small", variant: "tertiary-neutral", ref: buttonRef, onClick: onClose, icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: "Lukk modalvindu" }) }))));
 });
 exports.Modal.setAppElement = (element) => react_modal_1.default.setAppElement(element);
 exports.Modal.Content = ModalContent_1.default;