@navikt/ds-react 5.9.2 → 5.10.1

package/_docs.json

@@ -17323,6 +17323,151 @@
       }
     }
   },
+  {
+    "filePath": "src/layout/page/Page.tsx",
+    "displayName": "PageComponent",
+    "props": {
+      "as": {
+        "defaultValue": {
+          "value": "\"div\""
+        },
+        "description": "Overrides html-tag",
+        "name": "as",
+        "parent": {
+          "fileName": "src/layout/page/Page.tsx",
+          "name": "PageProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/page/Page.tsx",
+            "name": "PageProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"div\" | \"body\""
+        }
+      },
+      "background": {
+        "defaultValue": {
+          "value": "bg-default"
+        },
+        "description": "Background color. Accepts a color token.",
+        "name": "background",
+        "parent": {
+          "fileName": "src/layout/page/Page.tsx",
+          "name": "PageProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/page/Page.tsx",
+            "name": "PageProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"bg-default\" | \"bg-subtle\""
+        }
+      },
+      "footer": {
+        "defaultValue": null,
+        "description": "Allows better positioning of footer",
+        "name": "footer",
+        "parent": {
+          "fileName": "src/layout/page/Page.tsx",
+          "name": "PageProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/page/Page.tsx",
+            "name": "PageProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "footerPosition": {
+        "defaultValue": null,
+        "description": "Places footer below page-fold",
+        "name": "footerPosition",
+        "parent": {
+          "fileName": "src/layout/page/Page.tsx",
+          "name": "PageProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/page/Page.tsx",
+            "name": "PageProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"belowFold\""
+        }
+      },
+      "contentBlockPadding": {
+        "defaultValue": {
+          "value": "end"
+        },
+        "description": "Adds a standardised padding of 4rem between content and footer",
+        "name": "contentBlockPadding",
+        "parent": {
+          "fileName": "src/layout/page/Page.tsx",
+          "name": "PageProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/page/Page.tsx",
+            "name": "PageProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"end\" | \"none\""
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/layout/responsive/Responsive.tsx",
     "displayName": "Hide",
@@ -19162,6 +19307,92 @@
       }
     }
   },
+  {
+    "filePath": "src/layout/page/parts/PageBlock.tsx",
+    "displayName": "PageBlock",
+    "props": {
+      "width": {
+        "defaultValue": {
+          "value": "max-width: 100%;"
+        },
+        "description": "Predefined max-width\n@example lg:  1024px\nxl:  1280px\n2xl: 1440px",
+        "name": "width",
+        "parent": {
+          "fileName": "src/layout/page/parts/PageBlock.tsx",
+          "name": "PageBlockProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/page/parts/PageBlock.tsx",
+            "name": "PageBlockProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"lg\" | \"xl\" | \"2xl\""
+        }
+      },
+      "gutters": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Adds a standardised responsive padding-inline\n@example 3rem on > md\n1rem on < md",
+        "name": "gutters",
+        "parent": {
+          "fileName": "src/layout/page/parts/PageBlock.tsx",
+          "name": "PageBlockProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/page/parts/PageBlock.tsx",
+            "name": "PageBlockProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/layout/sidemal-test/content-box/ContentBox.tsx",
     "displayName": "ContentBox",

package/cjs/index.js

@@ -54,3 +54,4 @@ __exportStar(require("./layout/stack"), exports);
 __exportStar(require("./layout/grid"), exports);
 __exportStar(require("./layout/content-container"), exports);
 __exportStar(require("./layout/responsive"), exports);
+__exportStar(require("./layout/page"), exports);

package/cjs/layout/page/Page.js

@@ -0,0 +1,86 @@
+"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.PageComponent = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const PageBlock_1 = require("./parts/PageBlock");
+exports.PageComponent = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, style: _style, footer, children, footerPosition, background = "bg-default", contentBlockPadding = "end" } = _a, rest = __rest(_a, ["as", "className", "style", "footer", "children", "footerPosition", "background", "contentBlockPadding"]);
+    const style = Object.assign(Object.assign({}, _style), { "--__ac-page-background": `var(--a-${background})` });
+    const belowFold = footerPosition === "belowFold";
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-page", className), ref: ref, style: style }),
+        react_1.default.createElement("div", { className: (0, clsx_1.default)({
+                "navds-page__content--fullheight": belowFold,
+                "navds-page__content--grow": !belowFold,
+                "navds-page__content--padding": contentBlockPadding === "end",
+            }) }, children),
+        footer));
+});
+/**
+ * Page helps with establishing a top-level layout for your page
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * Footer placed below page-fold
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ *   footerPosition="belowFold"
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ */
+const Page = exports.PageComponent;
+Page.Block = PageBlock_1.PageBlock;
+exports.default = Page;

package/cjs/layout/page/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.Page = void 0;
+var Page_1 = require("./Page");
+Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return __importDefault(Page_1).default; } });

package/cjs/layout/page/package.json

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

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

@@ -0,0 +1,76 @@
+"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.PageBlock = exports.widths = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+exports.widths = ["lg", "xl", "2xl"];
+/**
+ * Acts as a top-level container for defining max-width, gutters and horizontal centering
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageBlockProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * With background bleed
+ * Wrapping `Page.Block` with `Box` allows the background-color to use full screen-width
+ * ```jsx
+ * <Page
+ *   footer={<Box background="..."><Page.Block width="xl" gutters /></Box>}
+ *   footerPosition="belowFold"
+ * >
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Header
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Content
+ * </Page>
+ * ```
+ */
+exports.PageBlock = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", gutters, className, width } = _a, rest = __rest(_a, ["as", "gutters", "className", "width"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-pageblock", `navds-pageblock--${width}`, className, { "navds-pageblock--gutters": gutters }), ref: ref })));
+});

package/cjs/table/ExpandableRow.js

@@ -57,11 +57,7 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
         }
         e.stopPropagation();
     };
-    const onRowClick = (e) => {
-        if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
-            expansionHandler(e);
-        }
-    };
+    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,
@@ -82,4 +78,13 @@ exports.ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
             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)))));
 });
+function isInteractiveTarget(elm) {
+    if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {
+        return false;
+    }
+    if (["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(elm.nodeName)) {
+        return true;
+    }
+    return isInteractiveTarget(elm.parentElement);
+}
 exports.default = exports.ExpandableRow;

package/esm/index.d.ts

@@ -38,3 +38,4 @@ export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
 export * from "./layout/responsive";
+export * from "./layout/page";

package/esm/index.js

@@ -38,4 +38,5 @@ export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
 export * from "./layout/responsive";
+export * from "./layout/page";
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}

package/esm/layout/page/Page.d.ts

@@ -0,0 +1,63 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import React from "react";
+import { OverridableComponent } from "../../util";
+import { PageBlock } from "./parts/PageBlock";
+export interface PageProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Overrides html-tag
+     * @default "div"
+     */
+    as?: "div" | "body";
+    /**
+     * Background color. Accepts a color token.
+     * @default bg-default
+     */
+    background?: keyof typeof bgColors.a;
+    /**
+     * Allows better positioning of footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * Places footer below page-fold
+     */
+    footerPosition?: "belowFold";
+    /**
+     * Adds a standardised padding of 4rem between content and footer
+     * @default block-end
+     */
+    contentBlockPadding?: "end" | "none";
+}
+interface PageComponentType extends OverridableComponent<PageProps, HTMLElement> {
+    Block: typeof PageBlock;
+}
+export declare const PageComponent: OverridableComponent<PageProps, HTMLElement>;
+/**
+ * Page helps with establishing a top-level layout for your page
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * Footer placed below page-fold
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ *   footerPosition="belowFold"
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ */
+declare const Page: PageComponentType;
+export default Page;

package/esm/layout/page/Page.js

@@ -0,0 +1,58 @@
+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;
+};
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { PageBlock } from "./parts/PageBlock";
+export const PageComponent = forwardRef((_a, ref) => {
+    var { as: Component = "div", className, style: _style, footer, children, footerPosition, background = "bg-default", contentBlockPadding = "end" } = _a, rest = __rest(_a, ["as", "className", "style", "footer", "children", "footerPosition", "background", "contentBlockPadding"]);
+    const style = Object.assign(Object.assign({}, _style), { "--__ac-page-background": `var(--a-${background})` });
+    const belowFold = footerPosition === "belowFold";
+    return (React.createElement(Component, Object.assign({}, rest, { className: cl("navds-page", className), ref: ref, style: style }),
+        React.createElement("div", { className: cl({
+                "navds-page__content--fullheight": belowFold,
+                "navds-page__content--grow": !belowFold,
+                "navds-page__content--padding": contentBlockPadding === "end",
+            }) }, children),
+        footer));
+});
+/**
+ * Page helps with establishing a top-level layout for your page
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * Footer placed below page-fold
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ *   footerPosition="belowFold"
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ */
+const Page = PageComponent;
+Page.Block = PageBlock;
+export default Page;
+//# sourceMappingURL=Page.js.map

package/esm/layout/page/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/layout/page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAiC9C,MAAM,CAAC,MAAM,aAAa,GACxB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EACN,QAAQ,EACR,cAAc,EACd,UAAU,GAAG,YAAY,EACzB,mBAAmB,GAAG,KAAK,OAE5B,EADI,IAAI,cATT,yGAUC,CADQ;IAIT,MAAM,KAAK,mCACN,MAAM,KACT,wBAAwB,EAAE,WAAW,UAAU,GAAG,GACnD,CAAC;IAEF,MAAM,SAAS,GAAG,cAAc,KAAK,WAAW,CAAC;IAEjD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EACtC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,6BACE,SAAS,EAAE,EAAE,CAAC;gBACZ,iCAAiC,EAAE,SAAS;gBAC5C,2BAA2B,EAAE,CAAC,SAAS;gBACvC,8BAA8B,EAAE,mBAAmB,KAAK,KAAK;aAC9D,CAAC,IAED,QAAQ,CACL;QACL,MAAM,CACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,IAAI,GAAG,aAAkC,CAAC;AAEhD,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AAEvB,eAAe,IAAI,CAAC"}

package/esm/layout/page/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Page, type PageProps } from "./Page";
+export { type PageBlockProps } from "./parts/PageBlock";

package/esm/layout/page/index.js

@@ -0,0 +1,2 @@
+export { default as Page } from "./Page";
+//# sourceMappingURL=index.js.map

package/esm/layout/page/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAkB,MAAM,QAAQ,CAAC"}

package/esm/layout/page/parts/PageBlock.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+export declare const widths: readonly ["lg", "xl", "2xl"];
+export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Predefined max-width
+     * @example
+     * lg:  1024px
+     * xl:  1280px
+     * 2xl: 1440px
+     * @default max-width: 100%;
+     */
+    width?: (typeof widths)[number];
+    /**
+     * Adds a standardised responsive padding-inline
+     * @example
+     * 3rem on > md
+     * 1rem on < md
+     * @default false
+     */
+    gutters?: boolean;
+}
+/**
+ * Acts as a top-level container for defining max-width, gutters and horizontal centering
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/page)
+ * @see 🏷️ {@link PageBlockProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ * <Page
+ *   footer={<Page.Block width="xl" gutters />}
+ * >
+ *   <Page.Block width="xl" gutters />// Header
+ *   <Page.Block width="xl" gutters />// Content
+ * </Page>
+ * ```
+ * @example
+ * With background bleed
+ * Wrapping `Page.Block` with `Box` allows the background-color to use full screen-width
+ * ```jsx
+ * <Page
+ *   footer={<Box background="..."><Page.Block width="xl" gutters /></Box>}
+ *   footerPosition="belowFold"
+ * >
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Header
+ *   <Box background="..."><Page.Block width="xl" gutters /></Box>//Content
+ * </Page>
+ * ```
+ */
+export declare const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement>;