@postenbring/hedwig-react 0.0.66 → 0.0.68

package/dist/layout/index.js

@@ -50,6 +50,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var layout_exports = {};
 __export(layout_exports, {
   Container: () => Container,
+  Grid: () => GridComponent,
+  GridItem: () => GridItem,
   HStack: () => HStack,
   Stack: () => Stack,
   VStack: () => VStack
@@ -79,23 +81,17 @@ var Container = (0, import_react.forwardRef)(
 );
 Container.displayName = "Container";
 
-// src/layout/stack/stack.tsx
-var React = require("react");
+// src/layout/grid/grid.tsx
 var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
-var import_react2 = require("react");
 var import_react_slot = require("@radix-ui/react-slot");
-
-// src/layout/spacing.ts
-function getSpacingVariable(size) {
-  return `var(--hds-spacing-${size})`;
-}
+var import_react2 = require("react");
 
 // src/layout/responsive.ts
 function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
   if (!inputValues)
     return {};
   if (typeof inputValues !== "object") {
-    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };
+    return { [`${variable}-initial`]: valueTransformer(inputValues) };
   }
   const result = {};
   for (const [key, value] of Object.entries(inputValues)) {
@@ -104,18 +100,70 @@ function getResponsiveProps(variable, inputValues, valueTransformer = (value) =>
   return result;
 }
 
-// src/layout/stack/stack.tsx
+// src/layout/spacing.ts
+function getSpacingVariable(size) {
+  return `var(--hds-spacing-${size})`;
+}
+
+// src/layout/grid/grid.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Stack = (0, import_react2.forwardRef)(
+var Grid = (0, import_react2.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
+    var _b = _a, { children, asChild, className, span, center, style: _style, gap } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap"]);
     const Component = asChild ? import_react_slot.Slot : "div";
-    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname2.clsx)("hds-stack", className),
+        className: (0, import_typed_classname2.clsx)("hds-grid", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Grid.displayName = "Grid";
+var GridItem = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
+    const Component = asChild ? import_react_slot.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname2.clsx)("hds-grid__item", className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+GridItem.displayName = "Grid.Item";
+
+// src/layout/grid/index.tsx
+var GridComponent = Grid;
+GridComponent.Item = GridItem;
+
+// src/layout/stack/stack.tsx
+var React = require("react");
+var import_typed_classname3 = require("@postenbring/hedwig-css/typed-classname");
+var import_react3 = require("react");
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Stack = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
+    const Component = asChild ? import_react_slot2.Slot : "div";
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Component,
+      __spreadProps(__spreadValues({
+        style,
+        className: (0, import_typed_classname3.clsx)("hds-stack", className),
         ref
       }, rest), {
         children
@@ -124,17 +172,19 @@ var Stack = (0, import_react2.forwardRef)(
   }
 );
 Stack.displayName = "Stack";
-var HStack = (0, import_react2.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
+var HStack = (0, import_react3.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
 });
 HStack.displayName = "HStack";
-var VStack = (0, import_react2.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
+var VStack = (0, import_react3.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
 });
 VStack.displayName = "VStack";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Container,
+  Grid,
+  GridItem,
   HStack,
   Stack,
   VStack

package/dist/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/index.tsx","../../src/layout/container/container.tsx","../../src/layout/stack/stack.tsx","../../src/layout/spacing.ts","../../src/layout/responsive.ts"],"sourcesContent":["export * from \"./container/container\";\nexport * from \"./stack/stack\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../../utils\";\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: \"default\" | \"slim\";\n  children: ReactNode;\n}\n\n/**\n * Container is a layout component that is used to wrap content.\n * It ensures a max-width and minimum spacing on the sides.\n */\nexport const Container: OverridableComponent<ContainerProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, children, variant, ...rest }, ref) => {\n    return (\n      <Component\n        {...rest}\n        className={clsx(\n          \"hds-container\",\n          { \"hds-container--slim\": variant === \"slim\" },\n          className as undefined,\n        )}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nContainer.displayName = \"Container\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,6BAAqB;AAErB,mBAA2B;AAerB;AAHC,IAAM,gBAAkE;AAAA,EAC7E,CAAC,IAAkE,QAAQ;AAA1E,iBAAE,MAAI,YAAY,OAAO,WAAW,UAAU,QAfjD,IAeG,IAA0D,iBAA1D,IAA0D,CAAxD,MAAuB,aAAW,YAAU;AAC7C,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,eAAW;AAAA,UACT;AAAA,UACA,EAAE,uBAAuB,YAAY,OAAO;AAAA,UAC5C;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;;;AC/BxB,YAAuB;AACvB,IAAAA,0BAAqB;AACrB,IAAAC,gBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,SAAS,GAAG,iBAAiB,WAAW,EAAE;AAAA,EACjE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM,IAAAC,sBAAA;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,8BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,0BAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,6CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,0BAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,6CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":["import_typed_classname","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/layout/index.tsx","../../src/layout/container/container.tsx","../../src/layout/grid/grid.tsx","../../src/layout/responsive.ts","../../src/layout/spacing.ts","../../src/layout/grid/index.tsx","../../src/layout/stack/stack.tsx"],"sourcesContent":["export * from \"./container/container\";\nexport * from \"./grid\";\nexport * from \"./stack\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { OverridableComponent } from \"../../utils\";\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: \"default\" | \"slim\";\n  children: ReactNode;\n}\n\n/**\n * Container is a layout component that is used to wrap content.\n * It ensures a max-width and minimum spacing on the sides.\n */\nexport const Container: OverridableComponent<ContainerProps, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, children, variant, ...rest }, ref) => {\n    return (\n      <Component\n        {...rest}\n        className={clsx(\n          \"hds-container\",\n          { \"hds-container--slim\": variant === \"slim\" },\n          className as undefined,\n        )}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nContainer.displayName = \"Container\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\nimport { type SpacingSizes, type ResponsiveSpacingSizes, getSpacingVariable } from \"../spacing\";\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Space between grid items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Column span for the grid items\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center grid items horizontally\n   *\n   * Offsets the start position of the grid items relative to their span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 A simple opionated abstraction over CSS Grid.\n *\n * The grid is always a 12 column grid.\n *\n * example\n * ```tsx\n * <Grid gap=\"12-16\" span={{ small: 6 }}>\n *   <div>6/12</div>\n *   <div>6/12</div>\n *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>\n *   <div>6/12</div>\n *   <div>6/12</div>\n * </Grid>\n * ```\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  ({ children, asChild, className, span, center, style: _style, gap, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-span\", span),\n      ...getResponsiveProps(\"--hds-grid-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGrid.displayName = \"Grid\";\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Column span for the grid item\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center the grid item horizontally\n   *\n   * Offsets the start position of the grid item relative to it's span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 Grid.Item\n *\n * Use as the direct child of a `Grid` to override `span` and `center` for individual items.\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, asChild, className, span, center, style: _style, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-item-span\", span),\n      ...getResponsiveProps(\"--hds-grid-item-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid__item\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGridItem.displayName = \"Grid.Item\";\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","import { Grid, GridItem } from \"./grid\";\n\nconst GridComponent = Grid as typeof Grid & {\n  Item: typeof GridItem;\n};\n\nGridComponent.Item = GridItem;\n\nexport { GridComponent as Grid, GridItem };\n\nexport type * from \"./grid\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n"],"mappings":"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","names":["import_typed_classname","import_react","import_jsx_runtime","import_typed_classname","import_react","import_react_slot","import_jsx_runtime"]}

package/dist/layout/index.mjs

@@ -1,17 +1,26 @@
-import "../chunk-L4GQJETB.mjs";
+import "../chunk-BVG5VSZK.mjs";
 import {
-  Container
-} from "../chunk-I6GDRDYD.mjs";
+  GridComponent
+} from "../chunk-DIDVODBP.mjs";
+import "../chunk-ZQHLYAJU.mjs";
 import {
   HStack,
   Stack,
   VStack
-} from "../chunk-27XJO7E4.mjs";
-import "../chunk-ZTYEOZLK.mjs";
+} from "../chunk-QGZU7Z2W.mjs";
+import {
+  Container
+} from "../chunk-I6GDRDYD.mjs";
+import {
+  GridItem
+} from "../chunk-XNA5MFJC.mjs";
+import "../chunk-F4STR6SD.mjs";
 import "../chunk-NE6W2PCD.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   Container,
+  GridComponent as Grid,
+  GridItem,
   HStack,
   Stack,
   VStack

package/dist/layout/responsive.js

@@ -27,7 +27,7 @@ function getResponsiveProps(variable, inputValues, valueTransformer = (value) =>
   if (!inputValues)
     return {};
   if (typeof inputValues !== "object") {
-    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };
+    return { [`${variable}-initial`]: valueTransformer(inputValues) };
   }
   const result = {};
   for (const [key, value] of Object.entries(inputValues)) {

package/dist/layout/responsive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/layout/responsive.ts"],"sourcesContent":["type Breakpoints = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,SAAS,GAAG,iBAAiB,WAAW,EAAE;AAAA,EACjE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/layout/responsive.ts"],"sourcesContent":["type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;","names":[]}

package/dist/layout/responsive.mjs

@@ -1,6 +1,6 @@
 import {
   getResponsiveProps
-} from "../chunk-ZTYEOZLK.mjs";
+} from "../chunk-F4STR6SD.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   getResponsiveProps

package/dist/layout/stack/index.js

@@ -71,7 +71,7 @@ function getResponsiveProps(variable, inputValues, valueTransformer = (value) =>
   if (!inputValues)
     return {};
   if (typeof inputValues !== "object") {
-    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };
+    return { [`${variable}-initial`]: valueTransformer(inputValues) };
   }
   const result = {};
   for (const [key, value] of Object.entries(inputValues)) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layout/stack/index.tsx","../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["export { Stack, HStack, VStack } from \"./stack\";\nexport type * from \"./stack\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,SAAS,GAAG,iBAAiB,WAAW,EAAE;AAAA,EACjE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/layout/stack/index.tsx","../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["export { Stack, HStack, VStack } from \"./stack\";\nexport type * from \"./stack\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/layout/stack/index.mjs

@@ -1,9 +1,10 @@
+import "../../chunk-ZQHLYAJU.mjs";
 import {
   HStack,
   Stack,
   VStack
-} from "../../chunk-27XJO7E4.mjs";
-import "../../chunk-ZTYEOZLK.mjs";
+} from "../../chunk-QGZU7Z2W.mjs";
+import "../../chunk-F4STR6SD.mjs";
 import "../../chunk-NE6W2PCD.mjs";
 import "../../chunk-R4SQKVDQ.mjs";
 export {

package/dist/layout/stack/stack.js

@@ -69,7 +69,7 @@ function getResponsiveProps(variable, inputValues, valueTransformer = (value) =>
   if (!inputValues)
     return {};
   if (typeof inputValues !== "object") {
-    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };
+    return { [`${variable}-initial`]: valueTransformer(inputValues) };
   }
   const result = {};
   for (const [key, value] of Object.entries(inputValues)) {

package/dist/layout/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-xsmall`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,SAAS,GAAG,iBAAiB,WAAW,EAAE;AAAA,EACjE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n  \"--hds-stack-gap\"?: string;\n  \"--hds-stack-direction\"?: string;\n  \"--hds-stack-wrap\"?: string;\n  \"--hds-stack-align\"?: string;\n  \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n  direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n  wrap?: ResponsiveProp<boolean>;\n  align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n  justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: CSSPropertiesWithVar = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-stack-direction\", direction),\n      ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n      ...getResponsiveProps(\"--hds-stack-align\", align),\n      ...getResponsiveProps(\"--hds-stack-justify\", justify),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-stack\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n  return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/layout/stack/stack.mjs

@@ -2,8 +2,8 @@ import {
   HStack,
   Stack,
   VStack
-} from "../../chunk-27XJO7E4.mjs";
-import "../../chunk-ZTYEOZLK.mjs";
+} from "../../chunk-QGZU7Z2W.mjs";
+import "../../chunk-F4STR6SD.mjs";
 import "../../chunk-NE6W2PCD.mjs";
 import "../../chunk-R4SQKVDQ.mjs";
 export {

package/dist/message/index.d.mts

@@ -1 +1,3 @@
 export { Message_alias_2 as Message } from '../_tsup-dts-rollup';
+export { MessageTitle_alias_2 as MessageTitle } from '../_tsup-dts-rollup';
+export { MessageDescription_alias_2 as MessageDescription } from '../_tsup-dts-rollup';

package/dist/message/index.d.ts

@@ -1 +1,3 @@
 export { Message_alias_2 as Message } from '../_tsup-dts-rollup';
+export { MessageTitle_alias_2 as MessageTitle } from '../_tsup-dts-rollup';
+export { MessageDescription_alias_2 as MessageDescription } from '../_tsup-dts-rollup';

package/dist/message/index.js

@@ -49,7 +49,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/message/index.tsx
 var message_exports = {};
 __export(message_exports, {
-  Message: () => MessageComponent
+  Message: () => MessageComponent,
+  MessageDescription: () => MessageDescription,
+  MessageTitle: () => MessageTitle
 });
 module.exports = __toCommonJS(message_exports);
 
@@ -182,6 +184,8 @@ MessageComponent.Title = MessageTitle;
 MessageComponent.Description = MessageDescription;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Message
+  Message,
+  MessageDescription,
+  MessageTitle
 });
 //# sourceMappingURL=index.js.map

package/dist/message/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["import { Message, MessageTitle, MessageDescription } from \"./message\";\n\nconst MessageComponent = Message as typeof Message & {\n  Title: typeof MessageTitle;\n  Description: typeof MessageDescription;\n};\n\nMessageComponent.Title = MessageTitle;\nMessageComponent.Description = MessageDescription;\n\nexport { MessageComponent as Message };\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport type MessageProps = (\n  | {\n      variant?: \"success\" | \"attention\" | \"warning\";\n      icon?: never;\n      iconClassName?: never;\n    }\n  | {\n      variant: \"neutral\";\n      icon?: React.ReactNode;\n      iconClassName?: string;\n    }\n) &\n  Omit<BoxProps, \"variant\">;\n\nexport const Message: OverridableComponent<MessageProps, HTMLDivElement> = forwardRef(\n  ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n    return (\n      <Box\n        className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {variant === \"neutral\" && (\n          <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n            {icon}\n          </div>\n        )}\n        {children}\n      </Box>\n    );\n  },\n);\nMessage.displayName = \"Message\";\n\nexport const MessageTitle: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-message__title\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageTitle.displayName = \"Message.Title\";\n\nexport const MessageDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-message__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageDescription.displayName = \"Message.Description\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["import { Message, MessageTitle, MessageDescription } from \"./message\";\n\nconst MessageComponent = Message as typeof Message & {\n  Title: typeof MessageTitle;\n  Description: typeof MessageDescription;\n};\n\nMessageComponent.Title = MessageTitle;\nMessageComponent.Description = MessageDescription;\n\nexport { MessageComponent as Message, MessageTitle, MessageDescription };\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport type MessageProps = (\n  | {\n      variant?: \"success\" | \"attention\" | \"warning\";\n      icon?: never;\n      iconClassName?: never;\n    }\n  | {\n      variant: \"neutral\";\n      icon?: React.ReactNode;\n      iconClassName?: string;\n    }\n) &\n  Omit<BoxProps, \"variant\">;\n\nexport const Message: OverridableComponent<MessageProps, HTMLDivElement> = forwardRef(\n  ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n    return (\n      <Box\n        className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {variant === \"neutral\" && (\n          <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n            {icon}\n          </div>\n        )}\n        {children}\n      </Box>\n    );\n  },\n);\nMessage.displayName = \"Message\";\n\nexport const MessageTitle: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-message__title\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageTitle.displayName = \"Message.Title\";\n\nexport const MessageDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n  ({ as: Component = \"p\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-message__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageDescription.displayName = \"Message.Description\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}

package/dist/message/index.mjs

@@ -1,10 +1,15 @@
 import {
   MessageComponent
-} from "../chunk-AR2NOI4U.mjs";
-import "../chunk-ME66RUR6.mjs";
+} from "../chunk-EJ7ANN7M.mjs";
+import {
+  MessageDescription,
+  MessageTitle
+} from "../chunk-ME66RUR6.mjs";
 import "../chunk-EGXM575K.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
-  MessageComponent as Message
+  MessageComponent as Message,
+  MessageDescription,
+  MessageTitle
 };
 //# sourceMappingURL=index.mjs.map

package/dist/message/message.d.mts

@@ -1,4 +1,4 @@
 export { MessageProps } from '../_tsup-dts-rollup';
 export { Message_alias_3 as Message } from '../_tsup-dts-rollup';
-export { MessageTitle } from '../_tsup-dts-rollup';
-export { MessageDescription } from '../_tsup-dts-rollup';
+export { MessageTitle_alias_3 as MessageTitle } from '../_tsup-dts-rollup';
+export { MessageDescription_alias_3 as MessageDescription } from '../_tsup-dts-rollup';

package/dist/message/message.d.ts

@@ -1,4 +1,4 @@
 export { MessageProps } from '../_tsup-dts-rollup';
 export { Message_alias_3 as Message } from '../_tsup-dts-rollup';
-export { MessageTitle } from '../_tsup-dts-rollup';
-export { MessageDescription } from '../_tsup-dts-rollup';
+export { MessageTitle_alias_3 as MessageTitle } from '../_tsup-dts-rollup';
+export { MessageDescription_alias_3 as MessageDescription } from '../_tsup-dts-rollup';

package/dist/modal/index.d.mts

@@ -1,6 +1,6 @@
 export { Modal_alias_2 as Modal } from '../_tsup-dts-rollup';
-export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
-export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';
 export { ModalHeader_alias_2 as ModalHeader } from '../_tsup-dts-rollup';
 export { ModalContent_alias_2 as ModalContent } from '../_tsup-dts-rollup';
 export { ModalFooter_alias_2 as ModalFooter } from '../_tsup-dts-rollup';
+export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
+export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';

package/dist/modal/index.d.ts

@@ -1,6 +1,6 @@
 export { Modal_alias_2 as Modal } from '../_tsup-dts-rollup';
-export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
-export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';
 export { ModalHeader_alias_2 as ModalHeader } from '../_tsup-dts-rollup';
 export { ModalContent_alias_2 as ModalContent } from '../_tsup-dts-rollup';
 export { ModalFooter_alias_2 as ModalFooter } from '../_tsup-dts-rollup';
+export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
+export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';

package/dist/modal/index.js

@@ -59,7 +59,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/modal/index.tsx
 var modal_exports = {};
 __export(modal_exports, {
-  Modal: () => ModalComponent
+  Modal: () => ModalComponent,
+  ModalContent: () => ModalContent,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader
 });
 module.exports = __toCommonJS(modal_exports);
 
@@ -274,6 +277,9 @@ ModalComponent.Content = ModalContent;
 ModalComponent.Footer = ModalFooter;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Modal
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
 });
 //# sourceMappingURL=index.js.map

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nconst ModalComponent = Modal as typeof Modal & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\nModalComponent.Header = ModalHeader;\nModalComponent.Content = ModalContent;\nModalComponent.Footer = ModalFooter;\n\nexport { ModalComponent as Modal };\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const onClose = () => modalRef.current?.close();\n\n    return (\n      <>\n        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n        <Modal ref={modalRef}>\n          <Modal.Header>Dialog header</Modal.Header>\n          <Modal.Content>\n            <p>\n              Dialog header Dialog description - a description of what is about to happen and maybe\n              something about the consequences.\n            </p>\n          </Modal.Content>\n          <Modal.Footer>\n            <HStack gap=\"16\" wrap>\n              <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n              <PrimaryButton fill=\"outline\" onClick={onClose}>\n                Cancel\n              </PrimaryButton>\n            </HStack>\n          </Modal.Footer>\n        </Modal>\n      </>\n    );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        as=\"dialog\"\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        ref={mergedRef}\n        variant=\"white\"\n        {\n          ...(rest as object) /* TODO remove type casting */\n        }\n      >\n        {children}\n      </Box>\n    );\n  },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n  ({ as: Component = \"h1\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"footer\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}
+{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nconst ModalComponent = Modal as typeof Modal & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\nModalComponent.Header = ModalHeader;\nModalComponent.Content = ModalContent;\nModalComponent.Footer = ModalFooter;\n\nexport { ModalComponent as Modal, ModalHeader, ModalContent, ModalFooter };\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const onClose = () => modalRef.current?.close();\n\n    return (\n      <>\n        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n        <Modal ref={modalRef}>\n          <Modal.Header>Dialog header</Modal.Header>\n          <Modal.Content>\n            <p>\n              Dialog header Dialog description - a description of what is about to happen and maybe\n              something about the consequences.\n            </p>\n          </Modal.Content>\n          <Modal.Footer>\n            <HStack gap=\"16\" wrap>\n              <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n              <PrimaryButton fill=\"outline\" onClick={onClose}>\n                Cancel\n              </PrimaryButton>\n            </HStack>\n          </Modal.Footer>\n        </Modal>\n      </>\n    );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        as=\"dialog\"\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        ref={mergedRef}\n        variant=\"white\"\n        {\n          ...(rest as object) /* TODO remove type casting */\n        }\n      >\n        {children}\n      </Box>\n    );\n  },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n  ({ as: Component = \"h1\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"div\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n  ({ as: Component = \"footer\", className, ...rest }, ref) => {\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n  children?: React.ReactNode;\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n  (\n    {\n      as: Component = \"div\",\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        {children}\n      </Component>\n    );\n  },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}