@rufous/ui 0.3.60 → 0.3.61

package/dist/main.cjs

@@ -1533,19 +1533,235 @@ var React132 = __toESM(require("react"), 1);
 
 // lib/utils/sx.ts
 var import_react5 = require("react");
+
+// lib/utils/sxResolver.ts
+var DEFAULT_SPACING = 8;
+var DEFAULT_BORDER_RADIUS = 4;
 function camelToKebab(str) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
-function sxToCss(sx, selector) {
+function warn(msg) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production") {
+    console.warn(`[rufous-ui sx] ${msg}`);
+  }
+}
+var SPACING_MAP = {
+  m: ["margin"],
+  margin: ["margin"],
+  mt: ["margin-top"],
+  marginTop: ["margin-top"],
+  mb: ["margin-bottom"],
+  marginBottom: ["margin-bottom"],
+  ml: ["margin-left"],
+  marginLeft: ["margin-left"],
+  mr: ["margin-right"],
+  marginRight: ["margin-right"],
+  mx: ["margin-left", "margin-right"],
+  marginX: ["margin-left", "margin-right"],
+  my: ["margin-top", "margin-bottom"],
+  marginY: ["margin-top", "margin-bottom"],
+  marginInline: ["margin-inline"],
+  marginInlineStart: ["margin-inline-start"],
+  marginInlineEnd: ["margin-inline-end"],
+  marginBlock: ["margin-block"],
+  marginBlockStart: ["margin-block-start"],
+  marginBlockEnd: ["margin-block-end"],
+  p: ["padding"],
+  padding: ["padding"],
+  pt: ["padding-top"],
+  paddingTop: ["padding-top"],
+  pb: ["padding-bottom"],
+  paddingBottom: ["padding-bottom"],
+  pl: ["padding-left"],
+  paddingLeft: ["padding-left"],
+  pr: ["padding-right"],
+  paddingRight: ["padding-right"],
+  px: ["padding-left", "padding-right"],
+  paddingX: ["padding-left", "padding-right"],
+  py: ["padding-top", "padding-bottom"],
+  paddingY: ["padding-top", "padding-bottom"],
+  paddingInline: ["padding-inline"],
+  paddingInlineStart: ["padding-inline-start"],
+  paddingInlineEnd: ["padding-inline-end"],
+  paddingBlock: ["padding-block"],
+  paddingBlockStart: ["padding-block-start"],
+  paddingBlockEnd: ["padding-block-end"],
+  gap: ["gap"],
+  rowGap: ["row-gap"],
+  columnGap: ["column-gap"]
+};
+var BORDER_WIDTH_MAP = {
+  border: "border",
+  borderTop: "border-top",
+  borderRight: "border-right",
+  borderBottom: "border-bottom",
+  borderLeft: "border-left"
+};
+var SIZING_MAP = {
+  width: "width",
+  height: "height",
+  minWidth: "min-width",
+  maxWidth: "max-width",
+  minHeight: "min-height",
+  maxHeight: "max-height"
+};
+var PALETTE_MAP = {
+  bgcolor: "background-color",
+  color: "color",
+  borderColor: "border-color"
+};
+var POSITION_LENGTH_MAP = {
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left"
+};
+var PASS_THROUGH_KEYS = [
+  "boxSizing",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  // Flexbox (Group H)
+  "display",
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "flex",
+  "flexDirection",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "flexBasis",
+  "justifyContent",
+  "justifyItems",
+  "justifySelf",
+  "order",
+  // Grid (Group I)
+  "gridColumn",
+  "gridRow",
+  "gridAutoFlow",
+  "gridAutoColumns",
+  "gridAutoRows",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas",
+  "gridArea",
+  // Positioning (Group J)
+  "position",
+  // Typography (Group G)
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textTransform"
+];
+var SYSTEM_PROP_NAMES = /* @__PURE__ */ new Set([
+  ...Object.keys(SPACING_MAP),
+  ...Object.keys(BORDER_WIDTH_MAP),
+  "borderRadius",
+  ...Object.keys(SIZING_MAP),
+  ...Object.keys(PALETTE_MAP),
+  ...Object.keys(POSITION_LENGTH_MAP),
+  "boxShadow",
+  "zIndex",
+  "typography",
+  ...PASS_THROUGH_KEYS
+]);
+function resolvePaletteValue(value, theme) {
+  if (typeof value === "string" && value.includes(".")) {
+    if (theme?.palette) {
+      const [group, token] = value.split(".");
+      const resolved = theme.palette?.[group]?.[token];
+      if (typeof resolved === "string") return resolved;
+      warn(`palette token "${value}" not found in theme \u2014 passing through verbatim`);
+    }
+  }
+  return String(value);
+}
+function resolveSxProp(key, value, theme) {
+  if (value === void 0 || value === null) return [];
+  if (key in SPACING_MAP) {
+    const spacing = theme?.spacing ?? DEFAULT_SPACING;
+    const out = typeof value === "number" ? `${value * spacing}px` : String(value);
+    return SPACING_MAP[key].map((property) => ({ property, value: out }));
+  }
+  if (key in BORDER_WIDTH_MAP) {
+    const out = typeof value === "number" ? `${value}px solid` : String(value);
+    return [{ property: BORDER_WIDTH_MAP[key], value: out }];
+  }
+  if (key === "borderRadius") {
+    const radius = theme?.shape?.borderRadius ?? DEFAULT_BORDER_RADIUS;
+    const out = typeof value === "number" ? `${value * radius}px` : String(value);
+    return [{ property: "border-radius", value: out }];
+  }
+  if (key in PALETTE_MAP) {
+    return [{ property: PALETTE_MAP[key], value: resolvePaletteValue(value, theme) }];
+  }
+  if (key in SIZING_MAP) {
+    const out = typeof value === "number" ? `${value}px` : String(value);
+    return [{ property: SIZING_MAP[key], value: out }];
+  }
+  if (key in POSITION_LENGTH_MAP) {
+    const out = typeof value === "number" ? `${value}px` : String(value);
+    return [{ property: POSITION_LENGTH_MAP[key], value: out }];
+  }
+  if (key === "boxShadow") {
+    if (typeof value === "number") {
+      const shadow = theme?.shadows?.[value];
+      if (shadow === void 0) {
+        warn(`theme.shadows[${value}] not found \u2014 passing through verbatim`);
+        return [{ property: "box-shadow", value: String(value) }];
+      }
+      return [{ property: "box-shadow", value: shadow }];
+    }
+    return [{ property: "box-shadow", value: String(value) }];
+  }
+  if (key === "zIndex") {
+    if (typeof value === "string") {
+      const z = theme?.zIndex?.[value];
+      if (z === void 0) {
+        warn(`theme.zIndex["${value}"] not found \u2014 passing through verbatim`);
+        return [{ property: "z-index", value }];
+      }
+      return [{ property: "z-index", value: String(z) }];
+    }
+    return [{ property: "z-index", value: String(value) }];
+  }
+  if (key === "typography") {
+    const variant = theme?.typography?.[String(value)];
+    if (!variant) {
+      warn(`theme.typography["${String(value)}"] not found \u2014 skipping`);
+      return [];
+    }
+    const pairs = [
+      ["font-family", variant.fontFamily],
+      ["font-weight", variant.fontWeight],
+      ["font-size", variant.fontSize],
+      ["line-height", variant.lineHeight],
+      ["letter-spacing", variant.letterSpacing],
+      ["text-transform", variant.textTransform]
+    ];
+    return pairs.filter(([, v]) => v !== void 0).map(([property, v]) => ({ property, value: String(v) }));
+  }
+  return [{ property: camelToKebab(key), value: String(value) }];
+}
+
+// lib/utils/sx.ts
+function sxToCss(sx, selector, theme) {
   const props = [];
   const nested = [];
   for (const [key, value] of Object.entries(sx)) {
     if (value === void 0 || value === null) continue;
     if (typeof value === "object") {
       const nestedSel = key.includes("&") ? key.replace(/&/g, selector) : `${selector} ${key}`;
-      nested.push(sxToCss(value, nestedSel));
+      nested.push(sxToCss(value, nestedSel, theme));
     } else {
-      props.push(`  ${camelToKebab(key)}: ${value};`);
+      for (const { property, value: resolved } of resolveSxProp(key, value, theme)) {
+        props.push(`  ${property}: ${resolved};`);
+      }
     }
   }
   const blocks = [];
@@ -1556,10 +1772,11 @@ ${props.join("\n")}
   return blocks.join("\n");
 }
 var _sxUid = 0;
-function useSx(sx) {
+function useSx(sx, theme) {
   const cls = (0, import_react5.useRef)(`rf-sx-${++_sxUid}`).current;
+  const hasStyles = !!sx && Object.keys(sx).length > 0;
   (0, import_react5.useEffect)(() => {
-    if (!sx) return;
+    if (!hasStyles) return;
     const id = `style-${cls}`;
     let el = document.getElementById(id);
     if (!el) {
@@ -1567,12 +1784,12 @@ function useSx(sx) {
       el.id = id;
       document.head.appendChild(el);
     }
-    el.textContent = sxToCss(sx, `.${cls}`);
+    el.textContent = sxToCss(sx, `.${cls}`, theme);
     return () => {
       document.getElementById(id)?.remove();
     };
-  }, [sx, cls]);
-  return sx ? cls : "";
+  }, [sx, cls, theme, hasStyles]);
+  return hasStyles ? cls : "";
 }
 
 // lib/Buttons/addButton.tsx
@@ -7813,6 +8030,44 @@ ListSubheader.displayName = "ListSubheader";
 
 // lib/Typography/Typography.tsx
 var import_react28 = __toESM(require("react"), 1);
+
+// lib/utils/filterSystemProps.ts
+var NEVER_SYSTEM = /* @__PURE__ */ new Set([
+  "size",
+  "variant",
+  "disabled",
+  "open",
+  "value",
+  "checked",
+  "label",
+  "placeholder",
+  "rows",
+  "error",
+  "required",
+  "fullWidth",
+  "component",
+  "children",
+  "ref",
+  "key",
+  "sx",
+  "className",
+  "style"
+]);
+function filterSystemProps(props) {
+  const system = {};
+  const rest = {};
+  for (const key of Object.keys(props)) {
+    const value = props[key];
+    if (!NEVER_SYSTEM.has(key) && SYSTEM_PROP_NAMES.has(key)) {
+      system[key] = value;
+    } else {
+      rest[key] = value;
+    }
+  }
+  return { system, rest };
+}
+
+// lib/Typography/Typography.tsx
 var VARIANT_ELEMENT_MAP = {
   h1: "h1",
   h2: "h2",
@@ -7853,9 +8108,11 @@ var Typography = ({
   children,
   className = "",
   style,
-  sx
+  sx,
+  ...rest
 }) => {
-  const sxClass = useSx(sx);
+  const { system, rest: domRest } = filterSystemProps(rest);
+  const sxClass = useSx({ ...system, ...sx });
   const Tag = component || (paragraph ? "p" : VARIANT_ELEMENT_MAP[variant] || "span");
   const colorClass = color ? COLOR_CLASSES[color] : "";
   const colorStyle = color && !COLOR_CLASSES[color] ? { color } : {};
@@ -7886,7 +8143,15 @@ var Typography = ({
     ...weightStyle,
     ...style
   };
-  return /* @__PURE__ */ import_react28.default.createElement(Tag, { className: classes, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0 }, children);
+  return /* @__PURE__ */ import_react28.default.createElement(
+    Tag,
+    {
+      className: classes,
+      style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0,
+      ...domRest
+    },
+    children
+  );
 };
 Typography.displayName = "Typography";
 
@@ -7941,195 +8206,37 @@ Skeleton.displayName = "Skeleton";
 
 // lib/Box/Box.tsx
 var React165 = __toESM(require("react"), 1);
-function sp(val) {
-  if (val === void 0) return void 0;
-  return typeof val === "number" ? `${val * 8}px` : val;
-}
 var Box = React165.forwardRef(
-  ({
-    component = "div",
-    children,
-    display,
-    flexDirection,
-    alignItems,
-    justifyContent,
-    gap,
-    flex,
-    flexWrap,
-    flexGrow,
-    flexShrink,
-    overflow,
-    position,
-    top,
-    right,
-    bottom,
-    left,
-    borderRadius,
-    bgcolor,
-    color,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    margin,
-    padding,
-    m,
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    p,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
-    className,
-    style,
-    sx,
-    ...rest
-  }, ref) => {
-    const sxClass = useSx(sx);
-    const toSize = (val) => val === void 0 ? void 0 : typeof val === "number" ? `${val}px` : val;
-    const inlineStyle = {
-      ...display !== void 0 ? { display } : {},
-      ...flexDirection !== void 0 ? { flexDirection } : {},
-      ...alignItems !== void 0 ? { alignItems } : {},
-      ...justifyContent !== void 0 ? { justifyContent } : {},
-      ...gap !== void 0 ? { gap: typeof gap === "number" ? `${gap}px` : gap } : {},
-      ...flex !== void 0 ? { flex } : {},
-      ...flexWrap !== void 0 ? { flexWrap } : {},
-      ...flexGrow !== void 0 ? { flexGrow } : {},
-      ...flexShrink !== void 0 ? { flexShrink } : {},
-      ...overflow !== void 0 ? { overflow } : {},
-      ...position !== void 0 ? { position } : {},
-      ...top !== void 0 ? { top: toSize(top) } : {},
-      ...right !== void 0 ? { right: toSize(right) } : {},
-      ...bottom !== void 0 ? { bottom: toSize(bottom) } : {},
-      ...left !== void 0 ? { left: toSize(left) } : {},
-      ...borderRadius !== void 0 ? { borderRadius: toSize(borderRadius) } : {},
-      ...bgcolor !== void 0 ? { backgroundColor: bgcolor } : {},
-      ...color !== void 0 ? { color } : {},
-      // Size
-      ...width !== void 0 ? { width: toSize(width) } : {},
-      ...height !== void 0 ? { height: toSize(height) } : {},
-      ...minWidth !== void 0 ? { minWidth: toSize(minWidth) } : {},
-      ...maxWidth !== void 0 ? { maxWidth: toSize(maxWidth) } : {},
-      ...minHeight !== void 0 ? { minHeight: toSize(minHeight) } : {},
-      ...maxHeight !== void 0 ? { maxHeight: toSize(maxHeight) } : {},
-      // Full margin/padding
-      ...margin !== void 0 ? { margin: toSize(margin) } : {},
-      ...padding !== void 0 ? { padding: toSize(padding) } : {},
-      // Margin shorthands (8px scale)
-      ...m !== void 0 ? { margin: sp(m) } : {},
-      ...my !== void 0 ? { marginTop: sp(my), marginBottom: sp(my) } : {},
-      ...mx !== void 0 ? { marginLeft: sp(mx), marginRight: sp(mx) } : {},
-      ...mt !== void 0 ? { marginTop: sp(mt) } : {},
-      ...mr !== void 0 ? { marginRight: sp(mr) } : {},
-      ...mb !== void 0 ? { marginBottom: sp(mb) } : {},
-      ...ml !== void 0 ? { marginLeft: sp(ml) } : {},
-      // Padding shorthands (8px scale)
-      ...p !== void 0 ? { padding: sp(p) } : {},
-      ...py !== void 0 ? { paddingTop: sp(py), paddingBottom: sp(py) } : {},
-      ...px !== void 0 ? { paddingLeft: sp(px), paddingRight: sp(px) } : {},
-      ...pt !== void 0 ? { paddingTop: sp(pt) } : {},
-      ...pr !== void 0 ? { paddingRight: sp(pr) } : {},
-      ...pb !== void 0 ? { paddingBottom: sp(pb) } : {},
-      ...pl !== void 0 ? { paddingLeft: sp(pl) } : {},
-      ...style
-    };
+  ({ component = "div", children, className, style, sx, ...rest }, ref) => {
+    const { system, rest: domRest } = filterSystemProps(rest);
+    const sxClass = useSx({ ...system, ...sx });
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
     const Tag = component;
-    return /* @__PURE__ */ React165.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React165.createElement(Tag, { ref, className: classes, style, ...domRest }, children);
   }
 );
 Box.displayName = "Box";
 
 // lib/Stack/Stack.tsx
 var React166 = __toESM(require("react"), 1);
-function sp2(val) {
-  if (val === void 0) return void 0;
-  return typeof val === "number" ? `${val * 8}px` : val;
-}
 var Stack = React166.forwardRef(
   ({
     direction = "column",
     spacing,
-    alignItems,
-    justifyContent,
     divider,
-    flexWrap,
     useFlexGap = true,
-    flex,
-    overflow,
     component = "div",
     children,
     className,
     style,
     sx,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    m,
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    p,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
     ...rest
   }, ref) => {
-    const sxClass = useSx(sx);
+    const { system, rest: domRest } = filterSystemProps(rest);
     const gapValue = spacing !== void 0 ? typeof spacing === "number" ? `${spacing * 8}px` : spacing : void 0;
-    const toSize = (val) => val === void 0 ? void 0 : typeof val === "number" ? `${val}px` : val;
-    const inlineStyle = {
-      flexDirection: direction,
-      ...alignItems !== void 0 ? { alignItems } : {},
-      ...justifyContent !== void 0 ? { justifyContent } : {},
-      ...flexWrap !== void 0 ? { flexWrap } : {},
-      ...gapValue !== void 0 && useFlexGap ? { gap: gapValue } : {},
-      ...flex !== void 0 ? { flex } : {},
-      ...overflow !== void 0 ? { overflow } : {},
-      // Layout
-      ...width !== void 0 ? { width: toSize(width) } : {},
-      ...height !== void 0 ? { height: toSize(height) } : {},
-      ...minWidth !== void 0 ? { minWidth: toSize(minWidth) } : {},
-      ...maxWidth !== void 0 ? { maxWidth: toSize(maxWidth) } : {},
-      ...minHeight !== void 0 ? { minHeight: toSize(minHeight) } : {},
-      ...maxHeight !== void 0 ? { maxHeight: toSize(maxHeight) } : {},
-      // Margin shorthands
-      ...m !== void 0 ? { margin: sp2(m) } : {},
-      ...my !== void 0 ? { marginTop: sp2(my), marginBottom: sp2(my) } : {},
-      ...mx !== void 0 ? { marginLeft: sp2(mx), marginRight: sp2(mx) } : {},
-      ...mt !== void 0 ? { marginTop: sp2(mt) } : {},
-      ...mr !== void 0 ? { marginRight: sp2(mr) } : {},
-      ...mb !== void 0 ? { marginBottom: sp2(mb) } : {},
-      ...ml !== void 0 ? { marginLeft: sp2(ml) } : {},
-      // Padding shorthands
-      ...p !== void 0 ? { padding: sp2(p) } : {},
-      ...py !== void 0 ? { paddingTop: sp2(py), paddingBottom: sp2(py) } : {},
-      ...px !== void 0 ? { paddingLeft: sp2(px), paddingRight: sp2(px) } : {},
-      ...pt !== void 0 ? { paddingTop: sp2(pt) } : {},
-      ...pr !== void 0 ? { paddingRight: sp2(pr) } : {},
-      ...pb !== void 0 ? { paddingBottom: sp2(pb) } : {},
-      ...pl !== void 0 ? { paddingLeft: sp2(pl) } : {},
-      ...style
-    };
+    const baseSx = { flexDirection: direction };
+    if (gapValue !== void 0 && useFlexGap) baseSx.gap = gapValue;
+    const sxClass = useSx({ ...baseSx, ...system, ...sx });
     const classes = ["rf-stack", sxClass, className].filter(Boolean).join(" ");
     let content;
     if (divider) {
@@ -8149,17 +8256,13 @@ var Stack = React166.forwardRef(
       content = children;
     }
     const Tag = component;
-    return /* @__PURE__ */ React166.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, content);
+    return /* @__PURE__ */ React166.createElement(Tag, { ref, className: classes, style, ...domRest }, content);
   }
 );
 Stack.displayName = "Stack";
 
 // lib/Grid/Grid.tsx
 var React167 = __toESM(require("react"), 1);
-function sp3(val) {
-  if (val === void 0) return void 0;
-  return typeof val === "number" ? `${val * 8}px` : val;
-}
 function getBreakpointClass(bp, val) {
   if (val === void 0) return "";
   if (val === true) return `rf-grid-${bp}-12`;
@@ -8192,29 +8295,9 @@ var Grid = React167.forwardRef(
     className,
     style,
     sx,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight,
-    m,
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    p,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
     ...rest
   }, ref) => {
-    const sxClass = useSx(sx);
+    const { system, rest: domRest } = filterSystemProps(rest);
     const containerClasses = container ? ["rf-grid-container"] : [];
     const itemClasses = item || !container ? ["rf-grid-item"] : [];
     const bpClasses = [
@@ -8225,39 +8308,14 @@ var Grid = React167.forwardRef(
       getBreakpointClass("xl", xl)
     ].filter(Boolean);
     const gap = getSpacingGap(spacing);
-    const toSize = (val) => val === void 0 ? void 0 : typeof val === "number" ? `${val}px` : val;
-    const inlineStyle = {
-      ...container && gap ? { gap } : {},
-      ...container && direction ? { gridAutoFlow: direction.startsWith("column") ? "column" : "row" } : {},
-      ...container && alignItems ? { alignItems } : {},
-      ...container && justifyContent ? { justifyContent } : {},
-      ...container && wrap ? { flexWrap: wrap } : {},
-      ...zeroMinWidth ? { minWidth: 0 } : {},
-      // Layout
-      ...width !== void 0 ? { width: toSize(width) } : {},
-      ...height !== void 0 ? { height: toSize(height) } : {},
-      ...minWidth !== void 0 ? { minWidth: toSize(minWidth) } : {},
-      ...maxWidth !== void 0 ? { maxWidth: toSize(maxWidth) } : {},
-      ...minHeight !== void 0 ? { minHeight: toSize(minHeight) } : {},
-      ...maxHeight !== void 0 ? { maxHeight: toSize(maxHeight) } : {},
-      // Margin shorthands
-      ...m !== void 0 ? { margin: sp3(m) } : {},
-      ...my !== void 0 ? { marginTop: sp3(my), marginBottom: sp3(my) } : {},
-      ...mx !== void 0 ? { marginLeft: sp3(mx), marginRight: sp3(mx) } : {},
-      ...mt !== void 0 ? { marginTop: sp3(mt) } : {},
-      ...mr !== void 0 ? { marginRight: sp3(mr) } : {},
-      ...mb !== void 0 ? { marginBottom: sp3(mb) } : {},
-      ...ml !== void 0 ? { marginLeft: sp3(ml) } : {},
-      // Padding shorthands
-      ...p !== void 0 ? { padding: sp3(p) } : {},
-      ...py !== void 0 ? { paddingTop: sp3(py), paddingBottom: sp3(py) } : {},
-      ...px !== void 0 ? { paddingLeft: sp3(px), paddingRight: sp3(px) } : {},
-      ...pt !== void 0 ? { paddingTop: sp3(pt) } : {},
-      ...pr !== void 0 ? { paddingRight: sp3(pr) } : {},
-      ...pb !== void 0 ? { paddingBottom: sp3(pb) } : {},
-      ...pl !== void 0 ? { paddingLeft: sp3(pl) } : {},
-      ...style
-    };
+    const baseSx = {};
+    if (container && gap) baseSx.gap = gap;
+    if (container && direction) baseSx.gridAutoFlow = direction.startsWith("column") ? "column" : "row";
+    if (container && alignItems) baseSx.alignItems = alignItems;
+    if (container && justifyContent) baseSx.justifyContent = justifyContent;
+    if (container && wrap) baseSx.flexWrap = wrap;
+    if (zeroMinWidth) baseSx.minWidth = 0;
+    const sxClass = useSx({ ...baseSx, ...system, ...sx });
     const classes = [
       ...containerClasses,
       ...itemClasses,
@@ -8266,7 +8324,7 @@ var Grid = React167.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const Tag = component;
-    return /* @__PURE__ */ React167.createElement(Tag, { ref, className: classes, style: inlineStyle, ...rest }, children);
+    return /* @__PURE__ */ React167.createElement(Tag, { ref, className: classes, style, ...domRest }, children);
   }
 );
 Grid.displayName = "Grid";