@sproutsocial/seeds-react-empty-state 1.0.30 → 1.0.31

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/empty-state.css dist/empty-state.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     3.67 KB
-CJS dist/index.js.map 3.41 KB
-CJS ⚡️ Build success in 17ms
-ESM dist/esm/index.js     1.66 KB
-ESM dist/esm/index.js.map 3.27 KB
-ESM ⚡️ Build success in 18ms
+CJS dist/index.js     7.43 KB
+CJS dist/index.js.map 9.54 KB
+CJS ⚡️ Build success in 23ms
+ESM dist/esm/index.js     4.98 KB
+ESM dist/esm/index.js.map 9.44 KB
+ESM ⚡️ Build success in 23ms
 DTS Build start
-DTS ⚡️ Build success in 4584ms
-DTS dist/index.d.ts  858.00 B
-DTS dist/index.d.mts 858.00 B
-Done in 6.21s.
+DTS ⚡️ Build success in 1399ms
+DTS dist/index.d.ts  878.00 B
+DTS dist/index.d.mts 878.00 B
+Done in 2.12s.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sproutsocial/seeds-react-empty-state
 
+## 1.0.31
+
+### Patch Changes
+
+- a635951: Migrate EmptyState to the hybrid Tailwind rendering pattern: renders via Tailwind / seeds-\* classes by default and falls back to styled-components for styled-system props, mixin props, and styled() extensions. No public API changes.
+
 ## 1.0.30
 
 ### Patch Changes

package/dist/empty-state.css

@@ -0,0 +1,68 @@
+/**
+ * Seeds EmptyState component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-empty-state">...</div>
+ *
+ * Rules live in @layer components so that consumer Tailwind utilities
+ * (e.g. mx-200, p-300) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-empty-state {
+    max-width: 400px;
+    margin-inline: auto;
+  }
+
+  .seeds-empty-state-media {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: var(--space-450);
+  }
+
+  .seeds-empty-state-content {
+    text-align: center;
+  }
+
+  .seeds-empty-state-headline {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-headline);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+  }
+
+  .seeds-empty-state-subtext {
+    margin: 0;
+    margin-top: var(--space-400);
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-subtext);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .seeds-empty-state-actions {
+    margin-top: var(--space-450);
+  }
+
+  /* -empty MUST follow the base rule: equal specificity, source order wins */
+  .seeds-empty-state-actions-empty {
+    margin-top: 0;
+  }
+
+  .seeds-empty-state-secondary-action {
+    margin-top: var(--space-400);
+  }
+}

package/dist/esm/index.js

@@ -1,52 +1,147 @@
 // src/EmptyState.tsx
+import React4, { memo } from "react";
+
+// src/EmptyStateHybrid.tsx
+import React3 from "react";
+import {
+  hasStyledProps,
+  isStyledExtension
+} from "@sproutsocial/seeds-react-system-props";
+
+// src/EmptyStateStyled.tsx
 import * as React from "react";
 import Box from "@sproutsocial/seeds-react-box";
 import Text from "@sproutsocial/seeds-react-text";
 import { jsx, jsxs } from "react/jsx-runtime";
-var EmptyState = ({
-  media,
-  headline,
-  subtext,
-  primaryAction,
-  secondaryAction,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxs(Box, { maxWidth: "400px", mx: "auto", "data-qa-emptystate": headline, ...rest, children: [
-    media && /* @__PURE__ */ jsx(
+var EmptyStateStyled = React.forwardRef(
+  ({ media, headline, subtext, primaryAction, secondaryAction, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs(
       Box,
       {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        mb: 450,
-        children: media
+        ref,
+        maxWidth: "400px",
+        mx: "auto",
+        "data-qa-emptystate": headline,
+        ...rest,
+        children: [
+          media && /* @__PURE__ */ jsx(
+            Box,
+            {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              mb: 450,
+              children: media
+            }
+          ),
+          /* @__PURE__ */ jsxs(Text, { as: "div", textAlign: "center", children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "p",
+                m: 0,
+                color: "text.headline",
+                fontWeight: "semibold",
+                fontSize: 400,
+                children: headline
+              }
+            ),
+            subtext && /* @__PURE__ */ jsx(Text, { as: "p", color: "text.subtext", fontSize: 200, mb: 0, mt: 400, children: subtext }),
+            /* @__PURE__ */ jsxs(Box, { mt: primaryAction || secondaryAction ? 450 : 0, children: [
+              primaryAction && React.cloneElement(primaryAction, {
+                appearance: "primary"
+              }),
+              secondaryAction && /* @__PURE__ */ jsx(Box, { mt: 400, children: React.cloneElement(secondaryAction, {
+                appearance: "unstyled"
+              }) })
+            ] })
+          ] })
+        ]
       }
-    ),
-    /* @__PURE__ */ jsxs(Text, { as: "div", textAlign: "center", children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          as: "p",
-          m: 0,
-          color: "text.headline",
-          fontWeight: "semibold",
-          fontSize: 400,
-          children: headline
+    );
+  }
+);
+EmptyStateStyled.displayName = "EmptyState";
+var EmptyStateStyled_default = EmptyStateStyled;
+
+// src/EmptyStateTailwind.tsx
+import React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } 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);
         }
-      ),
-      subtext && /* @__PURE__ */ jsx(Text, { as: "p", color: "text.subtext", fontSize: 200, mb: 0, mt: 400, children: subtext }),
-      /* @__PURE__ */ jsxs(Box, { mt: primaryAction || secondaryAction ? 450 : 0, children: [
-        primaryAction && React.cloneElement(primaryAction, {
-          appearance: "primary"
-        }),
-        secondaryAction && /* @__PURE__ */ jsx(Box, { mt: 400, children: React.cloneElement(secondaryAction, {
-          appearance: "unstyled"
-        }) })
-      ] })
-    ] })
-  ] });
-};
-var EmptyState_default = EmptyState;
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var EmptyStateTailwind = React2.forwardRef(
+  ({ media, headline, subtext, primaryAction, secondaryAction, className, ...rest }, ref) => {
+    const hasAction = Boolean(primaryAction || secondaryAction);
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "data-qa-emptystate": headline,
+        ...rest,
+        ref,
+        className: cn("seeds-empty-state", className),
+        children: [
+          media && /* @__PURE__ */ jsx2("div", { className: "seeds-empty-state-media", children: media }),
+          /* @__PURE__ */ jsxs2("div", { className: "seeds-empty-state-content", children: [
+            /* @__PURE__ */ jsx2("p", { className: "seeds-empty-state-headline", children: headline }),
+            subtext && /* @__PURE__ */ jsx2("p", { className: "seeds-empty-state-subtext", children: subtext }),
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: cn("seeds-empty-state-actions", {
+                  "seeds-empty-state-actions-empty": !hasAction
+                }),
+                children: [
+                  primaryAction && React2.cloneElement(primaryAction, {
+                    appearance: "primary"
+                  }),
+                  secondaryAction && /* @__PURE__ */ jsx2("div", { className: "seeds-empty-state-secondary-action", children: React2.cloneElement(secondaryAction, {
+                    appearance: "unstyled"
+                  }) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+EmptyStateTailwind.displayName = "EmptyStateTailwind";
+
+// src/EmptyStateHybrid.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var EmptyStateHybrid = React3.forwardRef(
+  (props, ref) => {
+    if (hasStyledProps(props) || isStyledExtension(props)) {
+      return /* @__PURE__ */ jsx3(EmptyStateStyled_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ jsx3(EmptyStateTailwind, { ...props, ref });
+  }
+);
+EmptyStateHybrid.displayName = "EmptyState";
+var EmptyStateHybrid_default = EmptyStateHybrid;
+
+// src/EmptyState.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var EmptyState = React4.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx4(EmptyStateHybrid_default, { ...props, ref })
+);
+EmptyState.displayName = "EmptyState";
+var EmptyState_default = memo(EmptyState);
 
 // src/EmptyStateTypes.ts
 import "react";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EmptyState.tsx","../../src/EmptyStateTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyState = ({\n  media,\n  headline,\n  subtext,\n  primaryAction,\n  secondaryAction,\n  ...rest\n}: TypeEmptyStateProps) => {\n  return (\n    <Box maxWidth=\"400px\" mx=\"auto\" data-qa-emptystate={headline} {...rest}>\n      {media && (\n        <Box\n          display=\"flex\"\n          flexDirection=\"column\"\n          justifyContent=\"center\"\n          mb={450}\n        >\n          {media}\n        </Box>\n      )}\n\n      <Text as=\"div\" textAlign=\"center\">\n        <Text\n          as=\"p\"\n          m={0}\n          color=\"text.headline\"\n          fontWeight=\"semibold\"\n          fontSize={400}\n        >\n          {headline}\n        </Text>\n\n        {subtext && (\n          <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n            {subtext}\n          </Text>\n        )}\n\n        <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n          {primaryAction &&\n            React.cloneElement(primaryAction, {\n              appearance: \"primary\",\n            })}\n\n          {secondaryAction && (\n            <Box mt={400}>\n              {React.cloneElement(secondaryAction, {\n                appearance: \"unstyled\",\n              })}\n            </Box>\n          )}\n        </Box>\n      </Text>\n    </Box>\n  );\n};\n\nexport default EmptyState;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n  /** An image in (preferably in SVG format) */\n  media?: React.ReactNode;\n\n  /** A headline describing the empty state */\n  headline: React.ReactNode;\n\n  /** Optional description of the empty state */\n  subtext?: React.ReactNode;\n\n  /** Element for the primary call-to-action */\n  primaryAction?: React.ReactElement;\n\n  /** Element for any secondary call-to-action */\n  secondaryAction?: React.ReactElement;\n}\n","import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,OAAO,SAAS;AAEhB,OAAO,UAAU;AAcT,cA2BA,YA3BA;AAXR,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACE,qBAAC,OAAI,UAAS,SAAQ,IAAG,QAAO,sBAAoB,UAAW,GAAG,MAC/D;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,IAAI;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IAGF,qBAAC,QAAK,IAAG,OAAM,WAAU,UACvB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH,GAAG;AAAA,UACH,OAAM;AAAA,UACN,YAAW;AAAA,UACX,UAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAEC,WACC,oBAAC,QAAK,IAAG,KAAI,OAAM,gBAAe,UAAU,KAAK,IAAI,GAAG,IAAI,KACzD,mBACH;AAAA,MAGF,qBAAC,OAAI,IAAI,iBAAiB,kBAAkB,MAAM,GAC/C;AAAA,yBACO,mBAAa,eAAe;AAAA,UAChC,YAAY;AAAA,QACd,CAAC;AAAA,QAEF,mBACC,oBAAC,OAAI,IAAI,KACN,UAAM,mBAAa,iBAAiB;AAAA,UACnC,YAAY;AAAA,QACd,CAAC,GACH;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,qBAAQ;;;AC/Df,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../src/EmptyState.tsx","../../src/EmptyStateHybrid.tsx","../../src/EmptyStateStyled.tsx","../../src/EmptyStateTailwind.tsx","../../src/EmptyStateTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { memo } from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateHybrid from \"./EmptyStateHybrid\";\n\n/**\n * EmptyState component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or a styled() extension).\n */\nconst EmptyState = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n  (props, ref) => <EmptyStateHybrid {...props} ref={ref} />\n);\n\nEmptyState.displayName = \"EmptyState\";\n\nexport default memo(EmptyState);\n","/**\n * Hybrid EmptyState Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path.\n *\n * No mixin check is needed: EmptyState's root applies no standalone mixin\n * beyond the styled-system set, so hasStyledProps covers every routing prop.\n */\n\nimport React from \"react\";\nimport {\n  hasStyledProps,\n  isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateStyled from \"./EmptyStateStyled\"; // Styled-components version\nimport { EmptyStateTailwind } from \"./EmptyStateTailwind\"; // Tailwind version\n\nconst EmptyStateHybrid = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n  (props, ref) => {\n    if (hasStyledProps(props) || isStyledExtension(props)) {\n      return <EmptyStateStyled {...props} ref={ref} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <EmptyStateTailwind {...props} ref={ref} />;\n  }\n);\n\nEmptyStateHybrid.displayName = \"EmptyState\";\nexport default EmptyStateHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyStateStyled = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n  (\n    { media, headline, subtext, primaryAction, secondaryAction, ...rest },\n    ref\n  ) => {\n    return (\n      <Box\n        ref={ref}\n        maxWidth=\"400px\"\n        mx=\"auto\"\n        data-qa-emptystate={headline}\n        {...rest}\n      >\n        {media && (\n          <Box\n            display=\"flex\"\n            flexDirection=\"column\"\n            justifyContent=\"center\"\n            mb={450}\n          >\n            {media}\n          </Box>\n        )}\n\n        <Text as=\"div\" textAlign=\"center\">\n          <Text\n            as=\"p\"\n            m={0}\n            color=\"text.headline\"\n            fontWeight=\"semibold\"\n            fontSize={400}\n          >\n            {headline}\n          </Text>\n\n          {subtext && (\n            <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n              {subtext}\n            </Text>\n          )}\n\n          <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n            {primaryAction &&\n              React.cloneElement(primaryAction, {\n                appearance: \"primary\",\n              })}\n\n            {secondaryAction && (\n              <Box mt={400}>\n                {React.cloneElement(secondaryAction, {\n                  appearance: \"unstyled\",\n                })}\n              </Box>\n            )}\n          </Box>\n        </Text>\n      </Box>\n    );\n  }\n);\n\nEmptyStateStyled.displayName = \"EmptyState\";\n\nexport default EmptyStateStyled;\n","/**\n * Tailwind CSS implementation of EmptyState component\n * Uses Seeds empty-state CSS classes from empty-state.css\n */\n\nimport React from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\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 EmptyStateTailwind = React.forwardRef<\n  HTMLDivElement,\n  TypeEmptyStateProps\n>(\n  (\n    { media, headline, subtext, primaryAction, secondaryAction, className, ...rest },\n    ref\n  ) => {\n    const hasAction = Boolean(primaryAction || secondaryAction);\n\n    return (\n      <div\n        data-qa-emptystate={headline}\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n        ref={ref}\n        className={cn(\"seeds-empty-state\", className)}\n      >\n        {media && <div className=\"seeds-empty-state-media\">{media}</div>}\n\n        <div className=\"seeds-empty-state-content\">\n          <p className=\"seeds-empty-state-headline\">{headline}</p>\n\n          {subtext && <p className=\"seeds-empty-state-subtext\">{subtext}</p>}\n\n          <div\n            className={cn(\"seeds-empty-state-actions\", {\n              \"seeds-empty-state-actions-empty\": !hasAction,\n            })}\n          >\n            {primaryAction &&\n              React.cloneElement(primaryAction, {\n                appearance: \"primary\",\n              })}\n\n            {secondaryAction && (\n              <div className=\"seeds-empty-state-secondary-action\">\n                {React.cloneElement(secondaryAction, {\n                  appearance: \"unstyled\",\n                })}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nEmptyStateTailwind.displayName = \"EmptyStateTailwind\";\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n  /** An image in (preferably in SVG format) */\n  media?: React.ReactNode;\n\n  /** A headline describing the empty state */\n  headline: React.ReactNode;\n\n  /** Optional description of the empty state */\n  subtext?: React.ReactNode;\n\n  /** Element for the primary call-to-action */\n  primaryAction?: React.ReactElement;\n\n  /** Element for any secondary call-to-action */\n  secondaryAction?: React.ReactElement;\n}\n","import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n"],"mappings":"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","names":["React","React","React","jsx","jsxs","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 { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
 interface TypeEmptyStateProps extends TypeBoxProps {
@@ -15,6 +15,6 @@ interface TypeEmptyStateProps extends TypeBoxProps {
     secondaryAction?: React.ReactElement;
 }
 
-declare const EmptyState: ({ media, headline, subtext, primaryAction, secondaryAction, ...rest }: TypeEmptyStateProps) => react_jsx_runtime.JSX.Element;
+declare const _default: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<TypeEmptyStateProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>>;
 
-export { EmptyState, type TypeEmptyStateProps, EmptyState as default };
+export { _default as EmptyState, type TypeEmptyStateProps, _default 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 { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
 interface TypeEmptyStateProps extends TypeBoxProps {
@@ -15,6 +15,6 @@ interface TypeEmptyStateProps extends TypeBoxProps {
     secondaryAction?: React.ReactElement;
 }
 
-declare const EmptyState: ({ media, headline, subtext, primaryAction, secondaryAction, ...rest }: TypeEmptyStateProps) => react_jsx_runtime.JSX.Element;
+declare const _default: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Omit<TypeEmptyStateProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>>;
 
-export { EmptyState, type TypeEmptyStateProps, EmptyState as default };
+export { _default as EmptyState, type TypeEmptyStateProps, _default as default };

package/dist/index.js

@@ -36,57 +36,149 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/EmptyState.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/EmptyStateHybrid.tsx
+var import_react2 = __toESM(require("react"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+
+// src/EmptyStateStyled.tsx
 var React = __toESM(require("react"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var EmptyState = ({
-  media,
-  headline,
-  subtext,
-  primaryAction,
-  secondaryAction,
-  ...rest
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { maxWidth: "400px", mx: "auto", "data-qa-emptystate": headline, ...rest, children: [
-    media && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var EmptyStateStyled = React.forwardRef(
+  ({ media, headline, subtext, primaryAction, secondaryAction, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_seeds_react_box.default,
       {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        mb: 450,
-        children: media
+        ref,
+        maxWidth: "400px",
+        mx: "auto",
+        "data-qa-emptystate": headline,
+        ...rest,
+        children: [
+          media && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_seeds_react_box.default,
+            {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              mb: 450,
+              children: media
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_text.default, { as: "div", textAlign: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_seeds_react_text.default,
+              {
+                as: "p",
+                m: 0,
+                color: "text.headline",
+                fontWeight: "semibold",
+                fontSize: 400,
+                children: headline
+              }
+            ),
+            subtext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "p", color: "text.subtext", fontSize: 200, mb: 0, mt: 400, children: subtext }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { mt: primaryAction || secondaryAction ? 450 : 0, children: [
+              primaryAction && React.cloneElement(primaryAction, {
+                appearance: "primary"
+              }),
+              secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { mt: 400, children: React.cloneElement(secondaryAction, {
+                appearance: "unstyled"
+              }) })
+            ] })
+          ] })
+        ]
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_text.default, { as: "div", textAlign: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_seeds_react_text.default,
-        {
-          as: "p",
-          m: 0,
-          color: "text.headline",
-          fontWeight: "semibold",
-          fontSize: 400,
-          children: headline
+    );
+  }
+);
+EmptyStateStyled.displayName = "EmptyState";
+var EmptyStateStyled_default = EmptyStateStyled;
+
+// src/EmptyStateTailwind.tsx
+var import_react = __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);
         }
-      ),
-      subtext && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.default, { as: "p", color: "text.subtext", fontSize: 200, mb: 0, mt: 400, children: subtext }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { mt: primaryAction || secondaryAction ? 450 : 0, children: [
-        primaryAction && React.cloneElement(primaryAction, {
-          appearance: "primary"
-        }),
-        secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { mt: 400, children: React.cloneElement(secondaryAction, {
-          appearance: "unstyled"
-        }) })
-      ] })
-    ] })
-  ] });
-};
-var EmptyState_default = EmptyState;
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var EmptyStateTailwind = import_react.default.forwardRef(
+  ({ media, headline, subtext, primaryAction, secondaryAction, className, ...rest }, ref) => {
+    const hasAction = Boolean(primaryAction || secondaryAction);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        "data-qa-emptystate": headline,
+        ...rest,
+        ref,
+        className: cn("seeds-empty-state", className),
+        children: [
+          media && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "seeds-empty-state-media", children: media }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "seeds-empty-state-content", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "seeds-empty-state-headline", children: headline }),
+            subtext && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "seeds-empty-state-subtext", children: subtext }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                className: cn("seeds-empty-state-actions", {
+                  "seeds-empty-state-actions-empty": !hasAction
+                }),
+                children: [
+                  primaryAction && import_react.default.cloneElement(primaryAction, {
+                    appearance: "primary"
+                  }),
+                  secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "seeds-empty-state-secondary-action", children: import_react.default.cloneElement(secondaryAction, {
+                    appearance: "unstyled"
+                  }) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+EmptyStateTailwind.displayName = "EmptyStateTailwind";
+
+// src/EmptyStateHybrid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EmptyStateHybrid = import_react2.default.forwardRef(
+  (props, ref) => {
+    if ((0, import_seeds_react_system_props.hasStyledProps)(props) || (0, import_seeds_react_system_props.isStyledExtension)(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EmptyStateStyled_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EmptyStateTailwind, { ...props, ref });
+  }
+);
+EmptyStateHybrid.displayName = "EmptyState";
+var EmptyStateHybrid_default = EmptyStateHybrid;
+
+// src/EmptyState.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var EmptyState = import_react3.default.forwardRef(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EmptyStateHybrid_default, { ...props, ref })
+);
+EmptyState.displayName = "EmptyState";
+var EmptyState_default = (0, import_react3.memo)(EmptyState);
 
 // src/EmptyStateTypes.ts
-var React2 = require("react");
+var React5 = require("react");
 
 // src/index.ts
 var index_default = EmptyState_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/EmptyState.tsx","../src/EmptyStateTypes.ts"],"sourcesContent":["import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyState = ({\n  media,\n  headline,\n  subtext,\n  primaryAction,\n  secondaryAction,\n  ...rest\n}: TypeEmptyStateProps) => {\n  return (\n    <Box maxWidth=\"400px\" mx=\"auto\" data-qa-emptystate={headline} {...rest}>\n      {media && (\n        <Box\n          display=\"flex\"\n          flexDirection=\"column\"\n          justifyContent=\"center\"\n          mb={450}\n        >\n          {media}\n        </Box>\n      )}\n\n      <Text as=\"div\" textAlign=\"center\">\n        <Text\n          as=\"p\"\n          m={0}\n          color=\"text.headline\"\n          fontWeight=\"semibold\"\n          fontSize={400}\n        >\n          {headline}\n        </Text>\n\n        {subtext && (\n          <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n            {subtext}\n          </Text>\n        )}\n\n        <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n          {primaryAction &&\n            React.cloneElement(primaryAction, {\n              appearance: \"primary\",\n            })}\n\n          {secondaryAction && (\n            <Box mt={400}>\n              {React.cloneElement(secondaryAction, {\n                appearance: \"unstyled\",\n              })}\n            </Box>\n          )}\n        </Box>\n      </Text>\n    </Box>\n  );\n};\n\nexport default EmptyState;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n  /** An image in (preferably in SVG format) */\n  media?: React.ReactNode;\n\n  /** A headline describing the empty state */\n  headline: React.ReactNode;\n\n  /** Optional description of the empty state */\n  subtext?: React.ReactNode;\n\n  /** Element for the primary call-to-action */\n  primaryAction?: React.ReactElement;\n\n  /** Element for any secondary call-to-action */\n  secondaryAction?: React.ReactElement;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAgB;AAEhB,8BAAiB;AAcT;AAXR,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACE,6CAAC,uBAAAA,SAAA,EAAI,UAAS,SAAQ,IAAG,QAAO,sBAAoB,UAAW,GAAG,MAC/D;AAAA,aACC;AAAA,MAAC,uBAAAA;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAc;AAAA,QACd,gBAAe;AAAA,QACf,IAAI;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IAGF,6CAAC,wBAAAC,SAAA,EAAK,IAAG,OAAM,WAAU,UACvB;AAAA;AAAA,QAAC,wBAAAA;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,GAAG;AAAA,UACH,OAAM;AAAA,UACN,YAAW;AAAA,UACX,UAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAEC,WACC,4CAAC,wBAAAA,SAAA,EAAK,IAAG,KAAI,OAAM,gBAAe,UAAU,KAAK,IAAI,GAAG,IAAI,KACzD,mBACH;AAAA,MAGF,6CAAC,uBAAAD,SAAA,EAAI,IAAI,iBAAiB,kBAAkB,MAAM,GAC/C;AAAA,yBACO,mBAAa,eAAe;AAAA,UAChC,YAAY;AAAA,QACd,CAAC;AAAA,QAEF,mBACC,4CAAC,uBAAAA,SAAA,EAAI,IAAI,KACN,UAAM,mBAAa,iBAAiB;AAAA,UACnC,YAAY;AAAA,QACd,CAAC,GACH;AAAA,SAEJ;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,qBAAQ;;;AC/Df,IAAAE,SAAuB;;;AFEvB,IAAO,gBAAQ;","names":["Box","Text","React"]}
+{"version":3,"sources":["../src/index.ts","../src/EmptyState.tsx","../src/EmptyStateHybrid.tsx","../src/EmptyStateStyled.tsx","../src/EmptyStateTailwind.tsx","../src/EmptyStateTypes.ts"],"sourcesContent":["import EmptyState from \"./EmptyState\";\n\nexport default EmptyState;\nexport { EmptyState };\nexport * from \"./EmptyStateTypes\";\n","import React, { memo } from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateHybrid from \"./EmptyStateHybrid\";\n\n/**\n * EmptyState component. Automatically routes between the Tailwind\n * implementation (preferred) and the styled-components implementation (for\n * consumers using styled-system props or a styled() extension).\n */\nconst EmptyState = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n  (props, ref) => <EmptyStateHybrid {...props} ref={ref} />\n);\n\nEmptyState.displayName = \"EmptyState\";\n\nexport default memo(EmptyState);\n","/**\n * Hybrid EmptyState Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps) or the component was extended with styled()\n * (isStyledExtension). Otherwise renders the Tailwind path.\n *\n * No mixin check is needed: EmptyState's root applies no standalone mixin\n * beyond the styled-system set, so hasStyledProps covers every routing prop.\n */\n\nimport React from \"react\";\nimport {\n  hasStyledProps,\n  isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\nimport EmptyStateStyled from \"./EmptyStateStyled\"; // Styled-components version\nimport { EmptyStateTailwind } from \"./EmptyStateTailwind\"; // Tailwind version\n\nconst EmptyStateHybrid = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n  (props, ref) => {\n    if (hasStyledProps(props) || isStyledExtension(props)) {\n      return <EmptyStateStyled {...props} ref={ref} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <EmptyStateTailwind {...props} ref={ref} />;\n  }\n);\n\nEmptyStateHybrid.displayName = \"EmptyState\";\nexport default EmptyStateHybrid;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\n\nconst EmptyStateStyled = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(\n  (\n    { media, headline, subtext, primaryAction, secondaryAction, ...rest },\n    ref\n  ) => {\n    return (\n      <Box\n        ref={ref}\n        maxWidth=\"400px\"\n        mx=\"auto\"\n        data-qa-emptystate={headline}\n        {...rest}\n      >\n        {media && (\n          <Box\n            display=\"flex\"\n            flexDirection=\"column\"\n            justifyContent=\"center\"\n            mb={450}\n          >\n            {media}\n          </Box>\n        )}\n\n        <Text as=\"div\" textAlign=\"center\">\n          <Text\n            as=\"p\"\n            m={0}\n            color=\"text.headline\"\n            fontWeight=\"semibold\"\n            fontSize={400}\n          >\n            {headline}\n          </Text>\n\n          {subtext && (\n            <Text as=\"p\" color=\"text.subtext\" fontSize={200} mb={0} mt={400}>\n              {subtext}\n            </Text>\n          )}\n\n          <Box mt={primaryAction || secondaryAction ? 450 : 0}>\n            {primaryAction &&\n              React.cloneElement(primaryAction, {\n                appearance: \"primary\",\n              })}\n\n            {secondaryAction && (\n              <Box mt={400}>\n                {React.cloneElement(secondaryAction, {\n                  appearance: \"unstyled\",\n                })}\n              </Box>\n            )}\n          </Box>\n        </Text>\n      </Box>\n    );\n  }\n);\n\nEmptyStateStyled.displayName = \"EmptyState\";\n\nexport default EmptyStateStyled;\n","/**\n * Tailwind CSS implementation of EmptyState component\n * Uses Seeds empty-state CSS classes from empty-state.css\n */\n\nimport React from \"react\";\n\nimport type { TypeEmptyStateProps } from \"./EmptyStateTypes\";\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 EmptyStateTailwind = React.forwardRef<\n  HTMLDivElement,\n  TypeEmptyStateProps\n>(\n  (\n    { media, headline, subtext, primaryAction, secondaryAction, className, ...rest },\n    ref\n  ) => {\n    const hasAction = Boolean(primaryAction || secondaryAction);\n\n    return (\n      <div\n        data-qa-emptystate={headline}\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n        ref={ref}\n        className={cn(\"seeds-empty-state\", className)}\n      >\n        {media && <div className=\"seeds-empty-state-media\">{media}</div>}\n\n        <div className=\"seeds-empty-state-content\">\n          <p className=\"seeds-empty-state-headline\">{headline}</p>\n\n          {subtext && <p className=\"seeds-empty-state-subtext\">{subtext}</p>}\n\n          <div\n            className={cn(\"seeds-empty-state-actions\", {\n              \"seeds-empty-state-actions-empty\": !hasAction,\n            })}\n          >\n            {primaryAction &&\n              React.cloneElement(primaryAction, {\n                appearance: \"primary\",\n              })}\n\n            {secondaryAction && (\n              <div className=\"seeds-empty-state-secondary-action\">\n                {React.cloneElement(secondaryAction, {\n                  appearance: \"unstyled\",\n                })}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nEmptyStateTailwind.displayName = \"EmptyStateTailwind\";\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeEmptyStateProps extends TypeBoxProps {\n  /** An image in (preferably in SVG format) */\n  media?: React.ReactNode;\n\n  /** A headline describing the empty state */\n  headline: React.ReactNode;\n\n  /** Optional description of the empty state */\n  subtext?: React.ReactNode;\n\n  /** Element for the primary call-to-action */\n  primaryAction?: React.ReactElement;\n\n  /** Element for any secondary call-to-action */\n  secondaryAction?: React.ReactElement;\n}\n"],"mappings":"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","names":["import_react","import_react","Box","Text","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","React","React"]}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@sproutsocial/seeds-react-empty-state",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Seeds React EmptyState",
   "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/empty-state.css": "./dist/empty-state.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/empty-state.css dist/empty-state.css",
+    "build:debug": "tsup --dts --metafile && cp src/empty-state.css dist/empty-state.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -35,7 +43,7 @@
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-react-button": "^2.3.4",
-    "@sproutsocial/seeds-react-image": "^1.0.28"
+    "@sproutsocial/seeds-react-image": "^1.0.29"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/EmptyState.stories.tsx

@@ -85,3 +85,22 @@ export const WithSubtextPrimaryActionAndSecondaryAction: Story = {
     secondaryAction: <Button>I'll do this later</Button>,
   },
 };
+
+// Renders via the default Tailwind path (no styled-system props), exercising
+// the seeds-empty-state CSS classes end to end.
+export const TailwindMode: Story = {
+  args: {
+    media: (
+      <Image
+        alt="No assets matching your search or filters"
+        src="https://cl.ly/db498c7682df/download/analytics.svg"
+        m={0}
+      />
+    ),
+    headline: "Ready to create your first topic?",
+    subtext:
+      "Now that you have the basics down, it’s time to create a topic. Remember to look for the icon at any time you are feeling lost.",
+    primaryAction: <Button>Create a Topic</Button>,
+    secondaryAction: <Button>I'll do this later</Button>,
+  },
+};

package/src/EmptyState.tsx

@@ -1,64 +1,17 @@
-import * as React from "react";
-import Box from "@sproutsocial/seeds-react-box";
-// eslint-disable-next-line import/no-deprecated
-import Text from "@sproutsocial/seeds-react-text";
-import type { TypeEmptyStateProps } from "./EmptyStateTypes";
-
-const EmptyState = ({
-  media,
-  headline,
-  subtext,
-  primaryAction,
-  secondaryAction,
-  ...rest
-}: TypeEmptyStateProps) => {
-  return (
-    <Box maxWidth="400px" mx="auto" data-qa-emptystate={headline} {...rest}>
-      {media && (
-        <Box
-          display="flex"
-          flexDirection="column"
-          justifyContent="center"
-          mb={450}
-        >
-          {media}
-        </Box>
-      )}
+import React, { memo } from "react";
 
-      <Text as="div" textAlign="center">
-        <Text
-          as="p"
-          m={0}
-          color="text.headline"
-          fontWeight="semibold"
-          fontSize={400}
-        >
-          {headline}
-        </Text>
-
-        {subtext && (
-          <Text as="p" color="text.subtext" fontSize={200} mb={0} mt={400}>
-            {subtext}
-          </Text>
-        )}
+import type { TypeEmptyStateProps } from "./EmptyStateTypes";
+import EmptyStateHybrid from "./EmptyStateHybrid";
 
-        <Box mt={primaryAction || secondaryAction ? 450 : 0}>
-          {primaryAction &&
-            React.cloneElement(primaryAction, {
-              appearance: "primary",
-            })}
+/**
+ * EmptyState component. Automatically routes between the Tailwind
+ * implementation (preferred) and the styled-components implementation (for
+ * consumers using styled-system props or a styled() extension).
+ */
+const EmptyState = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(
+  (props, ref) => <EmptyStateHybrid {...props} ref={ref} />
+);
 
-          {secondaryAction && (
-            <Box mt={400}>
-              {React.cloneElement(secondaryAction, {
-                appearance: "unstyled",
-              })}
-            </Box>
-          )}
-        </Box>
-      </Text>
-    </Box>
-  );
-};
+EmptyState.displayName = "EmptyState";
 
-export default EmptyState;
+export default memo(EmptyState);

package/src/EmptyStateHybrid.tsx

@@ -0,0 +1,35 @@
+/**
+ * Hybrid EmptyState Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ *
+ * Routes to the styled-components path when a styled-system prop is present
+ * (hasStyledProps) or the component was extended with styled()
+ * (isStyledExtension). Otherwise renders the Tailwind path.
+ *
+ * No mixin check is needed: EmptyState's root applies no standalone mixin
+ * beyond the styled-system set, so hasStyledProps covers every routing prop.
+ */
+
+import React from "react";
+import {
+  hasStyledProps,
+  isStyledExtension,
+} from "@sproutsocial/seeds-react-system-props";
+
+import type { TypeEmptyStateProps } from "./EmptyStateTypes";
+import EmptyStateStyled from "./EmptyStateStyled"; // Styled-components version
+import { EmptyStateTailwind } from "./EmptyStateTailwind"; // Tailwind version
+
+const EmptyStateHybrid = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(
+  (props, ref) => {
+    if (hasStyledProps(props) || isStyledExtension(props)) {
+      return <EmptyStateStyled {...props} ref={ref} />;
+    }
+
+    // Use Tailwind version (preferred - better performance)
+    return <EmptyStateTailwind {...props} ref={ref} />;
+  }
+);
+
+EmptyStateHybrid.displayName = "EmptyState";
+export default EmptyStateHybrid;

package/src/EmptyStateStyled.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+// eslint-disable-next-line import/no-deprecated
+import Text from "@sproutsocial/seeds-react-text";
+import type { TypeEmptyStateProps } from "./EmptyStateTypes";
+
+const EmptyStateStyled = React.forwardRef<HTMLDivElement, TypeEmptyStateProps>(
+  (
+    { media, headline, subtext, primaryAction, secondaryAction, ...rest },
+    ref
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        maxWidth="400px"
+        mx="auto"
+        data-qa-emptystate={headline}
+        {...rest}
+      >
+        {media && (
+          <Box
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            mb={450}
+          >
+            {media}
+          </Box>
+        )}
+
+        <Text as="div" textAlign="center">
+          <Text
+            as="p"
+            m={0}
+            color="text.headline"
+            fontWeight="semibold"
+            fontSize={400}
+          >
+            {headline}
+          </Text>
+
+          {subtext && (
+            <Text as="p" color="text.subtext" fontSize={200} mb={0} mt={400}>
+              {subtext}
+            </Text>
+          )}
+
+          <Box mt={primaryAction || secondaryAction ? 450 : 0}>
+            {primaryAction &&
+              React.cloneElement(primaryAction, {
+                appearance: "primary",
+              })}
+
+            {secondaryAction && (
+              <Box mt={400}>
+                {React.cloneElement(secondaryAction, {
+                  appearance: "unstyled",
+                })}
+              </Box>
+            )}
+          </Box>
+        </Text>
+      </Box>
+    );
+  }
+);
+
+EmptyStateStyled.displayName = "EmptyState";
+
+export default EmptyStateStyled;

package/src/EmptyStateTailwind.tsx

@@ -0,0 +1,81 @@
+/**
+ * Tailwind CSS implementation of EmptyState component
+ * Uses Seeds empty-state CSS classes from empty-state.css
+ */
+
+import React from "react";
+
+import type { TypeEmptyStateProps } from "./EmptyStateTypes";
+
+// 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 EmptyStateTailwind = React.forwardRef<
+  HTMLDivElement,
+  TypeEmptyStateProps
+>(
+  (
+    { media, headline, subtext, primaryAction, secondaryAction, className, ...rest },
+    ref
+  ) => {
+    const hasAction = Boolean(primaryAction || secondaryAction);
+
+    return (
+      <div
+        data-qa-emptystate={headline}
+        {...(rest as React.HTMLAttributes<HTMLDivElement>)}
+        ref={ref}
+        className={cn("seeds-empty-state", className)}
+      >
+        {media && <div className="seeds-empty-state-media">{media}</div>}
+
+        <div className="seeds-empty-state-content">
+          <p className="seeds-empty-state-headline">{headline}</p>
+
+          {subtext && <p className="seeds-empty-state-subtext">{subtext}</p>}
+
+          <div
+            className={cn("seeds-empty-state-actions", {
+              "seeds-empty-state-actions-empty": !hasAction,
+            })}
+          >
+            {primaryAction &&
+              React.cloneElement(primaryAction, {
+                appearance: "primary",
+              })}
+
+            {secondaryAction && (
+              <div className="seeds-empty-state-secondary-action">
+                {React.cloneElement(secondaryAction, {
+                  appearance: "unstyled",
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+EmptyStateTailwind.displayName = "EmptyStateTailwind";

package/src/__tests__/EmptyState.test.tsx

@@ -122,4 +122,48 @@ describe("EmptyState", () => {
     const element = screen.getByText("I'll do this later");
     expect(element).toBeInTheDocument();
   });
+
+  it("renders the Tailwind path with seeds classes and no sc- classes by default", () => {
+    render(<EmptyState headline="No content found" />);
+
+    const root = screen.getByDataQaLabel({ emptystate: "No content found" });
+    expect(root).toHaveClass("seeds-empty-state");
+    // The Tailwind path emits plain DOM with seeds classes only — no
+    // styled-components output (sc-*) should appear on the component's layout.
+    expect(root.className).not.toMatch(/\bsc-/);
+    expect(root.querySelector('[class*="sc-"]')).toBeNull();
+  });
+
+  it("routes to the styled-components fallback when a styled-system prop is passed", () => {
+    render(<EmptyState headline="No content found" maxWidth="600px" />);
+
+    const root = screen.getByDataQaLabel({ emptystate: "No content found" });
+    // styled-components renders sc-* classes onto the root Box; the Tailwind
+    // path never does. Content stays identical either way.
+    expect(root.className).toMatch(/\bsc-/);
+    expect(root).not.toHaveClass("seeds-empty-state");
+    expect(screen.getByText("No content found")).toBeInTheDocument();
+  });
+
+  it("injects action appearances via cloneElement in the default path", () => {
+    render(
+      <EmptyState
+        headline="Ready to create your first topic?"
+        primaryAction={<Button>Create a Topic</Button>}
+        secondaryAction={<Button>I&apos;ll do this later</Button>}
+      />
+    );
+
+    // Both cloned actions still render in the Tailwind path.
+    expect(screen.getByText("Create a Topic")).toBeInTheDocument();
+    expect(screen.getByText("I'll do this later")).toBeInTheDocument();
+  });
+
+  it("appends a consumer className on the Tailwind root", () => {
+    render(<EmptyState headline="No content found" className="my-custom-class" />);
+
+    const root = screen.getByDataQaLabel({ emptystate: "No content found" });
+    expect(root).toHaveClass("seeds-empty-state");
+    expect(root).toHaveClass("my-custom-class");
+  });
 });

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/empty-state.css

@@ -0,0 +1,68 @@
+/**
+ * Seeds EmptyState component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-empty-state">...</div>
+ *
+ * Rules live in @layer components so that consumer Tailwind utilities
+ * (e.g. mx-200, p-300) win in the cascade and can override these component
+ * styles, rather than tying/beating them on specificity.
+ */
+
+@layer components {
+  .seeds-empty-state {
+    max-width: 400px;
+    margin-inline: auto;
+  }
+
+  .seeds-empty-state-media {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: var(--space-450);
+  }
+
+  .seeds-empty-state-content {
+    text-align: center;
+  }
+
+  .seeds-empty-state-headline {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-headline);
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+  }
+
+  .seeds-empty-state-subtext {
+    margin: 0;
+    margin-top: var(--space-400);
+    padding-left: 0;
+    padding-right: 0;
+    font-family: var(--font-family);
+    color: var(--color-text-subtext);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+  }
+
+  .seeds-empty-state-actions {
+    margin-top: var(--space-450);
+  }
+
+  /* -empty MUST follow the base rule: equal specificity, source order wins */
+  .seeds-empty-state-actions-empty {
+    margin-top: 0;
+  }
+
+  .seeds-empty-state-secondary-action {
+    margin-top: var(--space-400);
+  }
+}