@navikt/ds-react 6.10.1 → 6.12.0

package/cjs/alert/Alert.d.ts

@@ -18,6 +18,11 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     fullWidth?: boolean;
+    /**
+     * Sets max-width on the content to 43.5rem.
+     * @default true
+     */
+    contentMaxWidth?: boolean;
     /**
      * Removes background from Alert.
      * @default false

package/cjs/alert/Alert.js

@@ -68,16 +68,18 @@ const Icon = (_a) => {
  * ```
  */
 exports.Alert = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, variant, size = "medium", fullWidth = false, inline = false, closeButton = false, onClose } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline", "closeButton", "onClose"]);
+    var { children, className, variant, size = "medium", fullWidth = false, contentMaxWidth = true, inline = false, closeButton = false, onClose } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "contentMaxWidth", "inline", "closeButton", "onClose"]);
     return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, {
             "navds-alert--full-width": fullWidth,
             "navds-alert--inline": inline,
             "navds-alert--close-button": closeButton,
         }) }),
         react_1.default.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
-        react_1.default.createElement(typography_1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children),
+        react_1.default.createElement(typography_1.BodyLong, { as: "div", size: size, className: (0, clsx_1.default)("navds-alert__wrapper", contentMaxWidth && "navds-alert__wrapper--maxwidth") }, children),
         closeButton && !inline && (react_1.default.createElement("div", { className: "navds-alert__button-wrapper" },
-            react_1.default.createElement(button_1.Button, { className: "navds-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: "Lukk Alert" }) })))));
+            react_1.default.createElement(button_1.Button, { className: "navds-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: ["error", "warning"].includes(variant)
+                        ? "Lukk varsel"
+                        : "Lukk melding" }) })))));
 });
 exports.default = exports.Alert;
 //# sourceMappingURL=Alert.js.map

package/cjs/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAM6B;AAC7B,sCAAmC;AACnC,8CAAyC;AAyCzC,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,8BAAC,kCAAoB,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QAC1D,KAAK,SAAS;YACZ,OAAO,8BAAC,6CAA+B,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACzE,KAAK,MAAM;YACT,OAAO,8BAAC,uCAAyB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QACtE,KAAK,SAAS;YACZ,OAAO,8BAAC,qCAAuB,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QAChE;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC,CAAC;AAMF;;;;;;;;GAQG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cATT,6FAUC,CADQ;IAIT,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB;YACE,yBAAyB,EAAE,SAAS;YACpC,qBAAqB,EAAE,MAAM;YAC7B,2BAA2B,EAAE,WAAW;SACzC,CACF;QAED,8BAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,8BAAC,qBAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,IAC5D,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,8BAAC,eAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,8BAAC,uBAAS,IAAC,KAAK,EAAC,YAAY,GAAG,GACtC,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAM6B;AAC7B,sCAAmC;AACnC,8CAAyC;AA8CzC,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,8BAAC,kCAAoB,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QAC1D,KAAK,SAAS;YACZ,OAAO,8BAAC,6CAA+B,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACzE,KAAK,MAAM;YACT,OAAO,8BAAC,uCAAyB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QACtE,KAAK,SAAS;YACZ,OAAO,8BAAC,qCAAuB,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QAChE;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC,CAAC;AAMF;;;;;;;;GAQG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,IAAI,EACtB,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cAVT,gHAWC,CADQ;IAIT,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB;YACE,yBAAyB,EAAE,SAAS;YACpC,qBAAqB,EAAE,MAAM;YAC7B,2BAA2B,EAAE,WAAW;SACzC,CACF;QAED,8BAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,8BAAC,qBAAQ,IACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,cAAE,EACX,sBAAsB,EACtB,eAAe,IAAI,gCAAgC,CACpD,IAEA,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,8BAAC,eAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EACF,8BAAC,uBAAS,IACR,KAAK,EACH,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;wBACpC,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,cAAc,GAEpB,GAEJ,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}

package/cjs/collapsible/parts/Collapsible.Content.js

@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsibleContent = void 0;
 const react_1 = __importStar(require("react"));
-const Slot_1 = require("../../util/Slot");
+const Slot_1 = require("../../slot/Slot");
 const Collapsible_context_1 = require("../Collapsible.context");
 exports.CollapsibleContent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, asChild } = _a, rest = __rest(_a, ["children", "asChild"]);

package/cjs/collapsible/parts/Collapsible.Trigger.js

@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsibleTrigger = void 0;
 const react_1 = __importStar(require("react"));
-const Slot_1 = require("../../util/Slot");
+const Slot_1 = require("../../slot/Slot");
 const composeEventHandlers_1 = require("../../util/composeEventHandlers");
 const Collapsible_context_1 = require("../Collapsible.context");
 exports.CollapsibleTrigger = (0, react_1.forwardRef)((_a, ref) => {

package/cjs/date/datepicker/types.d.ts

@@ -62,7 +62,7 @@ export interface DatePickerDefaultProps extends Omit<React.HTMLAttributes<HTMLDi
     dropdownCaption?: boolean;
     /**
      * Apply the disabled modifier to the matching days.
-     * https://react-day-picker.js.org/api/types/Matcher
+     * https://react-day-picker.js.org/api/type-aliases/Matcher
      */
     disabled?: Matcher[];
     /**

package/cjs/date/monthpicker/types.d.ts

@@ -33,7 +33,7 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     dropdownCaption?: boolean;
     /**
-     * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/types/Matcher
+     * Apply the disabled modifier to the matching months. Uses a subset of React Day Picker Matcher type. https://react-day-picker.js.org/api/type-aliases/Matcher
      */
     disabled?: Matcher[];
     /**

package/cjs/form/file-upload/parts/Trigger.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const Slot_1 = require("../../../util/Slot");
+const Slot_1 = require("../../../slot/Slot");
 const useFileUpload_1 = require("../useFileUpload");
 const Trigger = (0, react_1.forwardRef)(({ children, multiple = true, accept, onSelect, validator, maxSizeInBytes, }, ref) => {
     const { onChange, inputRef, mergedRef } = (0, useFileUpload_1.useFileUpload)({

package/cjs/form/file-upload/parts/item/Item.d.ts

@@ -33,6 +33,11 @@ export interface FileUploadItemProps extends React.HTMLAttributes<HTMLDivElement
      * @default "idle"
      */
     status?: "downloading" | "uploading" | "idle";
+    /**
+     * File description. Replaces file size when status is "idle".
+     * This is useful for displaying upload date. Should not act as a replacement for error messages.
+     */
+    description?: string;
     /**
      * Props for the action button.
      */

package/cjs/form/file-upload/parts/item/Item.js

@@ -49,7 +49,7 @@ const ItemIcon_1 = __importDefault(require("./ItemIcon"));
 const ItemName_1 = __importDefault(require("./ItemName"));
 const format_file_size_1 = require("./utils/format-file-size");
 exports.Item = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "div", file, status = "idle", error, className, href, onFileClick, button, translations } = _a, rest = __rest(_a, ["as", "file", "status", "error", "className", "href", "onFileClick", "button", "translations"]);
+    var { as: Component = "div", file, status = "idle", error, className, href, onFileClick, button, translations, description } = _a, rest = __rest(_a, ["as", "file", "status", "error", "className", "href", "onFileClick", "button", "translations", "description"]);
     const context = (0, FileUpload_context_1.useFileUploadTranslation)(false);
     const translate = (0, i18n_context_1.useI18n)("FileUpload", { item: translations }, context === null || context === void 0 ? void 0 : context.translations);
     const showError = !!error && status === "idle";
@@ -60,7 +60,7 @@ exports.Item = (0, react_1.forwardRef)((_a, ref) => {
         if (status === "downloading") {
             return translate("item.downloading");
         }
-        return (0, format_file_size_1.formatFileSize)(file);
+        return description !== null && description !== void 0 ? description : (0, format_file_size_1.formatFileSize)(file);
     }
     return (react_1.default.createElement(Component, Object.assign({ ref: ref }, rest, { className: (0, clsx_1.default)("navds-file-item", className, {
             "navds-file-item--error": showError,

package/cjs/form/file-upload/parts/item/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../../src/form/file-upload/parts/item/Item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAAsD;AACtD,qDAAkE;AAClE,uDAAmD;AAEnD,qEAA6D;AAE7D,iEAAoE;AAEpE,8DAAsC;AACtC,0DAAkC;AAClC,0DAAkC;AAClC,+DAA0D;AAgD7C,QAAA,IAAI,GACf,IAAA,kBAAU,EACR,CACE,EAWsB,EACtB,GAAG,EACH,EAAE;QAbF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,IAAI,EACJ,MAAM,GAAG,MAAM,EACf,KAAK,EACL,SAAS,EACT,IAAI,EACJ,WAAW,EACX,MAAM,EACN,YAAY,OAEQ,EADjB,IAAI,cAVT,+FAWC,CADQ;IAIT,MAAM,OAAO,GAAG,IAAA,6CAAwB,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,IAAA,sBAAO,EACvB,YAAY,EACZ,EAAE,IAAI,EAAE,YAAY,EAAE,EACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CACtB,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,IAAI,MAAM,KAAK,MAAM,CAAC;IAE/C,SAAS,aAAa;QACpB,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;YAC3B,OAAO,SAAS,CAAC,gBAAgB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,MAAM,KAAK,aAAa,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,IAAA,iCAAc,EAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,OAAO,CACL,8BAAC,SAAS,kBACR,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,iBAAiB,EAAE,SAAS,EAAE;YAC1C,wBAAwB,EAAE,SAAS;SACpC,CAAC;QAEF,uCAAK,SAAS,EAAC,wBAAwB;YACrC,8BAAC,kBAAQ,IACP,SAAS,EAAE,MAAM,KAAK,MAAM,EAC5B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACpB;YACF,uCAAK,SAAS,EAAC,4BAA4B;gBACzC,8BAAC,kBAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;gBAC1D,8BAAC,sBAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,IAC7B,aAAa,EAAE,CACN;gBACZ,uCACE,SAAS,EAAC,wBAAwB,mBACpB,oBAAoB,eACxB,QAAQ,IAEjB,SAAS,IAAI,CACZ,8BAAC,sBAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,gCAAgC;oBAE1C,8BAAC,yCAA2B,0BAAe;oBAC1C,KAAK,CACI,CACb,CACG,CACF;YAEL,MAAM,KAAK,MAAM,IAAI,MAAM,IAAI,CAC9B,8BAAC,oBAAU,oBACL,MAAM,IACV,KAAK,EAAE,SAAS,CACd,MAAM,CAAC,MAAM,KAAK,OAAO;oBACvB,CAAC,CAAC,uBAAuB;oBACzB,CAAC,CAAC,wBAAwB,CAC7B,IACD,CACH,CACG,CACI,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,YAAI,CAAC"}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../../src/form/file-upload/parts/item/Item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAAsD;AACtD,qDAAkE;AAClE,uDAAmD;AAEnD,qEAA6D;AAE7D,iEAAoE;AAEpE,8DAAsC;AACtC,0DAAkC;AAClC,0DAAkC;AAClC,+DAA0D;AAqD7C,QAAA,IAAI,GACf,IAAA,kBAAU,EACR,CACE,EAYsB,EACtB,GAAG,EACH,EAAE;QAdF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,IAAI,EACJ,MAAM,GAAG,MAAM,EACf,KAAK,EACL,SAAS,EACT,IAAI,EACJ,WAAW,EACX,MAAM,EACN,YAAY,EACZ,WAAW,OAES,EADjB,IAAI,cAXT,8GAYC,CADQ;IAIT,MAAM,OAAO,GAAG,IAAA,6CAAwB,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,IAAA,sBAAO,EACvB,YAAY,EACZ,EAAE,IAAI,EAAE,YAAY,EAAE,EACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,CACtB,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,IAAI,MAAM,KAAK,MAAM,CAAC;IAE/C,SAAS,aAAa;QACpB,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;YAC3B,OAAO,SAAS,CAAC,gBAAgB,CAAC,CAAC;QACrC,CAAC;QACD,IAAI,MAAM,KAAK,aAAa,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,IAAA,iCAAc,EAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,CACL,8BAAC,SAAS,kBACR,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,iBAAiB,EAAE,SAAS,EAAE;YAC1C,wBAAwB,EAAE,SAAS;SACpC,CAAC;QAEF,uCAAK,SAAS,EAAC,wBAAwB;YACrC,8BAAC,kBAAQ,IACP,SAAS,EAAE,MAAM,KAAK,MAAM,EAC5B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACpB;YACF,uCAAK,SAAS,EAAC,4BAA4B;gBACzC,8BAAC,kBAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI;gBAC1D,8BAAC,sBAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,IAC7B,aAAa,EAAE,CACN;gBACZ,uCACE,SAAS,EAAC,wBAAwB,mBACpB,oBAAoB,eACxB,QAAQ,IAEjB,SAAS,IAAI,CACZ,8BAAC,sBAAS,IACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,gCAAgC;oBAE1C,8BAAC,yCAA2B,0BAAe;oBAC1C,KAAK,CACI,CACb,CACG,CACF;YAEL,MAAM,KAAK,MAAM,IAAI,MAAM,IAAI,CAC9B,8BAAC,oBAAU,oBACL,MAAM,IACV,KAAK,EAAE,SAAS,CACd,MAAM,CAAC,MAAM,KAAK,OAAO;oBACvB,CAAC,CAAC,uBAAuB;oBACzB,CAAC,CAAC,wBAAwB,CAC7B,IACD,CACH,CACG,CACI,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,YAAI,CAAC"}

package/cjs/layout/base/BasePrimitive.d.ts

@@ -0,0 +1,167 @@
+import React from "react";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
+export type PrimitiveProps = {
+    className?: string;
+    /**
+     * Padding around children.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * padding='4'
+     * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    padding?: ResponsiveProp<SpacingScale>;
+    /**
+     * Horizontal padding around children.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * paddingInline='4'
+     * paddingInline='4 5'
+     * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+     */
+    paddingInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * Vertical padding around children.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * paddingBlock='4'
+     * paddingBlock='4 5'
+     * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    paddingBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * Margin around element.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * margin='4'
+     * margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    margin?: ResponsiveProp<SpacingScale>;
+    /**
+     * Horizontal margin around element.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * marginInline='4'
+     * marginInline='4 5'
+     * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+     */
+    marginInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}` | "auto" | `auto ${SpacingScale}` | `${SpacingScale} auto`>;
+    /**
+     * Vertical margin around element.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * marginBlock='4'
+     * marginBlock='4 5'
+     * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    marginBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}` | "auto" | `auto ${SpacingScale}` | `${SpacingScale} auto`>;
+    /**
+     * CSS `width`
+     */
+    width?: ResponsiveProp<string>;
+    /**
+     * CSS `min-width`
+     */
+    minWidth?: ResponsiveProp<string>;
+    /**
+     * CSS `max-width`
+     */
+    maxWidth?: ResponsiveProp<string>;
+    /**
+     * CSS `height`
+     */
+    height?: ResponsiveProp<string>;
+    /**
+     * CSS `min-height`
+     */
+    minHeight?: ResponsiveProp<string>;
+    /**
+     * CSS `max-height`
+     */
+    maxHeight?: ResponsiveProp<string>;
+    /**
+     * CSS `position`
+     */
+    position?: ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">;
+    /**
+     * CSS `inset`.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * inset='4'
+     * inset='4 5'
+     * inset={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+     */
+    inset?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * CSS `top`
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * top='4'
+     * top={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    top?: ResponsiveProp<SpacingScale>;
+    /**
+     * CSS `right`
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * right='4'
+     * right={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    right?: ResponsiveProp<SpacingScale>;
+    /**
+     * CSS `bottom`
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * bottom='4'
+     * bottom={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    bottom?: ResponsiveProp<SpacingScale>;
+    /**
+     * CSS `left`
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * left='4'
+     * left={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    left?: ResponsiveProp<SpacingScale>;
+    /**
+     * CSS `overflow`
+     */
+    overflow?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+    /**
+     * CSS `overflow-x`
+     */
+    overflowX?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+    /**
+     * CSS `overflow-y`
+     */
+    overflowY?: ResponsiveProp<"visible" | "hidden" | "clip" | "scroll" | "auto">;
+    /**
+     * CSS `flex-basis`
+     */
+    flexBasis?: ResponsiveProp<string>;
+    /**
+     * CSS `flex-shrink`
+     */
+    flexShrink?: ResponsiveProp<string>;
+    /**
+     * CSS `flex-grow`
+     */
+    flexGrow?: ResponsiveProp<string>;
+};
+export declare const PRIMITIVE_PROPS: (keyof PrimitiveProps)[];
+interface BasePrimitiveProps extends PrimitiveProps {
+    children: React.ReactElement;
+}
+export declare const BasePrimitive: ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, }: BasePrimitiveProps) => React.JSX.Element;
+export default BasePrimitive;

package/cjs/layout/base/BasePrimitive.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePrimitive = exports.PRIMITIVE_PROPS = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importDefault(require("react"));
+const Slot_1 = require("../../slot/Slot");
+const css_1 = require("../utilities/css");
+exports.PRIMITIVE_PROPS = [
+    "className",
+    "padding",
+    "paddingInline",
+    "paddingBlock",
+    "margin",
+    "marginInline",
+    "marginBlock",
+    "width",
+    "minWidth",
+    "maxWidth",
+    "height",
+    "minHeight",
+    "maxHeight",
+    "position",
+    "inset",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    "overflow",
+    "overflowX",
+    "overflowY",
+    "flexBasis",
+    "flexGrow",
+    "flexShrink",
+];
+const BasePrimitive = ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, }) => {
+    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, css_1.getResponsiveProps)("r", "p", "spacing", padding)), (0, css_1.getResponsiveProps)("r", "pi", "spacing", paddingInline)), (0, css_1.getResponsiveProps)("r", "pb", "spacing", paddingBlock)), (0, css_1.getResponsiveProps)("r", "m", "spacing", margin)), (0, css_1.getResponsiveProps)("r", "mi", "spacing", marginInline)), (0, css_1.getResponsiveProps)("r", "mb", "spacing", marginBlock)), (0, css_1.getResponsiveValue)("r", "w", width)), (0, css_1.getResponsiveValue)("r", "minw", minWidth)), (0, css_1.getResponsiveValue)("r", "maxw", maxWidth)), (0, css_1.getResponsiveValue)("r", "h", height)), (0, css_1.getResponsiveValue)("r", "minh", minHeight)), (0, css_1.getResponsiveValue)("r", "maxh", maxHeight)), (0, css_1.getResponsiveValue)("r", "position", position)), (0, css_1.getResponsiveProps)("r", "inset", "spacing", inset)), (0, css_1.getResponsiveProps)("r", "top", "spacing", top)), (0, css_1.getResponsiveProps)("r", "right", "spacing", right)), (0, css_1.getResponsiveProps)("r", "bottom", "spacing", bottom)), (0, css_1.getResponsiveProps)("r", "left", "spacing", left)), (0, css_1.getResponsiveValue)("r", "overflow", overflow)), (0, css_1.getResponsiveValue)("r", "overflowx", overflowX)), (0, css_1.getResponsiveValue)("r", "overflowy", overflowY)), (0, css_1.getResponsiveValue)("r", "flex-basis", flexBasis)), (0, css_1.getResponsiveValue)("r", "flex-grow", flexGrow)), (0, css_1.getResponsiveValue)("r", "flex-shrink", flexShrink));
+    return (react_1.default.createElement(Slot_1.Slot, { className: (0, clsx_1.default)({
+            className,
+            "navds-r-p": padding,
+            "navds-r-pi": paddingInline,
+            "navds-r-pb": paddingBlock,
+            "navds-r-m": margin,
+            "navds-r-mi": marginInline,
+            "navds-r-mb": marginBlock,
+            "navds-r-w": width,
+            "navds-r-minw": minWidth,
+            "navds-r-maxw": maxWidth,
+            "navds-r-h": height,
+            "navds-r-minh": minHeight,
+            "navds-r-maxh": maxHeight,
+            "navds-r-position": position,
+            "navds-r-inset": inset,
+            "navds-r-top": top,
+            "navds-r-right": right,
+            "navds-r-bottom": bottom,
+            "navds-r-left": left,
+            "navds-r-overflow": overflow,
+            "navds-r-overflowx": overflowX,
+            "navds-r-overflowy": overflowY,
+            "navds-r-flex-basis": flexBasis,
+            "navds-r-flex-grow": flexGrow,
+            "navds-r-flex-shrink": flexShrink,
+        }), style: style }, children));
+};
+exports.BasePrimitive = BasePrimitive;
+exports.default = exports.BasePrimitive;
+//# sourceMappingURL=BasePrimitive.js.map

package/cjs/layout/base/BasePrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAsB;AACtB,kDAA0B;AAC1B,0CAAuC;AACvC,0CAA0E;AAqL7D,QAAA,eAAe,GAA6B;IACvD,WAAW;IACX,SAAS;IACT,eAAe;IACf,cAAc;IACd,QAAQ;IACR,cAAc;IACd,aAAa;IACb,OAAO;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,WAAW;IACX,WAAW;IACX,UAAU;IACV,OAAO;IACP,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,UAAU;IACV,WAAW;IACX,WAAW;IACX,WAAW;IACX,UAAU;IACV,YAAY;CACb,CAAC;AAMK,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,MAAM,EACN,YAAY,EACZ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,EACH,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,QAAQ,EACR,UAAU,GACS,EAAE,EAAE;IACvB,MAAM,KAAK,uVAEN,IAAA,wBAAkB,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,GAChD,IAAA,wBAAkB,EAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,GACvD,IAAA,wBAAkB,EAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,CAAC,GAEtD,IAAA,wBAAkB,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,GAC/C,IAAA,wBAAkB,EAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,CAAC,GACtD,IAAA,wBAAkB,EAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,CAAC,GAErD,IAAA,wBAAkB,EAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GACnC,IAAA,wBAAkB,EAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,GACzC,IAAA,wBAAkB,EAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,GACzC,IAAA,wBAAkB,EAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,GACpC,IAAA,wBAAkB,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,GAC1C,IAAA,wBAAkB,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,GAE1C,IAAA,wBAAkB,EAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,CAAC,GAC7C,IAAA,wBAAkB,EAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,GAClD,IAAA,wBAAkB,EAAC,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAC9C,IAAA,wBAAkB,EAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,GAClD,IAAA,wBAAkB,EAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,GACpD,IAAA,wBAAkB,EAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,GAEhD,IAAA,wBAAkB,EAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,CAAC,GAC7C,IAAA,wBAAkB,EAAC,GAAG,EAAE,WAAW,EAAE,SAAS,CAAC,GAC/C,IAAA,wBAAkB,EAAC,GAAG,EAAE,WAAW,EAAE,SAAS,CAAC,GAE/C,IAAA,wBAAkB,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,CAAC,GAChD,IAAA,wBAAkB,EAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,CAAC,GAC9C,IAAA,wBAAkB,EAAC,GAAG,EAAE,aAAa,EAAE,UAAU,CAAC,CACtD,CAAC;IAEF,OAAO,CACL,8BAAC,WAAI,IACH,SAAS,EAAE,IAAA,cAAE,EAAC;YACZ,SAAS;YACT,WAAW,EAAE,OAAO;YACpB,YAAY,EAAE,aAAa;YAC3B,YAAY,EAAE,YAAY;YAC1B,WAAW,EAAE,MAAM;YACnB,YAAY,EAAE,YAAY;YAC1B,YAAY,EAAE,WAAW;YACzB,WAAW,EAAE,KAAK;YAClB,cAAc,EAAE,QAAQ;YACxB,cAAc,EAAE,QAAQ;YACxB,WAAW,EAAE,MAAM;YACnB,cAAc,EAAE,SAAS;YACzB,cAAc,EAAE,SAAS;YACzB,kBAAkB,EAAE,QAAQ;YAC5B,eAAe,EAAE,KAAK;YACtB,aAAa,EAAE,GAAG;YAClB,eAAe,EAAE,KAAK;YACtB,gBAAgB,EAAE,MAAM;YACxB,cAAc,EAAE,IAAI;YACpB,kBAAkB,EAAE,QAAQ;YAC5B,mBAAmB,EAAE,SAAS;YAC9B,mBAAmB,EAAE,SAAS;YAC9B,oBAAoB,EAAE,SAAS;YAC/B,mBAAmB,EAAE,QAAQ;YAC7B,qBAAqB,EAAE,UAAU;SAClC,CAAC,EACF,KAAK,EAAE,KAAK,IAEX,QAAQ,CACJ,CACR,CAAC;AACJ,CAAC,CAAC;AA/FW,QAAA,aAAa,iBA+FxB;AAEF,kBAAe,qBAAa,CAAC"}

package/cjs/layout/base/PrimitiveAsChildProps.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+export type PrimitiveAsChildProps = {
+    children: React.ReactElement | false | null;
+    /**
+     * Renders the component and its child as a single element,
+     * merging the props of the component with the props of the child.
+     * @example
+     * ```tsx
+     * <Component asChild data-prop>
+     *   <ChildComponent data-child />
+     * </Component>
+     *
+     * // Renders
+     * <div data-prop data-child />
+     * ```
+     */
+    asChild: true;
+    /**
+     * Implements [OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent)
+     *
+     * When using asChild, the prop is not allowed as it would have no effect.
+     */
+    as?: never;
+} | {
+    children?: React.ReactNode;
+    /**
+     * Renders the component and its child as a single element,
+     * merging the props of the component with the props of the child.
+     *
+     * @example
+     * ```tsx
+     * <Component asChild data-prop>
+     *   <ChildComponent data-child />
+     * </Component>
+     *
+     * // Renders
+     * <div data-prop data-child />
+     * ```
+     */
+    asChild?: false;
+};

package/cjs/layout/base/PrimitiveAsChildProps.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=PrimitiveAsChildProps.js.map

package/cjs/layout/base/PrimitiveAsChildProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimitiveAsChildProps.js","sourceRoot":"","sources":["../../../src/layout/base/PrimitiveAsChildProps.ts"],"names":[],"mappings":""}

package/cjs/layout/bleed/Bleed.js

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

package/cjs/layout/box/Box.d.ts

@@ -1,10 +1,18 @@
 import React from "react";
 import { OverridableComponent } from "../../util/types";
-import { BackgroundToken, BorderColorToken, BorderRadiiToken, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SpacingScale } from "../utilities/types";
-export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** CSS `background-color` property. Accepts a color token. */
-    background?: BackgroundToken;
-    /** CSS `border-color` property. Accepts a color token. */
+import { PrimitiveProps } from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
+import { BackgroundColorToken, BorderColorToken, BorderRadiiToken, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SurfaceColorToken } from "../utilities/types";
+export type BoxProps = PrimitiveProps & PrimitiveAsChildProps & React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * CSS `background-color` property.
+     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+     */
+    background?: BackgroundColorToken | SurfaceColorToken;
+    /**
+     * CSS `border-color` property.
+     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+     */
     borderColor?: BorderColorToken;
     /**
      * CSS `border-radius` property.
@@ -23,41 +31,12 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
      * borderWidth='1 2 3 4'
      */
     borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-    /**
-     * Padding around children.
-     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-     * or an object of spacing tokens for different breakpoints.
-     * @example
-     * padding='4'
-     * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-     */
-    padding?: ResponsiveProp<SpacingScale>;
-    /**
-     * Horizontal padding around children.
-     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-     * or an object of spacing tokens for different breakpoints.
-     * @example
-     * paddingInline='4'
-     * paddingInline='4 5'
-     * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
-     */
-    paddingInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
-    /**
-     * Vertical padding around children.
-     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-     * or an object of spacing tokens for different breakpoints.
-     * @example
-     * paddingBlock='4'
-     * paddingBlock='4 5'
-     * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-     */
-    paddingBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
     /** Shadow on box. Accepts a shadow token.
      * @example
      * shadow='small'
      */
     shadow?: ShadowToken;
-}
+};
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
  *

package/cjs/layout/box/Box.js

@@ -40,6 +40,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const Slot_1 = require("../../slot/Slot");
+const util_1 = require("../../util");
+const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
 const css_1 = require("../utilities/css");
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
@@ -69,8 +72,8 @@ const css_1 = require("../utilities/css");
  * </VStack>
  */
 exports.Box = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "div", background, borderColor, borderWidth, borderRadius, className, padding, paddingInline, paddingBlock, shadow, style: _style } = _a, rest = __rest(_a, ["as", "background", "borderColor", "borderWidth", "borderRadius", "className", "padding", "paddingInline", "paddingBlock", "shadow", "style"]);
-    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-box-background": background
+    var { children, className, as: Component = "div", background, borderColor, borderWidth, borderRadius, shadow, style: _style, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "background", "borderColor", "borderWidth", "borderRadius", "shadow", "style", "asChild"]);
+    const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-box-background": background
             ? `var(--a-${background})`
             : undefined, "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined, "--__ac-box-border-color": borderColor
             ? `var(--a-${borderColor})`
@@ -79,8 +82,16 @@ exports.Box = (0, react_1.forwardRef)((_a, ref) => {
                 .split(" ")
                 .map((x) => `${x}px`)
                 .join(" ")
-            : undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, false, ["0"])), (0, css_1.getResponsiveProps)("box", "padding", "spacing", padding)), (0, css_1.getResponsiveProps)("box", "padding-inline", "spacing", paddingInline)), (0, css_1.getResponsiveProps)("box", "padding-block", "spacing", paddingBlock));
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-box", className), ref: ref, style: style })));
+            : undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, false, ["0"]));
+    const Comp = asChild ? Slot_1.Slot : Component;
+    return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
+        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, clsx_1.default)("navds-box", className, {
+                "navds-box-bg": background,
+                "navds-box-border-color": borderColor,
+                "navds-box-border-width": borderWidth,
+                "navds-box-border-radius": borderRadius,
+                "navds-box-shadow": shadow,
+            }) }), children)));
 });
 exports.default = exports.Box;
 //# sourceMappingURL=Box.js.map

package/cjs/layout/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAE1C,0CAAsD;AAyEtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,GAAG,GAAmD,IAAA,kBAAU,EAC3E,CACE,EAaC,EACD,GAAG,EACH,EAAE;QAfF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,OAEd,EADI,IAAI,cAZT,8IAaC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,uBAAuB,EAAE,UAAU;YACjC,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACrE,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,GACE,IAAA,wBAAkB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,GACxD,IAAA,wBAAkB,EAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,CAAC,GACrE,IAAA,wBAAkB,EAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,CAAC,CACvE,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,CAAC,EACrC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,WAAG,CAAC"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAgDtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,GAAG,GAAmD,IAAA,kBAAU,EAC3E,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,KAAK,iDACN,MAAM,KACT,uBAAuB,EAAE,UAAU;YACjC,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACrE,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,yBAAyB,EAAE,YAAY;gBACvC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,WAAG,CAAC"}

package/cjs/layout/grid/HGrid.d.ts

@@ -1,7 +1,9 @@
-import React, { HTMLAttributes } from "react";
+import React from "react";
+import { OverridableComponent } from "../../util";
+import { PrimitiveProps } from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
-export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
+export type HGridProps = PrimitiveProps & PrimitiveAsChildProps & React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
      * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
@@ -25,7 +27,7 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
      * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
      */
     align?: "start" | "center" | "end";
-}
+};
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
@@ -51,5 +53,5 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
  *   <div />
  * </HGrid>
  */
-export declare const HGrid: React.ForwardRefExoticComponent<HGridProps & React.RefAttributes<HTMLDivElement>>;
+export declare const HGrid: OverridableComponent<HGridProps, HTMLDivElement>;
 export default HGrid;

package/cjs/layout/grid/HGrid.js

@@ -40,6 +40,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HGrid = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
+const Slot_1 = require("../../slot/Slot");
+const util_1 = require("../../util");
+const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
 const css_1 = require("../utilities/css");
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
@@ -67,9 +70,11 @@ const css_1 = require("../utilities/css");
  * </HGrid>
  */
 exports.HGrid = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
+    var { children, className, as: Component = "div", columns, gap, style, align, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "columns", "gap", "style", "align", "asChild"]);
     const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__ac-hgrid-align": align }), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
-    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-hgrid", className), style: styles })));
+    const Comp = asChild ? Slot_1.Slot : Component;
+    return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
+        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, className: (0, clsx_1.default)("navds-hgrid", className), style: styles }), children)));
 });
 function formatGrid(props) {
     if (!props) {