@navikt/ds-react 4.7.4 → 4.8.0

package/_docs.json

@@ -16428,6 +16428,373 @@
       }
     }
   },
+  {
+    "filePath": "src/layout/stack/HStack.tsx",
+    "displayName": "HStack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "wrap": {
+        "defaultValue": null,
+        "description": "flex-wrap",
+        "name": "wrap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/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/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/layout/stack/Spacer.tsx",
+    "displayName": "Spacer",
+    "props": {}
+  },
+  {
+    "filePath": "src/layout/stack/Stack.tsx",
+    "displayName": "Stack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "wrap": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "flex-wrap",
+        "name": "wrap",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "direction": {
+        "defaultValue": null,
+        "description": "",
+        "name": "direction",
+        "parent": {
+          "fileName": "src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "\"row\" | \"column\""
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/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/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/layout/stack/VStack.tsx",
+    "displayName": "VStack",
+    "props": {
+      "justify": {
+        "defaultValue": null,
+        "description": "Justify-content",
+        "name": "justify",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Align-items",
+        "name": "align",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\""
+        }
+      },
+      "gap": {
+        "defaultValue": null,
+        "description": "@example gap='4'\ngap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}",
+        "name": "gap",
+        "parent": {
+          "fileName": "react/src/layout/stack/Stack.tsx",
+          "name": "StackProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/layout/stack/Stack.tsx",
+            "name": "StackProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ResponsiveProp<SpacingScale>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/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/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLDivElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/timeline/period/NonClickablePeriod.tsx",
     "displayName": "NonClickablePeriod",

package/cjs/index.js

@@ -48,3 +48,4 @@ __exportStar(require("./toggle-group"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
+__exportStar(require("./layout/stack"), exports);

package/cjs/layout/stack/HStack.js

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HStack = void 0;
+const react_1 = __importStar(require("react"));
+const Stack_1 = require("./Stack");
+/**
+ * Layout-primitive for horizontal flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link HStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ *
+ * @example
+ * // Responsive gap
+ * <HStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ */
+exports.HStack = (0, react_1.forwardRef)((props, ref) => {
+    return react_1.default.createElement(Stack_1.Stack, Object.assign({}, props, { ref: ref, direction: "row" }));
+});

package/cjs/layout/stack/Spacer.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacer = void 0;
+const react_1 = __importDefault(require("react"));
+/**
+ * Layout-primitive for auto-spacing between elements
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <Spacer />
+ *  <MyComponent />
+ * </HStack>
+ */
+const Spacer = () => react_1.default.createElement("div", { className: "navds-stack__spacer" });
+exports.Spacer = Spacer;

package/cjs/layout/stack/Stack.js

@@ -0,0 +1,51 @@
+"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.Stack = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const css_1 = require("../utilities/css");
+exports.Stack = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
+    const style = Object.assign(Object.assign({ "--ac-stack-direction": direction, "--ac-stack-align": align, "--ac-stack-justify": justify, "--ac-stack-wrap": wrap ? "wrap" : "nowrap" }, (0, css_1.getResponsiveProps)(`stack`, "gap", "spacing", gap)), _style);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: (0, clsx_1.default)("navds-stack", className, {
+            "navds-vstack": direction === "column",
+            "navds-hstack": direction === "row",
+        }) })));
+});

package/cjs/layout/stack/VStack.js

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VStack = void 0;
+const react_1 = __importStar(require("react"));
+const Stack_1 = require("./Stack");
+/**
+ * Layout-primitive for vetical flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link VStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <VStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ *
+ * @example
+ * // Responsive gap
+ * <VStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ */
+exports.VStack = (0, react_1.forwardRef)((props, ref) => {
+    return react_1.default.createElement(Stack_1.Stack, Object.assign({}, props, { ref: ref, direction: "column", wrap: false }));
+});

package/cjs/layout/stack/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacer = exports.VStack = exports.HStack = void 0;
+var HStack_1 = require("./HStack");
+Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return HStack_1.HStack; } });
+var VStack_1 = require("./VStack");
+Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return VStack_1.VStack; } });
+var Spacer_1 = require("./Spacer");
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return Spacer_1.Spacer; } });

package/cjs/layout/stack/package.json

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

package/cjs/layout/utilities/css.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResponsiveProps = void 0;
+function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp) {
+    if (!responsiveProp)
+        return {};
+    if (typeof responsiveProp === "string") {
+        return {
+            [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+        };
+    }
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+        `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+    ]));
+}
+exports.getResponsiveProps = getResponsiveProps;

package/esm/index.d.ts

@@ -32,3 +32,4 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/stack";

package/esm/index.js

@@ -32,4 +32,5 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/stack";
 //# 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"}
+{"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"}

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

@@ -0,0 +1,24 @@
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { StackProps } from "./Stack";
+export type HStackProps = Omit<StackProps, "direction">;
+/**
+ * Layout-primitive for horizontal flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link HStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ *
+ * @example
+ * // Responsive gap
+ * <HStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ */
+export declare const HStack: OverridableComponent<HStackProps, HTMLDivElement>;

package/esm/layout/stack/HStack.js

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import { Stack } from "./Stack";
+/**
+ * Layout-primitive for horizontal flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link HStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ *
+ * @example
+ * // Responsive gap
+ * <HStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ */
+export const HStack = forwardRef((props, ref) => {
+    return React.createElement(Stack, Object.assign({}, props, { ref: ref, direction: "row" }));
+});
+//# sourceMappingURL=HStack.js.map

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

@@ -0,0 +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,EAAc,KAAK,EAAE,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"}

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

@@ -0,0 +1,14 @@
+import React from "react";
+/**
+ * Layout-primitive for auto-spacing between elements
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <Spacer />
+ *  <MyComponent />
+ * </HStack>
+ */
+export declare const Spacer: () => React.JSX.Element;

package/esm/layout/stack/Spacer.js

@@ -0,0 +1,15 @@
+import React from "react";
+/**
+ * Layout-primitive for auto-spacing between elements
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <Spacer />
+ *  <MyComponent />
+ * </HStack>
+ */
+export const Spacer = () => React.createElement("div", { className: "navds-stack__spacer" });
+//# sourceMappingURL=Spacer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,6BAAK,SAAS,EAAC,qBAAqB,GAAG,CAAC"}

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

@@ -0,0 +1,26 @@
+import React, { HTMLAttributes } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { ResponsiveProp, SpacingScale } from "../utilities/css";
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Justify-content
+     */
+    justify?: "start" | "center" | "end" | "space-around" | "space-between" | "space-evenly";
+    /**
+     * Align-items
+     */
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    /**
+     * flex-wrap
+     */
+    wrap?: boolean;
+    /**
+     * @example
+     * gap='4'
+     * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    gap?: ResponsiveProp<SpacingScale>;
+    direction: "row" | "column";
+}
+export declare const Stack: OverridableComponent<StackProps, HTMLDivElement>;

package/esm/layout/stack/Stack.js

@@ -0,0 +1,23 @@
+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 { getResponsiveProps, } from "../utilities/css";
+export const Stack = forwardRef((_a, ref) => {
+    var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
+    const style = Object.assign(Object.assign({ "--ac-stack-direction": direction, "--ac-stack-align": align, "--ac-stack-justify": justify, "--ac-stack-wrap": wrap ? "wrap" : "nowrap" }, getResponsiveProps(`stack`, "gap", "spacing", gap)), _style);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: cl("navds-stack", className, {
+            "navds-vstack": direction === "column",
+            "navds-hstack": direction === "row",
+        }) })));
+});
+//# sourceMappingURL=Stack.js.map

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

@@ -0,0 +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,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EACL,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AA+B1B,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,OAEV,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,GAAG,8BACZ,sBAAsB,EAAE,SAAS,EACjC,kBAAkB,EAAE,KAAK,EACzB,oBAAoB,EAAE,OAAO,EAC7B,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IACxC,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,MAAM,CACa,CAAC;IAEzB,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"}

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

@@ -0,0 +1,24 @@
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { StackProps } from "./Stack";
+export type VStackProps = Omit<StackProps, "direction" | "wrap">;
+/**
+ * Layout-primitive for vetical flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link VStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <VStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ *
+ * @example
+ * // Responsive gap
+ * <VStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ */
+export declare const VStack: OverridableComponent<VStackProps, HTMLDivElement>;

package/esm/layout/stack/VStack.js

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import { Stack } from "./Stack";
+/**
+ * Layout-primitive for vetical flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link VStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <VStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ *
+ * @example
+ * // Responsive gap
+ * <VStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ */
+export const VStack = forwardRef((props, ref) => {
+    return React.createElement(Stack, Object.assign({}, props, { ref: ref, direction: "column", wrap: false }));
+});
+//# sourceMappingURL=VStack.js.map

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

@@ -0,0 +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,EAAc,KAAK,EAAE,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"}

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

@@ -0,0 +1,3 @@
+export { HStack, type HStackProps } from "./HStack";
+export { VStack, type VStackProps } from "./VStack";
+export { Spacer } from "./Spacer";

package/esm/layout/stack/index.js

@@ -0,0 +1,4 @@
+export { HStack } from "./HStack";
+export { VStack } from "./VStack";
+export { Spacer } from "./Spacer";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/esm/layout/utilities/css.d.ts

@@ -0,0 +1,10 @@
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpacingScale = "0" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32";
+export type ResponsiveProp<T> = T | {
+    [Breakpoint in BreakpointsAlias]?: T;
+};
+export declare function getResponsiveProps(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: string | {
+    [Breakpoint in BreakpointsAlias]?: string;
+}): {
+    [x: string]: string;
+};

package/esm/layout/utilities/css.js

@@ -0,0 +1,14 @@
+export function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp) {
+    if (!responsiveProp)
+        return {};
+    if (typeof responsiveProp === "string") {
+        return {
+            [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+        };
+    }
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+        `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+    ]));
+}
+//# sourceMappingURL=css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AA8BA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAKK;IAEL,IAAI,CAAC,cAAc;QAAE,OAAO,EAAE,CAAC;IAE/B,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,QAAQ,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,WAAW,aAAa,IAAI,cAAc,GAAG;SAC7F,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE,CAAC;QACtE,QAAQ,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC3D,WAAW,aAAa,IAAI,YAAY,GAAG;KAC5C,CAAC,CACH,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.7.4",
+  "version": "4.8.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.7.4",
+    "@navikt/aksel-icons": "^4.8.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/index.ts

@@ -32,3 +32,4 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/stack";

package/src/layout/stack/HStack.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { StackProps, Stack } from "./Stack";
+
+export type HStackProps = Omit<StackProps, "direction">;
+
+/**
+ * Layout-primitive for horizontal flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link HStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ *
+ * @example
+ * // Responsive gap
+ * <HStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </HStack>
+ */
+export const HStack: OverridableComponent<HStackProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    return <Stack {...props} ref={ref} direction="row" />;
+  });

package/src/layout/stack/Spacer.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+/**
+ * Layout-primitive for auto-spacing between elements
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ *
+ * @example
+ * <HStack gap="8">
+ *  <MyComponent />
+ *  <Spacer />
+ *  <MyComponent />
+ * </HStack>
+ */
+export const Spacer = () => <div className="navds-stack__spacer" />;

package/src/layout/stack/Stack.tsx

@@ -0,0 +1,76 @@
+import cl from "clsx";
+import React, { forwardRef, HTMLAttributes } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import {
+  getResponsiveProps,
+  ResponsiveProp,
+  SpacingScale,
+} from "../utilities/css";
+
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Justify-content
+   */
+  justify?:
+    | "start"
+    | "center"
+    | "end"
+    | "space-around"
+    | "space-between"
+    | "space-evenly";
+  /**
+   * Align-items
+   */
+  align?: "start" | "center" | "end" | "baseline" | "stretch";
+  /**
+   * flex-wrap
+   */
+  wrap?: boolean;
+  /**
+   * @example
+   * gap='4'
+   * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  gap?: ResponsiveProp<SpacingScale>;
+  direction: "row" | "column";
+}
+
+export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        as: Component = "div",
+        className,
+        align,
+        justify,
+        wrap = true,
+        gap,
+        style: _style,
+        direction,
+        ...rest
+      },
+      ref
+    ) => {
+      const style = {
+        "--ac-stack-direction": direction,
+        "--ac-stack-align": align,
+        "--ac-stack-justify": justify,
+        "--ac-stack-wrap": wrap ? "wrap" : "nowrap",
+        ...getResponsiveProps(`stack`, "gap", "spacing", gap),
+        ..._style,
+      } as React.CSSProperties;
+
+      return (
+        <Component
+          {...rest}
+          ref={ref}
+          style={style}
+          className={cl("navds-stack", className, {
+            "navds-vstack": direction === "column",
+            "navds-hstack": direction === "row",
+          })}
+        />
+      );
+    }
+  );

package/src/layout/stack/VStack.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { StackProps, Stack } from "./Stack";
+
+export type VStackProps = Omit<StackProps, "direction" | "wrap">;
+
+/**
+ * Layout-primitive for vetical flexbox
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
+ * @see 🏷️ {@link VStackProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <VStack gap="8">
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ *
+ * @example
+ * // Responsive gap
+ * <VStack gap={{xs: "2", md: "6"}}>
+ *  <MyComponent />
+ *  <MyComponent />
+ * </VStack>
+ */
+export const VStack: OverridableComponent<VStackProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    return <Stack {...props} ref={ref} direction="column" wrap={false} />;
+  });

package/src/layout/stack/index.ts

@@ -0,0 +1,3 @@
+export { HStack, type HStackProps } from "./HStack";
+export { VStack, type VStackProps } from "./VStack";
+export { Spacer } from "./Spacer";

package/src/layout/stack/stack.stories.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import { HStack, VStack, Spacer } from ".";
+
+export default {
+  title: "ds-react/Stack",
+  component: HStack,
+} satisfies Meta<typeof HStack>;
+
+export const Horizontal = {
+  render: () => (
+    <HStack gap="4">
+      <Placeholders count={4} />
+    </HStack>
+  ),
+};
+
+export const Spacing = {
+  render: () => (
+    <div style={{ height: "80vh", display: "flex" }}>
+      <VStack gap="8">
+        <Spacer />
+        <HStack gap="4">
+          <Placeholders count={1} />
+          <Spacer />
+          <Placeholders count={1} />
+        </HStack>
+        <HStack gap="4">
+          <Placeholders count={1} />
+          <Placeholders count={1} />
+        </HStack>
+        <HStack gap="4">
+          <Placeholders count={2} />
+        </HStack>
+      </VStack>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Vertical = {
+  render: () => (
+    <VStack gap="4">
+      <Placeholders count={4} />
+    </VStack>
+  ),
+};
+
+export const VerticalDemo = {
+  render: () => (
+    <VStack gap="2">
+      <VStack>
+        <Placeholders count={4} />
+      </VStack>
+      <Placeholders count={4} />
+      <VStack>
+        <Placeholders count={4} />
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const VerticalAlign = {
+  render: () => (
+    <VStack gap="4">
+      <VStack align="start">
+        <Placeholders count={2} />
+      </VStack>
+      <VStack align="center">
+        <Placeholders count={2} />
+      </VStack>
+      <VStack align="end">
+        <Placeholders count={2} />
+      </VStack>
+    </VStack>
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const OverrideComponent = {
+  render: () => (
+    <VStack gap="4" as="form" onSubmit={(e) => e.preventDefault()}>
+      <Placeholders count={4} />
+    </VStack>
+  ),
+};
+
+export const Responsive = {
+  render: () => (
+    <VStack gap={{ xs: "1", sm: "3", md: "6", lg: "10", xl: "16" }}>
+      <Placeholders count={4} />
+    </VStack>
+  ),
+};
+
+export const Nested = {
+  render: () => (
+    <VStack gap="16">
+      <Placeholders count={2}>
+        <VStack gap="4">
+          <Placeholders count={2} color="gray" />
+        </VStack>
+      </Placeholders>
+    </VStack>
+  ),
+};
+
+export const DividerDemo = {
+  render: () => (
+    <div style={{ height: "80vh", width: "40rem" }}>
+      <VStack gap={{ xs: "2", md: "6", lg: "12" }}>
+        <HStack gap={{ xs: "2", md: "6", lg: "12" }}>
+          <Placeholders count={1} />
+          <Spacer />
+          <Placeholders count={1} />
+        </HStack>
+        <hr
+          style={{
+            border: "none",
+            borderBottom: "1px solid var(--a-border-divider)",
+            margin: 0,
+          }}
+        />
+        <HStack gap={{ xs: "2", md: "6", lg: "12" }}>
+          <Placeholders count={2} />
+        </HStack>
+      </VStack>
+    </div>
+  ),
+};
+
+function Placeholders({
+  count,
+  children,
+  color,
+}: {
+  count: number;
+  children?: React.ReactNode;
+  color?: string;
+}) {
+  return (
+    <>
+      {Array.from({ length: count }, (_, i) => (
+        <div
+          key={i}
+          style={{
+            backgroundColor: color ?? "var(--a-purple-200)",
+            height: children ? "" : "3rem",
+            width: children ? "" : "3rem",
+          }}
+        >
+          {children}
+        </div>
+      ))}
+    </>
+  );
+}

package/src/layout/utilities/css.ts

@@ -0,0 +1,56 @@
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpacingScale =
+  | "0"
+  | "05"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "10"
+  | "11"
+  | "12"
+  | "14"
+  | "16"
+  | "18"
+  | "20"
+  | "24"
+  | "32";
+
+export type ResponsiveProp<T> =
+  | T
+  | {
+      // eslint-disable-next-line no-unused-vars
+      [Breakpoint in BreakpointsAlias]?: T;
+    };
+
+export function getResponsiveProps(
+  componentName: string,
+  componentProp: string,
+  tokenSubgroup: string,
+  responsiveProp?:
+    | string
+    | {
+        // eslint-disable-next-line no-unused-vars
+        [Breakpoint in BreakpointsAlias]?: string;
+      }
+) {
+  if (!responsiveProp) return {};
+
+  if (typeof responsiveProp === "string") {
+    return {
+      [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+      `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+      `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+    ])
+  );
+}