@navikt/ds-react 5.12.4 → 5.13.0

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

@@ -37,13 +37,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const util_1 = require("../../../util");
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
+const react_1 = __importStar(require("react"));
+const util_1 = require("../../../util");
+const filtered_options_util_1 = __importDefault(require("../FilteredOptions/filtered-options-util"));
 const filteredOptionsContext_1 = require("../FilteredOptions/filteredOptionsContext");
+const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
 const inputContext_1 = require("./inputContext");
-const filtered_options_util_1 = __importDefault(require("../FilteredOptions/filtered-options-util"));
 const Input = (0, react_1.forwardRef)((_a, ref) => {
     var { inputClassName } = _a, rest = __rest(_a, ["inputClassName"]);
     const { clearInput, inputProps, onChange, size, value } = (0, inputContext_1.useInputContext)();

package/cjs/form/combobox/SelectedOptions/SelectedOptions.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const chips_1 = require("../../../chips");
-const selectedOptionsContext_1 = require("./selectedOptionsContext");
 const inputContext_1 = require("../Input/inputContext");
+const selectedOptionsContext_1 = require("./selectedOptionsContext");
 const Option = ({ option }) => {
     const { isMultiSelect, removeSelectedOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     const { focusInput } = (0, inputContext_1.useInputContext)();

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

@@ -38,11 +38,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorSummary = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../../typography");
-const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
 const util_1 = require("../../util");
+const ErrorSummaryItem_1 = __importDefault(require("./ErrorSummaryItem"));
 /**
  * A component that displays a summary of errors.
  *

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

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorSummaryItem = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 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, clsx_1.default)(className, "navds-error-summary__item", "navds-link") }), children));

package/cjs/form/search/Search.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Search = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../../typography");
 const util_1 = require("../../util");
 const useFormField_1 = require("../useFormField");

package/cjs/form/search/SearchButton.js

@@ -37,9 +37,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../../button");
 const context_1 = require("./context");
 const SearchButton = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/grid/Cell.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cell = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)

package/cjs/grid/Grid.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)

package/cjs/guide-panel/GuidePanel.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GuidePanel = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const Illustration_1 = require("./Illustration");
 /**
  * A component for guiding users on the website

package/cjs/internal-header/InternalHeaderButton.js

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

package/cjs/internal-header/InternalHeaderTitle.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeaderTitle = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.InternalHeaderTitle = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "a", children, className } = _a, rest = __rest(_a, ["as", "children", "className"]);
     return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, size: "xsmall", className: (0, clsx_1.default)("navds-internalheader__title", "navds-body-short", className) }),

package/cjs/internal-header/InternalHeaderUser.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeaderUser = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 exports.InternalHeaderUser = (0, react_1.forwardRef)((_a, ref) => {
     var { className, name, description } = _a, rest = __rest(_a, ["className", "name", "description"]);

package/cjs/internal-header/InternalHeaderUserButton.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InternalHeaderUserButton = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../typography");
 const InternalHeaderButton_1 = __importDefault(require("./InternalHeaderButton"));
 exports.InternalHeaderUserButton = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/layout/bleed/Bleed.js

@@ -40,8 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bleed = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const css_1 = require("../utilities/css");
 const Slot_1 = require("../../util/Slot");
+const css_1 = require("../utilities/css");
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
  *

package/cjs/layout/content-container/ContentContainer.js

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

package/cjs/layout/grid/HGrid.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HGrid = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const css_1 = require("../utilities/css");
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.

package/cjs/layout/page/parts/PageBlock.js

@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageBlock = exports.widths = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-exports.widths = ["md", "lg", "xl", "2xl"];
+exports.widths = ["text", "md", "lg", "xl", "2xl"];
 /**
  * Acts as a top-level container for defining max-width, gutters and horizontal centering
  *

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (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 aksel_icons_1 = require("@navikt/aksel-icons");
 const box_1 = require("../box");
 const stack_1 = require("../stack");
 function AvatarPanel({ children }) {

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

@@ -4,17 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importDefault(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const accordion_1 = require("../../accordion");
 const copybutton_1 = require("../../copybutton");
+const link_1 = require("../../link");
+const list_1 = require("../../list");
 const read_more_1 = require("../../read-more");
 const typography_1 = require("../../typography");
 const box_1 = require("../box");
 const stack_1 = require("../stack");
 const AvatarPanel_1 = require("./AvatarPanel");
-const list_1 = require("../../list");
-const link_1 = require("../../link");
 function Content() {
     return (react_1.default.createElement(AvatarPanel_1.AvatarPanel, null,
         react_1.default.createElement(box_1.Box, { paddingBlock: "0 6" },

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

@@ -25,11 +25,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterCard = void 0;
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const form_1 = require("../../form");
 const typography_1 = require("../../typography");
 const box_1 = require("../box");
 const stack_1 = require("../stack");
-const aksel_icons_1 = require("@navikt/aksel-icons");
 function FilterCard() {
     const [filter, setFilter] = (0, react_1.useState)([]);
     return (react_1.default.createElement(box_1.Box, { background: "bg-default", padding: { xs: "4", md: "5" }, borderWidth: "5", borderColor: "border-alt-3", borderRadius: "medium" },

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

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (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 aksel_icons_1 = require("@navikt/aksel-icons");
 const copybutton_1 = require("../../copybutton");
 const typography_1 = require("../../typography");
 const box_1 = require("../box");

package/cjs/link-panel/LinkPanel.js

@@ -38,12 +38,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelComponent = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
-const LinkPanelTitle_1 = require("./LinkPanelTitle");
-const LinkPanelDescription_1 = require("./LinkPanelDescription");
+const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const panel_1 = require("../panel");
+const LinkPanelDescription_1 = require("./LinkPanelDescription");
+const LinkPanelTitle_1 = require("./LinkPanelTitle");
 /**
  * A component that displays a link panel.
  *

package/cjs/link-panel/LinkPanelDescription.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPanelDescription = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 exports.LinkPanelDescription = (0, react_1.forwardRef)((_a, ref) => {
     var { className } = _a, rest = __rest(_a, ["className"]);

package/cjs/link-panel/LinkPanelTitle.js

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

package/cjs/modal/ModalBody.js

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

package/cjs/modal/ModalFooter.js

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

package/cjs/modal/ModalHeader.js

@@ -37,8 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../button");
 const ModalContext_1 = require("./ModalContext");

package/cjs/pagination/PaginationItem.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const button_1 = require("../button");
 exports.Item = (0, react_1.forwardRef)((_a, ref) => {
     var { children, as: Component = "button", selected = false, className } = _a, rest = __rest(_a, ["children", "as", "selected", "className"]);

package/cjs/panel/Panel.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * A component that displays a bordered panel with heading and body.
  *

package/cjs/popover/PopoverContent.js

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

package/cjs/read-more/ReadMore.js

@@ -42,6 +42,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const typography_1 = require("../typography");
+const useControllableState_1 = require("../util/hooks/useControllableState");
 /**
  * ReadMore
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/read-more)
@@ -60,22 +61,23 @@ const typography_1 = require("../typography");
  * </ReadMore>
  */
 exports.ReadMore = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, header, children, open, defaultOpen = false, onClick, size = "medium" } = _a, rest = __rest(_a, ["className", "header", "children", "open", "defaultOpen", "onClick", "size"]);
-    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
-    const isOpened = open !== null && open !== void 0 ? open : internalOpen;
-    return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-read-more", `navds-read-more--${size}`, className, { "navds-read-more--open": isOpened }) },
+    var { className, header, children, open, defaultOpen = false, onClick, size = "medium", onOpenChange } = _a, rest = __rest(_a, ["className", "header", "children", "open", "defaultOpen", "onClick", "size", "onOpenChange"]);
+    const [_open, _setOpen] = (0, useControllableState_1.useControllableState)({
+        defaultValue: defaultOpen,
+        value: open,
+        onChange: onOpenChange,
+    });
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-read-more", `navds-read-more--${size}`, className, { "navds-read-more--open": _open }) },
         react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, type: "button", className: (0, clsx_1.default)("navds-read-more__button", "navds-body-short", {
                 "navds-body-short--small": size === "small",
             }), onClick: (e) => {
-                if (open === undefined) {
-                    setInternalOpen((isOpen) => !isOpen);
-                }
+                _setOpen((x) => !x);
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
-            }, "aria-expanded": isOpened }),
+            }, "aria-expanded": _open }),
             react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-read-more__expand-icon", "aria-hidden": true }),
             react_1.default.createElement("span", null, header)),
-        react_1.default.createElement(typography_1.BodyLong, { as: "div", "aria-hidden": !isOpened, className: (0, clsx_1.default)("navds-read-more__content", {
-                "navds-read-more__content--closed": !isOpened,
+        react_1.default.createElement(typography_1.BodyLong, { as: "div", "aria-hidden": !_open, className: (0, clsx_1.default)("navds-read-more__content", {
+                "navds-read-more__content--closed": !_open,
             }), size: size }, children)));
 });
 exports.default = exports.ReadMore;

package/cjs/skeleton/Skeleton.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 /**
  * Simple skeleton loader
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/skeleton)

package/cjs/table/Body.js

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

package/cjs/table/ColumnHeader.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnHeader = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const context_1 = require("./context");
 exports.ColumnHeader = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/table/DataCell.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataCell = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 exports.DataCell = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);

package/cjs/table/ExpandableRow.js

@@ -38,29 +38,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandableRow = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const util_1 = require("../util");
 const AnimateHeight_1 = __importDefault(require("../util/AnimateHeight"));
+const useControllableState_1 = require("../util/hooks/useControllableState");
 const DataCell_1 = __importDefault(require("./DataCell"));
 const Row_1 = __importDefault(require("./Row"));
 exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, expandOnRowClick = false, colSpan = 999 } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "expandOnRowClick", "colSpan"]);
-    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const [_open, _setOpen] = (0, useControllableState_1.useControllableState)({
+        defaultValue: defaultOpen,
+        value: open,
+        onChange: onOpenChange,
+    });
     const id = (0, util_1.useId)();
-    const isOpen = open !== null && open !== void 0 ? open : internalOpen;
     const expansionHandler = (e) => {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
-        if (open === undefined) {
-            setInternalOpen((oldOpen) => !oldOpen);
-        }
+        _setOpen((x) => !x);
         e.stopPropagation();
     };
     const onRowClick = (e) => !isInteractiveTarget(e.target) && expansionHandler(e);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__expandable-row", className, {
-                "navds-table__expandable-row--open": isOpen,
+                "navds-table__expandable-row--open": _open,
                 "navds-table__expandable-row--expansion-disabled": expansionDisabled,
                 "navds-table__expandable-row--clickable": expandOnRowClick,
             }), onClick: (e) => {
@@ -70,13 +71,13 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
             } }),
             togglePlacement === "right" && children,
             react_1.default.createElement(DataCell_1.default, { className: (0, clsx_1.default)("navds-table__toggle-expand-cell", {
-                    "navds-table__toggle-expand-cell--open": isOpen,
-                }) }, !expansionDisabled && (react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", type: "button", "aria-controls": id, "aria-expanded": isOpen, onClick: expansionHandler },
-                react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-table__expandable-icon", title: isOpen ? "Vis mindre" : "Vis mer" })))),
+                    "navds-table__toggle-expand-cell--open": _open,
+                }) }, !expansionDisabled && (react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", type: "button", "aria-controls": id, "aria-expanded": _open, onClick: expansionHandler },
+                react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "navds-table__expandable-icon", title: _open ? "Vis mindre" : "Vis mer" })))),
             togglePlacement === "left" && children),
-        react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
+        react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !_open, id: id },
             react_1.default.createElement("td", { colSpan: colSpan, className: "navds-table__expanded-row-cell" },
-                react_1.default.createElement(AnimateHeight_1.default, { className: "navds-table__expanded-row-collapse", innerClassName: "navds-table__expanded-row-content", height: isOpen ? "auto" : 0, duration: 250 }, content)))));
+                react_1.default.createElement(AnimateHeight_1.default, { className: "navds-table__expanded-row-collapse", innerClassName: "navds-table__expanded-row-content", height: _open ? "auto" : 0, duration: 250 }, content)))));
 });
 function isInteractiveTarget(elm) {
     if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {

package/cjs/table/Header.js

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

package/cjs/table/Row.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Row = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 exports.Row = (0, react_1.forwardRef)((_a, ref) => {
     var { className, selected = false, shadeOnHover = true } = _a, rest = __rest(_a, ["className", "selected", "shadeOnHover"]);
     return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__row", className, {

package/cjs/tabs/TabList.js

@@ -38,10 +38,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabList = void 0;
-const aksel_icons_1 = require("@navikt/aksel-icons");
 const react_tabs_1 = require("@radix-ui/react-tabs");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const aksel_icons_1 = require("@navikt/aksel-icons");
 const util_1 = require("../util");
 const context_1 = require("./context");
 exports.TabList = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/tabs/Tabs.js

@@ -41,10 +41,10 @@ exports.Tabs = void 0;
 const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const context_1 = require("./context");
 const Tab_1 = __importDefault(require("./Tab"));
 const TabList_1 = __importDefault(require("./TabList"));
 const TabPanel_1 = __importDefault(require("./TabPanel"));
+const context_1 = require("./context");
 /**
  * A component that displays a set of tabs that can be used to switch between different views.
  *

package/cjs/tag/Tag.js

@@ -38,8 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 /**
  * A component that displays a small label with a text and a background color.

package/cjs/timeline/AxisLabels.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AxisLabels = exports.yearLabels = exports.monthLabels = exports.dayLabels = void 0;
-const Detail_1 = require("../typography/Detail");
 const date_fns_1 = require("date-fns");
 const nb_1 = __importDefault(require("date-fns/locale/nb"));
 const react_1 = __importDefault(require("react"));
+const Detail_1 = require("../typography/Detail");
 const useTimelineContext_1 = require("./hooks/useTimelineContext");
 const utils_1 = require("./utils");
 const calc_1 = require("./utils/calc");

package/cjs/timeline/TimelineRow.js

@@ -38,14 +38,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineRow = void 0;
-const BodyShort_1 = require("../typography/BodyShort");
+const clsx_1 = __importDefault(require("clsx"));
 const date_fns_1 = require("date-fns");
 const react_1 = __importStar(require("react"));
+const BodyShort_1 = require("../typography/BodyShort");
 const usePeriodContext_1 = require("./hooks/usePeriodContext");
 const useRowContext_1 = require("./hooks/useRowContext");
 const useTimelineContext_1 = require("./hooks/useTimelineContext");
 const period_1 = __importDefault(require("./period"));
-const clsx_1 = __importDefault(require("clsx"));
 exports.TimelineRow = (0, react_1.forwardRef)((_a, ref) => {
     var { label, className, headingTag = "h3", icon } = _a, rest = __rest(_a, ["label", "className", "headingTag", "icon"]);
     const { periods, id, active } = (0, useRowContext_1.useRowContext)();