@navikt/ds-react 6.11.0 → 6.13.0

package/cjs/modal/types.d.ts

@@ -60,6 +60,11 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
      * @default fit-content (up to 700px)
      * */
     width?: "medium" | "small" | number | `${number}${string}`;
+    /**
+     * Where to place the modal in the viewport. (Will always be centered on mobile and old browsers.)
+     * @default "center"
+     */
+    placement?: "top" | "center";
     /**
      * Lets you render the modal into a different part of the DOM.
      * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.

package/cjs/toggle-group/parts/useToggleItem.js

@@ -67,7 +67,7 @@ function useToggleItem({ value, disabled = false, onFocus: _onFocus, onClick, on
         ref: (0, useMergeRefs_1.mergeRefs)([register, ref]),
         isSelected,
         isFocused: focusedValue === value,
-        onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => setSelectedValue(value)),
+        onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, () => selectedValue !== value && setSelectedValue(value)),
         onFocus: disabled ? undefined : (0, composeEventHandlers_1.composeEventHandlers)(_onFocus, onFocus),
         onKeyDown: (0, composeEventHandlers_1.composeEventHandlers)(_onKeyDown, onKeyDown),
     };

package/cjs/toggle-group/parts/useToggleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/useToggleItem.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/useToggleItem.ts"],"names":[],"mappings":"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"}

package/cjs/util/types/AsChildProps.d.ts

@@ -16,6 +16,7 @@ export type AsChildProps = {
      * ```
      */
     asChild: true;
+    as?: never;
 } | {
     children: React.ReactNode;
     /**

package/esm/alert/Alert.d.ts

@@ -5,7 +5,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     children: React.ReactNode;
     /**
-     * Changes colors and icon usage when changed.
+     * Level of severity. Changes colors and icon.
      */
     variant: "error" | "warning" | "info" | "success";
     /**
@@ -19,15 +19,20 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     fullWidth?: boolean;
     /**
-     * Removes background from Alert.
+     * Sets max-width on the content to 43.5rem.
+     * @default true
+     */
+    contentMaxWidth?: boolean;
+    /**
+     * Removes background, border and padding.
      * @default false
      */
     inline?: boolean;
     /**
-     * Removes close-button(X) when false.
+     * Adds a close-button (X).
      *
      * **Requires onClose to be set**.
-     * @default true
+     * @default false
      */
     closeButton?: boolean;
     /**

package/esm/alert/Alert.js

@@ -39,16 +39,18 @@ const Icon = (_a) => {
  * ```
  */
 export const Alert = 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.createElement("div", Object.assign({}, rest, { ref: ref, className: cl(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, {
             "navds-alert--full-width": fullWidth,
             "navds-alert--inline": inline,
             "navds-alert--close-button": closeButton,
         }) }),
         React.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
-        React.createElement(BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children),
+        React.createElement(BodyLong, { as: "div", size: size, className: cl("navds-alert__wrapper", contentMaxWidth && "navds-alert__wrapper--maxwidth") }, children),
         closeButton && !inline && (React.createElement("div", { className: "navds-alert__button-wrapper" },
-            React.createElement(Button, { className: "navds-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: React.createElement(XMarkIcon, { title: "Lukk Alert" }) })))));
+            React.createElement(Button, { className: "navds-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: React.createElement(XMarkIcon, { title: ["error", "warning"].includes(variant)
+                        ? "Lukk varsel"
+                        : "Lukk melding" }) })))));
 });
 export default Alert;
 //# sourceMappingURL=Alert.js.map

package/esm/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,yBAAyB,EACzB,SAAS,EACT,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;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,oBAAC,oBAAoB,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QAC1D,KAAK,SAAS;YACZ,OAAO,oBAAC,+BAA+B,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACzE,KAAK,MAAM;YACT,OAAO,oBAAC,yBAAyB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QACtE,KAAK,SAAS;YACZ,OAAO,oBAAC,uBAAuB,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QAChE;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC,CAAC;AAMF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,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,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,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,oBAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,sBAAsB,IAC5D,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,oBAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,oBAAC,SAAS,IAAC,KAAK,EAAC,YAAY,GAAG,GACtC,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,yBAAyB,EACzB,SAAS,EACT,oBAAoB,GACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;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,oBAAC,oBAAoB,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QAC1D,KAAK,SAAS;YACZ,OAAO,oBAAC,+BAA+B,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACzE,KAAK,MAAM;YACT,OAAO,oBAAC,yBAAyB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QACtE,KAAK,SAAS;YACZ,OAAO,oBAAC,uBAAuB,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QAChE;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC,CAAC;AAMF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,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,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,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,oBAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,oBAAC,QAAQ,IACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,gCAAgC,CACpD,IAEA,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,oBAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EACF,oBAAC,SAAS,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,eAAe,KAAK,CAAC"}

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { ResponsiveProp, SpacingScale } from "../utilities/types.js";
-export interface BasePrimitiveProps {
-    children: React.ReactElement;
+export type PrimitiveProps = {
     className?: string;
     /**
      * Padding around children.
@@ -32,6 +31,35 @@ export interface BasePrimitiveProps {
      * 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`
      */
@@ -130,6 +158,10 @@ export interface BasePrimitiveProps {
      * 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, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, }: BasePrimitiveProps) => React.JSX.Element;
+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/esm/layout/base/BasePrimitive.js

@@ -2,13 +2,43 @@ import cl from "clsx";
 import React from "react";
 import { Slot } from "../../slot/Slot.js";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css.js";
-export const BasePrimitive = ({ children, className, padding, paddingInline, paddingBlock, 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({}, getResponsiveProps("r", "p", "spacing", padding)), getResponsiveProps("r", "pi", "spacing", paddingInline)), getResponsiveProps("r", "pb", "spacing", paddingBlock)), getResponsiveValue("r", "w", width)), getResponsiveValue("r", "minw", minWidth)), getResponsiveValue("r", "maxw", maxWidth)), getResponsiveValue("r", "h", height)), getResponsiveValue("r", "minh", minHeight)), getResponsiveValue("r", "maxh", maxHeight)), getResponsiveValue("r", "position", position)), getResponsiveProps("r", "inset", "spacing", inset)), getResponsiveProps("r", "top", "spacing", top)), getResponsiveProps("r", "right", "spacing", right)), getResponsiveProps("r", "bottom", "spacing", bottom)), getResponsiveProps("r", "left", "spacing", left)), getResponsiveValue("r", "overflow", overflow)), getResponsiveValue("r", "overflowx", overflowX)), getResponsiveValue("r", "overflowy", overflowY)), getResponsiveValue("r", "flex-basis", flexBasis)), getResponsiveValue("r", "flex-grow", flexGrow)), getResponsiveValue("r", "flex-shrink", flexShrink));
+export const 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",
+];
+export 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({}, getResponsiveProps("r", "p", "spacing", padding)), getResponsiveProps("r", "pi", "spacing", paddingInline)), getResponsiveProps("r", "pb", "spacing", paddingBlock)), getResponsiveProps("r", "m", "spacing", margin)), getResponsiveProps("r", "mi", "spacing", marginInline)), getResponsiveProps("r", "mb", "spacing", marginBlock)), getResponsiveValue("r", "w", width)), getResponsiveValue("r", "minw", minWidth)), getResponsiveValue("r", "maxw", maxWidth)), getResponsiveValue("r", "h", height)), getResponsiveValue("r", "minh", minHeight)), getResponsiveValue("r", "maxh", maxHeight)), getResponsiveValue("r", "position", position)), getResponsiveProps("r", "inset", "spacing", inset)), getResponsiveProps("r", "top", "spacing", top)), getResponsiveProps("r", "right", "spacing", right)), getResponsiveProps("r", "bottom", "spacing", bottom)), getResponsiveProps("r", "left", "spacing", left)), getResponsiveValue("r", "overflow", overflow)), getResponsiveValue("r", "overflowx", overflowX)), getResponsiveValue("r", "overflowy", overflowY)), getResponsiveValue("r", "flex-basis", flexBasis)), getResponsiveValue("r", "flex-grow", flexGrow)), getResponsiveValue("r", "flex-shrink", flexShrink));
     return (React.createElement(Slot, { className: cl({
             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,

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

@@ -1 +1 @@
-{"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA6I1E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,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,6SAEN,kBAAkB,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,GAChD,kBAAkB,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,GACvD,kBAAkB,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,CAAC,GAEtD,kBAAkB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GACnC,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,GACzC,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,GACzC,kBAAkB,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,GACpC,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,GAC1C,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,GAE1C,kBAAkB,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,CAAC,GAC7C,kBAAkB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,GAClD,kBAAkB,CAAC,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAC9C,kBAAkB,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,GAClD,kBAAkB,CAAC,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,GACpD,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,GAEhD,kBAAkB,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,CAAC,GAC7C,kBAAkB,CAAC,GAAG,EAAE,WAAW,EAAE,SAAS,CAAC,GAC/C,kBAAkB,CAAC,GAAG,EAAE,WAAW,EAAE,SAAS,CAAC,GAE/C,kBAAkB,CAAC,GAAG,EAAE,YAAY,EAAE,SAAS,CAAC,GAChD,kBAAkB,CAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,CAAC,GAC9C,kBAAkB,CAAC,GAAG,EAAE,aAAa,EAAE,UAAU,CAAC,CACtD,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC;YACZ,SAAS;YACT,WAAW,EAAE,OAAO;YACpB,YAAY,EAAE,aAAa;YAC3B,YAAY,EAAE,YAAY;YAC1B,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;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":"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"}

package/esm/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/esm/layout/base/PrimitiveAsChildProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=PrimitiveAsChildProps.js.map

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

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

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

@@ -1,7 +1,9 @@
 import React from "react";
 import { OverridableComponent } from "../../util/types/index.js";
-import { BackgroundColorToken, BorderColorToken, BorderRadiiToken, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SpacingScale, SurfaceColorToken } from "../utilities/types.js";
-export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+import { PrimitiveProps } from "../base/BasePrimitive.js";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
+import { BackgroundColorToken, BorderColorToken, BorderRadiiToken, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SurfaceColorToken } from "../utilities/types.js";
+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).
@@ -29,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/esm/layout/box/Box.js

@@ -11,6 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot.js";
+import { omit } from "../../util/index.js";
+import BasePrimitive, { PRIMITIVE_PROPS, } from "../base/BasePrimitive.js";
 import { getResponsiveProps } from "../utilities/css.js";
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
@@ -40,8 +43,8 @@ import { getResponsiveProps } from "../utilities/css.js";
  * </VStack>
  */
 export const Box = 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})`
@@ -50,8 +53,16 @@ export const Box = forwardRef((_a, ref) => {
                 .split(" ")
                 .map((x) => `${x}px`)
                 .join(" ")
-            : undefined }), getResponsiveProps("box", "border-radius", "border-radius", borderRadius, false, ["0"])), getResponsiveProps("box", "padding", "spacing", padding)), getResponsiveProps("box", "padding-inline", "spacing", paddingInline)), getResponsiveProps("box", "padding-block", "spacing", paddingBlock));
-    return (React.createElement(Component, Object.assign({}, rest, { className: cl("navds-box", className), ref: ref, style: style })));
+            : undefined }), getResponsiveProps("box", "border-radius", "border-radius", borderRadius, false, ["0"]));
+    const Comp = asChild ? Slot : Component;
+    return (React.createElement(BasePrimitive, Object.assign({}, rest),
+        React.createElement(Comp, Object.assign({}, omit(rest, PRIMITIVE_PROPS), { ref: ref, style: style, className: cl("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)));
 });
 export default Box;
 //# sourceMappingURL=Box.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgFtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,GAAG,GAAmD,UAAU,CAC3E,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,kBAAkB,CACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,GACE,kBAAkB,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,GACxD,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,CAAC,GACrE,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,CAAC,CACvE,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,aAAa,EAAE,EACpB,eAAe,GAEhB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAgDtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,GAAG,GAAmD,UAAU,CAC3E,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,kBAAkB,CACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,oBAAC,aAAa,oBAAK,IAAI;QACrB,oBAAC,IAAI,oBACC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,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,eAAe,GAAG,CAAC"}

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

@@ -1,7 +1,9 @@
-import React, { HTMLAttributes } from "react";
+import React from "react";
+import { OverridableComponent } from "../../util/index.js";
+import { PrimitiveProps } from "../base/BasePrimitive.js";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
 import { ResponsiveProp, SpacingScale } from "../utilities/types.js";
-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/esm/layout/grid/HGrid.js

@@ -11,6 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot.js";
+import { omit } from "../../util/index.js";
+import BasePrimitive, { PRIMITIVE_PROPS, } from "../base/BasePrimitive.js";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css.js";
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
@@ -38,9 +41,11 @@ import { getResponsiveProps, getResponsiveValue } from "../utilities/css.js";
  * </HGrid>
  */
 export const HGrid = 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 }), getResponsiveProps(`hgrid`, "gap", "spacing", gap)), getResponsiveValue(`hgrid`, "columns", formatGrid(columns)));
-    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-hgrid", className), style: styles })));
+    const Comp = asChild ? Slot : Component;
+    return (React.createElement(BasePrimitive, Object.assign({}, rest),
+        React.createElement(Comp, Object.assign({}, omit(rest, PRIMITIVE_PROPS), { ref: ref, className: cl("navds-hgrid", className), style: styles }), children)));
 });
 function formatGrid(props) {
     if (!props) {

package/esm/layout/grid/HGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA6B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAkD,EAAE,GAAG,EAAE,EAAE;QAA3D,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhD,iDAAkD,CAAF;IAC/C,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,IACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,UAAU,IAAI,mBAAmB,CAAC;IAC3C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAwB,IAAI,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,aAAa,EAAE,EACpB,eAAe,GAEhB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA8B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,EACP,GAAG,EACH,KAAK,EACL,KAAK,EACL,OAAO,OAER,EADI,IAAI,cATT,8EAUC,CADQ;IAIT,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,oBAAC,aAAa,oBAAK,IAAI;QACrB,oBAAC,IAAI,oBACC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,KAEZ,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,UAAU,IAAI,mBAAmB,CAAC;IAC3C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/layout/stack/HStack.d.ts

@@ -1,6 +1,7 @@
 import { OverridableComponent } from "../../util/types/index.js";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
 import { StackProps } from "./Stack.js";
-export type HStackProps = Omit<StackProps, "direction">;
+export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
 /**
  * Layout-primitive for horizontal flexbox
  *

package/esm/layout/stack/HStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"HStack.js","sourceRoot":"","sources":["../../../src/layout/stack/HStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxB,OAAO,oBAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,IAAG,CAAC;AACxD,CAAC,CAAC,CAAC;AAEL,eAAe,MAAM,CAAC"}
+{"version":3,"file":"HStack.js","sourceRoot":"","sources":["../../../src/layout/stack/HStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxB,OAAO,oBAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,IAAG,CAAC;AACxD,CAAC,CAAC,CAAC;AAEL,eAAe,MAAM,CAAC"}

package/esm/layout/stack/Stack.d.ts

@@ -1,8 +1,9 @@
-import React, { HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/types/index.js";
+import { PrimitiveProps } from "../base/BasePrimitive.js";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
 import { ResponsiveProp, SpacingScale } from "../utilities/types.js";
-export interface StackProps extends HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
+export type StackProps = PrimitiveProps & PrimitiveAsChildProps & HTMLAttributes<HTMLDivElement> & {
     /**
      * CSS `justify-content` property.
      *
@@ -13,6 +14,7 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
     justify?: ResponsiveProp<"start" | "center" | "end" | "space-around" | "space-between" | "space-evenly">;
     /**
      * CSS `align-items` property.
+     * @default "stretch"
      *
      * @example
      * align='center'
@@ -30,9 +32,10 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
      *
      * @example
      * gap='4'
+     * gap='8 4'
      * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
      */
-    gap?: ResponsiveProp<SpacingScale>;
+    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
     /**
      * CSS `flex-direction` property.
      * @default "row"
@@ -42,6 +45,6 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
      * direction={{xs: 'row', sm: 'column'}}
      */
     direction?: ResponsiveProp<"row" | "column" | "row-reverse" | "column-reverse">;
-}
+};
 export declare const Stack: OverridableComponent<StackProps, HTMLDivElement>;
 export default Stack;

package/esm/layout/stack/Stack.js

@@ -11,14 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot.js";
+import { omit } from "../../util/index.js";
+import BasePrimitive, { PRIMITIVE_PROPS, } from "../base/BasePrimitive.js";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css.js";
 export const Stack = forwardRef((_a, ref) => {
-    var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction = "row" } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
+    var { children, className, as: Component = "div", align = "stretch", justify, wrap = true, gap, style: _style, direction = "row", asChild } = _a, rest = __rest(_a, ["children", "className", "as", "align", "justify", "wrap", "gap", "style", "direction", "asChild"]);
     const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-stack-wrap": wrap ? "wrap" : "nowrap" }), getResponsiveProps(`stack`, "gap", "spacing", gap)), getResponsiveValue(`stack`, "direction", direction)), getResponsiveValue(`stack`, "align", align)), getResponsiveValue(`stack`, "justify", justify));
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: cl("navds-stack", className, {
-            "navds-vstack": direction === "column",
-            "navds-hstack": direction === "row",
-        }) })));
+    const Comp = asChild ? Slot : Component;
+    return (React.createElement(BasePrimitive, Object.assign({}, rest),
+        React.createElement(Comp, Object.assign({}, omit(rest, PRIMITIVE_PROPS), { ref: ref, style: style, className: cl("navds-stack", className, {
+                "navds-vstack": direction === "column",
+                "navds-hstack": direction === "row",
+            }) }), children)));
 });
 export default Stack;
 //# sourceMappingURL=Stack.js.map

package/esm/layout/stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAuD1E,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,OAElB,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;YACtC,cAAc,EAAE,SAAS,KAAK,KAAK;SACpC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,aAAa,EAAE,EACpB,eAAe,GAEhB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA0D1E,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,EACjB,OAAO,OAER,EADI,IAAI,cAXT,mGAYC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,oBAAC,aAAa,oBAAK,IAAI;QACrB,oBAAC,IAAI,oBACC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;gBACtC,cAAc,EAAE,SAAS,KAAK,KAAK;aACpC,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}

package/esm/layout/stack/VStack.d.ts

@@ -1,6 +1,7 @@
 import { OverridableComponent } from "../../util/types/index.js";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
 import { StackProps } from "./Stack.js";
-export type VStackProps = Omit<StackProps, "direction" | "wrap">;
+export type VStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction" | "wrap">;
 /**
  * Layout-primitive for vetical flexbox
  *

package/esm/layout/stack/VStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"VStack.js","sourceRoot":"","sources":["../../../src/layout/stack/VStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAI5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxB,OAAO,oBAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,IAAI,CAAC;AACxE,CAAC,CAAC,CAAC;AAEL,eAAe,MAAM,CAAC"}
+{"version":3,"file":"VStack.js","sourceRoot":"","sources":["../../../src/layout/stack/VStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAK5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxB,OAAO,oBAAC,KAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,IAAI,CAAC;AACxE,CAAC,CAAC,CAAC;AAEL,eAAe,MAAM,CAAC"}

package/esm/layout/utilities/css.js

@@ -31,6 +31,9 @@ const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, to
             const width = 100 / arr.length;
             return `calc((100vw - ${width}%)/2)`;
         }
+        if (["mi", "mb"].includes(componentProp) && x === "auto") {
+            return "auto";
+        }
         let output = `var(--a-${tokenSubgroup}-${x})`;
         if (tokenExceptions.includes(x)) {
             output = translateExceptionToCSS(x);

package/esm/layout/utilities/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"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"}