@d4gger/design-system 2.7.0

package/dist/layout/Layout.cjs

@@ -0,0 +1,937 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Layout_exports = {};
+__export(Layout_exports, {
+  Box: () => Box,
+  Container: () => Container,
+  Flex: () => Flex,
+  Grid: () => Grid,
+  Section: () => Section,
+  Stack: () => Stack
+});
+module.exports = __toCommonJS(Layout_exports);
+var React = __toESM(require("react"), 1);
+var import_cn = require("../_internal/cn");
+var import_Slot = require("../components/slot/Slot");
+var import_responsive = require("./responsive.props");
+var import_Shared = require("../foundations/Shared");
+var import_jsx_runtime = require("react/jsx-runtime");
+const RESPONSIVE_CONDITIONS = ["initial", "sm", "md", "lg", "xl", "2xl"];
+function getResponsiveVarName(name, condition) {
+  return condition === "initial" ? `--${name}` : `--${name}-${condition}`;
+}
+function mergeResponsiveValue(value, overrides) {
+  const responsive = { ...(0, import_responsive.toResponsiveMap)(value) };
+  let hasOverride = false;
+  for (const breakpoint of ["sm", "md", "lg"]) {
+    const nextValue = overrides[breakpoint];
+    if (nextValue !== void 0) {
+      responsive[breakpoint] = nextValue;
+      hasOverride = true;
+    }
+  }
+  if (!hasOverride) {
+    return value;
+  }
+  return responsive;
+}
+function serializeResponsiveValue(value) {
+  const responsive = (0, import_responsive.toResponsiveMap)(value);
+  const entries = RESPONSIVE_CONDITIONS.flatMap((condition) => {
+    const nextValue = responsive[condition];
+    if (nextValue === void 0) {
+      return [];
+    }
+    return [[condition, nextValue]];
+  });
+  if (entries.length === 0) {
+    return void 0;
+  }
+  if (entries.length === 1 && entries[0][0] === "initial") {
+    return String(entries[0][1]);
+  }
+  return entries.map(([condition, nextValue]) => `${condition}:${String(nextValue)}`).join(";");
+}
+const spacingUtilityValues = /* @__PURE__ */ new Set(["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"]);
+const sizeUtilityValues = /* @__PURE__ */ new Set(["auto", "full", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"]);
+const radiusUtilityValues = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "xl", "2xl", "full"]);
+const directionUtilityValues = /* @__PURE__ */ new Set(["row", "column", "row-reverse", "column-reverse"]);
+const alignUtilityValues = /* @__PURE__ */ new Set(["start", "center", "end", "stretch", "baseline"]);
+const justifyUtilityValues = /* @__PURE__ */ new Set(["start", "center", "end", "between", "around", "evenly"]);
+const wrapUtilityValues = /* @__PURE__ */ new Set(["nowrap", "wrap", "wrap-reverse"]);
+function getUtilityClassValue(value) {
+  if (value === "none") {
+    return "0";
+  }
+  return value.split("_").join("-");
+}
+function getResponsiveUtilityClassNames(className, value, utilityValues) {
+  const responsive = (0, import_responsive.toResponsiveMap)(value);
+  const classNames = [];
+  const conditions = ["initial", ...RESPONSIVE_CONDITIONS.filter((condition) => condition !== "initial")];
+  for (const condition of conditions) {
+    const nextValue = responsive[condition];
+    if (nextValue === void 0) {
+      continue;
+    }
+    const baseClassName = typeof nextValue === "string" && utilityValues.has(nextValue) ? `${className}-${getUtilityClassValue(nextValue)}` : className;
+    classNames.push(condition === "initial" ? baseClassName : `${condition}:${baseClassName}`);
+  }
+  return classNames.length > 0 ? classNames.join(" ") : void 0;
+}
+function assignArbitraryResponsiveVars(vars, name, value, utilityValues, resolve) {
+  const responsive = (0, import_responsive.toResponsiveMap)(value);
+  if (responsive.initial !== void 0 && !(typeof responsive.initial === "string" && utilityValues.has(responsive.initial))) {
+    vars[`--${name}`] = resolve(responsive.initial);
+  }
+  let lastValue = responsive.initial !== void 0 && !(typeof responsive.initial === "string" && utilityValues.has(responsive.initial)) ? responsive.initial : void 0;
+  for (const breakpoint of ["sm", "md", "lg", "xl", "2xl"]) {
+    const nextValue = responsive[breakpoint];
+    if (nextValue !== void 0 && !(typeof nextValue === "string" && utilityValues.has(nextValue))) {
+      vars[`--${name}-${breakpoint}`] = resolve(nextValue);
+      lastValue = nextValue;
+    } else if (lastValue !== void 0) {
+      vars[`--${name}-${breakpoint}`] = resolve(lastValue);
+    }
+  }
+  return vars;
+}
+function getBoxUtilityClassName({
+  height,
+  m,
+  mb,
+  ml,
+  mr,
+  mt,
+  mx,
+  my,
+  padding,
+  p,
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
+  radius,
+  width
+}) {
+  const boxPadding = p ?? padding;
+  return (0, import_cn.cn)(
+    getResponsiveUtilityClassNames("dsx-r-w", width, sizeUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-h", height, sizeUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-radius", radius, radiusUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-p", boxPadding, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-px", px, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-py", py, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-pt", pt, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-pr", pr, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-pb", pb, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-pl", pl, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-m", m, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-mx", mx, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-my", my, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-mt", mt, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-mr", mr, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-mb", mb, spacingUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-ml", ml, spacingUtilityValues)
+  );
+}
+function getBoxStyle(style, {
+  border = false,
+  borderTone = "default",
+  display,
+  height,
+  hide,
+  inset,
+  gap,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  padding,
+  paddingX,
+  paddingY,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  position,
+  radius,
+  shadow = "none",
+  show,
+  surface,
+  width,
+  zIndex,
+  margin,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml
+}, defaultDisplay = "block") {
+  const boxPadding = p ?? padding;
+  const vars = (0, import_responsive.assignResponsiveVars)({}, "dsx-box-display", display, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-padding", boxPadding, (value) => (0, import_Shared.resolveSpace)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-r-p", boxPadding, (value) => (0, import_Shared.resolveSpace)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-padding-inline", paddingX, (value) => (0, import_Shared.resolveSpace)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-padding-block", paddingY, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-px", px, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-py", py, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-pt", pt, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-pr", pr, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-pb", pb, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-pl", pl, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-gap", gap, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-radius", radius, radiusUtilityValues, (value) => (0, import_Shared.resolveRadius)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-background", surface, (value) => (0, import_Shared.resolveSurface)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-border-color", borderTone, (value) => (0, import_Shared.resolveBorderTone)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-shadow", shadow, (value) => (0, import_Shared.resolveShadow)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-width", width, sizeUtilityValues, (value) => (0, import_Shared.resolveLength)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-height", height, sizeUtilityValues, (value) => (0, import_Shared.resolveLength)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-min-width", minWidth, (value) => (0, import_Shared.resolveLength)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-max-width", maxWidth, (value) => (0, import_Shared.resolveLength)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-min-height", minHeight, (value) => (0, import_Shared.resolveLength)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-max-height", maxHeight, (value) => (0, import_Shared.resolveLength)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-position", position, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-inset", inset, (value) => (0, import_Shared.resolveLength)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-z-index", zIndex, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-display", hide, (value) => value ? "none" : defaultDisplay);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-display", show, (value) => value ? defaultDisplay : "none");
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-margin", margin, (value) => value);
+  assignArbitraryResponsiveVars(vars, "dsx-r-m", m, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-mx", mx, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-my", my, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-mt", mt, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-mr", mr, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-mb", mb, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  assignArbitraryResponsiveVars(vars, "dsx-r-ml", ml, spacingUtilityValues, (value) => (0, import_Shared.resolveSpace)(value));
+  vars["--dsx-box-border-width"] = border ? "var(--dsx-border-width-sm)" : void 0;
+  return (0, import_Shared.withVars)(style, vars);
+}
+function getBoxChildStyle(style, props) {
+  const vars = (0, import_responsive.assignResponsiveVars)({}, "dsx-box-flex", props.flex, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-flex-grow", props.flexGrow, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-flex-shrink", props.flexShrink, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-flex-basis", props.flexBasis, (value) => (0, import_Shared.resolveLength)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-order", props.order, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-grid-column", props.gridColumn, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-grid-row", props.gridRow, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-grid-area", props.gridArea, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-align-self", props.alignSelf, (value) => resolveAlign(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-box-justify-self", props.justifySelf, (value) => resolveAlign(value));
+  return (0, import_Shared.withVars)(style, vars);
+}
+function resolveGridAlign(value) {
+  if (!value) return void 0;
+  if (value === "start") return "start";
+  if (value === "end") return "end";
+  return value;
+}
+function resolveGridJustify(value) {
+  if (!value) return void 0;
+  if (value === "start") return "start";
+  if (value === "end") return "end";
+  if (value === "between") return "space-between";
+  if (value === "around") return "space-around";
+  if (value === "evenly") return "space-evenly";
+  return value;
+}
+function assignGridVars(vars, {
+  align,
+  alignContent,
+  areas,
+  columns,
+  flow,
+  justify,
+  justifyContent,
+  justifyItems,
+  minItemWidth,
+  rows
+}) {
+  const responsiveColumns = (0, import_responsive.toResponsiveMap)(columns);
+  const responsiveMinItemWidth = (0, import_responsive.toResponsiveMap)(minItemWidth);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-align", align, (value) => resolveGridAlign(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-justify", justify, (value) => resolveGridJustify(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-align-content", alignContent, (value) => resolveGridJustify(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-justify-items", justifyItems, (value) => resolveGridAlign(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-justify-content", justifyContent, (value) => resolveGridJustify(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-areas", areas, (value) => value);
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-auto-flow", flow, (value) => value);
+  for (const condition of RESPONSIVE_CONDITIONS) {
+    const nextMinItemWidth = responsiveMinItemWidth[condition];
+    if (nextMinItemWidth !== void 0) {
+      vars[getResponsiveVarName("dsx-grid-columns", condition)] = `repeat(auto-fit, minmax(${(0, import_Shared.resolveLength)(nextMinItemWidth)}, 1fr))`;
+      continue;
+    }
+    const nextColumns = responsiveColumns[condition];
+    if (nextColumns !== void 0) {
+      vars[getResponsiveVarName("dsx-grid-columns", condition)] = typeof nextColumns === "number" ? `repeat(${nextColumns}, minmax(0, 1fr))` : String(nextColumns);
+    }
+  }
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-grid-rows", rows, (value) => typeof value === "number" ? `repeat(${value}, minmax(0, 1fr))` : value);
+  return vars;
+}
+function BoxInner({
+  as,
+  asChild,
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
+  const Component = asChild ? import_Slot.Slot : as ?? "div";
+  const {
+    alignSelf,
+    border,
+    borderTone,
+    display,
+    flex,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gap,
+    gridArea,
+    gridColumn,
+    gridRow,
+    height,
+    hide,
+    inset,
+    justifySelf,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    order,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    ...rest
+  } = props;
+  const boxStyle = getBoxStyle(style, {
+    border,
+    borderTone,
+    display,
+    gap,
+    height,
+    hide,
+    inset,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...rest,
+      className: (0, import_cn.cn)("dsx-box", getBoxUtilityClassName({ height, m, mb, ml, mr, mt, mx, my, padding, p, pb, pl, pr, pt, px, py, radius, width }), className),
+      style: getBoxChildStyle(boxStyle, { alignSelf, flex, flexBasis, flexGrow, flexShrink, gridArea, gridColumn, gridRow, justifySelf, order }),
+      ref,
+      children
+    }
+  );
+}
+const Box = React.forwardRef(BoxInner);
+function resolveAlign(value) {
+  if (!value) return void 0;
+  if (value === "start") return "flex-start";
+  if (value === "end") return "flex-end";
+  return value;
+}
+function getFlexUtilityClassName({
+  align,
+  direction,
+  justify,
+  wrap
+}) {
+  return (0, import_cn.cn)(
+    getResponsiveUtilityClassNames("dsx-r-fd", direction, directionUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-ai", align, alignUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-jc", justify, justifyUtilityValues),
+    getResponsiveUtilityClassNames("dsx-r-fw", wrap, wrapUtilityValues)
+  );
+}
+function Flex({
+  align,
+  as,
+  asChild,
+  children,
+  className,
+  direction = "row",
+  justify,
+  style,
+  wrap = "nowrap",
+  ...props
+}) {
+  const Component = asChild ? import_Slot.Slot : as ?? "div";
+  const {
+    alignSelf,
+    border,
+    borderTone,
+    display,
+    flex,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gap,
+    gridArea,
+    gridColumn,
+    gridRow,
+    height,
+    hide,
+    inset,
+    justifySelf,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    order,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    ...rest
+  } = props;
+  const vars = getBoxStyle(style, {
+    border,
+    borderTone,
+    display,
+    gap,
+    height,
+    hide,
+    inset,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml
+  }, "flex");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...rest,
+      className: (0, import_cn.cn)("dsx-box", "dsx-flex", getBoxUtilityClassName({ height, m, mb, ml, mr, mt, mx, my, padding, p, pb, pl, pr, pt, px, py, radius, width }), getFlexUtilityClassName({ align, direction, justify, wrap }), className),
+      "data-gap": serializeResponsiveValue(gap),
+      "data-align": serializeResponsiveValue(align),
+      "data-justify": serializeResponsiveValue(justify),
+      style: getBoxChildStyle(vars, { alignSelf, flex, flexBasis, flexGrow, flexShrink, gridArea, gridColumn, gridRow, justifySelf, order }),
+      children
+    }
+  );
+}
+function Grid({
+  align,
+  alignContent,
+  areas,
+  as,
+  asChild,
+  children,
+  className,
+  columns,
+  flow,
+  justify,
+  justifyContent,
+  justifyItems,
+  lg,
+  md,
+  minItemWidth,
+  rows,
+  sm,
+  style,
+  ...props
+}) {
+  const Component = asChild ? import_Slot.Slot : as ?? "div";
+  const {
+    alignSelf,
+    border,
+    borderTone,
+    display,
+    flex,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gap,
+    gridArea,
+    gridColumn,
+    gridRow,
+    height,
+    hide,
+    inset,
+    justifySelf,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    order,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    ...rest
+  } = props;
+  const responsiveGap = mergeResponsiveValue(gap, { sm: sm?.gap, md: md?.gap, lg: lg?.gap });
+  const responsiveAlign = mergeResponsiveValue(align, { sm: sm?.align, md: md?.align, lg: lg?.align });
+  const responsiveAlignContent = mergeResponsiveValue(alignContent, { sm: sm?.alignContent, md: md?.alignContent, lg: lg?.alignContent });
+  const responsiveAreas = mergeResponsiveValue(areas, { sm: sm?.areas, md: md?.areas, lg: lg?.areas });
+  const responsiveJustify = mergeResponsiveValue(justify, { sm: sm?.justify, md: md?.justify, lg: lg?.justify });
+  const responsiveJustifyContent = mergeResponsiveValue(justifyContent, { sm: sm?.justifyContent, md: md?.justifyContent, lg: lg?.justifyContent });
+  const responsiveJustifyItems = mergeResponsiveValue(justifyItems, { sm: sm?.justifyItems, md: md?.justifyItems, lg: lg?.justifyItems });
+  const responsiveColumns = mergeResponsiveValue(columns, { sm: sm?.columns, md: md?.columns, lg: lg?.columns });
+  const responsiveFlow = mergeResponsiveValue(flow, { sm: sm?.flow, md: md?.flow, lg: lg?.flow });
+  const responsiveMinItemWidth = mergeResponsiveValue(minItemWidth, {
+    sm: sm?.minItemWidth,
+    md: md?.minItemWidth,
+    lg: lg?.minItemWidth
+  });
+  const responsiveRows = mergeResponsiveValue(rows, { sm: sm?.rows, md: md?.rows, lg: lg?.rows });
+  const vars = getBoxStyle(style, {
+    border,
+    borderTone,
+    display,
+    gap: responsiveGap,
+    height,
+    hide,
+    inset,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml
+  }, "grid");
+  assignGridVars(vars, {
+    align: responsiveAlign,
+    alignContent: responsiveAlignContent,
+    areas: responsiveAreas,
+    columns: responsiveColumns,
+    flow: responsiveFlow,
+    justify: responsiveJustify,
+    justifyContent: responsiveJustifyContent,
+    justifyItems: responsiveJustifyItems,
+    minItemWidth: responsiveMinItemWidth,
+    rows: responsiveRows
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...rest,
+      className: (0, import_cn.cn)("dsx-box", "dsx-grid", getBoxUtilityClassName({ height, m, mb, ml, mr, mt, mx, my, padding, p, pb, pl, pr, pt, px, py, radius, width }), className),
+      "data-gap": serializeResponsiveValue(responsiveGap),
+      "data-align": serializeResponsiveValue(responsiveAlign),
+      "data-justify": serializeResponsiveValue(responsiveJustify),
+      style: getBoxChildStyle(vars, { alignSelf, flex, flexBasis, flexGrow, flexShrink, gridArea, gridColumn, gridRow, justifySelf, order }),
+      children
+    }
+  );
+}
+function Stack({
+  align,
+  as,
+  asChild,
+  children,
+  className,
+  direction = "column",
+  gap,
+  justify,
+  lg,
+  md,
+  sm,
+  style,
+  wrap,
+  ...props
+}) {
+  const Component = asChild ? import_Slot.Slot : as ?? "div";
+  const {
+    alignSelf,
+    border,
+    borderTone,
+    display,
+    flex,
+    flexBasis,
+    flexGrow,
+    flexShrink,
+    gridArea,
+    gridColumn,
+    gridRow,
+    height,
+    hide,
+    inset,
+    justifySelf,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    order,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml,
+    ...rest
+  } = props;
+  const responsiveAlign = mergeResponsiveValue(align, { sm: sm?.align, md: md?.align, lg: lg?.align });
+  const responsiveDirection = mergeResponsiveValue(direction, {
+    sm: sm?.direction,
+    md: md?.direction,
+    lg: lg?.direction
+  });
+  const responsiveGap = mergeResponsiveValue(gap, { sm: sm?.gap, md: md?.gap, lg: lg?.gap });
+  const responsiveJustify = mergeResponsiveValue(justify, { sm: sm?.justify, md: md?.justify, lg: lg?.justify });
+  const responsiveWrap = mergeResponsiveValue(wrap, { sm: sm?.wrap, md: md?.wrap, lg: lg?.wrap });
+  const vars = getBoxStyle(style, {
+    border,
+    borderTone,
+    display,
+    gap: responsiveGap,
+    height,
+    hide,
+    inset,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml
+  }, "flex");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...rest,
+      className: (0, import_cn.cn)("dsx-box", "dsx-flex", "dsx-stack", getBoxUtilityClassName({ height, m, mb, ml, mr, mt, mx, my, padding, p, pb, pl, pr, pt, px, py, radius, width }), getFlexUtilityClassName({ align: responsiveAlign, direction: responsiveDirection, justify: responsiveJustify, wrap: responsiveWrap }), className),
+      "data-gap": serializeResponsiveValue(responsiveGap),
+      "data-align": serializeResponsiveValue(responsiveAlign),
+      "data-justify": serializeResponsiveValue(responsiveJustify),
+      style: getBoxChildStyle(vars, { alignSelf, flex, flexBasis, flexGrow, flexShrink, gridArea, gridColumn, gridRow, justifySelf, order }),
+      children
+    }
+  );
+}
+function resolveContainerSize(size = "content") {
+  if (size === "wide") return `${import_responsive.CONTAINER_WIDTHS.wide}px`;
+  if (size === "full") return "none";
+  return `${import_responsive.CONTAINER_WIDTHS.content}px`;
+}
+function Container({
+  align,
+  as,
+  asChild,
+  children,
+  className,
+  direction,
+  gap,
+  inset = "margin",
+  justify,
+  lg,
+  md,
+  size = "content",
+  sm,
+  style,
+  wrap,
+  ...props
+}) {
+  const Component = asChild ? import_Slot.Slot : as ?? "div";
+  const { alignSelf, border, borderTone, display, flex, flexBasis, flexGrow, flexShrink, gridArea, gridColumn, gridRow, height, hide, justifySelf, maxHeight, maxWidth, minHeight, minWidth, order, padding, paddingX, paddingY, p, px, py, pt, pr, pb, pl, position, radius, shadow, show, surface, width, zIndex, margin, m, mx, my, mt, mr, mb, ml, ...rest } = props;
+  const responsiveDisplay = mergeResponsiveValue(
+    display,
+    { sm: sm?.display, md: md?.display, lg: lg?.display }
+  );
+  const responsiveGap = mergeResponsiveValue(gap, { sm: sm?.gap, md: md?.gap, lg: lg?.gap });
+  const responsiveAlign = mergeResponsiveValue(align, { sm: sm?.align, md: md?.align, lg: lg?.align });
+  const responsiveDirection = mergeResponsiveValue(direction, {
+    sm: sm?.direction,
+    md: md?.direction,
+    lg: lg?.direction
+  });
+  const responsiveInset = mergeResponsiveValue(inset, { sm: sm?.inset, md: md?.inset, lg: lg?.inset });
+  const responsiveJustify = mergeResponsiveValue(justify, { sm: sm?.justify, md: md?.justify, lg: lg?.justify });
+  const responsiveSize = mergeResponsiveValue(size, { sm: sm?.size, md: md?.size, lg: lg?.size });
+  const responsiveWrap = mergeResponsiveValue(wrap, { sm: sm?.wrap, md: md?.wrap, lg: lg?.wrap });
+  const usesFlexLayout = responsiveAlign !== void 0 || responsiveDirection !== void 0 || responsiveGap !== void 0 || responsiveJustify !== void 0 || responsiveWrap !== void 0;
+  const vars = getBoxStyle(style, {
+    border,
+    borderTone,
+    display: responsiveDisplay,
+    gap: responsiveGap,
+    height,
+    hide,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    padding,
+    paddingX,
+    paddingY,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    position,
+    radius,
+    shadow,
+    show,
+    surface,
+    width,
+    zIndex,
+    margin,
+    m,
+    mx,
+    my,
+    mt,
+    mr,
+    mb,
+    ml
+  });
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-container-inset", responsiveInset, (value) => (0, import_Shared.resolveSpace)(value));
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-container-max-width", responsiveSize, (value) => resolveContainerSize(value));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...rest,
+      className: (0, import_cn.cn)("dsx-box", usesFlexLayout && "dsx-flex", "dsx-container", getBoxUtilityClassName({ height, m, mb, ml, mr, mt, mx, my, padding, p, pb, pl, pr, pt, px, py, radius, width }), getFlexUtilityClassName({ align: responsiveAlign, direction: responsiveDirection, justify: responsiveJustify, wrap: responsiveWrap }), className),
+      "data-gap": serializeResponsiveValue(responsiveGap),
+      "data-align": serializeResponsiveValue(responsiveAlign),
+      "data-justify": serializeResponsiveValue(responsiveJustify),
+      style: getBoxChildStyle(vars, { alignSelf, flex, flexBasis, flexGrow, flexShrink, gridArea, gridColumn, gridRow, justifySelf, order }),
+      children
+    }
+  );
+}
+function Section({
+  as,
+  asChild,
+  children,
+  className,
+  size,
+  space = "2xl",
+  style,
+  ...props
+}) {
+  const Component = asChild ? import_Slot.Slot : as ?? "section";
+  const { alignSelf, border, borderTone, display, flex, flexBasis, flexGrow, flexShrink, gap, gridArea, gridColumn, gridRow, height, hide, inset, justifySelf, maxHeight, maxWidth, minHeight, minWidth, order, padding, paddingX, paddingY, p, px, py, pt, pr, pb, pl, position, radius, shadow, show, surface, width, zIndex, margin, m, mx, my, mt, mr, mb, ml, ...rest } = props;
+  const vars = getBoxStyle(style, { border, borderTone, display, gap, height, hide, inset, maxHeight, maxWidth, minHeight, minWidth, padding, paddingX, paddingY, p, px, py, pt, pr, pb, pl, position, radius, shadow, show, surface, width, zIndex, margin, m, mx, my, mt, mr, mb, ml });
+  (0, import_responsive.assignResponsiveVars)(vars, "dsx-section-space", space, (value) => (0, import_Shared.resolveSpace)(value));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ...rest,
+      className: (0, import_cn.cn)("dsx-box", "dsx-section", getBoxUtilityClassName({ height, m, mb, ml, mr, mt, mx, my, padding, p, pb, pl, pr, pt, px, py, radius, width }), className),
+      style: getBoxChildStyle(vars, { alignSelf, flex, flexBasis, flexGrow, flexShrink, gridArea, gridColumn, gridRow, justifySelf, order }),
+      children
+    }
+  );
+}
+//# sourceMappingURL=Layout.cjs.map