@sproutsocial/seeds-react-token 1.5.7 → 1.5.8

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/token.css dist/token.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
-ESM dist/esm/index.js     5.37 KB
-ESM dist/esm/index.js.map 9.94 KB
-ESM ⚡️ Build success in 21ms
-CJS dist/index.js     7.81 KB
-CJS dist/index.js.map 10.07 KB
-CJS ⚡️ Build success in 21ms
+CJS dist/index.js     11.87 KB
+CJS dist/index.js.map 17.20 KB
+CJS ⚡️ Build success in 76ms
+ESM dist/esm/index.js     8.79 KB
+ESM dist/esm/index.js.map 17.06 KB
+ESM ⚡️ Build success in 77ms
 DTS Build start
-DTS ⚡️ Build success in 3889ms
-DTS dist/index.d.ts  1.31 KB
-DTS dist/index.d.mts 1.31 KB
-Done in 5.49s.
+DTS ⚡️ Build success in 6527ms
+DTS dist/index.d.ts  1.44 KB
+DTS dist/index.d.mts 1.44 KB
+Done in 8.18s.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sproutsocial/seeds-react-token
 
+## 1.5.8
+
+### Patch Changes
+
+- 0e113bc: Migrate progress, token, select, spot-illustration, and collapsible to the Button hybrid Tailwind pattern. Each component now ships a CSS-class implementation routed alongside the styled-components path. Component CSS is wrapped in `@layer components` so Tailwind utility classes win the cascade and can override component styles via `className`. `Collapsible.Panel` now forwards `className` onto the panel root so utility overrides reach the styled element.
+
 ## 1.5.7
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,10 +1,14 @@
 // src/Token.tsx
 import "react";
-import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
-import { useTextContent } from "@sproutsocial/seeds-react-hooks";
-import Box from "@sproutsocial/seeds-react-box";
-import Icon from "@sproutsocial/seeds-react-icon";
-import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+
+// src/TokenHybrid.tsx
+import "react";
+import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
+import { useTextContent as useTextContent2 } from "@sproutsocial/seeds-react-hooks";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+import { VisuallyHidden as VisuallyHidden2 } from "@sproutsocial/seeds-react-visually-hidden";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
 
 // src/styles.ts
 import styled from "styled-components";
@@ -102,9 +106,31 @@ var Container = styled.button`
 `;
 var styles_default = Container;
 
-// src/Token.tsx
+// src/TokenTailwind.tsx
+import "react";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
+import { useTextContent } from "@sproutsocial/seeds-react-hooks";
+import Box from "@sproutsocial/seeds-react-box";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Token = ({
+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 TokenTailwind = ({
   children,
   closeable = true,
   onClick,
@@ -115,21 +141,32 @@ var Token = ({
   disabled = false,
   palette = "neutral",
   innerRef = null,
+  as,
+  className,
   ...rest
 }) => {
   const textContainer = useTextContent("");
+  const isInteractive = closeable || !!onClick;
+  const Element = as ?? (isInteractive ? "button" : "div");
+  const classes = cn(
+    "seeds-token",
+    {
+      "seeds-token-closeable": isInteractive,
+      "seeds-token-blue": palette === "blue",
+      "seeds-token-disabled": disabled,
+      "seeds-token-invalid": !valid,
+      "seeds-token-warning": hasWarning,
+      "seeds-token-generated": isGenerated
+    },
+    className
+  );
   return /* @__PURE__ */ jsxs(
-    styles_default,
+    Element,
     {
       ref: mergeRefs(textContainer, innerRef),
-      valid,
-      hasWarning,
-      isGenerated,
-      palette,
-      type: closeable || onClick ? "button" : void 0,
-      as: closeable || onClick ? "button" : "div",
-      closeable: closeable || !!onClick,
-      disabled,
+      type: isInteractive ? "button" : void 0,
+      className: classes,
+      ...isInteractive ? { disabled } : {},
       onClick,
       "data-qa-token": textContainer.current,
       "data-qa-token-iscloseable": closeable === true,
@@ -159,7 +196,78 @@ var Token = ({
     }
   );
 };
-var Token_default = Token;
+TokenTailwind.displayName = "TokenTailwind";
+
+// src/TokenHybrid.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TokenStyled = ({
+  children,
+  closeable = true,
+  onClick,
+  qa,
+  valid = true,
+  hasWarning = false,
+  isGenerated = false,
+  disabled = false,
+  palette = "neutral",
+  innerRef = null,
+  ...rest
+}) => {
+  const textContainer = useTextContent2("");
+  return /* @__PURE__ */ jsxs2(
+    styles_default,
+    {
+      ref: mergeRefs2(textContainer, innerRef),
+      valid,
+      hasWarning,
+      isGenerated,
+      palette,
+      type: closeable || onClick ? "button" : void 0,
+      as: closeable || onClick ? "button" : "div",
+      closeable: closeable || !!onClick,
+      disabled,
+      onClick,
+      "data-qa-token": textContainer.current,
+      "data-qa-token-iscloseable": closeable === true,
+      "data-qa-token-isvalid": valid === true,
+      "data-qa-token-isdisabled": disabled === true,
+      ...qa,
+      ...rest,
+      children: [
+        !valid && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(VisuallyHidden2, { as: "div", role: "status", children: "This is an invalid token" }),
+          /* @__PURE__ */ jsx2(
+            Icon2,
+            {
+              "aria-hidden": true,
+              pr: 300,
+              name: "circle-exclamation-solid",
+              size: "mini"
+            }
+          ),
+          /* @__PURE__ */ jsx2(VisuallyHidden2, { children: "Invalid" })
+        ] }),
+        closeable ? /* @__PURE__ */ jsxs2(Box2, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx2(Box2, { as: "span", display: "flex", alignItems: "center", children }),
+          /* @__PURE__ */ jsx2(Icon2, { "aria-hidden": true, pl: 300, name: "x-solid", size: "mini" })
+        ] }) : children
+      ]
+    }
+  );
+};
+var Token = (props) => {
+  if (hasStyledProps(props)) {
+    return /* @__PURE__ */ jsx2(TokenStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx2(TokenTailwind, { ...props });
+};
+var TokenHybrid_default = Token;
+
+// src/Token.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Token2 = (props) => /* @__PURE__ */ jsx3(TokenHybrid_default, { ...props });
+Token2.displayName = "Token";
+var Token_default = Token2;
 
 // src/TokenTypes.ts
 import "react";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Token.tsx","../../src/styles.ts","../../src/TokenTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n  children,\n  closeable = true,\n  onClick,\n  qa,\n  valid = true,\n  hasWarning = false,\n  isGenerated = false,\n  disabled = false,\n  palette = \"neutral\",\n  innerRef = null,\n  ...rest\n}: TypeTokenProps) => {\n  const textContainer = useTextContent(\"\");\n\n  return (\n    <Container\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      //@ts-ignore some legacy ref type mismatch between divs\n      ref={mergeRefs(textContainer, innerRef)}\n      valid={valid}\n      hasWarning={hasWarning}\n      isGenerated={isGenerated}\n      palette={palette}\n      type={closeable || onClick ? \"button\" : undefined}\n      as={closeable || onClick ? \"button\" : \"div\"}\n      closeable={closeable || !!onClick}\n      disabled={disabled}\n      onClick={onClick}\n      data-qa-token={textContainer.current}\n      data-qa-token-iscloseable={closeable === true}\n      data-qa-token-isvalid={valid === true}\n      data-qa-token-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {!valid && (\n        <>\n          <VisuallyHidden as=\"div\" role=\"status\">\n            This is an invalid token\n          </VisuallyHidden>\n          <Icon\n            aria-hidden\n            pr={300}\n            name=\"circle-exclamation-solid\"\n            size=\"mini\"\n          />\n          <VisuallyHidden>Invalid</VisuallyHidden>\n        </>\n      )}\n      {closeable ? (\n        <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n          <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n            {children}\n          </Box>\n          <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n        </Box>\n      ) : (\n        children\n      )}\n    </Container>\n  );\n};\n\nexport default Token;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  line-height: 1;\n  outline: none;\n  font-family: ${({ theme }) => theme.fontFamily};\n  font-size: ${({ theme }) => theme.fontSizes[200]};\n  line-height: 13px;\n  font-weight: ${({ theme }) => theme.fontWeights.normal};\n  border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii[500]};\n  color: ${({ theme }) => theme.colors.text.body};\n  background: ${({ theme }) => theme.colors.container.background.base};\n  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n  transition: all ${({ theme }) => theme.duration.fast}\n    ${({ theme }) => theme.easing.ease_inout};\n\n  &:focus {\n    ${focusRing}\n  }\n\n  ${({ closeable, theme }) =>\n    closeable &&\n    `\n      cursor: pointer;\n      &:hover,\n      &:active {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.base)};\n      }\n    `}\n\n  ${({ theme, palette }) =>\n    palette === \"blue\" &&\n    `\n      background: ${theme.colors.container.background.decorative.blue};\n      border: 1px solid ${theme.colors.container.border.decorative.blue};\n      &:hover,\n      &:active {\n        cursor: pointer;\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n      }\n    `}\n\n  ${({ disabled, theme }) =>\n    disabled &&\n    `\n      opacity: 0.4;\n      cursor: not-allowed;\n      &:hover,\n      &:active {\n        box-shadow: none;\n        border: 1px solid ${theme.colors.container.border.base};\n      }\n    `}\n    \n  ${({ valid, theme }) =>\n    !valid &&\n    `\n      color: ${theme.colors.text.error};\n      background: ${theme.colors.container.background.error};\n      border: 1px solid ${theme.colors.container.border.error};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.error)};\n      }\n    `}\n\n    ${({ hasWarning, theme }) =>\n    hasWarning &&\n    `\n      background: ${theme.colors.container.background.warning};\n      border: 1px solid ${theme.colors.container.border.warning};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.warning)};\n      }\n    `}\n\n    ${({ isGenerated, theme }) =>\n    isGenerated &&\n    `\n      background: ${theme.colors.container.background.ai_generated};\n      border: 1px solid ${theme.colors.container.border.ai_generated};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.ai_generated)};\n      }\n      color: ${theme.colors.text.ai_generated};\n    `}\n\n\t${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n  onClick?: React.EventHandler<React.SyntheticEvent>;\n  children: React.ReactNode;\n  qa?: TypeQaProps;\n\n  /** Show the close icon in the token. Can be used with or without icon prop */\n  closeable?: boolean;\n\n  /** Indicates whether the token value is valid or not */\n  valid?: boolean;\n\n  /** Indicates whether the token has a related warning */\n  hasWarning?: boolean;\n\n  /** Indicates whether the token was generated by AI */\n  isGenerated?: boolean;\n\n  /** Indicates whether the token is disabled */\n  disabled?: boolean;\n  palette?: \"neutral\" | \"blue\";\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n\n  /** Used to get a reference to the underlying element */\n  innerRef?: React.Ref<HTMLElement>;\n}\n","import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/Token.tsx","../../src/TokenHybrid.tsx","../../src/styles.ts","../../src/TokenTailwind.tsx","../../src/TokenTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport TokenHybrid from \"./TokenHybrid\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\n/**\n * Token component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst Token = (props: TypeTokenProps) => <TokenHybrid {...props} />;\n\nToken.displayName = \"Token\";\n\nexport default Token;\n","/**\n * Hybrid Token Component\n * Automatically chooses between Tailwind and styled-components based on props.\n * Consumers passing styled-system props (e.g. `mb`, `width`, `bg`) get the\n * styled-components implementation; everyone else gets the Tailwind path.\n */\n\nimport * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\";\nimport { TokenTailwind } from \"./TokenTailwind\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\n// Styled-components implementation — preserved verbatim from the original Token\n// so consumers using styled-system props get identical behaviour.\nconst TokenStyled = ({\n  children,\n  closeable = true,\n  onClick,\n  qa,\n  valid = true,\n  hasWarning = false,\n  isGenerated = false,\n  disabled = false,\n  palette = \"neutral\",\n  innerRef = null,\n  ...rest\n}: TypeTokenProps) => {\n  const textContainer = useTextContent(\"\");\n\n  return (\n    <Container\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      //@ts-ignore some legacy ref type mismatch between divs\n      ref={mergeRefs(textContainer, innerRef)}\n      valid={valid}\n      hasWarning={hasWarning}\n      isGenerated={isGenerated}\n      palette={palette}\n      type={closeable || onClick ? \"button\" : undefined}\n      as={closeable || onClick ? \"button\" : \"div\"}\n      closeable={closeable || !!onClick}\n      disabled={disabled}\n      onClick={onClick}\n      data-qa-token={textContainer.current}\n      data-qa-token-iscloseable={closeable === true}\n      data-qa-token-isvalid={valid === true}\n      data-qa-token-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {!valid && (\n        <>\n          <VisuallyHidden as=\"div\" role=\"status\">\n            This is an invalid token\n          </VisuallyHidden>\n          <Icon\n            aria-hidden\n            pr={300}\n            name=\"circle-exclamation-solid\"\n            size=\"mini\"\n          />\n          <VisuallyHidden>Invalid</VisuallyHidden>\n        </>\n      )}\n      {closeable ? (\n        <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n          <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n            {children}\n          </Box>\n          <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n        </Box>\n      ) : (\n        children\n      )}\n    </Container>\n  );\n};\n\nconst Token = (props: TypeTokenProps) => {\n  // hasStyledProps only inspects a fixed allowlist of styled-system prop names\n  // (bg, color, m*, p*, width, flex*, …), so it is safe to pass the full props —\n  // none of Token's own props collide with that list.\n  if (hasStyledProps(props)) {\n    return <TokenStyled {...props} />;\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <TokenTailwind {...props} />;\n};\n\nexport default Token;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  line-height: 1;\n  outline: none;\n  font-family: ${({ theme }) => theme.fontFamily};\n  font-size: ${({ theme }) => theme.fontSizes[200]};\n  line-height: 13px;\n  font-weight: ${({ theme }) => theme.fontWeights.normal};\n  border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii[500]};\n  color: ${({ theme }) => theme.colors.text.body};\n  background: ${({ theme }) => theme.colors.container.background.base};\n  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n  transition: all ${({ theme }) => theme.duration.fast}\n    ${({ theme }) => theme.easing.ease_inout};\n\n  &:focus {\n    ${focusRing}\n  }\n\n  ${({ closeable, theme }) =>\n    closeable &&\n    `\n      cursor: pointer;\n      &:hover,\n      &:active {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.base)};\n      }\n    `}\n\n  ${({ theme, palette }) =>\n    palette === \"blue\" &&\n    `\n      background: ${theme.colors.container.background.decorative.blue};\n      border: 1px solid ${theme.colors.container.border.decorative.blue};\n      &:hover,\n      &:active {\n        cursor: pointer;\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n      }\n    `}\n\n  ${({ disabled, theme }) =>\n    disabled &&\n    `\n      opacity: 0.4;\n      cursor: not-allowed;\n      &:hover,\n      &:active {\n        box-shadow: none;\n        border: 1px solid ${theme.colors.container.border.base};\n      }\n    `}\n    \n  ${({ valid, theme }) =>\n    !valid &&\n    `\n      color: ${theme.colors.text.error};\n      background: ${theme.colors.container.background.error};\n      border: 1px solid ${theme.colors.container.border.error};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.error)};\n      }\n    `}\n\n    ${({ hasWarning, theme }) =>\n    hasWarning &&\n    `\n      background: ${theme.colors.container.background.warning};\n      border: 1px solid ${theme.colors.container.border.warning};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.warning)};\n      }\n    `}\n\n    ${({ isGenerated, theme }) =>\n    isGenerated &&\n    `\n      background: ${theme.colors.container.background.ai_generated};\n      border: 1px solid ${theme.colors.container.border.ai_generated};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.ai_generated)};\n      }\n      color: ${theme.colors.text.ai_generated};\n    `}\n\n\t${COMMON}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Token component\n * Uses Seeds token CSS classes from token.css\n */\n\nimport * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\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 TokenTailwind = ({\n  children,\n  closeable = true,\n  onClick,\n  qa,\n  valid = true,\n  hasWarning = false,\n  isGenerated = false,\n  disabled = false,\n  palette = \"neutral\",\n  innerRef = null,\n  as,\n  className,\n  ...rest\n}: TypeTokenProps) => {\n  const textContainer = useTextContent(\"\");\n\n  const isInteractive = closeable || !!onClick;\n  // Mirror the styled component: it is a styled.button rendered `as` a div when\n  // the token is neither closeable nor clickable. A consumer-provided `as` still\n  // wins, matching the original (where `as` arrived via {...rest} last).\n  const Element = (as ?? (isInteractive ? \"button\" : \"div\")) as React.ElementType;\n\n  const classes = cn(\n    \"seeds-token\",\n    {\n      \"seeds-token-closeable\": isInteractive,\n      \"seeds-token-blue\": palette === \"blue\",\n      \"seeds-token-disabled\": disabled,\n      \"seeds-token-invalid\": !valid,\n      \"seeds-token-warning\": hasWarning,\n      \"seeds-token-generated\": isGenerated,\n    },\n    className\n  );\n\n  return (\n    <Element\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      //@ts-ignore some legacy ref type mismatch between divs\n      ref={mergeRefs(textContainer, innerRef)}\n      type={isInteractive ? \"button\" : undefined}\n      className={classes}\n      {...(isInteractive ? { disabled } : {})}\n      onClick={onClick}\n      data-qa-token={textContainer.current}\n      data-qa-token-iscloseable={closeable === true}\n      data-qa-token-isvalid={valid === true}\n      data-qa-token-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {!valid && (\n        <>\n          <VisuallyHidden as=\"div\" role=\"status\">\n            This is an invalid token\n          </VisuallyHidden>\n          <Icon\n            aria-hidden\n            pr={300}\n            name=\"circle-exclamation-solid\"\n            size=\"mini\"\n          />\n          <VisuallyHidden>Invalid</VisuallyHidden>\n        </>\n      )}\n      {closeable ? (\n        <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n          <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n            {children}\n          </Box>\n          <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n        </Box>\n      ) : (\n        children\n      )}\n    </Element>\n  );\n};\n\nTokenTailwind.displayName = \"TokenTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n  onClick?: React.EventHandler<React.SyntheticEvent>;\n  children: React.ReactNode;\n  qa?: TypeQaProps;\n\n  /** Show the close icon in the token. Can be used with or without icon prop */\n  closeable?: boolean;\n\n  /** Indicates whether the token value is valid or not */\n  valid?: boolean;\n\n  /** Indicates whether the token has a related warning */\n  hasWarning?: boolean;\n\n  /** Indicates whether the token was generated by AI */\n  isGenerated?: boolean;\n\n  /** Indicates whether the token is disabled */\n  disabled?: boolean;\n  palette?: \"neutral\" | \"blue\";\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n\n  /** Used to get a reference to the underlying element */\n  innerRef?: React.Ref<HTMLElement>;\n}\n","import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n"],"mappings":"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","names":["mergeRefs","useTextContent","Box","Icon","VisuallyHidden","Fragment","jsx","jsxs","useTextContent","mergeRefs","VisuallyHidden","Icon","Box","jsx","Token"]}

package/dist/index.d.mts

@@ -23,6 +23,14 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
     innerRef?: React.Ref<HTMLElement>;
 }
 
-declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, isGenerated, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Token component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Token: {
+    (props: TypeTokenProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 export { Token, type TypeTokenProps, Token as default };

package/dist/index.d.ts

@@ -23,6 +23,14 @@ interface TypeTokenProps extends TypeStyledComponentsCommonProps, TypeSystemComm
     innerRef?: React.Ref<HTMLElement>;
 }
 
-declare const Token: ({ children, closeable, onClick, qa, valid, hasWarning, isGenerated, disabled, palette, innerRef, ...rest }: TypeTokenProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Token component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Token: {
+    (props: TypeTokenProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 export { Token, type TypeTokenProps, Token as default };

package/dist/index.js

@@ -36,12 +36,16 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Token.tsx
-var React = require("react");
-var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
-var import_seeds_react_hooks2 = require("@sproutsocial/seeds-react-hooks");
-var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
-var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
-var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
+var React3 = require("react");
+
+// src/TokenHybrid.tsx
+var React2 = require("react");
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_hooks3 = require("@sproutsocial/seeds-react-hooks");
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_visually_hidden2 = require("@sproutsocial/seeds-react-visually-hidden");
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -139,9 +143,31 @@ var Container = import_styled_components.default.button`
 `;
 var styles_default = Container;
 
-// src/Token.tsx
+// src/TokenTailwind.tsx
+var React = require("react");
+var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_hooks2 = require("@sproutsocial/seeds-react-hooks");
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Token = ({
+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 TokenTailwind = ({
   children,
   closeable = true,
   onClick,
@@ -152,21 +178,32 @@ var Token = ({
   disabled = false,
   palette = "neutral",
   innerRef = null,
+  as,
+  className,
   ...rest
 }) => {
   const textContainer = (0, import_seeds_react_hooks2.useTextContent)("");
+  const isInteractive = closeable || !!onClick;
+  const Element = as ?? (isInteractive ? "button" : "div");
+  const classes = cn(
+    "seeds-token",
+    {
+      "seeds-token-closeable": isInteractive,
+      "seeds-token-blue": palette === "blue",
+      "seeds-token-disabled": disabled,
+      "seeds-token-invalid": !valid,
+      "seeds-token-warning": hasWarning,
+      "seeds-token-generated": isGenerated
+    },
+    className
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    styles_default,
+    Element,
     {
       ref: (0, import_seeds_react_utilities.mergeRefs)(textContainer, innerRef),
-      valid,
-      hasWarning,
-      isGenerated,
-      palette,
-      type: closeable || onClick ? "button" : void 0,
-      as: closeable || onClick ? "button" : "div",
-      closeable: closeable || !!onClick,
-      disabled,
+      type: isInteractive ? "button" : void 0,
+      className: classes,
+      ...isInteractive ? { disabled } : {},
       onClick,
       "data-qa-token": textContainer.current,
       "data-qa-token-iscloseable": closeable === true,
@@ -196,10 +233,81 @@ var Token = ({
     }
   );
 };
-var Token_default = Token;
+TokenTailwind.displayName = "TokenTailwind";
+
+// src/TokenHybrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TokenStyled = ({
+  children,
+  closeable = true,
+  onClick,
+  qa,
+  valid = true,
+  hasWarning = false,
+  isGenerated = false,
+  disabled = false,
+  palette = "neutral",
+  innerRef = null,
+  ...rest
+}) => {
+  const textContainer = (0, import_seeds_react_hooks3.useTextContent)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    styles_default,
+    {
+      ref: (0, import_seeds_react_utilities2.mergeRefs)(textContainer, innerRef),
+      valid,
+      hasWarning,
+      isGenerated,
+      palette,
+      type: closeable || onClick ? "button" : void 0,
+      as: closeable || onClick ? "button" : "div",
+      closeable: closeable || !!onClick,
+      disabled,
+      onClick,
+      "data-qa-token": textContainer.current,
+      "data-qa-token-iscloseable": closeable === true,
+      "data-qa-token-isvalid": valid === true,
+      "data-qa-token-isdisabled": disabled === true,
+      ...qa,
+      ...rest,
+      children: [
+        !valid && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_visually_hidden2.VisuallyHidden, { as: "div", role: "status", children: "This is an invalid token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_seeds_react_icon2.default,
+            {
+              "aria-hidden": true,
+              pr: 300,
+              name: "circle-exclamation-solid",
+              size: "mini"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_visually_hidden2.VisuallyHidden, { children: "Invalid" })
+        ] }),
+        closeable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_box2.default, { as: "span", display: "flex", alignItems: "center", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, pl: 300, name: "x-solid", size: "mini" })
+        ] }) : children
+      ]
+    }
+  );
+};
+var Token = (props) => {
+  if ((0, import_seeds_react_system_props2.hasStyledProps)(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TokenStyled, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TokenTailwind, { ...props });
+};
+var TokenHybrid_default = Token;
+
+// src/Token.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Token2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TokenHybrid_default, { ...props });
+Token2.displayName = "Token";
+var Token_default = Token2;
 
 // src/TokenTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = Token_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Token.tsx","../src/styles.ts","../src/TokenTypes.ts"],"sourcesContent":["import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n","import * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport Container from \"./styles\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Token = ({\n  children,\n  closeable = true,\n  onClick,\n  qa,\n  valid = true,\n  hasWarning = false,\n  isGenerated = false,\n  disabled = false,\n  palette = \"neutral\",\n  innerRef = null,\n  ...rest\n}: TypeTokenProps) => {\n  const textContainer = useTextContent(\"\");\n\n  return (\n    <Container\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      //@ts-ignore some legacy ref type mismatch between divs\n      ref={mergeRefs(textContainer, innerRef)}\n      valid={valid}\n      hasWarning={hasWarning}\n      isGenerated={isGenerated}\n      palette={palette}\n      type={closeable || onClick ? \"button\" : undefined}\n      as={closeable || onClick ? \"button\" : \"div\"}\n      closeable={closeable || !!onClick}\n      disabled={disabled}\n      onClick={onClick}\n      data-qa-token={textContainer.current}\n      data-qa-token-iscloseable={closeable === true}\n      data-qa-token-isvalid={valid === true}\n      data-qa-token-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {!valid && (\n        <>\n          <VisuallyHidden as=\"div\" role=\"status\">\n            This is an invalid token\n          </VisuallyHidden>\n          <Icon\n            aria-hidden\n            pr={300}\n            name=\"circle-exclamation-solid\"\n            size=\"mini\"\n          />\n          <VisuallyHidden>Invalid</VisuallyHidden>\n        </>\n      )}\n      {closeable ? (\n        <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n          <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n            {children}\n          </Box>\n          <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n        </Box>\n      ) : (\n        children\n      )}\n    </Container>\n  );\n};\n\nexport default Token;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  line-height: 1;\n  outline: none;\n  font-family: ${({ theme }) => theme.fontFamily};\n  font-size: ${({ theme }) => theme.fontSizes[200]};\n  line-height: 13px;\n  font-weight: ${({ theme }) => theme.fontWeights.normal};\n  border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii[500]};\n  color: ${({ theme }) => theme.colors.text.body};\n  background: ${({ theme }) => theme.colors.container.background.base};\n  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n  transition: all ${({ theme }) => theme.duration.fast}\n    ${({ theme }) => theme.easing.ease_inout};\n\n  &:focus {\n    ${focusRing}\n  }\n\n  ${({ closeable, theme }) =>\n    closeable &&\n    `\n      cursor: pointer;\n      &:hover,\n      &:active {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.base)};\n      }\n    `}\n\n  ${({ theme, palette }) =>\n    palette === \"blue\" &&\n    `\n      background: ${theme.colors.container.background.decorative.blue};\n      border: 1px solid ${theme.colors.container.border.decorative.blue};\n      &:hover,\n      &:active {\n        cursor: pointer;\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n      }\n    `}\n\n  ${({ disabled, theme }) =>\n    disabled &&\n    `\n      opacity: 0.4;\n      cursor: not-allowed;\n      &:hover,\n      &:active {\n        box-shadow: none;\n        border: 1px solid ${theme.colors.container.border.base};\n      }\n    `}\n    \n  ${({ valid, theme }) =>\n    !valid &&\n    `\n      color: ${theme.colors.text.error};\n      background: ${theme.colors.container.background.error};\n      border: 1px solid ${theme.colors.container.border.error};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.error)};\n      }\n    `}\n\n    ${({ hasWarning, theme }) =>\n    hasWarning &&\n    `\n      background: ${theme.colors.container.background.warning};\n      border: 1px solid ${theme.colors.container.border.warning};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.warning)};\n      }\n    `}\n\n    ${({ isGenerated, theme }) =>\n    isGenerated &&\n    `\n      background: ${theme.colors.container.background.ai_generated};\n      border: 1px solid ${theme.colors.container.border.ai_generated};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.ai_generated)};\n      }\n      color: ${theme.colors.text.ai_generated};\n    `}\n\n\t${COMMON}\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n  onClick?: React.EventHandler<React.SyntheticEvent>;\n  children: React.ReactNode;\n  qa?: TypeQaProps;\n\n  /** Show the close icon in the token. Can be used with or without icon prop */\n  closeable?: boolean;\n\n  /** Indicates whether the token value is valid or not */\n  valid?: boolean;\n\n  /** Indicates whether the token has a related warning */\n  hasWarning?: boolean;\n\n  /** Indicates whether the token was generated by AI */\n  isGenerated?: boolean;\n\n  /** Indicates whether the token is disabled */\n  disabled?: boolean;\n  palette?: \"neutral\" | \"blue\";\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n\n  /** Used to get a reference to the underlying element */\n  innerRef?: React.Ref<HTMLElement>;\n}\n"],"mappings":"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","names":["import_seeds_react_hooks","styled","Icon","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Token.tsx","../src/TokenHybrid.tsx","../src/styles.ts","../src/TokenTailwind.tsx","../src/TokenTypes.ts"],"sourcesContent":["import Token from \"./Token\";\n\nexport default Token;\nexport { Token };\nexport * from \"./TokenTypes\";\n","import * as React from \"react\";\nimport TokenHybrid from \"./TokenHybrid\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\n/**\n * Token component. Automatically routes between the Tailwind implementation\n * (preferred) and the styled-components implementation (for consumers using\n * system props or styled() extension).\n */\nconst Token = (props: TypeTokenProps) => <TokenHybrid {...props} />;\n\nToken.displayName = \"Token\";\n\nexport default Token;\n","/**\n * Hybrid Token Component\n * Automatically chooses between Tailwind and styled-components based on props.\n * Consumers passing styled-system props (e.g. `mb`, `width`, `bg`) get the\n * styled-components implementation; everyone else gets the Tailwind path.\n */\n\nimport * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport Container from \"./styles\";\nimport { TokenTailwind } from \"./TokenTailwind\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\n// Styled-components implementation — preserved verbatim from the original Token\n// so consumers using styled-system props get identical behaviour.\nconst TokenStyled = ({\n  children,\n  closeable = true,\n  onClick,\n  qa,\n  valid = true,\n  hasWarning = false,\n  isGenerated = false,\n  disabled = false,\n  palette = \"neutral\",\n  innerRef = null,\n  ...rest\n}: TypeTokenProps) => {\n  const textContainer = useTextContent(\"\");\n\n  return (\n    <Container\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      //@ts-ignore some legacy ref type mismatch between divs\n      ref={mergeRefs(textContainer, innerRef)}\n      valid={valid}\n      hasWarning={hasWarning}\n      isGenerated={isGenerated}\n      palette={palette}\n      type={closeable || onClick ? \"button\" : undefined}\n      as={closeable || onClick ? \"button\" : \"div\"}\n      closeable={closeable || !!onClick}\n      disabled={disabled}\n      onClick={onClick}\n      data-qa-token={textContainer.current}\n      data-qa-token-iscloseable={closeable === true}\n      data-qa-token-isvalid={valid === true}\n      data-qa-token-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {!valid && (\n        <>\n          <VisuallyHidden as=\"div\" role=\"status\">\n            This is an invalid token\n          </VisuallyHidden>\n          <Icon\n            aria-hidden\n            pr={300}\n            name=\"circle-exclamation-solid\"\n            size=\"mini\"\n          />\n          <VisuallyHidden>Invalid</VisuallyHidden>\n        </>\n      )}\n      {closeable ? (\n        <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n          <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n            {children}\n          </Box>\n          <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n        </Box>\n      ) : (\n        children\n      )}\n    </Container>\n  );\n};\n\nconst Token = (props: TypeTokenProps) => {\n  // hasStyledProps only inspects a fixed allowlist of styled-system prop names\n  // (bg, color, m*, p*, width, flex*, …), so it is safe to pass the full props —\n  // none of Token's own props collide with that list.\n  if (hasStyledProps(props)) {\n    return <TokenStyled {...props} />;\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <TokenTailwind {...props} />;\n};\n\nexport default Token;\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { useInteractiveColor } from \"@sproutsocial/seeds-react-hooks\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\n\nconst Container = styled.button<TypeTokenProps>`\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin: 0;\n  line-height: 1;\n  outline: none;\n  font-family: ${({ theme }) => theme.fontFamily};\n  font-size: ${({ theme }) => theme.fontSizes[200]};\n  line-height: 13px;\n  font-weight: ${({ theme }) => theme.fontWeights.normal};\n  border: 1px solid ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii[500]};\n  color: ${({ theme }) => theme.colors.text.body};\n  background: ${({ theme }) => theme.colors.container.background.base};\n  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};\n  transition: all ${({ theme }) => theme.duration.fast}\n    ${({ theme }) => theme.easing.ease_inout};\n\n  &:focus {\n    ${focusRing}\n  }\n\n  ${({ closeable, theme }) =>\n    closeable &&\n    `\n      cursor: pointer;\n      &:hover,\n      &:active {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.base)};\n      }\n    `}\n\n  ${({ theme, palette }) =>\n    palette === \"blue\" &&\n    `\n      background: ${theme.colors.container.background.decorative.blue};\n      border: 1px solid ${theme.colors.container.border.decorative.blue};\n      &:hover,\n      &:active {\n        cursor: pointer;\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.decorative.blue)};\n      }\n    `}\n\n  ${({ disabled, theme }) =>\n    disabled &&\n    `\n      opacity: 0.4;\n      cursor: not-allowed;\n      &:hover,\n      &:active {\n        box-shadow: none;\n        border: 1px solid ${theme.colors.container.border.base};\n      }\n    `}\n    \n  ${({ valid, theme }) =>\n    !valid &&\n    `\n      color: ${theme.colors.text.error};\n      background: ${theme.colors.container.background.error};\n      border: 1px solid ${theme.colors.container.border.error};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.error)};\n      }\n    `}\n\n    ${({ hasWarning, theme }) =>\n    hasWarning &&\n    `\n      background: ${theme.colors.container.background.warning};\n      border: 1px solid ${theme.colors.container.border.warning};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.warning)};\n      }\n    `}\n\n    ${({ isGenerated, theme }) =>\n    isGenerated &&\n    `\n      background: ${theme.colors.container.background.ai_generated};\n      border: 1px solid ${theme.colors.container.border.ai_generated};\n      &:hover {\n        box-shadow: ${theme.shadows.low};\n        border: 1px solid\n          ${useInteractiveColor(theme.colors.container.border.ai_generated)};\n      }\n      color: ${theme.colors.text.ai_generated};\n    `}\n\n\t${COMMON}\n`;\n\nexport default Container;\n","/**\n * Tailwind CSS implementation of Token component\n * Uses Seeds token CSS classes from token.css\n */\n\nimport * as React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { useTextContent } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeTokenProps } from \"./TokenTypes\";\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 TokenTailwind = ({\n  children,\n  closeable = true,\n  onClick,\n  qa,\n  valid = true,\n  hasWarning = false,\n  isGenerated = false,\n  disabled = false,\n  palette = \"neutral\",\n  innerRef = null,\n  as,\n  className,\n  ...rest\n}: TypeTokenProps) => {\n  const textContainer = useTextContent(\"\");\n\n  const isInteractive = closeable || !!onClick;\n  // Mirror the styled component: it is a styled.button rendered `as` a div when\n  // the token is neither closeable nor clickable. A consumer-provided `as` still\n  // wins, matching the original (where `as` arrived via {...rest} last).\n  const Element = (as ?? (isInteractive ? \"button\" : \"div\")) as React.ElementType;\n\n  const classes = cn(\n    \"seeds-token\",\n    {\n      \"seeds-token-closeable\": isInteractive,\n      \"seeds-token-blue\": palette === \"blue\",\n      \"seeds-token-disabled\": disabled,\n      \"seeds-token-invalid\": !valid,\n      \"seeds-token-warning\": hasWarning,\n      \"seeds-token-generated\": isGenerated,\n    },\n    className\n  );\n\n  return (\n    <Element\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      //@ts-ignore some legacy ref type mismatch between divs\n      ref={mergeRefs(textContainer, innerRef)}\n      type={isInteractive ? \"button\" : undefined}\n      className={classes}\n      {...(isInteractive ? { disabled } : {})}\n      onClick={onClick}\n      data-qa-token={textContainer.current}\n      data-qa-token-iscloseable={closeable === true}\n      data-qa-token-isvalid={valid === true}\n      data-qa-token-isdisabled={disabled === true}\n      {...qa}\n      {...rest}\n    >\n      {!valid && (\n        <>\n          <VisuallyHidden as=\"div\" role=\"status\">\n            This is an invalid token\n          </VisuallyHidden>\n          <Icon\n            aria-hidden\n            pr={300}\n            name=\"circle-exclamation-solid\"\n            size=\"mini\"\n          />\n          <VisuallyHidden>Invalid</VisuallyHidden>\n        </>\n      )}\n      {closeable ? (\n        <Box display=\"flex\" alignItems=\"center\" justifyContent=\"space-between\">\n          <Box as=\"span\" display=\"flex\" alignItems=\"center\">\n            {children}\n          </Box>\n          <Icon aria-hidden pl={300} name=\"x-solid\" size=\"mini\" />\n        </Box>\n      ) : (\n        children\n      )}\n    </Element>\n  );\n};\n\nTokenTailwind.displayName = \"TokenTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeQaProps = object;\n\nexport interface TypeTokenProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\"> {\n  onClick?: React.EventHandler<React.SyntheticEvent>;\n  children: React.ReactNode;\n  qa?: TypeQaProps;\n\n  /** Show the close icon in the token. Can be used with or without icon prop */\n  closeable?: boolean;\n\n  /** Indicates whether the token value is valid or not */\n  valid?: boolean;\n\n  /** Indicates whether the token has a related warning */\n  hasWarning?: boolean;\n\n  /** Indicates whether the token was generated by AI */\n  isGenerated?: boolean;\n\n  /** Indicates whether the token is disabled */\n  disabled?: boolean;\n  palette?: \"neutral\" | \"blue\";\n  as?: TypeStyledComponentsCommonProps[\"as\"];\n\n  /** Used to get a reference to the underlying element */\n  innerRef?: React.Ref<HTMLElement>;\n}\n"],"mappings":"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","names":["React","React","import_seeds_react_utilities","import_seeds_react_hooks","import_seeds_react_box","import_seeds_react_icon","import_seeds_react_visually_hidden","import_seeds_react_system_props","styled","import_seeds_react_hooks","Icon","Box","import_jsx_runtime","Icon","Box","import_jsx_runtime","Token","React"]}

package/dist/token.css

@@ -0,0 +1,160 @@
+/**
+ * Seeds Token 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:
+ *   <button class="seeds-token seeds-token-closeable">Token</button>
+ */
+
+@layer components {
+  .seeds-token {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    outline: none;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: 13px;
+    font-weight: var(--font-weight-normal);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    color: var(--color-text-body);
+    background: var(--color-container-bg-base);
+    padding: var(--space-200) var(--space-300);
+    transition: all var(--duration-fast) var(--ease-ease_inout);
+  }
+
+  .seeds-token:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  .seeds-token::-moz-focus-inner {
+    border: 0;
+  }
+
+  /* closeable / clickable */
+  .seeds-token-closeable {
+    cursor: pointer;
+  }
+
+  .seeds-token-closeable:hover,
+  .seeds-token-closeable:active {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-base), black 20%);
+  }
+
+  /* palette="blue" */
+  .seeds-token-blue {
+    background: var(--color-container-bg-decorative-blue);
+    border: 1px solid var(--color-container-border-decorative-blue);
+  }
+
+  .seeds-token-blue:hover,
+  .seeds-token-blue:active {
+    cursor: pointer;
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-decorative-blue), black 20%);
+  }
+
+  /* disabled */
+  .seeds-token-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .seeds-token-disabled:hover,
+  .seeds-token-disabled:active {
+    box-shadow: none;
+    border: 1px solid var(--color-container-border-base);
+  }
+
+  /* valid={false} */
+  .seeds-token-invalid {
+    color: var(--color-text-error);
+    background: var(--color-container-bg-error);
+    border: 1px solid var(--color-container-border-error);
+  }
+
+  .seeds-token-invalid:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-error), black 20%);
+  }
+
+  /* hasWarning */
+  .seeds-token-warning {
+    background: var(--color-container-bg-warning);
+    border: 1px solid var(--color-container-border-warning);
+  }
+
+  .seeds-token-warning:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-warning), black 20%);
+  }
+
+  /* isGenerated (AI) */
+  .seeds-token-generated {
+    background: var(--color-container-bg-ai_generated);
+    border: 1px solid var(--color-container-border-ai_generated);
+    color: var(--color-text-ai_generated);
+  }
+
+  .seeds-token-generated:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-ai_generated), black 20%);
+  }
+
+  /* Dark mode: useInteractiveColor lightens (white) instead of darkening (black). */
+  [data-theme="dark"] .seeds-token-closeable:hover,
+  [data-theme="dark"] .seeds-token-closeable:active,
+  .dark .seeds-token-closeable:hover,
+  .dark .seeds-token-closeable:active,
+  .lights-out .seeds-token-closeable:hover,
+  .lights-out .seeds-token-closeable:active {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-base), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-blue:hover,
+  [data-theme="dark"] .seeds-token-blue:active,
+  .dark .seeds-token-blue:hover,
+  .dark .seeds-token-blue:active,
+  .lights-out .seeds-token-blue:hover,
+  .lights-out .seeds-token-blue:active {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-decorative-blue), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-invalid:hover,
+  .dark .seeds-token-invalid:hover,
+  .lights-out .seeds-token-invalid:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-error), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-warning:hover,
+  .dark .seeds-token-warning:hover,
+  .lights-out .seeds-token-warning:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-warning), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-generated:hover,
+  .dark .seeds-token-generated:hover,
+  .lights-out .seeds-token-generated:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-ai_generated), white 20%);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-token",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "Seeds React Token",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -8,8 +8,8 @@
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/token.css dist/token.css",
+    "build:debug": "tsup --dts --metafile && cp src/token.css dist/token.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",

package/postcss.config.js

@@ -0,0 +1,6 @@
+// Empty PostCSS config — prevents tsup from picking up the root postcss.config.js
+// (which runs Tailwind CSS and would fail without a tailwind.config.js in scope).
+// token.css uses plain CSS custom properties and needs no PostCSS processing.
+export default {
+  plugins: {},
+};

package/src/Token.stories.tsx

@@ -127,3 +127,15 @@ export const IsGenerated: Story = {
     </Token>
   ),
 };
+
+export const TailwindClassOverride: Story = {
+  name: "🚀 Tailwind class override",
+  render: (args) => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <Token {...args}>Default</Token>
+      <Token {...args} className="mx-200 p-300 inline-flex">
+        mx-200 p-300 inline-flex
+      </Token>
+    </div>
+  ),
+};

package/src/Token.tsx

@@ -1,74 +1,14 @@
 import * as React from "react";
-import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
-import { useTextContent } from "@sproutsocial/seeds-react-hooks";
-import Box from "@sproutsocial/seeds-react-box";
-import Icon from "@sproutsocial/seeds-react-icon";
-import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
-import Container from "./styles";
+import TokenHybrid from "./TokenHybrid";
 import type { TypeTokenProps } from "./TokenTypes";
 
-const Token = ({
-  children,
-  closeable = true,
-  onClick,
-  qa,
-  valid = true,
-  hasWarning = false,
-  isGenerated = false,
-  disabled = false,
-  palette = "neutral",
-  innerRef = null,
-  ...rest
-}: TypeTokenProps) => {
-  const textContainer = useTextContent("");
+/**
+ * Token component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+const Token = (props: TypeTokenProps) => <TokenHybrid {...props} />;
 
-  return (
-    <Container
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      //@ts-ignore some legacy ref type mismatch between divs
-      ref={mergeRefs(textContainer, innerRef)}
-      valid={valid}
-      hasWarning={hasWarning}
-      isGenerated={isGenerated}
-      palette={palette}
-      type={closeable || onClick ? "button" : undefined}
-      as={closeable || onClick ? "button" : "div"}
-      closeable={closeable || !!onClick}
-      disabled={disabled}
-      onClick={onClick}
-      data-qa-token={textContainer.current}
-      data-qa-token-iscloseable={closeable === true}
-      data-qa-token-isvalid={valid === true}
-      data-qa-token-isdisabled={disabled === true}
-      {...qa}
-      {...rest}
-    >
-      {!valid && (
-        <>
-          <VisuallyHidden as="div" role="status">
-            This is an invalid token
-          </VisuallyHidden>
-          <Icon
-            aria-hidden
-            pr={300}
-            name="circle-exclamation-solid"
-            size="mini"
-          />
-          <VisuallyHidden>Invalid</VisuallyHidden>
-        </>
-      )}
-      {closeable ? (
-        <Box display="flex" alignItems="center" justifyContent="space-between">
-          <Box as="span" display="flex" alignItems="center">
-            {children}
-          </Box>
-          <Icon aria-hidden pl={300} name="x-solid" size="mini" />
-        </Box>
-      ) : (
-        children
-      )}
-    </Container>
-  );
-};
+Token.displayName = "Token";
 
 export default Token;

package/src/TokenHybrid.tsx

@@ -0,0 +1,97 @@
+/**
+ * Hybrid Token Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ * Consumers passing styled-system props (e.g. `mb`, `width`, `bg`) get the
+ * styled-components implementation; everyone else gets the Tailwind path.
+ */
+
+import * as React from "react";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
+import { useTextContent } from "@sproutsocial/seeds-react-hooks";
+import Box from "@sproutsocial/seeds-react-box";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import Container from "./styles";
+import { TokenTailwind } from "./TokenTailwind";
+import type { TypeTokenProps } from "./TokenTypes";
+
+// Styled-components implementation — preserved verbatim from the original Token
+// so consumers using styled-system props get identical behaviour.
+const TokenStyled = ({
+  children,
+  closeable = true,
+  onClick,
+  qa,
+  valid = true,
+  hasWarning = false,
+  isGenerated = false,
+  disabled = false,
+  palette = "neutral",
+  innerRef = null,
+  ...rest
+}: TypeTokenProps) => {
+  const textContainer = useTextContent("");
+
+  return (
+    <Container
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore some legacy ref type mismatch between divs
+      ref={mergeRefs(textContainer, innerRef)}
+      valid={valid}
+      hasWarning={hasWarning}
+      isGenerated={isGenerated}
+      palette={palette}
+      type={closeable || onClick ? "button" : undefined}
+      as={closeable || onClick ? "button" : "div"}
+      closeable={closeable || !!onClick}
+      disabled={disabled}
+      onClick={onClick}
+      data-qa-token={textContainer.current}
+      data-qa-token-iscloseable={closeable === true}
+      data-qa-token-isvalid={valid === true}
+      data-qa-token-isdisabled={disabled === true}
+      {...qa}
+      {...rest}
+    >
+      {!valid && (
+        <>
+          <VisuallyHidden as="div" role="status">
+            This is an invalid token
+          </VisuallyHidden>
+          <Icon
+            aria-hidden
+            pr={300}
+            name="circle-exclamation-solid"
+            size="mini"
+          />
+          <VisuallyHidden>Invalid</VisuallyHidden>
+        </>
+      )}
+      {closeable ? (
+        <Box display="flex" alignItems="center" justifyContent="space-between">
+          <Box as="span" display="flex" alignItems="center">
+            {children}
+          </Box>
+          <Icon aria-hidden pl={300} name="x-solid" size="mini" />
+        </Box>
+      ) : (
+        children
+      )}
+    </Container>
+  );
+};
+
+const Token = (props: TypeTokenProps) => {
+  // hasStyledProps only inspects a fixed allowlist of styled-system prop names
+  // (bg, color, m*, p*, width, flex*, …), so it is safe to pass the full props —
+  // none of Token's own props collide with that list.
+  if (hasStyledProps(props)) {
+    return <TokenStyled {...props} />;
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return <TokenTailwind {...props} />;
+};
+
+export default Token;

package/src/TokenTailwind.tsx

@@ -0,0 +1,117 @@
+/**
+ * Tailwind CSS implementation of Token component
+ * Uses Seeds token CSS classes from token.css
+ */
+
+import * as React from "react";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
+import { useTextContent } from "@sproutsocial/seeds-react-hooks";
+import Box from "@sproutsocial/seeds-react-box";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+import type { TypeTokenProps } from "./TokenTypes";
+
+// 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 TokenTailwind = ({
+  children,
+  closeable = true,
+  onClick,
+  qa,
+  valid = true,
+  hasWarning = false,
+  isGenerated = false,
+  disabled = false,
+  palette = "neutral",
+  innerRef = null,
+  as,
+  className,
+  ...rest
+}: TypeTokenProps) => {
+  const textContainer = useTextContent("");
+
+  const isInteractive = closeable || !!onClick;
+  // Mirror the styled component: it is a styled.button rendered `as` a div when
+  // the token is neither closeable nor clickable. A consumer-provided `as` still
+  // wins, matching the original (where `as` arrived via {...rest} last).
+  const Element = (as ?? (isInteractive ? "button" : "div")) as React.ElementType;
+
+  const classes = cn(
+    "seeds-token",
+    {
+      "seeds-token-closeable": isInteractive,
+      "seeds-token-blue": palette === "blue",
+      "seeds-token-disabled": disabled,
+      "seeds-token-invalid": !valid,
+      "seeds-token-warning": hasWarning,
+      "seeds-token-generated": isGenerated,
+    },
+    className
+  );
+
+  return (
+    <Element
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore some legacy ref type mismatch between divs
+      ref={mergeRefs(textContainer, innerRef)}
+      type={isInteractive ? "button" : undefined}
+      className={classes}
+      {...(isInteractive ? { disabled } : {})}
+      onClick={onClick}
+      data-qa-token={textContainer.current}
+      data-qa-token-iscloseable={closeable === true}
+      data-qa-token-isvalid={valid === true}
+      data-qa-token-isdisabled={disabled === true}
+      {...qa}
+      {...rest}
+    >
+      {!valid && (
+        <>
+          <VisuallyHidden as="div" role="status">
+            This is an invalid token
+          </VisuallyHidden>
+          <Icon
+            aria-hidden
+            pr={300}
+            name="circle-exclamation-solid"
+            size="mini"
+          />
+          <VisuallyHidden>Invalid</VisuallyHidden>
+        </>
+      )}
+      {closeable ? (
+        <Box display="flex" alignItems="center" justifyContent="space-between">
+          <Box as="span" display="flex" alignItems="center">
+            {children}
+          </Box>
+          <Icon aria-hidden pl={300} name="x-solid" size="mini" />
+        </Box>
+      ) : (
+        children
+      )}
+    </Element>
+  );
+};
+
+TokenTailwind.displayName = "TokenTailwind";

package/src/__tests__/displayName.test.tsx

@@ -0,0 +1,11 @@
+import Token from "../";
+
+// Regression guard for DS-4394: racine's `generate:props-docs` runs react-docgen
+// over each package's entry component and keys the output on `displayName`. A bare
+// cross-file re-export resolves to no local definition, so the entry must be a real
+// local component with an explicit `displayName`.
+describe("Token entry component", () => {
+  it("exposes an explicit displayName for react-docgen", () => {
+    expect((Token as { displayName?: string }).displayName).toBe("Token");
+  });
+});

package/src/__tests__/features.test.tsx

@@ -60,6 +60,21 @@ describe("Token", () => {
     expect(onSubmit).not.toHaveBeenCalled();
   });
 
+  it("should render the Tailwind (CSS-class) implementation by default", () => {
+    const { container } = render(<Token closeable={false}>Token</Token>);
+    expect(container.querySelector(".seeds-token")).toBeInTheDocument();
+  });
+
+  it("should render the styled-components implementation when styled-system props are passed", () => {
+    const { container } = render(
+      <Token closeable={false} mb={400}>
+        Token
+      </Token>
+    );
+    expect(container.querySelector(".seeds-token")).not.toBeInTheDocument();
+    expect(screen.getByText("Token")).toBeInTheDocument();
+  });
+
   it("should add a qa selector with text content", () => {
     render(
       <Token closeable={false}>

package/src/css.d.ts

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

package/src/token.css

@@ -0,0 +1,160 @@
+/**
+ * Seeds Token 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:
+ *   <button class="seeds-token seeds-token-closeable">Token</button>
+ */
+
+@layer components {
+  .seeds-token {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    outline: none;
+    font-family: var(--font-family);
+    font-size: var(--font-size-200);
+    line-height: 13px;
+    font-weight: var(--font-weight-normal);
+    border: 1px solid var(--color-container-border-base);
+    border-radius: var(--radius-500);
+    color: var(--color-text-body);
+    background: var(--color-container-bg-base);
+    padding: var(--space-200) var(--space-300);
+    transition: all var(--duration-fast) var(--ease-ease_inout);
+  }
+
+  .seeds-token:focus {
+    box-shadow:
+      0 0 0 1px var(--color-button-primary-bg-base),
+      0 0px 0px 4px
+        color-mix(in srgb, var(--color-button-primary-bg-base), transparent 70%);
+    outline: none;
+  }
+
+  .seeds-token::-moz-focus-inner {
+    border: 0;
+  }
+
+  /* closeable / clickable */
+  .seeds-token-closeable {
+    cursor: pointer;
+  }
+
+  .seeds-token-closeable:hover,
+  .seeds-token-closeable:active {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-base), black 20%);
+  }
+
+  /* palette="blue" */
+  .seeds-token-blue {
+    background: var(--color-container-bg-decorative-blue);
+    border: 1px solid var(--color-container-border-decorative-blue);
+  }
+
+  .seeds-token-blue:hover,
+  .seeds-token-blue:active {
+    cursor: pointer;
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-decorative-blue), black 20%);
+  }
+
+  /* disabled */
+  .seeds-token-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .seeds-token-disabled:hover,
+  .seeds-token-disabled:active {
+    box-shadow: none;
+    border: 1px solid var(--color-container-border-base);
+  }
+
+  /* valid={false} */
+  .seeds-token-invalid {
+    color: var(--color-text-error);
+    background: var(--color-container-bg-error);
+    border: 1px solid var(--color-container-border-error);
+  }
+
+  .seeds-token-invalid:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-error), black 20%);
+  }
+
+  /* hasWarning */
+  .seeds-token-warning {
+    background: var(--color-container-bg-warning);
+    border: 1px solid var(--color-container-border-warning);
+  }
+
+  .seeds-token-warning:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-warning), black 20%);
+  }
+
+  /* isGenerated (AI) */
+  .seeds-token-generated {
+    background: var(--color-container-bg-ai_generated);
+    border: 1px solid var(--color-container-border-ai_generated);
+    color: var(--color-text-ai_generated);
+  }
+
+  .seeds-token-generated:hover {
+    box-shadow: var(--shadow-low);
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-ai_generated), black 20%);
+  }
+
+  /* Dark mode: useInteractiveColor lightens (white) instead of darkening (black). */
+  [data-theme="dark"] .seeds-token-closeable:hover,
+  [data-theme="dark"] .seeds-token-closeable:active,
+  .dark .seeds-token-closeable:hover,
+  .dark .seeds-token-closeable:active,
+  .lights-out .seeds-token-closeable:hover,
+  .lights-out .seeds-token-closeable:active {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-base), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-blue:hover,
+  [data-theme="dark"] .seeds-token-blue:active,
+  .dark .seeds-token-blue:hover,
+  .dark .seeds-token-blue:active,
+  .lights-out .seeds-token-blue:hover,
+  .lights-out .seeds-token-blue:active {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-decorative-blue), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-invalid:hover,
+  .dark .seeds-token-invalid:hover,
+  .lights-out .seeds-token-invalid:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-error), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-warning:hover,
+  .dark .seeds-token-warning:hover,
+  .lights-out .seeds-token-warning:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-warning), white 20%);
+  }
+
+  [data-theme="dark"] .seeds-token-generated:hover,
+  .dark .seeds-token-generated:hover,
+  .lights-out .seeds-token-generated:hover {
+    border: 1px solid
+      color-mix(in srgb, var(--color-container-border-ai_generated), white 20%);
+  }
+}