@navikt/ds-react 5.5.0-beta.0 → 5.6.0-beta.0

package/cjs/accordion/AccordionItem.js

@@ -41,9 +41,10 @@ exports.AccordionItemContext = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const AccordionContext_1 = require("./AccordionContext");
+const util_1 = require("../util");
 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"]);
+    var { children, className, open, defaultOpen = false } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen"]);
     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);
@@ -63,7 +64,7 @@ const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
             "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),
+        }), ref: ref }, (0, util_1.omit)(rest, ["onClick"])),
         react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {
                 open: open !== null && open !== void 0 ? open : internalOpen,
                 toggleOpen: handleOpen,

package/cjs/date/datepicker/DatePickerStandalone.js

@@ -48,7 +48,7 @@ const caption_1 = require("./caption");
 const TableHead_1 = require("./TableHead");
 exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
     var _b;
-    var { children, className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, id, defaultSelected, onSelect, fixedWeeks = true } = _a, rest = __rest(_a, ["children", "className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "id", "defaultSelected", "onSelect", "fixedWeeks"]);
+    var { className, locale = "nb", dropdownCaption, disabled = [], disableWeekends = false, showWeekNumber = false, selected, defaultSelected, onSelect, fixedWeeks = true } = _a, rest = __rest(_a, ["className", "locale", "dropdownCaption", "disabled", "disableWeekends", "showWeekNumber", "selected", "defaultSelected", "onSelect", "fixedWeeks"]);
     const [selectedDates, setSelectedDates] = react_1.default.useState(defaultSelected);
     const handleSingleSelect = (selectedDay) => {
         setSelectedDates(selectedDay);
@@ -80,6 +80,6 @@ exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
                 weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
             }, modifiersClassNames: {
                 weekend: "rdp-day__weekend",
-            }, showWeekNumber: showWeekNumber, fixedWeeks: fixedWeeks, showOutsideDays: true }, (0, __1.omit)(rest, ["onSelect"])))));
+            }, showWeekNumber: showWeekNumber, fixedWeeks: fixedWeeks, showOutsideDays: true }, (0, __1.omit)(rest, ["onSelect", "children", "id"])))));
 });
 exports.default = exports.DatePickerStandalone;

package/cjs/date/hooks/useDatepicker.js

@@ -74,7 +74,7 @@ const useDatepicker = (opt = {}) => {
             return;
         }
         !open && openOnFocus && handleOpen(true);
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {
             setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
             const isBefore = fromDate && day && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
@@ -83,7 +83,7 @@ const useDatepicker = (opt = {}) => {
         }
     };
     const handleBlur = (e) => {
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         (0, utils_1.isValidDate)(day) &&
             setInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat));
     };

package/cjs/date/hooks/useMonthPicker.js

@@ -80,7 +80,7 @@ const useMonthpicker = (opt = {}) => {
             return;
         }
         !open && openOnFocus && handleOpen(true);
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
         const isBefore = getIsBefore({ fromDate, date: day });
         const isAfter = getIsAfter({ toDate, date: day });
         if ((0, utils_1.isValidDate)(day)) {
@@ -92,7 +92,7 @@ const useMonthpicker = (opt = {}) => {
         }
     };
     const handleBlur = (e) => {
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "month", allowTwoDigitYear);
         (0, utils_1.isValidDate)(day) &&
             setInputValue((0, utils_1.formatDateForInput)(day, locale, "month", inputFormat));
     };

package/cjs/date/hooks/useRangeDatepicker.js

@@ -155,7 +155,7 @@ const useRangeDatepicker = (opt = {}) => {
             return;
         }
         !open && openOnFocus && setOpen(true);
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if ((0, utils_1.isValidDate)(day)) {
             src === RANGE.FROM
                 ? setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date", inputFormat))
@@ -166,7 +166,7 @@ const useRangeDatepicker = (opt = {}) => {
         }
     };
     const handleBlur = (e, src) => {
-        let day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
+        const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date", allowTwoDigitYear);
         if (!(0, utils_1.isValidDate)(day)) {
             return;
         }
@@ -186,7 +186,7 @@ const useRangeDatepicker = (opt = {}) => {
         if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
             setOpen(false);
         }
-        let prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
+        const prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
         const resetTo = (0, isBefore_1.default)(prevToRange, range === null || range === void 0 ? void 0 : range.from);
         (range === null || range === void 0 ? void 0 : range.from)
             ? setFromInputValue((0, utils_1.formatDateForInput)(range === null || range === void 0 ? void 0 : range.from, locale, "date", inputFormat))

package/cjs/date/monthpicker/MonthButton.js

@@ -30,7 +30,8 @@ exports.MonthButton = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const format_1 = __importDefault(require("date-fns/format"));
 const isSameMonth_1 = __importDefault(require("date-fns/isSameMonth"));
-const isSameYear_1 = __importDefault(require("date-fns/isSameYear"));
+const compareAsc_1 = __importDefault(require("date-fns/compareAsc"));
+const compareDesc_1 = __importDefault(require("date-fns/compareDesc"));
 const setYear_1 = __importDefault(require("date-fns/setYear"));
 const react_1 = __importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
@@ -38,14 +39,14 @@ const context_1 = require("../context");
 const utils_1 = require("../utils");
 const disableMonth = (month, fromDate, toDate) => {
     if (fromDate && toDate) {
-        return (((0, isSameMonth_1.default)(month, fromDate) && (0, isSameYear_1.default)(month, fromDate)) ||
-            ((0, isSameMonth_1.default)(month, toDate) && (0, isSameYear_1.default)(month, toDate)));
+        return (((0, compareAsc_1.default)(month, fromDate) === -1 && !(0, isSameMonth_1.default)(month, fromDate)) ||
+            ((0, compareDesc_1.default)(month, toDate) === -1 && !(0, isSameMonth_1.default)(month, toDate)));
     }
     else if (fromDate) {
-        return (0, isSameMonth_1.default)(month, fromDate) && (0, isSameYear_1.default)(month, fromDate);
+        return (0, compareAsc_1.default)(month, fromDate) === -1 && !(0, isSameMonth_1.default)(month, fromDate);
     }
     else if (toDate) {
-        return (0, isSameMonth_1.default)(month, toDate) && (0, isSameYear_1.default)(month, toDate);
+        return (0, compareDesc_1.default)(month, toDate) === -1 && !(0, isSameMonth_1.default)(month, toDate);
     }
     return false;
 };

package/cjs/date/monthpicker/MonthSelector.js

@@ -73,7 +73,7 @@ const MonthSelector = () => {
         months.slice(8, 12),
     ];
     return (react_1.default.createElement(__1.BodyShort, { as: "table", className: "rdp-table" },
-        react_1.default.createElement("tbody", { className: "rdp-tbody" }, tableMonths.map((x, y) => (react_1.default.createElement("tr", { className: "rdp-row", key: y }, x.map((month, y) => {
+        react_1.default.createElement("tbody", { className: "rdp-tbody" }, tableMonths.map((months, i) => (react_1.default.createElement("tr", { className: "rdp-row", key: i }, months.map((month) => {
             return (react_1.default.createElement("td", { key: month.toDateString(), className: "rdp-cell" },
                 react_1.default.createElement(MonthButton_1.default, { month: (0, setYear_1.default)(month, year.getFullYear()), months: months, focus: focus, setFocus: setFocus, tabRoot: tabRoot, setTabRoot: setTabRoot })));
         })))))));

package/cjs/dropdown/Toggle.js

@@ -40,10 +40,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const _1 = require(".");
+const Dropdown_1 = require("./Dropdown");
 exports.Toggle = (0, react_1.forwardRef)((_a, ref) => {
     var { className, onClick } = _a, rest = __rest(_a, ["className", "onClick"]);
-    const context = (0, react_1.useContext)(_1.DropdownContext);
+    const context = (0, react_1.useContext)(Dropdown_1.DropdownContext);
     if (!context) {
         console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
         return null;

package/cjs/dropdown/index.js

@@ -1,18 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -20,4 +6,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 var Dropdown_1 = require("./Dropdown");
 Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return __importDefault(Dropdown_1).default; } });
-__exportStar(require("./Dropdown"), exports);

package/cjs/form/Select.js

@@ -94,7 +94,7 @@ exports.Select = (0, react_1.forwardRef)((props, ref) => {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size, as: "div" }, description)),
         react_1.default.createElement("div", { className: "navds-select__container", style: style },
-            react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size", "readOnly"]), inputProps, readOnlyEventHandlers, { ref: ref, className: (0, clsx_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
+            react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size", "readOnly"]), inputProps, readOnlyEventHandlers, { ref: ref, className: (0, clsx_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize }), children),
             react_1.default.createElement(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)))));
 });

package/cjs/form/checkbox/useCheckbox.js

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

package/cjs/form/combobox/Combobox.js

@@ -51,7 +51,7 @@ const ComboboxWrapper_1 = __importDefault(require("./ComboboxWrapper"));
 const inputContext_1 = require("./Input/inputContext");
 const Input_1 = __importDefault(require("./Input/Input"));
 exports.Combobox = (0, react_1.forwardRef)((props, ref) => {
-    const { value: externalValue, onClear, className, hideLabel = false, description, label, clearButton = true, clearButtonLabel, toggleListButton = true, toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true } = props, rest = __rest(props, ["value", "onClear", "className", "hideLabel", "description", "label", "clearButton", "clearButtonLabel", "toggleListButton", "toggleListButtonLabel", "inputClassName", "shouldShowSelectedOptions"]);
+    const { className, hideLabel = false, description, label, clearButton = true, clearButtonLabel, toggleListButton = true, toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true } = props, rest = __rest(props, ["className", "hideLabel", "description", "label", "clearButton", "clearButtonLabel", "toggleListButton", "toggleListButtonLabel", "inputClassName", "shouldShowSelectedOptions"]);
     const toggleListButtonRef = (0, react_1.useRef)(null);
     const { currentOption, toggleIsListOpen } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { selectedOptions } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();

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

@@ -44,7 +44,7 @@ const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsCont
 const filteredOptionsContext_1 = require("../FilteredOptions/filteredOptionsContext");
 const inputContext_1 = require("./inputContext");
 const Input = (0, react_1.forwardRef)((_a, ref) => {
-    var { inputClassName, error, errorId } = _a, rest = __rest(_a, ["inputClassName", "error", "errorId"]);
+    var { inputClassName } = _a, rest = __rest(_a, ["inputClassName"]);
     const { clearInput, inputProps, onChange, size, value } = (0, inputContext_1.useInputContext)();
     const { selectedOptions, removeSelectedOption, toggleOption, isMultiSelect, } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     const { activeDecendantId, allowNewValues, currentOption, filteredOptions, toggleIsListOpen, isListOpen, filteredOptionsIndex, moveFocusUp, moveFocusDown, ariaDescribedBy, moveFocusToInput, moveFocusToEnd, setFilteredOptionsIndex, setIsMouseLastUsedInputDevice, shouldAutocomplete, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();

package/cjs/form/search/Search.js

@@ -77,7 +77,9 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
     const handleClick = () => {
         onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick(`${value !== null && value !== void 0 ? value : internalValue}`);
     };
-    return (react_1.default.createElement("div", { onKeyDown: (e) => {
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    react_1.default.createElement("div", { onKeyDown: (e) => {
             var _a, _b;
             if (e.key !== "Escape") {
                 return;

package/cjs/layout/bleed/Bleed.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bleed = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+exports.Bleed = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", preservePadding = false, className } = _a, rest = __rest(_a, ["as", "preservePadding", "className"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-bleed", className, {
+            "navds-bleed--preserve": preservePadding,
+        }) })));
+});
+exports.default = exports.Bleed;

package/cjs/layout/bleed/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bleed = void 0;
+var Bleed_1 = require("./Bleed");
+Object.defineProperty(exports, "Bleed", { enumerable: true, get: function () { return __importDefault(Bleed_1).default; } });

package/cjs/layout/bleed/package.json

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

package/cjs/layout/content-box/ContentBox.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBox = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+exports.ContentBox = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, maxWidth = "xl" } = _a, rest = __rest(_a, ["as", "className", "maxWidth"]);
+    const getMaxWidth = () => {
+        return maxWidth === "3xl"
+            ? "1920px"
+            : maxWidth === "2xl"
+                ? "1440px"
+                : maxWidth === "xl"
+                    ? "1280px"
+                    : "1024px";
+    };
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, style: { "--__ac-contentbox--max-width": getMaxWidth() }, className: (0, clsx_1.default)("navds-contentbox", className) })));
+});
+exports.default = exports.ContentBox;

package/cjs/layout/content-box/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentBox = void 0;
+var ContentBox_1 = require("./ContentBox");
+Object.defineProperty(exports, "ContentBox", { enumerable: true, get: function () { return __importDefault(ContentBox_1).default; } });

package/cjs/layout/content-box/package.json

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

package/cjs/layout/page-demo/AvatarPanel.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarPanel = void 0;
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../box");
+const stack_1 = require("../stack");
+function AvatarPanel({ children }) {
+    return (react_1.default.createElement(box_1.Box, { background: "bg-default", padding: "10", className: "avatar-card" },
+        react_1.default.createElement(stack_1.HStack, { justify: "center" },
+            react_1.default.createElement(box_1.Box, { borderRadius: "full", background: "surface-success-moderate", className: "avatar" },
+                react_1.default.createElement(aksel_icons_1.PersonIcon, { fontSize: "2rem" }))),
+        children));
+}
+exports.AvatarPanel = AvatarPanel;

package/cjs/layout/page-demo/Filter.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterCard = void 0;
+const react_1 = __importDefault(require("react"));
+const form_1 = require("../../form");
+const typography_1 = require("../../typography");
+const box_1 = require("../box");
+const stack_1 = require("../stack");
+function FilterCard() {
+    return (react_1.default.createElement(box_1.Box, { background: "bg-default", padding: "6", borderWidth: "5", borderColor: "border-action" },
+        react_1.default.createElement(stack_1.VStack, { gap: "6" },
+            react_1.default.createElement(typography_1.Heading, { size: "large" }, "Fortell oss om situasjonen din"),
+            react_1.default.createElement(typography_1.BodyLong, null, "Fortell oss litt om situasjonen din, s\u00E5 viser vi bare den informasjonen som er relevant for deg."),
+            react_1.default.createElement(form_1.CheckboxGroup, { legend: "Hva er situasjonen din?", size: "small" },
+                react_1.default.createElement(form_1.Checkbox, null, "Jeg er arbeidsledig"),
+                react_1.default.createElement(form_1.Checkbox, null, "Jeg er permittert")))));
+}
+exports.FilterCard = FilterCard;

package/cjs/layout/page-demo/Header.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../typography");
+const box_1 = require("../box");
+const responsive_1 = require("../responsive");
+const stack_1 = require("../stack");
+const content_box_1 = require("../content-box");
+function Header() {
+    return (react_1.default.createElement(box_1.Box, { as: "header", borderWidth: "0 0 4 0", borderColor: "border-success", paddingBlock: "12 0" },
+        react_1.default.createElement(content_box_1.ContentBox, { maxWidth: "lg" },
+            react_1.default.createElement(box_1.Box, { background: "surface-default", paddingInline: "4", paddingBlock: "0 6" },
+                react_1.default.createElement(stack_1.HStack, { align: "start", gap: "8" },
+                    react_1.default.createElement(responsive_1.Hide, { below: "md" },
+                        react_1.default.createElement(Pictogram, null)),
+                    react_1.default.createElement(stack_1.VStack, { gap: { xs: "4", md: "5" } },
+                        react_1.default.createElement(typography_1.Heading, { level: "1", size: "xlarge" }, "Dagpenger"),
+                        react_1.default.createElement(responsive_1.Hide, { below: "md" },
+                            react_1.default.createElement(stack_1.HStack, { gap: "4", align: "center" },
+                                react_1.default.createElement(typography_1.BodyShort, { size: "small" }, "PENGEST\u00D8TTE"),
+                                react_1.default.createElement("span", { "aria-hidden": "true" }, "|"),
+                                react_1.default.createElement(typography_1.Detail, null, "Oppdatert 5. juli 2023"))),
+                        react_1.default.createElement(responsive_1.Show, { below: "md" },
+                            react_1.default.createElement(stack_1.VStack, { gap: "2" },
+                                react_1.default.createElement(typography_1.BodyShort, { size: "small" }, "PENGEST\u00D8TTE"),
+                                react_1.default.createElement(typography_1.Detail, null, "Oppdatert 5. juli 2023")))))))));
+}
+exports.Header = Header;
+function Pictogram() {
+    return (react_1.default.createElement("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "80", height: "80", viewBox: "0 0 96.45 96.44" },
+        react_1.default.createElement("g", { clipPath: "url(#clip0_4486_7567)" },
+            react_1.default.createElement("path", { d: "M37.6276 55.6806L12.707 30.76L31.2599 12.2071L56.1805 37.1277L66.7031 26.6052L75.0165 74.5166L27.1051 66.2031L37.6276 55.6806Z", fill: "#CCF1D6" }),
+            react_1.default.createElement("path", { d: "M41 11V33H2L2 9H27.5072", stroke: "#262626", strokeWidth: "3" }),
+            react_1.default.createElement("circle", { cx: "22", cy: "16", r: "6.5", stroke: "#262626", strokeWidth: "3" }),
+            react_1.default.createElement("circle", { cx: "35", cy: "9", r: "6.5", stroke: "#262626", strokeWidth: "3" }),
+            react_1.default.createElement("circle", { cx: "62", cy: "63", r: "22.5", stroke: "#262626", strokeWidth: "3" }),
+            react_1.default.createElement("path", { d: "M77.8105 77.7964L94.9534 94.9392", stroke: "#262626", strokeWidth: "3" }),
+            react_1.default.createElement("path", { d: "M47.6311 59.1036L72.7452 52.3743C73.0119 52.3028 73.2861 52.4611 73.3576 52.7279L75.1693 59.4894C75.3837 60.2896 74.9088 61.1121 74.1086 61.3265L50.9264 67.5381C50.1262 67.7525 49.3037 67.2777 49.0893 66.4775L47.2776 59.716C47.2061 59.4493 47.3644 59.1751 47.6311 59.1036Z", stroke: "#262626", strokeWidth: "3" }),
+            react_1.default.createElement("path", { d: "M52.3847 74.912L50.4436 67.6676L74.5917 61.1971L76.5329 68.4416C76.7473 69.2418 76.2724 70.0643 75.4722 70.2787L54.2218 75.9727C53.4216 76.1871 52.5991 75.7122 52.3847 74.912Z", stroke: "#262626", strokeWidth: "3" }),
+            react_1.default.createElement("path", { d: "M64.1814 55.1864L63.6638 53.2546C63.092 51.1207 60.8987 49.8544 58.7648 50.4261V50.4261C56.631 50.9979 55.3646 53.1913 55.9364 55.3251L56.454 57.257", stroke: "#262626", strokeWidth: "3" })),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("clipPath", { id: "clip0_4486_7567" },
+                react_1.default.createElement("rect", { width: "96", height: "96", fill: "white" })))));
+}

package/cjs/layout/page-demo/Intro.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntroCard = void 0;
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const react_1 = __importDefault(require("react"));
+const copybutton_1 = require("../../copybutton");
+const typography_1 = require("../../typography");
+const box_1 = require("../box");
+const stack_1 = require("../stack");
+function IntroCard() {
+    return (react_1.default.createElement(box_1.Box, { background: "bg-default", padding: "10" },
+        react_1.default.createElement(stack_1.VStack, { gap: "6" },
+            react_1.default.createElement(stack_1.VStack, { gap: "2", align: "start" },
+                react_1.default.createElement(typography_1.Heading, { size: "large" }, "Kort om dagpenger"),
+                react_1.default.createElement(copybutton_1.CopyButton, { copyText: "#", text: "Kopier lenke", size: "small", icon: react_1.default.createElement(aksel_icons_1.LinkIcon, { "aria-hidden": true }) })),
+            react_1.default.createElement(typography_1.BodyLong, null, "Dagpenger er en pengest\u00F8tte du kan f\u00E5 hvis du er arbeidsledig eller permittert."),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(typography_1.Label, { as: "p", spacing: true }, "Dagpenger er aktuelt for deg som"),
+                react_1.default.createElement(stack_1.HStack, { wrap: true, gap: "4" },
+                    react_1.default.createElement(box_1.Box, { borderRadius: "full", shadow: "small", borderWidth: "1", borderColor: "border-subtle", paddingBlock: "1", paddingInline: "2" },
+                        react_1.default.createElement(stack_1.HStack, { gap: "2", align: "center" },
+                            react_1.default.createElement(box_1.Box, { borderRadius: "full", borderWidth: "4", borderColor: "border-success" }),
+                            react_1.default.createElement(typography_1.Detail, { as: "span" }, "Er arbeidsledig eller permitert"))),
+                    react_1.default.createElement(box_1.Box, { borderRadius: "full", shadow: "small", borderWidth: "1", borderColor: "border-subtle", paddingBlock: "1", paddingInline: "2" },
+                        react_1.default.createElement(stack_1.HStack, { gap: "2", align: "center" },
+                            react_1.default.createElement(box_1.Box, { borderRadius: "full", borderWidth: "4", borderColor: "border-success" }),
+                            react_1.default.createElement(typography_1.Detail, { as: "span" }, "S\u00F8ker jobb"))),
+                    react_1.default.createElement(box_1.Box, { borderRadius: "full", shadow: "small", borderWidth: "1", borderColor: "border-subtle", paddingBlock: "1", paddingInline: "2" },
+                        react_1.default.createElement(stack_1.HStack, { gap: "2", align: "center" },
+                            react_1.default.createElement(box_1.Box, { borderRadius: "full", borderWidth: "4", borderColor: "border-success" }),
+                            react_1.default.createElement(typography_1.Detail, { as: "span" }, "Trenger hjelp til \u00E5 komme i jobb"))))))));
+}
+exports.IntroCard = IntroCard;

package/cjs/layout/page-demo/Sidebar.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewsPanel = exports.ContentPanel = exports.Sidebar = void 0;
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../typography");
+const box_1 = require("../box");
+const stack_1 = require("../stack");
+const link_1 = require("../../link");
+const LinkElement = ({ children }) => {
+    return (react_1.default.createElement(typography_1.Label, { as: "li", className: "sidebarlink" }, children));
+};
+function Sidebar() {
+    return (react_1.default.createElement(stack_1.VStack, { gap: "4", className: "sidebar" },
+        react_1.default.createElement(ContentPanel, null),
+        react_1.default.createElement(NewsPanel, null)));
+}
+exports.Sidebar = Sidebar;
+function ContentPanel() {
+    return (react_1.default.createElement(box_1.Box, { as: "nav", "aria-label": "innhold", paddingInline: "2", paddingBlock: "8 4", background: "surface-default" },
+        react_1.default.createElement(box_1.Box, { paddingBlock: "0 3", paddingInline: "4 0" },
+            react_1.default.createElement(typography_1.Heading, { size: "medium" }, "Innhold")),
+        react_1.default.createElement("ul", { className: "reset-list" },
+            react_1.default.createElement(LinkElement, null, "Kort om dagpenger"),
+            react_1.default.createElement(LinkElement, null, "Hvem kan f\u00E5?"),
+            react_1.default.createElement(LinkElement, null, "Hvor mye kan du f\u00E5?"),
+            react_1.default.createElement(LinkElement, null, "N\u00E5r utbetales pengene?"),
+            react_1.default.createElement(LinkElement, null, "Hvor lenge kan du f\u00E5?"),
+            react_1.default.createElement(LinkElement, null, "Slik s\u00F8ker du"),
+            react_1.default.createElement(LinkElement, null, "Hva m\u00E5 du gj\u00F8re for \u00E5 f\u00E5 dagpenger?"),
+            react_1.default.createElement(LinkElement, null, "Gi beskjed om endringer"),
+            react_1.default.createElement(LinkElement, null, "Jobb i kombinasjon med dagpenger"),
+            react_1.default.createElement(LinkElement, null, "Utdanning og oppl\u00E6ring"),
+            react_1.default.createElement(LinkElement, null, "Ferie og utenlandsopphold"),
+            react_1.default.createElement(LinkElement, null, "Slik klager du"))));
+}
+exports.ContentPanel = ContentPanel;
+function NewsPanel() {
+    return (react_1.default.createElement(box_1.Box, { padding: "4", background: "surface-default", "aria-label": "Nyttig \u00E5 vite", as: "section" },
+        react_1.default.createElement(box_1.Box, { paddingBlock: "0 3", paddingInline: "2" },
+            react_1.default.createElement(typography_1.Heading, { size: "small" }, "Nyttig \u00E5 vite")),
+        react_1.default.createElement("nav", { "aria-label": "innhold" },
+            react_1.default.createElement("ul", { className: "reset-list" },
+                react_1.default.createElement(box_1.Box, { paddingBlock: "2", paddingInline: "2" },
+                    react_1.default.createElement(link_1.Link, null, "Hva sier loven?"))))));
+}
+exports.NewsPanel = NewsPanel;

package/cjs/layout/sidemal-test/AvatarPanel.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarPanel = void 0;
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../box");
+const stack_1 = require("../stack");
+function AvatarPanel({ children }) {
+    return (react_1.default.createElement(box_1.Box, { background: "bg-default", paddingInline: { xs: "4", md: "10" }, paddingBlock: { xs: "10 8", md: "12 10" }, className: "avatar-card", borderRadius: "medium" },
+        react_1.default.createElement(stack_1.HStack, { justify: "center" },
+            react_1.default.createElement(box_1.Box, { borderRadius: "full", background: "surface-success-moderate", className: "avatar" },
+                react_1.default.createElement(aksel_icons_1.PersonIcon, { fontSize: "2rem" }))),
+        children));
+}
+exports.AvatarPanel = AvatarPanel;