@sproutsocial/seeds-react-container 0.3.19 → 0.3.20

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/container.css dist/container.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     2.40 KB
-CJS dist/index.js.map 1.22 KB
-CJS ⚡️ Build success in 79ms
-ESM dist/esm/index.js     659.00 B
-ESM dist/esm/index.js.map 1.08 KB
-ESM ⚡️ Build success in 79ms
+CJS dist/index.js     3.90 KB
+CJS dist/index.js.map 4.69 KB
+CJS ⚡️ Build success in 16ms
+ESM dist/esm/index.js     2.00 KB
+ESM dist/esm/index.js.map 4.55 KB
+ESM ⚡️ Build success in 16ms
 DTS Build start
-DTS ⚡️ Build success in 4762ms
-DTS dist/index.d.ts  241.00 B
-DTS dist/index.d.mts 241.00 B
-Done in 6.09s.
+DTS ⚡️ Build success in 4600ms
+DTS dist/index.d.ts  449.00 B
+DTS dist/index.d.mts 449.00 B
+Done in 5.94s.

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @sproutsocial/seeds-react-container
 
+## 0.3.20
+
+### Patch Changes
+
+- b77aca0: Migrate Container to the Tailwind hybrid pattern. By default Container now renders
+  a plain div with the `seeds-container` CSS class (background, border, and radius via
+  `var(--color-container-*)` / `var(--radius-outer)` tokens). Consumers passing
+  styled-system props (`p`, `m`, `color`, `width`, position props, …) or extending via
+  `styled()` continue to route through the styled-components path for full backward
+  compatibility. Component CSS is wrapped in `@layer components` so consumer Tailwind
+  utilities can override it.
+
+  Also adds position props (`position`, `zIndex`, `top`, `right`, `bottom`, `left`) to
+  the shared styled-system prop allowlist in `seeds-react-system-props` so hybrid
+  components correctly route Box-style positioning through the styled-components path.
+
+- Updated dependencies [b77aca0]
+- Updated dependencies [2e72599]
+  - @sproutsocial/seeds-react-system-props@3.1.3
+  - @sproutsocial/seeds-react-theme@4.3.0
+  - @sproutsocial/seeds-react-box@1.1.26
+  - @sproutsocial/seeds-react-mixins@4.3.11
+
 ## 0.3.19
 
 ### Patch Changes

package/dist/container.css

@@ -0,0 +1,18 @@
+/**
+ * Seeds Container component class. Mirrors the container mixin from
+ * @sproutsocial/seeds-react-mixins.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * All rules are wrapped in @layer components so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-container {
+    background: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-outer);
+  }
+}

package/dist/esm/index.js

@@ -1,5 +1,8 @@
 // src/Container.tsx
-import * as React from "react";
+import * as React3 from "react";
+
+// src/ContainerHybrid.tsx
+import * as React2 from "react";
 
 // src/styles.tsx
 import styled from "styled-components";
@@ -10,11 +13,59 @@ var StyledContainer = styled(Box)`
 `;
 var styles_default = StyledContainer;
 
-// src/Container.tsx
+// src/ContainerTailwind.tsx
+import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-var Container = React.forwardRef(
+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);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var ContainerTailwind = React.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("seeds-container", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+ContainerTailwind.displayName = "ContainerTailwind";
+
+// src/ContainerHybrid.tsx
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ContainerHybrid = React2.forwardRef(
+  (props, ref) => {
+    if (needsStyledComponents(props)) {
+      return /* @__PURE__ */ jsx2(styles_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ jsx2(ContainerTailwind, { ...props, ref });
+  }
+);
+ContainerHybrid.displayName = "ContainerHybrid";
+var ContainerHybrid_default = ContainerHybrid;
+
+// src/Container.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Container = React3.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(styles_default, { ...props, ref });
+    return /* @__PURE__ */ jsx3(ContainerHybrid_default, { ...props, ref });
   }
 );
 Container.displayName = "Container";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Container.tsx","../../src/styles.tsx"],"sourcesContent":["import * as React from \"react\";\nimport StyledContainer from \"./styles\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst Container = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    return <StyledContainer {...props} ref={ref} />;\n  }\n);\n\nContainer.displayName = \"Container\";\n\nexport default Container;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { container } from \"@sproutsocial/seeds-react-mixins\";\n\nconst StyledContainer = styled(Box)<TypeBoxProps>`\n  ${container}\n`;\n\nexport default StyledContainer;\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,YAAY;AACnB,SAAS,WAAW;AAEpB,SAAS,iBAAiB;AAE1B,IAAM,kBAAkB,OAAO,GAAG;AAAA,IAC9B,SAAS;AAAA;AAGb,IAAO,iBAAQ;;;ADHJ;AAFX,IAAM,YAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,WAAO,oBAAC,kBAAiB,GAAG,OAAO,KAAU;AAAA,EAC/C;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":[]}
+{"version":3,"sources":["../../src/Container.tsx","../../src/ContainerHybrid.tsx","../../src/styles.tsx","../../src/ContainerTailwind.tsx"],"sourcesContent":["import * as React from \"react\";\nimport ContainerHybrid from \"./ContainerHybrid\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\n/**\n * Container component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Container = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    return <ContainerHybrid {...props} ref={ref} />;\n  }\n);\n\nContainer.displayName = \"Container\";\n\nexport default Container;\n","/**\n * Hybrid Container component.\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * as React from \"react\";\nimport StyledContainer from \"./styles\"; // Styled-components version\nimport { ContainerTailwind } from \"./ContainerTailwind\"; // Tailwind version\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst ContainerHybrid = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    // Styled-system props (p, m, color, width, position, …) and styled()\n    // extensions route through the styled-components path for backward\n    // compatibility. needsStyledComponents reliably hits the SC path for\n    // styled(Container) extensions, which hasStyledProps alone would miss.\n    if (needsStyledComponents(props)) {\n      return <StyledContainer {...props} ref={ref} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <ContainerTailwind {...props} ref={ref} />;\n  }\n);\n\nContainerHybrid.displayName = \"ContainerHybrid\";\n\nexport default ContainerHybrid;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { container } from \"@sproutsocial/seeds-react-mixins\";\n\nconst StyledContainer = styled(Box)<TypeBoxProps>`\n  ${container}\n`;\n\nexport default StyledContainer;\n","/**\n * Tailwind CSS implementation of the Container component.\n * Uses the Seeds container CSS class from container.css.\n */\n\nimport * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\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 ContainerTailwind = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ className, children, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-container\", className)}\n        {...(rest as React.ComponentPropsWithoutRef<\"div\">)}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nContainerTailwind.displayName = \"ContainerTailwind\";\n"],"mappings":";AAAA,YAAYA,YAAW;;;ACKvB,YAAYC,YAAW;;;ACLvB,OAAO,YAAY;AACnB,SAAS,WAAW;AAEpB,SAAS,iBAAiB;AAE1B,IAAM,kBAAkB,OAAO,GAAG;AAAA,IAC9B,SAAS;AAAA;AAGb,IAAO,iBAAQ;;;ACJf,YAAY,WAAW;AA6BjB;AAzBN,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,oBAA0B;AAAA,EACrC,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,GAAG,QAAQ;AACzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QACzC,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;;AFrChC,SAAS,6BAA6B;AAUzB,gBAAAC,YAAA;AAPb,IAAM,kBAAwB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AAKd,QAAI,sBAAsB,KAAK,GAAG;AAChC,aAAO,gBAAAA,KAAC,kBAAiB,GAAG,OAAO,KAAU;AAAA,IAC/C;AAGA,WAAO,gBAAAA,KAAC,qBAAmB,GAAG,OAAO,KAAU;AAAA,EACjD;AACF;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;;;ADjBJ,gBAAAC,YAAA;AAFX,IAAM,YAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,WAAO,gBAAAA,KAAC,2BAAiB,GAAG,OAAO,KAAU;AAAA,EAC/C;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":["React","React","jsx","jsx"]}

package/dist/index.d.mts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
+/**
+ * Container component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
 declare const Container: React.ForwardRefExoticComponent<Omit<TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { Container };

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
+/**
+ * Container component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
 declare const Container: React.ForwardRefExoticComponent<Omit<TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { Container };

package/dist/index.js

@@ -35,7 +35,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Container.tsx
-var React = __toESM(require("react"));
+var React3 = __toESM(require("react"));
+
+// src/ContainerHybrid.tsx
+var React2 = __toESM(require("react"));
 
 // src/styles.tsx
 var import_styled_components = __toESM(require("styled-components"));
@@ -46,11 +49,59 @@ var StyledContainer = (0, import_styled_components.default)(import_seeds_react_b
 `;
 var styles_default = StyledContainer;
 
-// src/Container.tsx
+// src/ContainerTailwind.tsx
+var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Container = React.forwardRef(
+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);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var ContainerTailwind = React.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("seeds-container", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+ContainerTailwind.displayName = "ContainerTailwind";
+
+// src/ContainerHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ContainerHybrid = React2.forwardRef(
+  (props, ref) => {
+    if ((0, import_seeds_react_system_props.needsStyledComponents)(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(styles_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContainerTailwind, { ...props, ref });
+  }
+);
+ContainerHybrid.displayName = "ContainerHybrid";
+var ContainerHybrid_default = ContainerHybrid;
+
+// src/Container.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Container = React3.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { ...props, ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ContainerHybrid_default, { ...props, ref });
   }
 );
 Container.displayName = "Container";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Container.tsx","../src/styles.tsx"],"sourcesContent":["import Container from \"./Container\";\n\nexport { Container };\n","import * as React from \"react\";\nimport StyledContainer from \"./styles\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst Container = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    return <StyledContainer {...props} ref={ref} />;\n  }\n);\n\nContainer.displayName = \"Container\";\n\nexport default Container;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { container } from \"@sproutsocial/seeds-react-mixins\";\n\nconst StyledContainer = styled(Box)<TypeBoxProps>`\n  ${container}\n`;\n\nexport default StyledContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,6BAAoB;AAEpB,gCAA0B;AAE1B,IAAM,sBAAkB,yBAAAA,SAAO,0BAAG;AAAA,IAC9B,mCAAS;AAAA;AAGb,IAAO,iBAAQ;;;ADHJ;AAFX,IAAM,YAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,WAAO,4CAAC,kBAAiB,GAAG,OAAO,KAAU;AAAA,EAC/C;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":["styled"]}
+{"version":3,"sources":["../src/index.ts","../src/Container.tsx","../src/ContainerHybrid.tsx","../src/styles.tsx","../src/ContainerTailwind.tsx"],"sourcesContent":["import Container from \"./Container\";\n\nexport { Container };\n","import * as React from \"react\";\nimport ContainerHybrid from \"./ContainerHybrid\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\n/**\n * Container component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or a styled() extension).\n */\nconst Container = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    return <ContainerHybrid {...props} ref={ref} />;\n  }\n);\n\nContainer.displayName = \"Container\";\n\nexport default Container;\n","/**\n * Hybrid Container component.\n * Automatically chooses between Tailwind and styled-components based on props.\n */\n\nimport * as React from \"react\";\nimport StyledContainer from \"./styles\"; // Styled-components version\nimport { ContainerTailwind } from \"./ContainerTailwind\"; // Tailwind version\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst ContainerHybrid = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    // Styled-system props (p, m, color, width, position, …) and styled()\n    // extensions route through the styled-components path for backward\n    // compatibility. needsStyledComponents reliably hits the SC path for\n    // styled(Container) extensions, which hasStyledProps alone would miss.\n    if (needsStyledComponents(props)) {\n      return <StyledContainer {...props} ref={ref} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <ContainerTailwind {...props} ref={ref} />;\n  }\n);\n\nContainerHybrid.displayName = \"ContainerHybrid\";\n\nexport default ContainerHybrid;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport { container } from \"@sproutsocial/seeds-react-mixins\";\n\nconst StyledContainer = styled(Box)<TypeBoxProps>`\n  ${container}\n`;\n\nexport default StyledContainer;\n","/**\n * Tailwind CSS implementation of the Container component.\n * Uses the Seeds container CSS class from container.css.\n */\n\nimport * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\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 ContainerTailwind = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  ({ className, children, ...rest }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"seeds-container\", className)}\n        {...(rest as React.ComponentPropsWithoutRef<\"div\">)}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nContainerTailwind.displayName = \"ContainerTailwind\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACKvB,IAAAC,SAAuB;;;ACLvB,+BAAmB;AACnB,6BAAoB;AAEpB,gCAA0B;AAE1B,IAAM,sBAAkB,yBAAAC,SAAO,0BAAG;AAAA,IAC9B,mCAAS;AAAA;AAGb,IAAO,iBAAQ;;;ACJf,YAAuB;AA6BjB;AAzBN,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,oBAA0B;AAAA,EACrC,CAAC,EAAE,WAAW,UAAU,GAAG,KAAK,GAAG,QAAQ;AACzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QACzC,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;;;AFrChC,sCAAsC;AAUzB,IAAAC,sBAAA;AAPb,IAAM,kBAAwB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AAKd,YAAI,uDAAsB,KAAK,GAAG;AAChC,aAAO,6CAAC,kBAAiB,GAAG,OAAO,KAAU;AAAA,IAC/C;AAGA,WAAO,6CAAC,qBAAmB,GAAG,OAAO,KAAU;AAAA,EACjD;AACF;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;;;ADjBJ,IAAAC,sBAAA;AAFX,IAAM,YAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,WAAO,6CAAC,2BAAiB,GAAG,OAAO,KAAU;AAAA,EAC/C;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":["React","React","styled","import_jsx_runtime","import_jsx_runtime"]}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@sproutsocial/seeds-react-container",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "description": "Seeds React Container",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/container.css": "./dist/container.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/container.css dist/container.css",
+    "build:debug": "tsup --dts --metafile && cp src/container.css dist/container.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,10 +26,10 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.25",
-    "@sproutsocial/seeds-react-mixins": "^4.3.10",
-    "@sproutsocial/seeds-react-theme": "^4.2.1",
-    "@sproutsocial/seeds-react-system-props": "^3.1.2"
+    "@sproutsocial/seeds-react-box": "^1.1.26",
+    "@sproutsocial/seeds-react-mixins": "^4.3.11",
+    "@sproutsocial/seeds-react-theme": "^4.3.0",
+    "@sproutsocial/seeds-react-system-props": "^3.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Container.stories.tsx

@@ -15,3 +15,12 @@ export const Default: Story = {
   },
   render: (args) => <Container p={400} {...args} />,
 };
+
+// No system props → renders the Tailwind path. Customize via className using
+// Seeds Tailwind utilities instead of styled-system props.
+export const Tailwind: Story = {
+  args: {
+    children: "This is a Tailwind container.",
+  },
+  render: (args) => <Container className="p-400" {...args} />,
+};

package/src/Container.tsx

@@ -1,10 +1,15 @@
 import * as React from "react";
-import StyledContainer from "./styles";
+import ContainerHybrid from "./ContainerHybrid";
 import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
 
+/**
+ * Container component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
 const Container = React.forwardRef<HTMLDivElement, TypeBoxProps>(
   (props, ref) => {
-    return <StyledContainer {...props} ref={ref} />;
+    return <ContainerHybrid {...props} ref={ref} />;
   }
 );
 

package/src/ContainerHybrid.tsx

@@ -0,0 +1,29 @@
+/**
+ * Hybrid Container component.
+ * Automatically chooses between Tailwind and styled-components based on props.
+ */
+
+import * as React from "react";
+import StyledContainer from "./styles"; // Styled-components version
+import { ContainerTailwind } from "./ContainerTailwind"; // Tailwind version
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+const ContainerHybrid = React.forwardRef<HTMLDivElement, TypeBoxProps>(
+  (props, ref) => {
+    // Styled-system props (p, m, color, width, position, …) and styled()
+    // extensions route through the styled-components path for backward
+    // compatibility. needsStyledComponents reliably hits the SC path for
+    // styled(Container) extensions, which hasStyledProps alone would miss.
+    if (needsStyledComponents(props)) {
+      return <StyledContainer {...props} ref={ref} />;
+    }
+
+    // Use Tailwind version (preferred - better performance)
+    return <ContainerTailwind {...props} ref={ref} />;
+  }
+);
+
+ContainerHybrid.displayName = "ContainerHybrid";
+
+export default ContainerHybrid;

package/src/ContainerTailwind.tsx

@@ -0,0 +1,46 @@
+/**
+ * Tailwind CSS implementation of the Container component.
+ * Uses the Seeds container CSS class from container.css.
+ */
+
+import * as React from "react";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  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);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+export const ContainerTailwind = React.forwardRef<HTMLDivElement, TypeBoxProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("seeds-container", className)}
+        {...(rest as React.ComponentPropsWithoutRef<"div">)}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ContainerTailwind.displayName = "ContainerTailwind";

package/src/__tests__/container.test.tsx

@@ -7,4 +7,41 @@ describe("Container", () => {
 
     expect(screen.getByText("Test...")).toBeInTheDocument();
   });
+
+  describe("Tailwind path (no system props)", () => {
+    it("renders with the seeds-container class", () => {
+      render(<Container>Test...</Container>);
+
+      expect(screen.getByText("Test...")).toHaveClass("seeds-container");
+    });
+
+    it("merges consumer className", () => {
+      render(<Container className="custom">Test...</Container>);
+
+      const container = screen.getByText("Test...");
+      expect(container).toHaveClass("seeds-container");
+      expect(container).toHaveClass("custom");
+    });
+  });
+
+  describe("styled-components path (system props)", () => {
+    it("renders the styled-components path with padding", () => {
+      render(<Container p={400}>Test...</Container>);
+
+      expect(screen.getByText("Test...")).toHaveStyleRule("padding", "16px");
+    });
+
+    it("routes position props through the styled-components path", () => {
+      render(
+        <Container position="absolute" top={0} zIndex={2}>
+          Test...
+        </Container>
+      );
+
+      const container = screen.getByText("Test...");
+      expect(container).not.toHaveClass("seeds-container");
+      expect(container).toHaveStyleRule("position", "absolute");
+      expect(container).toHaveStyleRule("z-index", "2");
+    });
+  });
 });

package/src/container.css

@@ -0,0 +1,18 @@
+/**
+ * Seeds Container component class. Mirrors the container mixin from
+ * @sproutsocial/seeds-react-mixins.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * All rules are wrapped in @layer components so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-container {
+    background: var(--color-container-bg-base);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-outer);
+  }
+}