@d4gger/design-system 2.7.0

package/dist/components/grid/Grid.d.mts

@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { type BoxStyleProps, type GridStyleProps } from '../../layout/layout.props.js';
+type GridGapToken = string;
+type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type GridJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type Responsive<T> = T | Partial<Record<'initial' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', T>>;
+type GridBreakpointProps = {
+    align?: GridAlign;
+    alignContent?: GridAlign | 'stretch';
+    areas?: string;
+    columns?: number | string;
+    flow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    gap?: GridGapToken;
+    justify?: GridJustify;
+    justifyContent?: GridAlign | 'stretch';
+    justifyItems?: GridAlign;
+    minItemWidth?: number | string;
+    rows?: number | string;
+};
+export type GridProps = React.HTMLAttributes<HTMLElement> & BoxStyleProps & Omit<GridStyleProps, 'columns' | 'rows' | 'gap'> & {
+    as?: React.ElementType;
+    asChild?: boolean;
+    columns?: Responsive<number | string>;
+    rows?: Responsive<number | string>;
+    gap?: Responsive<GridGapToken>;
+    align?: Responsive<GridAlign>;
+    hide?: Responsive<boolean>;
+    justify?: Responsive<GridJustify>;
+    show?: Responsive<boolean>;
+    minItemWidth?: Responsive<number | string>;
+    flex?: Responsive<number | string>;
+    flexGrow?: Responsive<number>;
+    flexShrink?: Responsive<number>;
+    flexBasis?: Responsive<number | string>;
+    order?: Responsive<number>;
+    gridColumn?: Responsive<string>;
+    gridRow?: Responsive<string>;
+    gridArea?: Responsive<string>;
+    sm?: Partial<GridBreakpointProps>;
+    md?: Partial<GridBreakpointProps>;
+    lg?: Partial<GridBreakpointProps>;
+};
+export declare const Grid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & import("../../_internal/props.js").GetPropDefTypes<{
+    margin: {
+        type: "enum | string";
+        values: readonly ["auto", "none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        default: undefined;
+        className: "";
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    m: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mx: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    my: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mt: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mr: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mb: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    ml: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+}> & import("../../_internal/props.js").GetPropDefTypes<{
+    padding: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        default: undefined;
+        className: "";
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    p: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    px: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    py: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pt: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pr: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pb: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pl: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+}> & {
+    width?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    height?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    minWidth?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    maxWidth?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    minHeight?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    maxHeight?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    display?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    position?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    alignSelf?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    justifySelf?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+} & Omit<GridStyleProps, "columns" | "gap" | "rows"> & {
+    as?: React.ElementType;
+    asChild?: boolean;
+    columns?: Responsive<number | string>;
+    rows?: Responsive<number | string>;
+    gap?: Responsive<GridGapToken>;
+    align?: Responsive<GridAlign>;
+    hide?: Responsive<boolean>;
+    justify?: Responsive<GridJustify>;
+    show?: Responsive<boolean>;
+    minItemWidth?: Responsive<number | string>;
+    flex?: Responsive<number | string>;
+    flexGrow?: Responsive<number>;
+    flexShrink?: Responsive<number>;
+    flexBasis?: Responsive<number | string>;
+    order?: Responsive<number>;
+    gridColumn?: Responsive<string>;
+    gridRow?: Responsive<string>;
+    gridArea?: Responsive<string>;
+    sm?: Partial<GridBreakpointProps>;
+    md?: Partial<GridBreakpointProps>;
+    lg?: Partial<GridBreakpointProps>;
+} & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Grid.d.mts.map

package/dist/components/grid/Grid.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.mts","sourceRoot":"","sources":["../../../src/components/grid/Grid.tsx"],"names":[],"mappings":"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"}

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { type BoxStyleProps, type GridStyleProps } from '../../layout/layout.props.js';
+type GridGapToken = string;
+type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type GridJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type Responsive<T> = T | Partial<Record<'initial' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', T>>;
+type GridBreakpointProps = {
+    align?: GridAlign;
+    alignContent?: GridAlign | 'stretch';
+    areas?: string;
+    columns?: number | string;
+    flow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    gap?: GridGapToken;
+    justify?: GridJustify;
+    justifyContent?: GridAlign | 'stretch';
+    justifyItems?: GridAlign;
+    minItemWidth?: number | string;
+    rows?: number | string;
+};
+export type GridProps = React.HTMLAttributes<HTMLElement> & BoxStyleProps & Omit<GridStyleProps, 'columns' | 'rows' | 'gap'> & {
+    as?: React.ElementType;
+    asChild?: boolean;
+    columns?: Responsive<number | string>;
+    rows?: Responsive<number | string>;
+    gap?: Responsive<GridGapToken>;
+    align?: Responsive<GridAlign>;
+    hide?: Responsive<boolean>;
+    justify?: Responsive<GridJustify>;
+    show?: Responsive<boolean>;
+    minItemWidth?: Responsive<number | string>;
+    flex?: Responsive<number | string>;
+    flexGrow?: Responsive<number>;
+    flexShrink?: Responsive<number>;
+    flexBasis?: Responsive<number | string>;
+    order?: Responsive<number>;
+    gridColumn?: Responsive<string>;
+    gridRow?: Responsive<string>;
+    gridArea?: Responsive<string>;
+    sm?: Partial<GridBreakpointProps>;
+    md?: Partial<GridBreakpointProps>;
+    lg?: Partial<GridBreakpointProps>;
+};
+export declare const Grid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & import("../../_internal/props.js").GetPropDefTypes<{
+    margin: {
+        type: "enum | string";
+        values: readonly ["auto", "none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        default: undefined;
+        className: "";
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    m: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mx: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    my: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mt: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mr: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    mb: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+    ml: {
+        readonly type: "enum | string";
+        readonly values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        readonly className: string;
+        readonly default: undefined;
+        readonly customProperties: readonly [`--${string}`];
+        readonly parseValue: ((value: string) => string | number | undefined) | undefined;
+        readonly responsive: true;
+    };
+}> & import("../../_internal/props.js").GetPropDefTypes<{
+    padding: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        default: undefined;
+        className: "";
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    p: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    px: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    py: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pt: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pr: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pb: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+    pl: {
+        type: "enum | string";
+        values: readonly ["none", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+        className: string;
+        default: undefined;
+        customProperties: readonly [`--${string}`];
+        parseValue: ((value: string) => string | number | undefined) | undefined;
+        responsive: true;
+    };
+}> & {
+    width?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    height?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    minWidth?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    maxWidth?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    minHeight?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    maxHeight?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    display?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    position?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    alignSelf?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+    justifySelf?: string | Partial<Record<"sm" | "md" | "lg" | "xl" | "initial" | "2xl", string>>;
+} & Omit<GridStyleProps, "columns" | "gap" | "rows"> & {
+    as?: React.ElementType;
+    asChild?: boolean;
+    columns?: Responsive<number | string>;
+    rows?: Responsive<number | string>;
+    gap?: Responsive<GridGapToken>;
+    align?: Responsive<GridAlign>;
+    hide?: Responsive<boolean>;
+    justify?: Responsive<GridJustify>;
+    show?: Responsive<boolean>;
+    minItemWidth?: Responsive<number | string>;
+    flex?: Responsive<number | string>;
+    flexGrow?: Responsive<number>;
+    flexShrink?: Responsive<number>;
+    flexBasis?: Responsive<number | string>;
+    order?: Responsive<number>;
+    gridColumn?: Responsive<string>;
+    gridRow?: Responsive<string>;
+    gridArea?: Responsive<string>;
+    sm?: Partial<GridBreakpointProps>;
+    md?: Partial<GridBreakpointProps>;
+    lg?: Partial<GridBreakpointProps>;
+} & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/Grid.tsx"],"names":[],"mappings":"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"}

package/dist/components/grid/Grid.js

@@ -0,0 +1,177 @@
+import * as React from "react";
+import classNames from "classnames";
+import { Slot } from "../slot/Slot.js";
+import {
+  BOX_PROP_DEFS,
+  GRID_PROP_DEFS,
+  extractLayoutProps
+} from "../../layout/layout.props.js";
+import {
+  assignResponsiveVars,
+  toResponsiveMap
+} from "../../layout/responsive.props.js";
+import { jsx } from "react/jsx-runtime";
+const RESPONSIVE_CONDITIONS = ["initial", "sm", "md", "lg", "xl", "2xl"];
+function serializeResponsiveValue(value) {
+  const 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(";");
+}
+function getResponsiveVarName(name, condition) {
+  return condition === "initial" ? `--${name}` : `--${name}-${condition}`;
+}
+function writeBoxChildStyleVars(style, props) {
+  const vars = {};
+  assignResponsiveVars(vars, "dsx-box-flex", props.flex, (value) => String(value));
+  assignResponsiveVars(vars, "dsx-box-flex-grow", props.flexGrow, (value) => String(value));
+  assignResponsiveVars(vars, "dsx-box-flex-shrink", props.flexShrink, (value) => String(value));
+  assignResponsiveVars(vars, "dsx-box-flex-basis", props.flexBasis, (value) => String(value));
+  assignResponsiveVars(vars, "dsx-box-order", props.order, (value) => String(value));
+  assignResponsiveVars(vars, "dsx-box-grid-column", props.gridColumn, (value) => String(value));
+  assignResponsiveVars(vars, "dsx-box-grid-row", props.gridRow, (value) => String(value));
+  assignResponsiveVars(vars, "dsx-box-grid-area", props.gridArea, (value) => String(value));
+  return Object.keys(vars).length > 0 ? { ...vars, ...style } : style ?? {};
+}
+const Grid = React.forwardRef(function Grid2({ as, asChild = false, className, style, align, hide, justify, minItemWidth, show, sm, md, lg, ...props }, ref) {
+  const Component = asChild ? Slot : as ?? "div";
+  const propsColumnsMap = toResponsiveMap(props.columns);
+  const propsRowsMap = toResponsiveMap(props.rows);
+  const propsGapMap = toResponsiveMap(props.gap);
+  const propsAlignMap = toResponsiveMap(align);
+  const propsJustifyMap = toResponsiveMap(justify);
+  const propsMinItemWidthMap = toResponsiveMap(minItemWidth);
+  const propsAreasMap = toResponsiveMap(props.areas);
+  const propsFlowMap = toResponsiveMap(props.flow);
+  const propsAlignContentMap = toResponsiveMap(props.alignContent);
+  const propsJustifyItemsMap = toResponsiveMap(props.justifyItems);
+  const propsJustifyContentMap = toResponsiveMap(props.justifyContent);
+  const hasSmOrMdOrLg = Boolean(sm || md || lg);
+  const responsiveColumns = hasSmOrMdOrLg ? { initial: propsColumnsMap.initial, sm: sm?.columns ?? propsColumnsMap.sm, md: md?.columns ?? propsColumnsMap.md, lg: lg?.columns ?? propsColumnsMap.lg } : props.columns;
+  const responsiveRows = hasSmOrMdOrLg ? { initial: propsRowsMap.initial, sm: sm?.rows ?? propsRowsMap.sm, md: md?.rows ?? propsRowsMap.md, lg: lg?.rows ?? propsRowsMap.lg } : props.rows;
+  const responsiveGap = hasSmOrMdOrLg ? { initial: propsGapMap.initial, sm: sm?.gap ?? propsGapMap.sm, md: md?.gap ?? propsGapMap.md, lg: lg?.gap ?? propsGapMap.lg } : props.gap;
+  const responsiveAlign = hasSmOrMdOrLg ? { initial: propsAlignMap.initial, sm: sm?.align ?? propsAlignMap.sm, md: md?.align ?? propsAlignMap.md, lg: lg?.align ?? propsAlignMap.lg } : align;
+  const responsiveJustify = hasSmOrMdOrLg ? { initial: propsJustifyMap.initial, sm: sm?.justify ?? propsJustifyMap.sm, md: md?.justify ?? propsJustifyMap.md, lg: lg?.justify ?? propsJustifyMap.lg } : justify;
+  const responsiveMinItemWidth = hasSmOrMdOrLg ? { initial: propsMinItemWidthMap.initial, sm: sm?.minItemWidth ?? propsMinItemWidthMap.sm, md: md?.minItemWidth ?? propsMinItemWidthMap.md, lg: lg?.minItemWidth ?? propsMinItemWidthMap.lg } : minItemWidth;
+  const {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    order,
+    gridColumn,
+    gridRow,
+    gridArea,
+    ...layoutProps
+  } = props;
+  const gridVars = {};
+  const responsiveConditions = ["initial", "sm", "md", "lg", "xl", "2xl"];
+  const responsiveColumnsMap = toResponsiveMap(responsiveColumns);
+  const minItemWidthMap = responsiveMinItemWidth ? toResponsiveMap(responsiveMinItemWidth) : null;
+  let lastColumns;
+  for (const condition of responsiveConditions) {
+    const nextMinItemWidth = minItemWidthMap?.[condition];
+    if (nextMinItemWidth !== void 0) {
+      gridVars[getResponsiveVarName("dsx-grid-columns", condition)] = `repeat(auto-fit, minmax(${String(nextMinItemWidth)}, 1fr))`;
+      lastColumns = nextMinItemWidth;
+      continue;
+    }
+    const nextColumns = responsiveColumnsMap[condition];
+    if (nextColumns !== void 0) {
+      gridVars[getResponsiveVarName("dsx-grid-columns", condition)] = typeof nextColumns === "number" ? `repeat(${nextColumns}, minmax(0, 1fr))` : String(nextColumns);
+      lastColumns = nextColumns;
+    } else if (lastColumns !== void 0) {
+      gridVars[getResponsiveVarName("dsx-grid-columns", condition)] = typeof lastColumns === "number" ? `repeat(${lastColumns}, minmax(0, 1fr))` : String(lastColumns);
+    }
+  }
+  const responsiveRowsMap = toResponsiveMap(responsiveRows);
+  let lastRows;
+  for (const condition of responsiveConditions) {
+    const nextRows = responsiveRowsMap[condition];
+    if (nextRows !== void 0) {
+      gridVars[getResponsiveVarName("dsx-grid-rows", condition)] = typeof nextRows === "number" ? `repeat(${nextRows}, minmax(0, 1fr))` : String(nextRows);
+      lastRows = nextRows;
+    } else if (lastRows !== void 0) {
+      gridVars[getResponsiveVarName("dsx-grid-rows", condition)] = typeof lastRows === "number" ? `repeat(${lastRows}, minmax(0, 1fr))` : String(lastRows);
+    }
+  }
+  const responsiveAlignMap = toResponsiveMap(responsiveAlign);
+  let lastAlign;
+  for (const condition of responsiveConditions) {
+    const nextAlign = responsiveAlignMap[condition];
+    if (nextAlign !== void 0) {
+      const val = nextAlign === "start" || nextAlign === "end" ? `flex-${nextAlign}` : String(nextAlign);
+      gridVars[getResponsiveVarName("dsx-grid-align", condition)] = val;
+      lastAlign = val;
+    } else if (lastAlign !== void 0) {
+      gridVars[getResponsiveVarName("dsx-grid-align", condition)] = lastAlign;
+    }
+  }
+  const responsiveJustifyMap = toResponsiveMap(responsiveJustify);
+  let lastJustify;
+  for (const condition of responsiveConditions) {
+    const nextJustify = responsiveJustifyMap[condition];
+    if (nextJustify !== void 0) {
+      const val = nextJustify === "between" ? "space-between" : nextJustify === "around" ? "space-around" : nextJustify === "evenly" ? "space-evenly" : nextJustify === "start" || nextJustify === "end" ? `flex-${nextJustify}` : String(nextJustify);
+      gridVars[getResponsiveVarName("dsx-grid-justify", condition)] = val;
+      lastJustify = val;
+    } else if (lastJustify !== void 0) {
+      gridVars[getResponsiveVarName("dsx-grid-justify", condition)] = lastJustify;
+    }
+  }
+  const mergedStyle = Object.keys(gridVars).length > 0 ? { ...style, ...gridVars } : style;
+  const propsForExtraction = {
+    ...layoutProps,
+    columns: responsiveColumns,
+    rows: responsiveRows,
+    gap: responsiveGap,
+    areas: hasSmOrMdOrLg ? { initial: propsAreasMap.initial, sm: sm?.areas ?? propsAreasMap.sm, md: md?.areas ?? propsAreasMap.md, lg: lg?.areas ?? propsAreasMap.lg } : props.areas,
+    flow: hasSmOrMdOrLg ? { initial: propsFlowMap.initial, sm: sm?.flow ?? propsFlowMap.sm, md: md?.flow ?? propsFlowMap.md, lg: lg?.flow ?? propsFlowMap.lg } : props.flow,
+    alignContent: hasSmOrMdOrLg ? { initial: propsAlignContentMap.initial, sm: sm?.alignContent ?? propsAlignContentMap.sm, md: md?.alignContent ?? propsAlignContentMap.md, lg: lg?.alignContent ?? propsAlignContentMap.lg } : props.alignContent,
+    justifyItems: hasSmOrMdOrLg ? { initial: propsJustifyItemsMap.initial, sm: sm?.justifyItems ?? propsJustifyItemsMap.sm, md: md?.justifyItems ?? propsJustifyItemsMap.md, lg: lg?.justifyItems ?? propsJustifyItemsMap.lg } : props.justifyItems,
+    justifyContent: hasSmOrMdOrLg ? { initial: propsJustifyContentMap.initial, sm: sm?.justifyContent ?? propsJustifyContentMap.sm, md: md?.justifyContent ?? propsJustifyContentMap.md, lg: lg?.justifyContent ?? propsJustifyContentMap.lg } : props.justifyContent
+  };
+  const resolvedProps = extractLayoutProps(propsForExtraction, BOX_PROP_DEFS, GRID_PROP_DEFS);
+  const finalStyle = writeBoxChildStyleVars(mergedStyle, {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    order,
+    gridColumn,
+    gridRow,
+    gridArea
+  });
+  const displayVars = {};
+  assignResponsiveVars(displayVars, "dsx-box-display", hide, (value) => value ? "none" : "grid");
+  assignResponsiveVars(displayVars, "dsx-box-display", show, (value) => value ? "grid" : "none");
+  const finalStyleWithDisplay = Object.keys(displayVars).length > 0 ? { ...displayVars, ...finalStyle } : finalStyle;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...resolvedProps,
+      ref,
+      className: classNames("dsx-box", "dsx-grid", resolvedProps.className, className),
+      style: finalStyleWithDisplay,
+      "data-gap": serializeResponsiveValue(responsiveGap),
+      "data-align": serializeResponsiveValue(align),
+      "data-justify": serializeResponsiveValue(justify)
+    }
+  );
+});
+Grid.displayName = "Grid";
+export {
+  Grid
+};
+//# sourceMappingURL=Grid.js.map