@sproutsocial/seeds-react-stack 1.0.23 → 1.0.24

package/dist/esm/index.js

@@ -1,5 +1,11 @@
 // src/Stack.tsx
-import "react";
+import React4 from "react";
+
+// src/StackHybrid.tsx
+import React3 from "react";
+
+// src/StackStyledComponents.tsx
+import * as React from "react";
 import { Children } from "react";
 
 // src/utils.ts
@@ -37,7 +43,7 @@ var normalizeResponsiveProp = (value) => {
   }
 };
 
-// src/Stack.tsx
+// src/StackStyledComponents.tsx
 import Box from "@sproutsocial/seeds-react-box";
 import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
@@ -77,55 +83,124 @@ var stackStyles = {
     }
   }
 };
-var Stack = ({
-  children,
-  space = 300,
-  align = "left",
-  direction = "vertical",
-  ...rest
-}) => {
-  const stackItems = Children.toArray(children);
-  const responsiveAlignment = normalizeResponsiveProp(align);
-  const responsiveDirection = normalizeResponsiveProp(direction);
-  const responsiveSpace = normalizeResponsiveProp(space);
-  const initialValue = ["initial", "initial", "initial", "initial", "initial"];
-  const styleProps = {
-    alignItems: [...initialValue],
-    flexDirection: [...initialValue],
-    justifyContent: [...initialValue]
-  };
-  const childFlexBasis = [...initialValue];
-  const childMarginProps = {
-    marginLeft: [...initialValue],
-    marginTop: [...initialValue]
-  };
-  initialValue.forEach((_, i) => {
-    const currentDirection = responsiveDirection[i];
-    const currentAlignment = responsiveAlignment[i];
-    const currentSpace = responsiveSpace[i];
-    if (currentDirection && currentAlignment) {
-      const styles = stackStyles[currentDirection][currentAlignment];
-      Object.keys(styleProps).forEach((key) => {
-        styleProps[key][i] = styles[key] || "initial";
-      });
+var StackStyledComponents = React.forwardRef(
+  ({ children, space = 300, align = "left", direction = "vertical", ...rest }, ref) => {
+    const stackItems = Children.toArray(children);
+    const responsiveAlignment = normalizeResponsiveProp(align);
+    const responsiveDirection = normalizeResponsiveProp(direction);
+    const responsiveSpace = normalizeResponsiveProp(space);
+    const initialValue = [
+      "initial",
+      "initial",
+      "initial",
+      "initial",
+      "initial"
+    ];
+    const styleProps = {
+      alignItems: [...initialValue],
+      flexDirection: [...initialValue],
+      justifyContent: [...initialValue]
+    };
+    const childFlexBasis = [...initialValue];
+    const childMarginProps = {
+      marginLeft: [...initialValue],
+      marginTop: [...initialValue]
+    };
+    initialValue.forEach((_, i) => {
+      const currentDirection = responsiveDirection[i];
+      const currentAlignment = responsiveAlignment[i];
+      const currentSpace = responsiveSpace[i];
+      if (currentDirection && currentAlignment) {
+        const styles = stackStyles[currentDirection][currentAlignment];
+        Object.keys(styleProps).forEach((key) => {
+          styleProps[key][i] = styles[key] || "initial";
+        });
+      }
+      const flexBasis = currentAlignment === "stretch" && currentDirection === "horizontal" ? "100%" : null;
+      childFlexBasis[i] = flexBasis;
+      const margin = currentDirection === "horizontal" ? "marginLeft" : "marginTop";
+      const opposite = currentDirection === "horizontal" ? "marginTop" : "marginLeft";
+      childMarginProps[margin][i] = currentSpace;
+      childMarginProps[opposite][i] = 0;
+    });
+    return /* @__PURE__ */ jsx(Box, { display: "flex", ref, ...styleProps, ...rest, children: stackItems.map((item, i) => /* @__PURE__ */ createElement(
+      Box,
+      {
+        flexBasis: childFlexBasis,
+        ...i !== 0 ? childMarginProps : {},
+        key: i
+      },
+      item
+    )) });
+  }
+);
+StackStyledComponents.displayName = "StackStyledComponents";
+var StackStyledComponents_default = StackStyledComponents;
+
+// src/StackTailwind.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
     }
-    const flexBasis = currentAlignment === "stretch" && currentDirection === "horizontal" ? "100%" : null;
-    childFlexBasis[i] = flexBasis;
-    const margin = currentDirection === "horizontal" ? "marginLeft" : "marginTop";
-    const opposite = currentDirection === "horizontal" ? "marginTop" : "marginLeft";
-    childMarginProps[margin][i] = currentSpace;
-    childMarginProps[opposite][i] = 0;
-  });
-  return /* @__PURE__ */ jsx(Box, { display: "flex", ...styleProps, ...rest, children: stackItems.map((item, i) => /* @__PURE__ */ createElement(
-    Box,
-    {
-      flexBasis: childFlexBasis,
-      ...i !== 0 ? childMarginProps : {},
-      key: i
-    },
-    item
-  )) });
-};
+  }
+  return classes.join(" ");
+}
+var StackTailwind = React2.forwardRef(
+  ({
+    children,
+    space = 300,
+    align = "left",
+    direction = "vertical",
+    as,
+    className,
+    ...rest
+  }, ref) => {
+    const Component = as || "div";
+    const classes = cn(
+      "seeds-stack",
+      `seeds-stack-${direction}`,
+      `seeds-stack-align-${align}`,
+      `seeds-stack-space-${space}`,
+      className
+    );
+    return /* @__PURE__ */ jsx2(Component, { className: classes, ref, ...rest, children });
+  }
+);
+StackTailwind.displayName = "StackTailwind";
+
+// src/StackHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var isResponsive = (value) => Array.isArray(value);
+var StackHybrid = React3.forwardRef(
+  (props, ref) => {
+    const { space, align, direction, children, ...rest } = props;
+    const needsStyledComponents = hasStyledProps(rest) || isResponsive(space) || isResponsive(align) || isResponsive(direction) || // arbitrary string spacing (e.g. "20px") can't map to a variant class
+    typeof space === "string";
+    if (needsStyledComponents) {
+      return /* @__PURE__ */ jsx3(StackStyledComponents_default, { ref, ...props });
+    }
+    return /* @__PURE__ */ jsx3(StackTailwind, { ref, ...props });
+  }
+);
+StackHybrid.displayName = "Stack";
+var StackHybrid_default = StackHybrid;
+
+// src/Stack.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Stack = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx4(StackHybrid_default, { ...props, ref }));
+Stack.displayName = "Stack";
 var Stack_default = Stack;
 
 // src/StackTypes.ts

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Stack.tsx","../../src/utils.ts","../../src/StackTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Children } from \"react\";\nimport { normalizeResponsiveProp } from \"./utils\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\nconst stackStyles = {\n  horizontal: {\n    left: {\n      alignItems: \"center\",\n    },\n    center: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    right: {\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n    },\n    stretch: {\n      alignItems: \"center\",\n    },\n  },\n  vertical: {\n    left: {\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n    },\n    center: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n    },\n    right: {\n      flexDirection: \"column\",\n      alignItems: \"flex-end\",\n    },\n    stretch: {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n    },\n  },\n};\n\nconst Stack = ({\n  children,\n  space = 300,\n  align = \"left\",\n  direction = \"vertical\",\n  ...rest\n}: TypeStackProps) => {\n  const stackItems = Children.toArray(children);\n  const responsiveAlignment = normalizeResponsiveProp(align);\n  const responsiveDirection = normalizeResponsiveProp(direction);\n  const responsiveSpace = normalizeResponsiveProp(space);\n  const initialValue = [\"initial\", \"initial\", \"initial\", \"initial\", \"initial\"];\n\n  // TODO: rely on styled system to solve this during the refactor\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const styleProps: any = {\n    alignItems: [...initialValue],\n    flexDirection: [...initialValue],\n    justifyContent: [...initialValue],\n  };\n  const childFlexBasis: (string | null)[] = [...initialValue];\n  const childMarginProps = {\n    marginLeft: [...initialValue],\n    marginTop: [...initialValue],\n  };\n\n  initialValue.forEach((_, i) => {\n    const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;\n    const currentAlignment = responsiveAlignment[\n      i\n    ] as keyof (typeof stackStyles)[\"horizontal\"];\n    const currentSpace = responsiveSpace[i];\n\n    if (currentDirection && currentAlignment) {\n      const styles: { [key: string]: string } =\n        stackStyles[currentDirection][currentAlignment];\n      Object.keys(styleProps).forEach((key: string) => {\n        styleProps[key][i] = styles[key] || \"initial\";\n      });\n    }\n\n    const flexBasis =\n      currentAlignment === \"stretch\" && currentDirection === \"horizontal\"\n        ? \"100%\"\n        : null;\n    childFlexBasis[i] = flexBasis;\n\n    const margin =\n      currentDirection === \"horizontal\" ? \"marginLeft\" : \"marginTop\";\n\n    const opposite =\n      currentDirection === \"horizontal\" ? \"marginTop\" : \"marginLeft\";\n    childMarginProps[margin][i] = currentSpace;\n    // styled system can pass numbers that map to theme values and TS doesn't like it\n    childMarginProps[opposite][i] = 0 as unknown as string;\n  });\n\n  return (\n    <Box display=\"flex\" {...styleProps} {...rest}>\n      {stackItems.map((item, i) => (\n        <Box\n          flexBasis={childFlexBasis}\n          {...(i !== 0 ? childMarginProps : {})}\n          key={i}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default Stack;\n","import { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\n\nconst breakpoints = theme.breakpoints;\nconst LENGTH = breakpoints.length + 1;\n\nexport const normalizeResponsiveProp = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: TypeResponsive<any>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): TypeResponsive<any> => {\n  if ([\"string\", \"number\"].includes(typeof value)) {\n    return Array(LENGTH).fill(value);\n  }\n\n  if (value.length) {\n    switch (value.length) {\n      case 1:\n        return Array(LENGTH).fill(value[0]);\n      case 2:\n        return [value[0], ...Array(LENGTH - 1).fill(value[1])];\n      case 3:\n        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];\n      case 4:\n        return [\n          value[0],\n          value[1],\n          value[2],\n          ...Array(LENGTH - 3).fill(value[3]),\n        ];\n      case 5:\n        return value;\n      default:\n        throw new Error(\n          `Invalid responsive prop length: ${JSON.stringify(value)}`\n        );\n    }\n  } else {\n    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);\n  }\n};\n","import * as React from \"react\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeSpaceLiterals =\n  | 0\n  | 100\n  | 200\n  | 300\n  | 350\n  | 400\n  | 450\n  | 500\n  | 600\n  | string;\n\ntype TypeDirection = \"vertical\" | \"horizontal\";\n\ntype TypeAlignment = \"left\" | \"center\" | \"right\" | \"stretch\";\n\nexport interface TypeStackProps extends TypeBoxProps {\n  /** Amount of space between items in the stack */\n  space?: TypeResponsive<TypeSpaceLiterals>;\n\n  /** Alignment of the items in the stack (horizontal or vertical) */\n  align?: TypeResponsive<TypeAlignment>;\n\n  /** Axis upon which the stack is laid out (left, center, right, or stretch) */\n  direction?: TypeResponsive<TypeDirection>;\n  children: React.ReactNode;\n}\n","import Stack from \"./Stack\";\n\nexport default Stack;\nexport { Stack };\nexport * from \"./StackTypes\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/Stack.tsx","../../src/StackHybrid.tsx","../../src/StackStyledComponents.tsx","../../src/utils.ts","../../src/StackTailwind.tsx","../../src/StackTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypeStackProps } from \"./StackTypes\";\nimport StackHybrid from \"./StackHybrid\";\n\n/**\n * Stack component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props, a styled() extension, or responsive/arbitrary-string props).\n */\nconst Stack = React.forwardRef<HTMLDivElement, TypeStackProps>((props, ref) => (\n  <StackHybrid {...props} ref={ref} />\n));\n\nStack.displayName = \"Stack\";\nexport default Stack;\n","/**\n * Hybrid Stack Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a consumer passes styled-system\n * props (e.g. p, bg, color), a styled() extension, or responsive (array) /\n * arbitrary-string values for space/align/direction — none of which can be\n * expressed as a static CSS class. Otherwise renders the Tailwind path.\n */\n\nimport React from \"react\";\nimport type { TypeStackProps } from \"./StackTypes\";\nimport StackStyledComponents from \"./StackStyledComponents\"; // Styled-components version\nimport { StackTailwind } from \"./StackTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst isResponsive = (value: unknown): boolean => Array.isArray(value);\n\nconst StackHybrid = React.forwardRef<HTMLDivElement, TypeStackProps>(\n  (props, ref) => {\n    const { space, align, direction, children, ...rest } = props;\n\n    const needsStyledComponents =\n      hasStyledProps(rest) ||\n      isResponsive(space) ||\n      isResponsive(align) ||\n      isResponsive(direction) ||\n      // arbitrary string spacing (e.g. \"20px\") can't map to a variant class\n      typeof space === \"string\";\n\n    if (needsStyledComponents) {\n      return <StackStyledComponents ref={ref} {...props} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <StackTailwind ref={ref} {...props} />;\n  }\n);\n\nStackHybrid.displayName = \"Stack\";\nexport default StackHybrid;\n","/**\n * Styled-components (Box-based) implementation of Stack.\n * This is the legacy path used whenever a consumer passes styled-system props,\n * a styled() extension, or responsive (array) / arbitrary-string values for\n * space/align/direction. Relocated verbatim from the original Stack.tsx.\n */\n\nimport * as React from \"react\";\nimport { Children } from \"react\";\nimport { normalizeResponsiveProp } from \"./utils\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\nconst stackStyles = {\n  horizontal: {\n    left: {\n      alignItems: \"center\",\n    },\n    center: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    right: {\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n    },\n    stretch: {\n      alignItems: \"center\",\n    },\n  },\n  vertical: {\n    left: {\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n    },\n    center: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n    },\n    right: {\n      flexDirection: \"column\",\n      alignItems: \"flex-end\",\n    },\n    stretch: {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n    },\n  },\n};\n\nconst StackStyledComponents = React.forwardRef<HTMLDivElement, TypeStackProps>(\n  (\n    { children, space = 300, align = \"left\", direction = \"vertical\", ...rest },\n    ref\n  ) => {\n    const stackItems = Children.toArray(children);\n    const responsiveAlignment = normalizeResponsiveProp(align);\n    const responsiveDirection = normalizeResponsiveProp(direction);\n    const responsiveSpace = normalizeResponsiveProp(space);\n    const initialValue = [\n      \"initial\",\n      \"initial\",\n      \"initial\",\n      \"initial\",\n      \"initial\",\n    ];\n\n    // TODO: rely on styled system to solve this during the refactor\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const styleProps: any = {\n      alignItems: [...initialValue],\n      flexDirection: [...initialValue],\n      justifyContent: [...initialValue],\n    };\n    const childFlexBasis: (string | null)[] = [...initialValue];\n    const childMarginProps = {\n      marginLeft: [...initialValue],\n      marginTop: [...initialValue],\n    };\n\n    initialValue.forEach((_, i) => {\n      const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;\n      const currentAlignment = responsiveAlignment[\n        i\n      ] as keyof (typeof stackStyles)[\"horizontal\"];\n      const currentSpace = responsiveSpace[i];\n\n      if (currentDirection && currentAlignment) {\n        const styles: { [key: string]: string } =\n          stackStyles[currentDirection][currentAlignment];\n        Object.keys(styleProps).forEach((key: string) => {\n          styleProps[key][i] = styles[key] || \"initial\";\n        });\n      }\n\n      const flexBasis =\n        currentAlignment === \"stretch\" && currentDirection === \"horizontal\"\n          ? \"100%\"\n          : null;\n      childFlexBasis[i] = flexBasis;\n\n      const margin =\n        currentDirection === \"horizontal\" ? \"marginLeft\" : \"marginTop\";\n\n      const opposite =\n        currentDirection === \"horizontal\" ? \"marginTop\" : \"marginLeft\";\n      childMarginProps[margin][i] = currentSpace;\n      // styled system can pass numbers that map to theme values and TS doesn't like it\n      childMarginProps[opposite][i] = 0 as unknown as string;\n    });\n\n    return (\n      <Box display=\"flex\" ref={ref} {...styleProps} {...rest}>\n        {stackItems.map((item, i) => (\n          <Box\n            flexBasis={childFlexBasis}\n            {...(i !== 0 ? childMarginProps : {})}\n            key={i}\n          >\n            {item}\n          </Box>\n        ))}\n      </Box>\n    );\n  }\n);\n\nStackStyledComponents.displayName = \"StackStyledComponents\";\nexport default StackStyledComponents;\n","import { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\n\nconst breakpoints = theme.breakpoints;\nconst LENGTH = breakpoints.length + 1;\n\nexport const normalizeResponsiveProp = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: TypeResponsive<any>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): TypeResponsive<any> => {\n  if ([\"string\", \"number\"].includes(typeof value)) {\n    return Array(LENGTH).fill(value);\n  }\n\n  if (value.length) {\n    switch (value.length) {\n      case 1:\n        return Array(LENGTH).fill(value[0]);\n      case 2:\n        return [value[0], ...Array(LENGTH - 1).fill(value[1])];\n      case 3:\n        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];\n      case 4:\n        return [\n          value[0],\n          value[1],\n          value[2],\n          ...Array(LENGTH - 3).fill(value[3]),\n        ];\n      case 5:\n        return value;\n      default:\n        throw new Error(\n          `Invalid responsive prop length: ${JSON.stringify(value)}`\n        );\n    }\n  } else {\n    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);\n  }\n};\n","/**\n * Tailwind CSS implementation of Stack component\n * Uses Seeds stack CSS classes from stack.css\n *\n * Handles only scalar space/align/direction values. Spacing is applied via the\n * flex `gap` property (replacing the per-child margin Box wrappers of the\n * styled-components path). Responsive (array) / arbitrary-string values and any\n * styled-system props route to the styled-components path via StackHybrid.\n */\n\nimport React from \"react\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const StackTailwind = React.forwardRef<HTMLDivElement, TypeStackProps>(\n  (\n    {\n      children,\n      space = 300,\n      align = \"left\",\n      direction = \"vertical\",\n      as,\n      className,\n      ...rest\n    }: TypeStackProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    // Render the consumer-provided element (e.g. <Stack as=\"section\">) and\n    // default to a div. `as` is a documented Stack prop (via TypeBoxProps) but\n    // is not a styled-system prop, so scalar usage routes here rather than to\n    // the styled-components path.\n    const Component = (as || \"div\") as any;\n\n    const classes = cn(\n      \"seeds-stack\",\n      `seeds-stack-${direction}`,\n      `seeds-stack-align-${align}`,\n      `seeds-stack-space-${space}`,\n      className\n    );\n\n    // `as` has been destructured out, so the remaining props are plain\n    // DOM/aria/data attributes spread onto the chosen element.\n    return (\n      <Component className={classes} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nStackTailwind.displayName = \"StackTailwind\";\n","import * as React from \"react\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeSpaceLiterals =\n  | 0\n  | 100\n  | 200\n  | 300\n  | 350\n  | 400\n  | 450\n  | 500\n  | 600\n  | string;\n\ntype TypeDirection = \"vertical\" | \"horizontal\";\n\ntype TypeAlignment = \"left\" | \"center\" | \"right\" | \"stretch\";\n\nexport interface TypeStackProps extends TypeBoxProps {\n  /** Amount of space between items in the stack */\n  space?: TypeResponsive<TypeSpaceLiterals>;\n\n  /** Alignment of the items in the stack (horizontal or vertical) */\n  align?: TypeResponsive<TypeAlignment>;\n\n  /** Axis upon which the stack is laid out (left, center, right, or stretch) */\n  direction?: TypeResponsive<TypeDirection>;\n  children: React.ReactNode;\n}\n","import Stack from \"./Stack\";\n\nexport default Stack;\nexport { Stack };\nexport * from \"./StackTypes\";\n"],"mappings":";AAAA,OAAOA,YAAW;;;ACUlB,OAAOC,YAAW;;;ACHlB,YAAY,WAAW;AACvB,SAAS,gBAAgB;;;ACRzB,SAAS,aAAa;AAItB,IAAM,cAAc,MAAM;AAC1B,IAAM,SAAS,YAAY,SAAS;AAE7B,IAAM,0BAA0B,CAErC,UAEwB;AACxB,MAAI,CAAC,UAAU,QAAQ,EAAE,SAAS,OAAO,KAAK,GAAG;AAC/C,WAAO,MAAM,MAAM,EAAE,KAAK,KAAK;AAAA,EACjC;AAEA,MAAI,MAAM,QAAQ;AAChB,YAAQ,MAAM,QAAQ;AAAA,MACpB,KAAK;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,MAAM,CAAC,CAAC;AAAA,MACpC,KAAK;AACH,eAAO,CAAC,MAAM,CAAC,GAAG,GAAG,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC;AAAA,MACvD,KAAK;AACH,eAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC,CAAC;AAAA,MACjE,KAAK;AACH,eAAO;AAAA,UACL,MAAM,CAAC;AAAA,UACP,MAAM,CAAC;AAAA,UACP,MAAM,CAAC;AAAA,UACP,GAAG,MAAM,SAAS,CAAC,EAAE,KAAK,MAAM,CAAC,CAAC;AAAA,QACpC;AAAA,MACF,KAAK;AACH,eAAO;AAAA,MACT;AACE,cAAM,IAAI;AAAA,UACR,mCAAmC,KAAK,UAAU,KAAK,CAAC;AAAA,QAC1D;AAAA,IACJ;AAAA,EACF,OAAO;AACL,UAAM,IAAI,MAAM,iCAAiC,KAAK,UAAU,KAAK,CAAC,EAAE;AAAA,EAC1E;AACF;;;AD/BA,OAAO,SAAS;AAsGV;AAEI;AArGV,IAAM,cAAc;AAAA,EAClB,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IACA,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,MACN,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACL,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,IACA,SAAS;AAAA,MACP,eAAe;AAAA,MACf,YAAY;AAAA,IACd;AAAA,EACF;AACF;AAEA,IAAM,wBAA8B;AAAA,EAClC,CACE,EAAE,UAAU,QAAQ,KAAK,QAAQ,QAAQ,YAAY,YAAY,GAAG,KAAK,GACzE,QACG;AACH,UAAM,aAAa,SAAS,QAAQ,QAAQ;AAC5C,UAAM,sBAAsB,wBAAwB,KAAK;AACzD,UAAM,sBAAsB,wBAAwB,SAAS;AAC7D,UAAM,kBAAkB,wBAAwB,KAAK;AACrD,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAIA,UAAM,aAAkB;AAAA,MACtB,YAAY,CAAC,GAAG,YAAY;AAAA,MAC5B,eAAe,CAAC,GAAG,YAAY;AAAA,MAC/B,gBAAgB,CAAC,GAAG,YAAY;AAAA,IAClC;AACA,UAAM,iBAAoC,CAAC,GAAG,YAAY;AAC1D,UAAM,mBAAmB;AAAA,MACvB,YAAY,CAAC,GAAG,YAAY;AAAA,MAC5B,WAAW,CAAC,GAAG,YAAY;AAAA,IAC7B;AAEA,iBAAa,QAAQ,CAAC,GAAG,MAAM;AAC7B,YAAM,mBAAmB,oBAAoB,CAAC;AAC9C,YAAM,mBAAmB,oBACvB,CACF;AACA,YAAM,eAAe,gBAAgB,CAAC;AAEtC,UAAI,oBAAoB,kBAAkB;AACxC,cAAM,SACJ,YAAY,gBAAgB,EAAE,gBAAgB;AAChD,eAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,QAAgB;AAC/C,qBAAW,GAAG,EAAE,CAAC,IAAI,OAAO,GAAG,KAAK;AAAA,QACtC,CAAC;AAAA,MACH;AAEA,YAAM,YACJ,qBAAqB,aAAa,qBAAqB,eACnD,SACA;AACN,qBAAe,CAAC,IAAI;AAEpB,YAAM,SACJ,qBAAqB,eAAe,eAAe;AAErD,YAAM,WACJ,qBAAqB,eAAe,cAAc;AACpD,uBAAiB,MAAM,EAAE,CAAC,IAAI;AAE9B,uBAAiB,QAAQ,EAAE,CAAC,IAAI;AAAA,IAClC,CAAC;AAED,WACE,oBAAC,OAAI,SAAQ,QAAO,KAAW,GAAG,YAAa,GAAG,MAC/C,qBAAW,IAAI,CAAC,MAAM,MACrB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACV,GAAI,MAAM,IAAI,mBAAmB,CAAC;AAAA,QACnC,KAAK;AAAA;AAAA,MAEJ;AAAA,IACH,CACD,GACH;AAAA,EAEJ;AACF;AAEA,sBAAsB,cAAc;AACpC,IAAO,gCAAQ;;;AEtHf,OAAOC,YAAW;AAwDZ,gBAAAC,YAAA;AApDN,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,IAAM,gBAAgBD,OAAM;AAAA,EACjC,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAKH,UAAM,YAAa,MAAM;AAEzB,UAAM,UAAU;AAAA,MACd;AAAA,MACA,eAAe,SAAS;AAAA,MACxB,qBAAqB,KAAK;AAAA,MAC1B,qBAAqB,KAAK;AAAA,MAC1B;AAAA,IACF;AAIA,WACE,gBAAAC,KAAC,aAAU,WAAW,SAAS,KAAW,GAAG,MAC1C,UACH;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;;;AH3D5B,SAAS,sBAAsB;AAiBlB,gBAAAC,YAAA;AAfb,IAAM,eAAe,CAAC,UAA4B,MAAM,QAAQ,KAAK;AAErE,IAAM,cAAcC,OAAM;AAAA,EACxB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,OAAO,OAAO,WAAW,UAAU,GAAG,KAAK,IAAI;AAEvD,UAAM,wBACJ,eAAe,IAAI,KACnB,aAAa,KAAK,KAClB,aAAa,KAAK,KAClB,aAAa,SAAS;AAAA,IAEtB,OAAO,UAAU;AAEnB,QAAI,uBAAuB;AACzB,aAAO,gBAAAD,KAAC,iCAAsB,KAAW,GAAG,OAAO;AAAA,IACrD;AAGA,WAAO,gBAAAA,KAAC,iBAAc,KAAW,GAAG,OAAO;AAAA,EAC7C;AACF;AAEA,YAAY,cAAc;AAC1B,IAAO,sBAAQ;;;AD9Bb,gBAAAE,YAAA;AADF,IAAM,QAAQC,OAAM,WAA2C,CAAC,OAAO,QACrE,gBAAAD,KAAC,uBAAa,GAAG,OAAO,KAAU,CACnC;AAED,MAAM,cAAc;AACpB,IAAO,gBAAQ;;;AKdf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["React","React","React","jsx","jsx","React","jsx","React"]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 import { TypeResponsive } from '@sproutsocial/seeds-react-system-props';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
@@ -16,6 +16,11 @@ interface TypeStackProps extends TypeBoxProps {
     children: React.ReactNode;
 }
 
-declare const Stack: ({ children, space, align, direction, ...rest }: TypeStackProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Stack component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props, a styled() extension, or responsive/arbitrary-string props).
+ */
+declare const Stack: React__default.ForwardRefExoticComponent<Omit<TypeStackProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 export { Stack, type TypeSpaceLiterals, type TypeStackProps, Stack as default };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 import { TypeResponsive } from '@sproutsocial/seeds-react-system-props';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
@@ -16,6 +16,11 @@ interface TypeStackProps extends TypeBoxProps {
     children: React.ReactNode;
 }
 
-declare const Stack: ({ children, space, align, direction, ...rest }: TypeStackProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Stack component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props, a styled() extension, or responsive/arbitrary-string props).
+ */
+declare const Stack: React__default.ForwardRefExoticComponent<Omit<TypeStackProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 export { Stack, type TypeSpaceLiterals, type TypeStackProps, Stack as default };

package/dist/index.js

@@ -36,7 +36,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Stack.tsx
-var React = require("react");
+var import_react5 = __toESM(require("react"));
+
+// src/StackHybrid.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/StackStyledComponents.tsx
+var React = __toESM(require("react"));
 var import_react = require("react");
 
 // src/utils.ts
@@ -74,7 +80,7 @@ var normalizeResponsiveProp = (value) => {
   }
 };
 
-// src/Stack.tsx
+// src/StackStyledComponents.tsx
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react2 = require("react");
@@ -114,59 +120,128 @@ var stackStyles = {
     }
   }
 };
-var Stack = ({
-  children,
-  space = 300,
-  align = "left",
-  direction = "vertical",
-  ...rest
-}) => {
-  const stackItems = import_react.Children.toArray(children);
-  const responsiveAlignment = normalizeResponsiveProp(align);
-  const responsiveDirection = normalizeResponsiveProp(direction);
-  const responsiveSpace = normalizeResponsiveProp(space);
-  const initialValue = ["initial", "initial", "initial", "initial", "initial"];
-  const styleProps = {
-    alignItems: [...initialValue],
-    flexDirection: [...initialValue],
-    justifyContent: [...initialValue]
-  };
-  const childFlexBasis = [...initialValue];
-  const childMarginProps = {
-    marginLeft: [...initialValue],
-    marginTop: [...initialValue]
-  };
-  initialValue.forEach((_, i) => {
-    const currentDirection = responsiveDirection[i];
-    const currentAlignment = responsiveAlignment[i];
-    const currentSpace = responsiveSpace[i];
-    if (currentDirection && currentAlignment) {
-      const styles = stackStyles[currentDirection][currentAlignment];
-      Object.keys(styleProps).forEach((key) => {
-        styleProps[key][i] = styles[key] || "initial";
-      });
+var StackStyledComponents = React.forwardRef(
+  ({ children, space = 300, align = "left", direction = "vertical", ...rest }, ref) => {
+    const stackItems = import_react.Children.toArray(children);
+    const responsiveAlignment = normalizeResponsiveProp(align);
+    const responsiveDirection = normalizeResponsiveProp(direction);
+    const responsiveSpace = normalizeResponsiveProp(space);
+    const initialValue = [
+      "initial",
+      "initial",
+      "initial",
+      "initial",
+      "initial"
+    ];
+    const styleProps = {
+      alignItems: [...initialValue],
+      flexDirection: [...initialValue],
+      justifyContent: [...initialValue]
+    };
+    const childFlexBasis = [...initialValue];
+    const childMarginProps = {
+      marginLeft: [...initialValue],
+      marginTop: [...initialValue]
+    };
+    initialValue.forEach((_, i) => {
+      const currentDirection = responsiveDirection[i];
+      const currentAlignment = responsiveAlignment[i];
+      const currentSpace = responsiveSpace[i];
+      if (currentDirection && currentAlignment) {
+        const styles = stackStyles[currentDirection][currentAlignment];
+        Object.keys(styleProps).forEach((key) => {
+          styleProps[key][i] = styles[key] || "initial";
+        });
+      }
+      const flexBasis = currentAlignment === "stretch" && currentDirection === "horizontal" ? "100%" : null;
+      childFlexBasis[i] = flexBasis;
+      const margin = currentDirection === "horizontal" ? "marginLeft" : "marginTop";
+      const opposite = currentDirection === "horizontal" ? "marginTop" : "marginLeft";
+      childMarginProps[margin][i] = currentSpace;
+      childMarginProps[opposite][i] = 0;
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { display: "flex", ref, ...styleProps, ...rest, children: stackItems.map((item, i) => /* @__PURE__ */ (0, import_react2.createElement)(
+      import_seeds_react_box.default,
+      {
+        flexBasis: childFlexBasis,
+        ...i !== 0 ? childMarginProps : {},
+        key: i
+      },
+      item
+    )) });
+  }
+);
+StackStyledComponents.displayName = "StackStyledComponents";
+var StackStyledComponents_default = StackStyledComponents;
+
+// src/StackTailwind.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
     }
-    const flexBasis = currentAlignment === "stretch" && currentDirection === "horizontal" ? "100%" : null;
-    childFlexBasis[i] = flexBasis;
-    const margin = currentDirection === "horizontal" ? "marginLeft" : "marginTop";
-    const opposite = currentDirection === "horizontal" ? "marginTop" : "marginLeft";
-    childMarginProps[margin][i] = currentSpace;
-    childMarginProps[opposite][i] = 0;
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { display: "flex", ...styleProps, ...rest, children: stackItems.map((item, i) => /* @__PURE__ */ (0, import_react2.createElement)(
-    import_seeds_react_box.default,
-    {
-      flexBasis: childFlexBasis,
-      ...i !== 0 ? childMarginProps : {},
-      key: i
-    },
-    item
-  )) });
-};
+  }
+  return classes.join(" ");
+}
+var StackTailwind = import_react3.default.forwardRef(
+  ({
+    children,
+    space = 300,
+    align = "left",
+    direction = "vertical",
+    as,
+    className,
+    ...rest
+  }, ref) => {
+    const Component = as || "div";
+    const classes = cn(
+      "seeds-stack",
+      `seeds-stack-${direction}`,
+      `seeds-stack-align-${align}`,
+      `seeds-stack-space-${space}`,
+      className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { className: classes, ref, ...rest, children });
+  }
+);
+StackTailwind.displayName = "StackTailwind";
+
+// src/StackHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var isResponsive = (value) => Array.isArray(value);
+var StackHybrid = import_react4.default.forwardRef(
+  (props, ref) => {
+    const { space, align, direction, children, ...rest } = props;
+    const needsStyledComponents = (0, import_seeds_react_system_props.hasStyledProps)(rest) || isResponsive(space) || isResponsive(align) || isResponsive(direction) || // arbitrary string spacing (e.g. "20px") can't map to a variant class
+    typeof space === "string";
+    if (needsStyledComponents) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StackStyledComponents_default, { ref, ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StackTailwind, { ref, ...props });
+  }
+);
+StackHybrid.displayName = "Stack";
+var StackHybrid_default = StackHybrid;
+
+// src/Stack.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Stack = import_react5.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StackHybrid_default, { ...props, ref }));
+Stack.displayName = "Stack";
 var Stack_default = Stack;
 
 // src/StackTypes.ts
-var React2 = require("react");
+var React5 = require("react");
 
 // src/index.ts
 var index_default = Stack_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Stack.tsx","../src/utils.ts","../src/StackTypes.ts"],"sourcesContent":["import Stack from \"./Stack\";\n\nexport default Stack;\nexport { Stack };\nexport * from \"./StackTypes\";\n","import * as React from \"react\";\nimport { Children } from \"react\";\nimport { normalizeResponsiveProp } from \"./utils\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\nconst stackStyles = {\n  horizontal: {\n    left: {\n      alignItems: \"center\",\n    },\n    center: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    right: {\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n    },\n    stretch: {\n      alignItems: \"center\",\n    },\n  },\n  vertical: {\n    left: {\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n    },\n    center: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n    },\n    right: {\n      flexDirection: \"column\",\n      alignItems: \"flex-end\",\n    },\n    stretch: {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n    },\n  },\n};\n\nconst Stack = ({\n  children,\n  space = 300,\n  align = \"left\",\n  direction = \"vertical\",\n  ...rest\n}: TypeStackProps) => {\n  const stackItems = Children.toArray(children);\n  const responsiveAlignment = normalizeResponsiveProp(align);\n  const responsiveDirection = normalizeResponsiveProp(direction);\n  const responsiveSpace = normalizeResponsiveProp(space);\n  const initialValue = [\"initial\", \"initial\", \"initial\", \"initial\", \"initial\"];\n\n  // TODO: rely on styled system to solve this during the refactor\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const styleProps: any = {\n    alignItems: [...initialValue],\n    flexDirection: [...initialValue],\n    justifyContent: [...initialValue],\n  };\n  const childFlexBasis: (string | null)[] = [...initialValue];\n  const childMarginProps = {\n    marginLeft: [...initialValue],\n    marginTop: [...initialValue],\n  };\n\n  initialValue.forEach((_, i) => {\n    const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;\n    const currentAlignment = responsiveAlignment[\n      i\n    ] as keyof (typeof stackStyles)[\"horizontal\"];\n    const currentSpace = responsiveSpace[i];\n\n    if (currentDirection && currentAlignment) {\n      const styles: { [key: string]: string } =\n        stackStyles[currentDirection][currentAlignment];\n      Object.keys(styleProps).forEach((key: string) => {\n        styleProps[key][i] = styles[key] || \"initial\";\n      });\n    }\n\n    const flexBasis =\n      currentAlignment === \"stretch\" && currentDirection === \"horizontal\"\n        ? \"100%\"\n        : null;\n    childFlexBasis[i] = flexBasis;\n\n    const margin =\n      currentDirection === \"horizontal\" ? \"marginLeft\" : \"marginTop\";\n\n    const opposite =\n      currentDirection === \"horizontal\" ? \"marginTop\" : \"marginLeft\";\n    childMarginProps[margin][i] = currentSpace;\n    // styled system can pass numbers that map to theme values and TS doesn't like it\n    childMarginProps[opposite][i] = 0 as unknown as string;\n  });\n\n  return (\n    <Box display=\"flex\" {...styleProps} {...rest}>\n      {stackItems.map((item, i) => (\n        <Box\n          flexBasis={childFlexBasis}\n          {...(i !== 0 ? childMarginProps : {})}\n          key={i}\n        >\n          {item}\n        </Box>\n      ))}\n    </Box>\n  );\n};\n\nexport default Stack;\n","import { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\n\nconst breakpoints = theme.breakpoints;\nconst LENGTH = breakpoints.length + 1;\n\nexport const normalizeResponsiveProp = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: TypeResponsive<any>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): TypeResponsive<any> => {\n  if ([\"string\", \"number\"].includes(typeof value)) {\n    return Array(LENGTH).fill(value);\n  }\n\n  if (value.length) {\n    switch (value.length) {\n      case 1:\n        return Array(LENGTH).fill(value[0]);\n      case 2:\n        return [value[0], ...Array(LENGTH - 1).fill(value[1])];\n      case 3:\n        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];\n      case 4:\n        return [\n          value[0],\n          value[1],\n          value[2],\n          ...Array(LENGTH - 3).fill(value[3]),\n        ];\n      case 5:\n        return value;\n      default:\n        throw new Error(\n          `Invalid responsive prop length: ${JSON.stringify(value)}`\n        );\n    }\n  } else {\n    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);\n  }\n};\n","import * as React from \"react\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeSpaceLiterals =\n  | 0\n  | 100\n  | 200\n  | 300\n  | 350\n  | 400\n  | 450\n  | 500\n  | 600\n  | string;\n\ntype TypeDirection = \"vertical\" | \"horizontal\";\n\ntype TypeAlignment = \"left\" | \"center\" | \"right\" | \"stretch\";\n\nexport interface TypeStackProps extends TypeBoxProps {\n  /** Amount of space between items in the stack */\n  space?: TypeResponsive<TypeSpaceLiterals>;\n\n  /** Alignment of the items in the stack (horizontal or vertical) */\n  align?: TypeResponsive<TypeAlignment>;\n\n  /** Axis upon which the stack is laid out (left, center, right, or stretch) */\n  direction?: TypeResponsive<TypeDirection>;\n  children: React.ReactNode;\n}\n"],"mappings":"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","names":["import_react","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Stack.tsx","../src/StackHybrid.tsx","../src/StackStyledComponents.tsx","../src/utils.ts","../src/StackTailwind.tsx","../src/StackTypes.ts"],"sourcesContent":["import Stack from \"./Stack\";\n\nexport default Stack;\nexport { Stack };\nexport * from \"./StackTypes\";\n","import React from \"react\";\nimport type { TypeStackProps } from \"./StackTypes\";\nimport StackHybrid from \"./StackHybrid\";\n\n/**\n * Stack component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props, a styled() extension, or responsive/arbitrary-string props).\n */\nconst Stack = React.forwardRef<HTMLDivElement, TypeStackProps>((props, ref) => (\n  <StackHybrid {...props} ref={ref} />\n));\n\nStack.displayName = \"Stack\";\nexport default Stack;\n","/**\n * Hybrid Stack Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a consumer passes styled-system\n * props (e.g. p, bg, color), a styled() extension, or responsive (array) /\n * arbitrary-string values for space/align/direction — none of which can be\n * expressed as a static CSS class. Otherwise renders the Tailwind path.\n */\n\nimport React from \"react\";\nimport type { TypeStackProps } from \"./StackTypes\";\nimport StackStyledComponents from \"./StackStyledComponents\"; // Styled-components version\nimport { StackTailwind } from \"./StackTailwind\"; // Tailwind version\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\n\nconst isResponsive = (value: unknown): boolean => Array.isArray(value);\n\nconst StackHybrid = React.forwardRef<HTMLDivElement, TypeStackProps>(\n  (props, ref) => {\n    const { space, align, direction, children, ...rest } = props;\n\n    const needsStyledComponents =\n      hasStyledProps(rest) ||\n      isResponsive(space) ||\n      isResponsive(align) ||\n      isResponsive(direction) ||\n      // arbitrary string spacing (e.g. \"20px\") can't map to a variant class\n      typeof space === \"string\";\n\n    if (needsStyledComponents) {\n      return <StackStyledComponents ref={ref} {...props} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <StackTailwind ref={ref} {...props} />;\n  }\n);\n\nStackHybrid.displayName = \"Stack\";\nexport default StackHybrid;\n","/**\n * Styled-components (Box-based) implementation of Stack.\n * This is the legacy path used whenever a consumer passes styled-system props,\n * a styled() extension, or responsive (array) / arbitrary-string values for\n * space/align/direction. Relocated verbatim from the original Stack.tsx.\n */\n\nimport * as React from \"react\";\nimport { Children } from \"react\";\nimport { normalizeResponsiveProp } from \"./utils\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\nconst stackStyles = {\n  horizontal: {\n    left: {\n      alignItems: \"center\",\n    },\n    center: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n    right: {\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n    },\n    stretch: {\n      alignItems: \"center\",\n    },\n  },\n  vertical: {\n    left: {\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n    },\n    center: {\n      flexDirection: \"column\",\n      alignItems: \"center\",\n    },\n    right: {\n      flexDirection: \"column\",\n      alignItems: \"flex-end\",\n    },\n    stretch: {\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n    },\n  },\n};\n\nconst StackStyledComponents = React.forwardRef<HTMLDivElement, TypeStackProps>(\n  (\n    { children, space = 300, align = \"left\", direction = \"vertical\", ...rest },\n    ref\n  ) => {\n    const stackItems = Children.toArray(children);\n    const responsiveAlignment = normalizeResponsiveProp(align);\n    const responsiveDirection = normalizeResponsiveProp(direction);\n    const responsiveSpace = normalizeResponsiveProp(space);\n    const initialValue = [\n      \"initial\",\n      \"initial\",\n      \"initial\",\n      \"initial\",\n      \"initial\",\n    ];\n\n    // TODO: rely on styled system to solve this during the refactor\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const styleProps: any = {\n      alignItems: [...initialValue],\n      flexDirection: [...initialValue],\n      justifyContent: [...initialValue],\n    };\n    const childFlexBasis: (string | null)[] = [...initialValue];\n    const childMarginProps = {\n      marginLeft: [...initialValue],\n      marginTop: [...initialValue],\n    };\n\n    initialValue.forEach((_, i) => {\n      const currentDirection = responsiveDirection[i] as keyof typeof stackStyles;\n      const currentAlignment = responsiveAlignment[\n        i\n      ] as keyof (typeof stackStyles)[\"horizontal\"];\n      const currentSpace = responsiveSpace[i];\n\n      if (currentDirection && currentAlignment) {\n        const styles: { [key: string]: string } =\n          stackStyles[currentDirection][currentAlignment];\n        Object.keys(styleProps).forEach((key: string) => {\n          styleProps[key][i] = styles[key] || \"initial\";\n        });\n      }\n\n      const flexBasis =\n        currentAlignment === \"stretch\" && currentDirection === \"horizontal\"\n          ? \"100%\"\n          : null;\n      childFlexBasis[i] = flexBasis;\n\n      const margin =\n        currentDirection === \"horizontal\" ? \"marginLeft\" : \"marginTop\";\n\n      const opposite =\n        currentDirection === \"horizontal\" ? \"marginTop\" : \"marginLeft\";\n      childMarginProps[margin][i] = currentSpace;\n      // styled system can pass numbers that map to theme values and TS doesn't like it\n      childMarginProps[opposite][i] = 0 as unknown as string;\n    });\n\n    return (\n      <Box display=\"flex\" ref={ref} {...styleProps} {...rest}>\n        {stackItems.map((item, i) => (\n          <Box\n            flexBasis={childFlexBasis}\n            {...(i !== 0 ? childMarginProps : {})}\n            key={i}\n          >\n            {item}\n          </Box>\n        ))}\n      </Box>\n    );\n  }\n);\n\nStackStyledComponents.displayName = \"StackStyledComponents\";\nexport default StackStyledComponents;\n","import { theme } from \"@sproutsocial/seeds-react-theme\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\n\nconst breakpoints = theme.breakpoints;\nconst LENGTH = breakpoints.length + 1;\n\nexport const normalizeResponsiveProp = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: TypeResponsive<any>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): TypeResponsive<any> => {\n  if ([\"string\", \"number\"].includes(typeof value)) {\n    return Array(LENGTH).fill(value);\n  }\n\n  if (value.length) {\n    switch (value.length) {\n      case 1:\n        return Array(LENGTH).fill(value[0]);\n      case 2:\n        return [value[0], ...Array(LENGTH - 1).fill(value[1])];\n      case 3:\n        return [value[0], value[1], ...Array(LENGTH - 2).fill(value[2])];\n      case 4:\n        return [\n          value[0],\n          value[1],\n          value[2],\n          ...Array(LENGTH - 3).fill(value[3]),\n        ];\n      case 5:\n        return value;\n      default:\n        throw new Error(\n          `Invalid responsive prop length: ${JSON.stringify(value)}`\n        );\n    }\n  } else {\n    throw new Error(`Invalid responsive prop type: ${JSON.stringify(value)}`);\n  }\n};\n","/**\n * Tailwind CSS implementation of Stack component\n * Uses Seeds stack CSS classes from stack.css\n *\n * Handles only scalar space/align/direction values. Spacing is applied via the\n * flex `gap` property (replacing the per-child margin Box wrappers of the\n * styled-components path). Responsive (array) / arbitrary-string values and any\n * styled-system props route to the styled-components path via StackHybrid.\n */\n\nimport React from \"react\";\nimport type { TypeStackProps } from \"./StackTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const StackTailwind = React.forwardRef<HTMLDivElement, TypeStackProps>(\n  (\n    {\n      children,\n      space = 300,\n      align = \"left\",\n      direction = \"vertical\",\n      as,\n      className,\n      ...rest\n    }: TypeStackProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    // Render the consumer-provided element (e.g. <Stack as=\"section\">) and\n    // default to a div. `as` is a documented Stack prop (via TypeBoxProps) but\n    // is not a styled-system prop, so scalar usage routes here rather than to\n    // the styled-components path.\n    const Component = (as || \"div\") as any;\n\n    const classes = cn(\n      \"seeds-stack\",\n      `seeds-stack-${direction}`,\n      `seeds-stack-align-${align}`,\n      `seeds-stack-space-${space}`,\n      className\n    );\n\n    // `as` has been destructured out, so the remaining props are plain\n    // DOM/aria/data attributes spread onto the chosen element.\n    return (\n      <Component className={classes} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nStackTailwind.displayName = \"StackTailwind\";\n","import * as React from \"react\";\n\nimport type { TypeResponsive } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeSpaceLiterals =\n  | 0\n  | 100\n  | 200\n  | 300\n  | 350\n  | 400\n  | 450\n  | 500\n  | 600\n  | string;\n\ntype TypeDirection = \"vertical\" | \"horizontal\";\n\ntype TypeAlignment = \"left\" | \"center\" | \"right\" | \"stretch\";\n\nexport interface TypeStackProps extends TypeBoxProps {\n  /** Amount of space between items in the stack */\n  space?: TypeResponsive<TypeSpaceLiterals>;\n\n  /** Alignment of the items in the stack (horizontal or vertical) */\n  align?: TypeResponsive<TypeAlignment>;\n\n  /** Axis upon which the stack is laid out (left, center, right, or stretch) */\n  direction?: TypeResponsive<TypeDirection>;\n  children: React.ReactNode;\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","Box","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","React"]}