@sproutsocial/seeds-react-progress 0.2.7 → 0.2.9

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/progress.css dist/progress.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.31 KB
-CJS dist/index.js.map 3.70 KB
-CJS ⚡️ Build success in 105ms
-ESM dist/esm/index.js     1.50 KB
-ESM dist/esm/index.js.map 3.60 KB
-ESM ⚡️ Build success in 105ms
+CJS dist/index.js     5.25 KB
+CJS dist/index.js.map 7.81 KB
+CJS ⚡️ Build success in 46ms
+ESM dist/esm/index.js     3.23 KB
+ESM dist/esm/index.js.map 7.65 KB
+ESM ⚡️ Build success in 46ms
 DTS Build start
-DTS ⚡️ Build success in 6508ms
-DTS dist/index.d.ts  1.25 KB
-DTS dist/index.d.mts 1.25 KB
-Done in 8.39s.
+DTS ⚡️ Build success in 5377ms
+DTS dist/index.d.ts  1.42 KB
+DTS dist/index.d.mts 1.42 KB
+Done in 6.46s.

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @sproutsocial/seeds-react-progress
 
+## 0.2.9
+
+### 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.
+
+## 0.2.8
+
+### Patch Changes
+
+- Updated dependencies [a13a571]
+  - @sproutsocial/seeds-react-theme@4.1.1
+
 ## 0.2.7
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,6 +1,9 @@
 // src/Progress.tsx
 import "react";
 
+// src/ProgressHybrid.tsx
+import "react";
+
 // src/styles.ts
 import styled from "styled-components";
 import * as Progress from "@radix-ui/react-progress";
@@ -25,29 +28,50 @@ var StyledIndicator = styled(Progress.Indicator)`
   transition: transform 150ms ease;
 `;
 
-// src/Progress.tsx
+// src/ProgressTailwind.tsx
+import "react";
+import * as RadixProgress from "@radix-ui/react-progress";
 import { jsx } from "react/jsx-runtime";
-var Progress2 = ({
+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 ProgressTailwind = ({
   value,
   max = 100,
   getValueLabel,
   trackStyle,
   indicatorStyle,
+  className,
   ...rest
 }) => {
   const percentage = max > 0 ? Math.min(value / max * 100, 100) : 0;
   return /* @__PURE__ */ jsx(
-    StyledRoot,
+    RadixProgress.Root,
     {
       value,
       max,
       getValueLabel,
+      className: cn("Progress", "seeds-progress", className),
       "data-qa-progress": "",
       style: trackStyle,
       ...rest,
       children: /* @__PURE__ */ jsx(
-        StyledIndicator,
+        RadixProgress.Indicator,
         {
+          className: "seeds-progress-indicator",
           style: {
             transform: `translateX(-${100 - percentage}%)`,
             ...indicatorStyle
@@ -57,14 +81,58 @@ var Progress2 = ({
     }
   );
 };
+ProgressTailwind.displayName = "ProgressTailwind";
+
+// src/ProgressHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Progress2 = (props) => {
+  const {
+    value,
+    max = 100,
+    getValueLabel,
+    trackStyle,
+    indicatorStyle,
+    ...rest
+  } = props;
+  if (hasStyledProps(rest)) {
+    const percentage = max > 0 ? Math.min(value / max * 100, 100) : 0;
+    return /* @__PURE__ */ jsx2(
+      StyledRoot,
+      {
+        value,
+        max,
+        getValueLabel,
+        "data-qa-progress": "",
+        style: trackStyle,
+        ...rest,
+        children: /* @__PURE__ */ jsx2(
+          StyledIndicator,
+          {
+            style: {
+              transform: `translateX(-${100 - percentage}%)`,
+              ...indicatorStyle
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(ProgressTailwind, { ...props });
+};
+
+// src/Progress.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Progress3 = (props) => /* @__PURE__ */ jsx3(Progress2, { ...props });
+Progress3.displayName = "Progress";
 
 // src/ProgressTypes.ts
 import "react";
 
 // src/index.ts
-var index_default = Progress2;
+var index_default = Progress3;
 export {
-  Progress2 as Progress,
+  Progress3 as Progress,
   index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Progress.tsx","../../src/styles.ts","../../src/ProgressTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  trackStyle,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      style={trackStyle}\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"style\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the track (background) element, e.g. backgroundColor */\n    trackStyle?: React.CSSProperties;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n","import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACAvB,OAAO,YAAY;AACnB,YAAY,cAAc;AAC1B,SAAS,cAAc;AAEhB,IAAM,aAAa,OAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,MAAM;AAAA;AAGH,IAAM,kBAAkB,OAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADE/C;AAnBC,IAAMA,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE/BA,OAAuB;;;ACEvB,IAAO,gBAAQC;","names":["Progress","Progress"]}
+{"version":3,"sources":["../../src/Progress.tsx","../../src/ProgressHybrid.tsx","../../src/styles.ts","../../src/ProgressTailwind.tsx","../../src/ProgressTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Progress as ProgressHybrid } from \"./ProgressHybrid\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\n/**\n * Progress 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 Progress = (props: TypeProgressProps) => <ProgressHybrid {...props} />;\n\nProgress.displayName = \"Progress\";\n\nexport { Progress };\n","/**\n * Hybrid Progress 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 { StyledRoot, StyledIndicator } from \"./styles\";\nimport { ProgressTailwind } from \"./ProgressTailwind\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = (props: TypeProgressProps) => {\n  const {\n    value,\n    max = 100,\n    getValueLabel,\n    trackStyle,\n    indicatorStyle,\n    ...rest\n  } = props;\n\n  if (hasStyledProps(rest)) {\n    const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n    return (\n      <StyledRoot\n        value={value}\n        max={max}\n        getValueLabel={getValueLabel}\n        data-qa-progress=\"\"\n        style={trackStyle}\n        {...rest}\n      >\n        <StyledIndicator\n          style={{\n            transform: `translateX(-${100 - percentage}%)`,\n            ...indicatorStyle,\n          }}\n        />\n      </StyledRoot>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <ProgressTailwind {...props} />;\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","/**\n * Tailwind CSS implementation of Progress component\n * Uses Seeds progress CSS classes from progress.css\n */\n\nimport * as React from \"react\";\nimport * as RadixProgress from \"@radix-ui/react-progress\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\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 ProgressTailwind = ({\n  value,\n  max = 100,\n  getValueLabel,\n  trackStyle,\n  indicatorStyle,\n  className,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <RadixProgress.Root\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      // Keep the literal \"Progress\" class so existing selectors (e.g. `.Progress`,\n      // `.Progress > div`) continue to resolve. seeds-progress carries the styling.\n      className={cn(\"Progress\", \"seeds-progress\", className)}\n      data-qa-progress=\"\"\n      style={trackStyle}\n      {...(rest as any)}\n    >\n      <RadixProgress.Indicator\n        className=\"seeds-progress-indicator\"\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </RadixProgress.Root>\n  );\n};\n\nProgressTailwind.displayName = \"ProgressTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"style\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the track (background) element, e.g. backgroundColor */\n    trackStyle?: React.CSSProperties;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n","import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n"],"mappings":";AAAA,OAAuB;;;ACOvB,OAAuB;;;ACPvB,OAAO,YAAY;AACnB,YAAY,cAAc;AAC1B,SAAS,cAAc;AAEhB,IAAM,aAAa,OAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,MAAM;AAAA;AAGH,IAAM,kBAAkB,OAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;AChBrD,OAAuB;AACvB,YAAY,mBAAmB;AAiDzB;AA7CN,SAAS,MACJ,QACK;AACR,QAAM,UAAoB,CAAC;AAE3B,aAAW,SAAS,QAAQ;AAC1B,QAAI,CAAC,MAAO;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC7B,cAAQ,KAAK,KAAK;AAAA,IACpB,WAAW,OAAO,UAAU,UAAU;AACpC,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAI,OAAO;AACT,kBAAQ,KAAK,GAAG;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO,QAAQ,KAAK,GAAG;AACzB;AAEO,IAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAe;AAAA,IAAd;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAGA,WAAW,GAAG,YAAY,kBAAkB,SAAS;AAAA,MACrD,oBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAI;AAAA,MAEL;AAAA,QAAe;AAAA,QAAd;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,iBAAiB,cAAc;;;AFxD/B,SAAS,sBAAsB;AAyBvB,gBAAAA,YAAA;AAtBD,IAAMC,YAAW,CAAC,UAA6B;AACpD,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,MAAI,eAAe,IAAI,GAAG;AACxB,UAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,oBAAiB;AAAA,QACjB,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,WAAW,eAAe,MAAM,UAAU;AAAA,cAC1C,GAAG;AAAA,YACL;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,SAAO,gBAAAA,KAAC,oBAAkB,GAAG,OAAO;AACtC;;;ADtC+C,gBAAAE,YAAA;AAA/C,IAAMC,YAAW,CAAC,UAA6B,gBAAAD,KAACC,WAAA,EAAgB,GAAG,OAAO;AAE1EA,UAAS,cAAc;;;AIXvB,OAAuB;;;ACEvB,IAAO,gBAAQC;","names":["jsx","Progress","jsx","Progress","Progress"]}

package/dist/index.d.mts

@@ -22,6 +22,14 @@ type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps
     indicatorStyle?: React.CSSProperties;
 };
 
-declare const Progress: ({ value, max, getValueLabel, trackStyle, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Progress component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Progress: {
+    (props: TypeProgressProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 export { Progress, type TypeProgressProps, Progress as default };

package/dist/index.d.ts

@@ -22,6 +22,14 @@ type TypeProgressProps = TypeStyledComponentsCommonProps & TypeSystemCommonProps
     indicatorStyle?: React.CSSProperties;
 };
 
-declare const Progress: ({ value, max, getValueLabel, trackStyle, indicatorStyle, ...rest }: TypeProgressProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Progress component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+declare const Progress: {
+    (props: TypeProgressProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 export { Progress, type TypeProgressProps, Progress as default };

package/dist/index.js

@@ -30,13 +30,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Progress: () => Progress2,
+  Progress: () => Progress3,
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/Progress.tsx
-var React = require("react");
+var React3 = require("react");
+
+// src/ProgressHybrid.tsx
+var React2 = require("react");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -62,29 +65,50 @@ var StyledIndicator = (0, import_styled_components.default)(Progress.Indicator)`
   transition: transform 150ms ease;
 `;
 
-// src/Progress.tsx
+// src/ProgressTailwind.tsx
+var React = require("react");
+var RadixProgress = __toESM(require("@radix-ui/react-progress"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Progress2 = ({
+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 ProgressTailwind = ({
   value,
   max = 100,
   getValueLabel,
   trackStyle,
   indicatorStyle,
+  className,
   ...rest
 }) => {
   const percentage = max > 0 ? Math.min(value / max * 100, 100) : 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StyledRoot,
+    RadixProgress.Root,
     {
       value,
       max,
       getValueLabel,
+      className: cn("Progress", "seeds-progress", className),
       "data-qa-progress": "",
       style: trackStyle,
       ...rest,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        StyledIndicator,
+        RadixProgress.Indicator,
         {
+          className: "seeds-progress-indicator",
           style: {
             transform: `translateX(-${100 - percentage}%)`,
             ...indicatorStyle
@@ -94,12 +118,56 @@ var Progress2 = ({
     }
   );
 };
+ProgressTailwind.displayName = "ProgressTailwind";
+
+// src/ProgressHybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Progress2 = (props) => {
+  const {
+    value,
+    max = 100,
+    getValueLabel,
+    trackStyle,
+    indicatorStyle,
+    ...rest
+  } = props;
+  if ((0, import_seeds_react_system_props2.hasStyledProps)(rest)) {
+    const percentage = max > 0 ? Math.min(value / max * 100, 100) : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      StyledRoot,
+      {
+        value,
+        max,
+        getValueLabel,
+        "data-qa-progress": "",
+        style: trackStyle,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          StyledIndicator,
+          {
+            style: {
+              transform: `translateX(-${100 - percentage}%)`,
+              ...indicatorStyle
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProgressTailwind, { ...props });
+};
+
+// src/Progress.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Progress3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Progress2, { ...props });
+Progress3.displayName = "Progress";
 
 // src/ProgressTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
-var index_default = Progress2;
+var index_default = Progress3;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Progress

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Progress.tsx","../src/styles.ts","../src/ProgressTypes.ts"],"sourcesContent":["import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n","import * as React from \"react\";\nimport { StyledRoot, StyledIndicator } from \"./styles\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = ({\n  value,\n  max = 100,\n  getValueLabel,\n  trackStyle,\n  indicatorStyle,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <StyledRoot\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      data-qa-progress=\"\"\n      style={trackStyle}\n      {...rest}\n    >\n      <StyledIndicator\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </StyledRoot>\n  );\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"style\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the track (background) element, e.g. backgroundColor */\n    trackStyle?: React.CSSProperties;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kBAAAA;AAAA,EAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,eAA0B;AAC1B,sCAAuB;AAEhB,IAAM,iBAAa,yBAAAC,SAAgB,aAAI,EAAE,MAAM;AAAA,EACpD,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKkB,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAAA,IAE7D,sCAAM;AAAA;AAGH,IAAM,sBAAkB,yBAAAA,SAAgB,kBAAS;AAAA;AAAA;AAAA,mBAGrC,CAAC,MAAM,EAAE,MAAM,MAAM,KAAK;AAAA,sBACvB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA;;;ADE/C;AAnBC,IAAMC,YAAW,CAAC;AAAA,EACvB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,aAAa,MAAM,IAAI,KAAK,IAAK,QAAQ,MAAO,KAAK,GAAG,IAAI;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAiB;AAAA,MACjB,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,WAAW,eAAe,MAAM,UAAU;AAAA,YAC1C,GAAG;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AE/BA,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQC;","names":["Progress","styled","Progress","React","Progress"]}
+{"version":3,"sources":["../src/index.ts","../src/Progress.tsx","../src/ProgressHybrid.tsx","../src/styles.ts","../src/ProgressTailwind.tsx","../src/ProgressTypes.ts"],"sourcesContent":["import { Progress } from \"./Progress\";\n\nexport default Progress;\nexport { Progress };\nexport * from \"./ProgressTypes\";\n","import * as React from \"react\";\nimport { Progress as ProgressHybrid } from \"./ProgressHybrid\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\n/**\n * Progress 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 Progress = (props: TypeProgressProps) => <ProgressHybrid {...props} />;\n\nProgress.displayName = \"Progress\";\n\nexport { Progress };\n","/**\n * Hybrid Progress 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 { StyledRoot, StyledIndicator } from \"./styles\";\nimport { ProgressTailwind } from \"./ProgressTailwind\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\n\nexport const Progress = (props: TypeProgressProps) => {\n  const {\n    value,\n    max = 100,\n    getValueLabel,\n    trackStyle,\n    indicatorStyle,\n    ...rest\n  } = props;\n\n  if (hasStyledProps(rest)) {\n    const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n    return (\n      <StyledRoot\n        value={value}\n        max={max}\n        getValueLabel={getValueLabel}\n        data-qa-progress=\"\"\n        style={trackStyle}\n        {...rest}\n      >\n        <StyledIndicator\n          style={{\n            transform: `translateX(-${100 - percentage}%)`,\n            ...indicatorStyle,\n          }}\n        />\n      </StyledRoot>\n    );\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return <ProgressTailwind {...props} />;\n};\n","import styled from \"styled-components\";\nimport * as Progress from \"@radix-ui/react-progress\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledRoot = styled(Progress.Root).attrs({\n  className: \"Progress\",\n})`\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 8px;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.container.border.base};\n\n  ${COMMON}\n`;\n\nexport const StyledIndicator = styled(Progress.Indicator)`\n  height: 100%;\n  width: 100%;\n  border-radius: ${(p) => p.theme.radii.outer};\n  background-color: ${(p) => p.theme.colors.icon.base};\n  transition: transform 150ms ease;\n`;\n","/**\n * Tailwind CSS implementation of Progress component\n * Uses Seeds progress CSS classes from progress.css\n */\n\nimport * as React from \"react\";\nimport * as RadixProgress from \"@radix-ui/react-progress\";\nimport type { TypeProgressProps } from \"./ProgressTypes\";\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 ProgressTailwind = ({\n  value,\n  max = 100,\n  getValueLabel,\n  trackStyle,\n  indicatorStyle,\n  className,\n  ...rest\n}: TypeProgressProps) => {\n  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;\n\n  return (\n    <RadixProgress.Root\n      value={value}\n      max={max}\n      getValueLabel={getValueLabel}\n      // Keep the literal \"Progress\" class so existing selectors (e.g. `.Progress`,\n      // `.Progress > div`) continue to resolve. seeds-progress carries the styling.\n      className={cn(\"Progress\", \"seeds-progress\", className)}\n      data-qa-progress=\"\"\n      style={trackStyle}\n      {...(rest as any)}\n    >\n      <RadixProgress.Indicator\n        className=\"seeds-progress-indicator\"\n        style={{\n          transform: `translateX(-${100 - percentage}%)`,\n          ...indicatorStyle,\n        }}\n      />\n    </RadixProgress.Root>\n  );\n};\n\nProgressTailwind.displayName = \"ProgressTailwind\";\n","import * as React from \"react\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\ntype TypeAriaLabel =\n  | { \"aria-label\": string; \"aria-labelledby\"?: string }\n  | { \"aria-label\"?: string; \"aria-labelledby\": string };\n\nexport type TypeProgressProps = TypeStyledComponentsCommonProps &\n  TypeSystemCommonProps &\n  Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\" | \"style\"> &\n  TypeAriaLabel & {\n    /** The current progress value */\n    value: number;\n    /** The maximum progress value. Defaults to 100 */\n    max?: number;\n    /** A function to get the accessible label text representing the current value. Defaults to \"{value}%\" */\n    getValueLabel?: (value: number, max: number) => string;\n    /** Custom CSS for the track (background) element, e.g. backgroundColor */\n    trackStyle?: React.CSSProperties;\n    /** Custom CSS for the indicator (fill) element, e.g. a gradient background */\n    indicatorStyle?: React.CSSProperties;\n  };\n"],"mappings":"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","names":["Progress","React","React","styled","import_seeds_react_system_props","import_jsx_runtime","Progress","import_jsx_runtime","Progress","React","Progress"]}

package/dist/progress.css

@@ -0,0 +1,29 @@
+/**
+ * Seeds Progress 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="Progress seeds-progress"><div class="seeds-progress-indicator" /></div>
+ */
+
+@layer components {
+  .seeds-progress {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 8px;
+    border-radius: var(--radius-outer);
+    background-color: var(--color-container-border-base);
+  }
+
+  .seeds-progress-indicator {
+    height: 100%;
+    width: 100%;
+    border-radius: var(--radius-outer);
+    background-color: var(--color-icon-base);
+    transition: transform 150ms ease;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-progress",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Seeds React Progress",
   "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/progress.css dist/progress.css",
+    "build:debug": "tsup --dts --metafile && cp src/progress.css dist/progress.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@radix-ui/react-progress": "^1.1.2",
-    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-theme": "^4.1.1",
     "@sproutsocial/seeds-react-system-props": "^3.1.1"
   },
   "devDependencies": {

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).
+// progress.css uses plain CSS custom properties and needs no PostCSS processing.
+export default {
+  plugins: {},
+};

package/src/Progress.stories.tsx

@@ -96,3 +96,18 @@ export const CustomTrackAndIndicator: Story = {
 };
 
 CustomTrackAndIndicator.storyName = "Custom Track and Indicator";
+
+export const TailwindClassOverride: Story = {
+  name: "🚀 Tailwind class override",
+  render: (args: TypeProgressProps) => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      <Progress {...args} />
+      <Progress {...args} className="mx-200 p-300 inline-flex" />
+    </div>
+  ),
+  args: {
+    value: 50,
+    max: 100,
+    "aria-label": "Credits remaining",
+  },
+};

package/src/Progress.tsx

@@ -1,32 +1,14 @@
 import * as React from "react";
-import { StyledRoot, StyledIndicator } from "./styles";
+import { Progress as ProgressHybrid } from "./ProgressHybrid";
 import type { TypeProgressProps } from "./ProgressTypes";
 
-export const Progress = ({
-  value,
-  max = 100,
-  getValueLabel,
-  trackStyle,
-  indicatorStyle,
-  ...rest
-}: TypeProgressProps) => {
-  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;
+/**
+ * Progress component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ */
+const Progress = (props: TypeProgressProps) => <ProgressHybrid {...props} />;
 
-  return (
-    <StyledRoot
-      value={value}
-      max={max}
-      getValueLabel={getValueLabel}
-      data-qa-progress=""
-      style={trackStyle}
-      {...rest}
-    >
-      <StyledIndicator
-        style={{
-          transform: `translateX(-${100 - percentage}%)`,
-          ...indicatorStyle,
-        }}
-      />
-    </StyledRoot>
-  );
-};
+Progress.displayName = "Progress";
+
+export { Progress };

package/src/ProgressHybrid.tsx

@@ -0,0 +1,48 @@
+/**
+ * Hybrid Progress 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 { StyledRoot, StyledIndicator } from "./styles";
+import { ProgressTailwind } from "./ProgressTailwind";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeProgressProps } from "./ProgressTypes";
+
+export const Progress = (props: TypeProgressProps) => {
+  const {
+    value,
+    max = 100,
+    getValueLabel,
+    trackStyle,
+    indicatorStyle,
+    ...rest
+  } = props;
+
+  if (hasStyledProps(rest)) {
+    const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;
+
+    return (
+      <StyledRoot
+        value={value}
+        max={max}
+        getValueLabel={getValueLabel}
+        data-qa-progress=""
+        style={trackStyle}
+        {...rest}
+      >
+        <StyledIndicator
+          style={{
+            transform: `translateX(-${100 - percentage}%)`,
+            ...indicatorStyle,
+          }}
+        />
+      </StyledRoot>
+    );
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return <ProgressTailwind {...props} />;
+};

package/src/ProgressTailwind.tsx

@@ -0,0 +1,67 @@
+/**
+ * Tailwind CSS implementation of Progress component
+ * Uses Seeds progress CSS classes from progress.css
+ */
+
+import * as React from "react";
+import * as RadixProgress from "@radix-ui/react-progress";
+import type { TypeProgressProps } from "./ProgressTypes";
+
+// 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 ProgressTailwind = ({
+  value,
+  max = 100,
+  getValueLabel,
+  trackStyle,
+  indicatorStyle,
+  className,
+  ...rest
+}: TypeProgressProps) => {
+  const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;
+
+  return (
+    <RadixProgress.Root
+      value={value}
+      max={max}
+      getValueLabel={getValueLabel}
+      // Keep the literal "Progress" class so existing selectors (e.g. `.Progress`,
+      // `.Progress > div`) continue to resolve. seeds-progress carries the styling.
+      className={cn("Progress", "seeds-progress", className)}
+      data-qa-progress=""
+      style={trackStyle}
+      {...(rest as any)}
+    >
+      <RadixProgress.Indicator
+        className="seeds-progress-indicator"
+        style={{
+          transform: `translateX(-${100 - percentage}%)`,
+          ...indicatorStyle,
+        }}
+      />
+    </RadixProgress.Root>
+  );
+};
+
+ProgressTailwind.displayName = "ProgressTailwind";

package/src/__tests__/Progress.test.tsx

@@ -118,6 +118,30 @@ describe("Progress", () => {
     ).toBeTruthy();
   });
 
+  it("should render the Tailwind (CSS-class) implementation by default", () => {
+    const { container } = render(
+      <Progress value={50} aria-label="Credits remaining" />
+    );
+
+    // The default (no styled-system props) path renders the CSS-class
+    // implementation, which carries the seeds-progress class.
+    expect(container.querySelector(".seeds-progress")).toBeInTheDocument();
+    expect(
+      container.querySelector(".seeds-progress > .seeds-progress-indicator")
+    ).toBeInTheDocument();
+  });
+
+  it("should render the styled-components implementation when styled-system props are passed", () => {
+    const { container } = render(
+      <Progress value={50} aria-label="Credits remaining" mb={400} />
+    );
+
+    // styled-system props route to the styled-components path, which does not
+    // emit the seeds-progress class.
+    expect(container.querySelector(".seeds-progress")).not.toBeInTheDocument();
+    expect(container.querySelector(".Progress")).toBeInTheDocument();
+  });
+
   it("should apply trackStyle to the track", () => {
     const { container } = render(
       <Progress

package/src/__tests__/displayName.test.tsx

@@ -0,0 +1,11 @@
+import { Progress } 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("Progress entry component", () => {
+  it("exposes an explicit displayName for react-docgen", () => {
+    expect((Progress as { displayName?: string }).displayName).toBe("Progress");
+  });
+});

package/src/css.d.ts

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

package/src/progress.css

@@ -0,0 +1,29 @@
+/**
+ * Seeds Progress 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="Progress seeds-progress"><div class="seeds-progress-indicator" /></div>
+ */
+
+@layer components {
+  .seeds-progress {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 8px;
+    border-radius: var(--radius-outer);
+    background-color: var(--color-container-border-base);
+  }
+
+  .seeds-progress-indicator {
+    height: 100%;
+    width: 100%;
+    border-radius: var(--radius-outer);
+    background-color: var(--color-icon-base);
+    transition: transform 150ms ease;
+  }
+}