@sproutsocial/seeds-react-icon 2.4.1 → 2.4.3

package/dist/esm/index.js

@@ -6,9 +6,13 @@ import {
 import "react";
 import styled2, { css as css2 } from "styled-components";
 import Box from "@sproutsocial/seeds-react-box";
+
+// src/IconHybrid.tsx
+import "react";
 import PartnerLogo from "@sproutsocial/seeds-react-partner-logo";
-import { includes } from "@sproutsocial/seeds-react-utilities";
+import { includes as includes2 } from "@sproutsocial/seeds-react-utilities";
 import { LogoNamesWithoutVariants as PartnerLogoNames } from "@sproutsocial/seeds-partner-logos";
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -53,7 +57,65 @@ var Container = styled.span.attrs({
 `;
 var styles_default = Container;
 
-// src/Icon.tsx
+// src/IconTailwind.tsx
+import "react";
+import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var sizeMap = {
+  mini: "12px",
+  /** TODO: deprecate default in favor of small in future release */
+  default: "16px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var IconTailwind = ({
+  size,
+  fixedWidth,
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = cn(
+    "Icon",
+    "seeds-icon",
+    { "seeds-icon-fixed-width": fixedWidth },
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: classes,
+      style: {
+        ...rest.style,
+        "--icon-size": sizeMap[size]
+      },
+      children
+    }
+  );
+};
+IconTailwind.displayName = "IconTailwind";
+
+// src/iconShared.tsx
+import "react";
+import { includes } from "@sproutsocial/seeds-react-utilities";
 import {
   AiViewBoxes,
   ExternalViewBoxes,
@@ -61,14 +123,57 @@ import {
   SproutViewBoxes,
   ExternalIconNames
 } from "@sproutsocial/seeds-icons";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var AllViewboxes = {
   ...AiViewBoxes,
   ...ExternalViewBoxes,
   ...GeneralViewBoxes,
   ...SproutViewBoxes
 };
-var Icon = ({
+function resolveIconName(name, size) {
+  const defaultVariant = size === "mini" ? "solid" : "outline";
+  return !name?.endsWith("-outline") && !name?.endsWith("-solid") && !includes(ExternalIconNames, name) ? (
+    // then add default variant
+    `${name}-${defaultVariant}`
+  ) : (
+    // else use name as is
+    name
+  );
+}
+function getAriaProps(ariaLabel, ariaLabelFromRest) {
+  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;
+  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
+  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? ariaLabelFromRest } : {};
+  return { containerAriaProps, svgAriaProps };
+}
+var IconSvg = ({
+  iconName,
+  iconViewBox,
+  svgProps,
+  svgAriaProps
+}) => /* @__PURE__ */ jsx2(
+  "svg",
+  {
+    className: "Icon-svg",
+    viewBox: iconViewBox,
+    focusable: false,
+    "data-qa-icon-svg": `${iconName}-svg`,
+    ...svgProps,
+    ...svgAriaProps,
+    children: /* @__PURE__ */ jsx2(
+      "use",
+      {
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        xlinkHref: `#seeds-svgs_${iconName}`
+      }
+    )
+  }
+);
+
+// src/IconHybrid.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SC_CLASS_PATTERN = /\bsc-[a-zA-Z0-9]+\b/;
+var IconHybrid = ({
   name,
   size = "small",
   fixedWidth = false,
@@ -77,7 +182,7 @@ var Icon = ({
   svgProps,
   ...rest
 }) => {
-  if (includes(PartnerLogoNames, name)) {
+  if (includes2(PartnerLogoNames, name)) {
     const logoSize = size === "default" ? "small" : size;
     const logoProps = {
       partnerName: name,
@@ -85,7 +190,7 @@ var Icon = ({
       logoType: "symbol",
       svgProps
     };
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx3(
       PartnerLogo,
       {
         "aria-label": ariaLabel,
@@ -94,53 +199,58 @@ var Icon = ({
       }
     );
   }
-  const defaultVariant = size === "mini" ? "solid" : "outline";
-  const iconName = (
-    // if not external and has no variant
-    !name?.endsWith("-outline") && !name?.endsWith("-solid") && !includes(ExternalIconNames, name) ? (
-      // then add default variant
-      `${name}-${defaultVariant}`
-    ) : (
-      // else use name as is
-      name
-    )
-  );
+  const iconName = resolveIconName(name, size);
   const iconViewBox = AllViewboxes[iconName];
   const { "aria-label": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;
-  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;
-  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
-  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? ariaLabelFromRest } : {};
-  return /* @__PURE__ */ jsx(
-    styles_default,
+  const { containerAriaProps, svgAriaProps } = getAriaProps(
+    ariaLabel,
+    ariaLabelFromRest
+  );
+  const svg = /* @__PURE__ */ jsx3(
+    IconSvg,
     {
-      iconSize: size,
+      iconName,
+      iconViewBox,
+      svgProps,
+      svgAriaProps
+    }
+  );
+  const className = restWithoutAriaLabel.className;
+  const needsSC = color !== void 0 || restWithoutAriaLabel.cursor !== void 0 || needsStyledComponents(restWithoutAriaLabel) || typeof className === "string" && SC_CLASS_PATTERN.test(className);
+  if (needsSC) {
+    return /* @__PURE__ */ jsx3(
+      styles_default,
+      {
+        iconSize: size,
+        fixedWidth: !!fixedWidth,
+        "data-qa-icon": iconName,
+        color,
+        ...restWithoutAriaLabel,
+        ...containerAriaProps,
+        children: svg
+      },
+      iconName
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    IconTailwind,
+    {
+      size,
       fixedWidth: !!fixedWidth,
       "data-qa-icon": iconName,
-      color,
       ...restWithoutAriaLabel,
       ...containerAriaProps,
-      children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "Icon-svg",
-          viewBox: iconViewBox,
-          focusable: false,
-          "data-qa-icon-svg": `${iconName}-svg`,
-          ...svgProps,
-          ...svgAriaProps,
-          children: /* @__PURE__ */ jsx(
-            "use",
-            {
-              xmlnsXlink: "http://www.w3.org/1999/xlink",
-              xlinkHref: `#seeds-svgs_${iconName}`
-            }
-          )
-        }
-      )
+      children: svg
     },
     iconName
   );
 };
+IconHybrid.displayName = "Icon";
+var IconHybrid_default = IconHybrid;
+
+// src/Icon.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Icon = (props) => /* @__PURE__ */ jsx4(IconHybrid_default, { ...props });
 var ToggleableIcon = styled2(Icon)`
   transition: all ${(p) => p.theme.duration.fast} linear;
 
@@ -165,7 +275,7 @@ var IconToggle = ({
   ...rest
 }) => {
   return /* @__PURE__ */ jsxs(Box, { as: "span", position: "relative", display: "inline-flex", ...rest, children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx4(
       ToggleableIcon,
       {
         active: isActive,
@@ -176,7 +286,7 @@ var IconToggle = ({
         "aria-label": !isActive ? void 0 : ariaLabel
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx4(
       ToggleableIcon,
       {
         active: !isActive,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Icon.tsx","../../src/styles.ts","../../src/IconTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport PartnerLogo from \"@sproutsocial/seeds-react-partner-logo\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport { LogoNamesWithoutVariants as PartnerLogoNames } from \"@sproutsocial/seeds-partner-logos\";\n\nimport type { TypeIconProps, TypeToggleProps } from \"./IconTypes\";\nimport Container from \"./styles\";\nimport {\n  AiViewBoxes,\n  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\n  ...AiViewBoxes,\n  ...ExternalViewBoxes,\n  ...GeneralViewBoxes,\n  ...SproutViewBoxes,\n};\n\nconst Icon = ({\n  name,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  color,\n  svgProps,\n  ...rest\n}: TypeIconProps) => {\n  if (includes(PartnerLogoNames, name)) {\n    // Icon's \"default\" size is equivalent to PartnerLogo's \"small\" size\n    const logoSize = size === \"default\" ? \"small\" : size;\n    const logoProps = {\n      partnerName: name,\n      size: logoSize,\n      logoType: \"symbol\" as const,\n      svgProps,\n    };\n    return (\n      <PartnerLogo\n        // ariaLabel needs to be overridable by aria-label prop in ...rest\n        aria-label={ariaLabel}\n        {...rest}\n        {...logoProps}\n      />\n    );\n  }\n\n  const defaultVariant = size === \"mini\" ? \"solid\" : \"outline\";\n\n  const iconName: EnumIconSvgNames =\n    // if not external and has no variant\n    !name?.endsWith(\"-outline\") &&\n    !name?.endsWith(\"-solid\") &&\n    !includes(ExternalIconNames, name)\n      ? // then add default variant\n        `${name as EnumIconNamesWithoutVariants}-${defaultVariant}`\n      : // else use name as is\n        (name as EnumIconSvgNames);\n\n  const iconViewBox = AllViewboxes[iconName];\n\n  const { \"aria-label\": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;\n  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;\n  const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\", \"aria-label\": ariaLabel ?? ariaLabelFromRest }\n    : {};\n\n  return (\n    <Container\n      iconSize={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      data-qa-icon={iconName}\n      color={color}\n      {...restWithoutAriaLabel}\n      {...containerAriaProps}\n    >\n      <svg\n        className=\"Icon-svg\"\n        viewBox={iconViewBox}\n        focusable={false}\n        data-qa-icon-svg={`${iconName}-svg`}\n        {...svgProps}\n        {...svgAriaProps}\n      >\n        <use\n          xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n          xlinkHref={`#seeds-svgs_${iconName}`}\n        />\n      </svg>\n    </Container>\n  );\n};\n\nconst ToggleableIcon = styled(Icon)<{ active: boolean }>`\n  transition: all ${(p) => p.theme.duration.fast} linear;\n\n  ${(p) =>\n    p.active &&\n    css`\n      opacity: 1;\n      transform: scale(1);\n    `}\n\n  ${(p) =>\n    !p.active &&\n    css`\n      position: absolute;\n      opacity: 0;\n      transform: scale(0);\n    `}\n`;\n\nconst IconToggle = ({\n  activeName,\n  inactiveName,\n  isActive,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  ...rest\n}: TypeToggleProps) => {\n  return (\n    <Box as=\"span\" position=\"relative\" display=\"inline-flex\" {...rest}>\n      <ToggleableIcon\n        active={isActive}\n        name={activeName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={!isActive}\n        aria-label={!isActive ? undefined : ariaLabel}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={isActive}\n        aria-label={isActive ? ariaLabel : undefined}\n      />\n    </Box>\n  );\n};\n\nIconToggle.displayName = \"Icon.Toggle\";\n/**\n * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.\n *\n * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button\n * @example\n * const [toggleState, setToggleState] = useState(false);\n * <Button  // Wrap Icon.Toggle with Button\n *  appearance='pill'\n *  aria-label='like' // required for accessibility\n *  aria-pressed={toggleState} // required for accessibility\n *  onClick={() => setToggleState(!toggleState)}\n * >\n *  <Icon.Toggle\n *    activeName=\"heart-solid\"\n *    inactiveName=\"heart-outline\"\n *    isActive={toggleState}\n *   />\n * </Button>\n */\nIcon.Toggle = IconToggle;\n\nexport default Icon;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\nconst sizes: { [key in TypeIconSize]: string } = {\n  mini: \"12px\",\n\n  /** TODO: deprecate default  in favor of small in future release */\n  default: \"16px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n};\n\nconst stylesForSize = (iconActualSize: string, fixedWidth: boolean) => css`\n  line-height: ${iconActualSize};\n\n  &,\n  .Icon-svg {\n    height: ${iconActualSize};\n    fill: currentColor;\n  }\n\n  ${fixedWidth &&\n  `\n    &,\n    & .Icon-svg {\n      width: ${iconActualSize}\n    }\n  `}\n`;\n\nconst Container = styled.span.attrs({\n  className: \"Icon\",\n})<{\n  iconSize: TypeIconSize;\n  fixedWidth: boolean;\n}>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n\n  ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}\n\n  ${COMMON}\n  ${verticalAlign}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumIconNames } from \"@sproutsocial/seeds-icons\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;\n\nexport type TypeIconSize =\n  | \"mini\" // 12x12\n  // TODO: deprecate default  in favor of small in future release\n  | \"default\" // 16x16\n  | \"small\" // 16x16\n  | \"medium\" // 24x24\n  | \"large\" // 32x32\n  | \"jumbo\"; // 64x64\n\nexport interface TypeIconProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** Name of the icon in the svg sprite */\n  name: TypeIconName;\n  size?: TypeIconSize;\n  /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */\n  fixedWidth?: boolean;\n  /** Label used to describe the icon if not used with an accompanying visual label */\n  ariaLabel?: string;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n\nexport interface TypeToggleProps extends TypeBoxProps {\n  /** Name of the icon to be shown in the active state */\n  activeName: TypeIconName;\n  /** Name of the icon to be shown in the inactive state */\n  inactiveName: TypeIconName;\n  /** Whether the active icon should be shown or not */\n  isActive: boolean;\n  /** The size of the icon. `small` is the default */\n  size?: TypeIconSize;\n  fixedWidth?: boolean;\n  ariaLabel?: string;\n}\n","import Icon from \"./Icon\";\n\nexport default Icon;\nexport { Icon };\nexport { default as IconContainer } from \"./styles\";\nexport * from \"./IconTypes\";\n\n// Icon v2 exports (structural SVG wrapper; distinct API from v1)\nexport { default as IconV2 } from \"./v2\";\nexport type { TypeIconV2Props, TypeIconV2Size } from \"./v2\";\n"],"mappings":"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","names":["styled","css","styled","css","Icon_default","Icon_default"]}
+{"version":3,"sources":["../../src/Icon.tsx","../../src/IconHybrid.tsx","../../src/styles.ts","../../src/IconTailwind.tsx","../../src/iconShared.tsx","../../src/IconTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nimport type { TypeIconProps, TypeToggleProps } from \"./IconTypes\";\nimport IconHybrid from \"./IconHybrid\";\n\n/**\n * Icon. Automatically routes between the Tailwind implementation (preferred, for\n * bare icons) and the styled-components implementation (for consumers using\n * `color` tokens, system props, or a styled() extension). The routing logic and\n * shared name/variant/aria/svg handling live in IconHybrid / iconShared.\n */\nconst Icon = (props: TypeIconProps) => <IconHybrid {...props} />;\n\nconst ToggleableIcon = styled(Icon)<{ active: boolean }>`\n  transition: all ${(p) => p.theme.duration.fast} linear;\n\n  ${(p) =>\n    p.active &&\n    css`\n      opacity: 1;\n      transform: scale(1);\n    `}\n\n  ${(p) =>\n    !p.active &&\n    css`\n      position: absolute;\n      opacity: 0;\n      transform: scale(0);\n    `}\n`;\n\nconst IconToggle = ({\n  activeName,\n  inactiveName,\n  isActive,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  ...rest\n}: TypeToggleProps) => {\n  return (\n    <Box as=\"span\" position=\"relative\" display=\"inline-flex\" {...rest}>\n      <ToggleableIcon\n        active={isActive}\n        name={activeName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={!isActive}\n        aria-label={!isActive ? undefined : ariaLabel}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={isActive}\n        aria-label={isActive ? ariaLabel : undefined}\n      />\n    </Box>\n  );\n};\n\nIconToggle.displayName = \"Icon.Toggle\";\n/**\n * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.\n *\n * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button\n * @example\n * const [toggleState, setToggleState] = useState(false);\n * <Button  // Wrap Icon.Toggle with Button\n *  appearance='pill'\n *  aria-label='like' // required for accessibility\n *  aria-pressed={toggleState} // required for accessibility\n *  onClick={() => setToggleState(!toggleState)}\n * >\n *  <Icon.Toggle\n *    activeName=\"heart-solid\"\n *    inactiveName=\"heart-outline\"\n *    isActive={toggleState}\n *   />\n * </Button>\n */\nIcon.Toggle = IconToggle;\n\nexport default Icon;\n","/**\n * Hybrid Icon component.\n * Automatically chooses between the Tailwind (pure CSS-class) render path and the\n * styled-components path based on props, preserving 100% backward compatibility:\n *\n *  - `color` tokens (e.g. \"icon.base\"), styled-system props (margins, layout),\n *    a styled() extension (theme/forwardedComponent), or an injected `sc-*`\n *    className all route to the styled-components Container.\n *  - bare icons (name + size + fixedWidth, no system props) render via the\n *    lighter Tailwind <span>.\n *\n * Name/variant resolution, viewBox lookup, aria handling, and the <svg> markup\n * are shared with the styled-components path via iconShared.tsx.\n */\nimport * as React from \"react\";\nimport PartnerLogo from \"@sproutsocial/seeds-react-partner-logo\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport { LogoNamesWithoutVariants as PartnerLogoNames } from \"@sproutsocial/seeds-partner-logos\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeIconProps } from \"./IconTypes\";\nimport Container from \"./styles\";\nimport { IconTailwind } from \"./IconTailwind\";\nimport {\n  AllViewboxes,\n  resolveIconName,\n  getAriaProps,\n  IconSvg,\n} from \"./iconShared\";\n\n// Matches the generated styled-components class (e.g. \"sc-bdVaJa\"). A styled(Icon)\n// extension injects such a class; routing it to the styled path keeps its\n// generated styles (and avoids leaking `theme`/custom props onto the DOM span).\nconst SC_CLASS_PATTERN = /\\bsc-[a-zA-Z0-9]+\\b/;\n\nconst IconHybrid = ({\n  name,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  color,\n  svgProps,\n  ...rest\n}: TypeIconProps) => {\n  if (includes(PartnerLogoNames, name)) {\n    // Icon's \"default\" size is equivalent to PartnerLogo's \"small\" size\n    const logoSize = size === \"default\" ? \"small\" : size;\n    const logoProps = {\n      partnerName: name,\n      size: logoSize,\n      logoType: \"symbol\" as const,\n      svgProps,\n    };\n    return (\n      <PartnerLogo\n        // ariaLabel needs to be overridable by aria-label prop in ...rest\n        aria-label={ariaLabel}\n        {...rest}\n        {...logoProps}\n      />\n    );\n  }\n\n  const iconName = resolveIconName(name, size);\n  const iconViewBox = AllViewboxes[iconName];\n\n  const { \"aria-label\": ariaLabelFromRest, ...restWithoutAriaLabel } =\n    rest as Record<string, any>;\n  const { containerAriaProps, svgAriaProps } = getAriaProps(\n    ariaLabel,\n    ariaLabelFromRest\n  );\n\n  const svg = (\n    <IconSvg\n      iconName={iconName}\n      iconViewBox={iconViewBox}\n      svgProps={svgProps}\n      svgAriaProps={svgAriaProps}\n    />\n  );\n\n  // Route to styled-components whenever backward compatibility requires it.\n  // `color` is destructured out of `rest`, so it must be checked explicitly —\n  // the Tailwind path only does `fill: currentColor` and cannot resolve a token\n  // like \"icon.base\".\n  // `cursor` is a public Icon prop applied by the legacy Container via the\n  // COMMON mixin, but is not in STYLED_SYSTEM_PROPS, so `needsStyledComponents`\n  // does not catch it. Gate it explicitly (like `color`) so it keeps routing to\n  // SC instead of leaking onto the Tailwind span as an invalid DOM attribute.\n  // It is read (not destructured) off `restWithoutAriaLabel` so it still spreads\n  // onto Container below.\n  const className = restWithoutAriaLabel.className;\n  const needsSC =\n    color !== undefined ||\n    restWithoutAriaLabel.cursor !== undefined ||\n    needsStyledComponents(restWithoutAriaLabel) ||\n    (typeof className === \"string\" && SC_CLASS_PATTERN.test(className));\n\n  if (needsSC) {\n    return (\n      <Container\n        iconSize={size}\n        fixedWidth={!!fixedWidth}\n        key={iconName}\n        data-qa-icon={iconName}\n        color={color as React.ComponentProps<typeof Container>[\"color\"]}\n        {...restWithoutAriaLabel}\n        {...containerAriaProps}\n      >\n        {svg}\n      </Container>\n    );\n  }\n\n  return (\n    <IconTailwind\n      size={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      data-qa-icon={iconName}\n      {...restWithoutAriaLabel}\n      {...containerAriaProps}\n    >\n      {svg}\n    </IconTailwind>\n  );\n};\n\nIconHybrid.displayName = \"Icon\";\nexport default IconHybrid;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\nconst sizes: { [key in TypeIconSize]: string } = {\n  mini: \"12px\",\n\n  /** TODO: deprecate default  in favor of small in future release */\n  default: \"16px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n};\n\nconst stylesForSize = (iconActualSize: string, fixedWidth: boolean) => css`\n  line-height: ${iconActualSize};\n\n  &,\n  .Icon-svg {\n    height: ${iconActualSize};\n    fill: currentColor;\n  }\n\n  ${fixedWidth &&\n  `\n    &,\n    & .Icon-svg {\n      width: ${iconActualSize}\n    }\n  `}\n`;\n\nconst Container = styled.span.attrs({\n  className: \"Icon\",\n})<{\n  iconSize: TypeIconSize;\n  fixedWidth: boolean;\n}>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n\n  ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}\n\n  ${COMMON}\n  ${verticalAlign}\n`;\nexport default Container;\n","/**\n * Tailwind/CSS-class implementation of the Icon container.\n * Uses the Seeds icon CSS classes from icon.css. Presentational only: it applies\n * the `.Icon`/`.seeds-icon` classes and the `--icon-size` custom property, then\n * renders the precomputed <svg> (passed as children). All name/variant/aria\n * logic lives in iconShared.tsx and IconHybrid.tsx.\n */\nimport React from \"react\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\n// Utility for merging class names properly.\n// Mirror of the local helper in ButtonTailwind.tsx — `cn` is NOT exported from\n// @sproutsocial/seeds-react-utilities, so it is duplicated here intentionally.\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\n// Pixel lookup driving --icon-size. Mirrors `sizes` in styles.ts (kept local so\n// styles.ts stays untouched for the legacy styled-components path).\nconst sizeMap: { [key in TypeIconSize]: string } = {\n  mini: \"12px\",\n\n  /** TODO: deprecate default in favor of small in future release */\n  default: \"16px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n};\n\ntype TypeIconTailwindProps = {\n  size: TypeIconSize;\n  fixedWidth: boolean;\n  className?: string;\n  children: React.ReactNode;\n} & Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">;\n\nexport const IconTailwind = ({\n  size,\n  fixedWidth,\n  className,\n  children,\n  ...rest\n}: TypeIconTailwindProps) => {\n  // \"Icon\" preserves downstream descendant selectors (e.g. `.Icon` in\n  // seeds-react-switch / seeds-react-data-viz) that the styled-components\n  // Container added via .attrs({ className: \"Icon\" }).\n  const classes = cn(\n    \"Icon\",\n    \"seeds-icon\",\n    { \"seeds-icon-fixed-width\": fixedWidth },\n    className\n  );\n\n  return (\n    <span\n      {...rest}\n      className={classes}\n      style={\n        {\n          ...rest.style,\n          \"--icon-size\": sizeMap[size],\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </span>\n  );\n};\n\nIconTailwind.displayName = \"IconTailwind\";\n","/**\n * Shared, non-styling Icon logic used by BOTH render paths (the styled-components\n * Container path and the Tailwind <span> path). Factoring this out keeps the two\n * paths from diverging: name/variant resolution, viewBox lookup, aria handling,\n * and the <svg> markup live here once.\n *\n * Not part of the public export surface (not re-exported from index.ts).\n */\nimport * as React from \"react\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport {\n  AiViewBoxes,\n  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\nimport type { TypeIconName, TypeIconSize } from \"./IconTypes\";\n\nexport const AllViewboxes = {\n  ...AiViewBoxes,\n  ...ExternalViewBoxes,\n  ...GeneralViewBoxes,\n  ...SproutViewBoxes,\n};\n\n/**\n * Resolve a bare icon name to its concrete svg-sprite name by applying the\n * default variant (`solid` for `mini`, `outline` otherwise) unless the name is\n * already variant-suffixed or is an external icon. Matches the original\n * Icon.tsx resolution exactly.\n */\nexport function resolveIconName(\n  name: TypeIconName,\n  size: TypeIconSize\n): EnumIconSvgNames {\n  const defaultVariant = size === \"mini\" ? \"solid\" : \"outline\";\n  return !name?.endsWith(\"-outline\") &&\n    !name?.endsWith(\"-solid\") &&\n    !includes(ExternalIconNames, name)\n    ? // then add default variant\n      (`${name as EnumIconNamesWithoutVariants}-${defaultVariant}` as EnumIconSvgNames)\n    : // else use name as is\n      (name as EnumIconSvgNames);\n}\n\n/**\n * Compute the aria attributes for the container and the svg. When an aria-label\n * is present (via the `ariaLabel` prop or a spread `aria-label`), the svg gets\n * role=\"img\" + aria-label and the container is left visible; otherwise the\n * container is marked aria-hidden. Matches the original Icon.tsx behavior.\n */\nexport function getAriaProps(ariaLabel?: string, ariaLabelFromRest?: string) {\n  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;\n  const containerAriaProps = hasAriaLabel\n    ? {}\n    : { \"aria-hidden\": \"true\" as const };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\" as const, \"aria-label\": ariaLabel ?? ariaLabelFromRest }\n    : {};\n  return { containerAriaProps, svgAriaProps };\n}\n\n/**\n * The icon <svg> markup, identical for both render paths. `svgAriaProps` is\n * spread last so aria attributes win over any `svgProps` (matching the original\n * Icon.tsx spread order).\n */\nexport const IconSvg = ({\n  iconName,\n  iconViewBox,\n  svgProps,\n  svgAriaProps,\n}: {\n  iconName: string;\n  iconViewBox?: string;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n  svgAriaProps: React.ComponentPropsWithoutRef<\"svg\">;\n}) => (\n  <svg\n    className=\"Icon-svg\"\n    viewBox={iconViewBox}\n    focusable={false}\n    data-qa-icon-svg={`${iconName}-svg`}\n    {...svgProps}\n    {...svgAriaProps}\n  >\n    <use\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      xlinkHref={`#seeds-svgs_${iconName}`}\n    />\n  </svg>\n);\n","import * as React from \"react\";\nimport type { EnumIconNames } from \"@sproutsocial/seeds-icons\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;\n\nexport type TypeIconSize =\n  | \"mini\" // 12x12\n  // TODO: deprecate default  in favor of small in future release\n  | \"default\" // 16x16\n  | \"small\" // 16x16\n  | \"medium\" // 24x24\n  | \"large\" // 32x32\n  | \"jumbo\"; // 64x64\n\nexport interface TypeIconProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** Name of the icon in the svg sprite */\n  name: TypeIconName;\n  size?: TypeIconSize;\n  /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */\n  fixedWidth?: boolean;\n  /** Label used to describe the icon if not used with an accompanying visual label */\n  ariaLabel?: string;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n\nexport interface TypeToggleProps extends TypeBoxProps {\n  /** Name of the icon to be shown in the active state */\n  activeName: TypeIconName;\n  /** Name of the icon to be shown in the inactive state */\n  inactiveName: TypeIconName;\n  /** Whether the active icon should be shown or not */\n  isActive: boolean;\n  /** The size of the icon. `small` is the default */\n  size?: TypeIconSize;\n  fixedWidth?: boolean;\n  ariaLabel?: string;\n}\n","import Icon from \"./Icon\";\n\nexport default Icon;\nexport { Icon };\nexport { default as IconContainer } from \"./styles\";\nexport * from \"./IconTypes\";\n\n// Icon v2 exports (structural SVG wrapper; distinct API from v1)\nexport { default as IconV2 } from \"./v2\";\nexport type { TypeIconV2Props, TypeIconV2Size } from \"./v2\";\n"],"mappings":"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","names":["styled","css","includes","jsx","jsx","includes","jsx","styled","css","Icon_default","Icon_default"]}

package/dist/icon.css

@@ -0,0 +1,36 @@
+/**
+ * Seeds Icon 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.
+ *
+ * The dynamic `size` prop is applied through the `--icon-size` custom property,
+ * set inline by IconTailwind (e.g. style={{ "--icon-size": "16px" }}).
+ *
+ * Usage:
+ *   <span class="Icon seeds-icon" style="--icon-size: 16px">
+ *     <svg class="Icon-svg" />
+ *   </span>
+ */
+
+@layer components {
+  .seeds-icon {
+    display: inline-block;
+    color: inherit;
+    vertical-align: middle;
+    line-height: var(--icon-size);
+  }
+
+  .seeds-icon,
+  .seeds-icon .Icon-svg {
+    height: var(--icon-size);
+    fill: currentColor;
+  }
+
+  /* width only applied when fixedWidth */
+  .seeds-icon-fixed-width,
+  .seeds-icon-fixed-width .Icon-svg {
+    width: var(--icon-size);
+  }
+}

package/dist/index.d.mts

@@ -32,8 +32,14 @@ interface TypeToggleProps extends TypeBoxProps {
     ariaLabel?: string;
 }
 
+/**
+ * Icon. Automatically routes between the Tailwind implementation (preferred, for
+ * bare icons) and the styled-components implementation (for consumers using
+ * `color` tokens, system props, or a styled() extension). The routing logic and
+ * shared name/variant/aria/svg handling live in IconHybrid / iconShared.
+ */
 declare const Icon: {
-    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): react_jsx_runtime.JSX.Element;
+    (props: TypeIconProps): react_jsx_runtime.JSX.Element;
     /**
      * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
      *

package/dist/index.d.ts

@@ -32,8 +32,14 @@ interface TypeToggleProps extends TypeBoxProps {
     ariaLabel?: string;
 }
 
+/**
+ * Icon. Automatically routes between the Tailwind implementation (preferred, for
+ * bare icons) and the styled-components implementation (for consumers using
+ * `color` tokens, system props, or a styled() extension). The routing logic and
+ * shared name/variant/aria/svg handling live in IconHybrid / iconShared.
+ */
 declare const Icon: {
-    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): react_jsx_runtime.JSX.Element;
+    (props: TypeIconProps): react_jsx_runtime.JSX.Element;
     /**
      * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.
      *

package/dist/index.js

@@ -38,12 +38,16 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Icon.tsx
-var React = require("react");
+var React4 = require("react");
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+
+// src/IconHybrid.tsx
+var React3 = require("react");
 var import_seeds_react_partner_logo = __toESM(require("@sproutsocial/seeds-react-partner-logo"));
-var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
 var import_seeds_partner_logos = require("@sproutsocial/seeds-partner-logos");
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -88,16 +92,117 @@ var Container = import_styled_components.default.span.attrs({
 `;
 var styles_default = Container;
 
-// src/Icon.tsx
-var import_seeds_icons = require("@sproutsocial/seeds-icons");
+// src/IconTailwind.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var sizeMap = {
+  mini: "12px",
+  /** TODO: deprecate default in favor of small in future release */
+  default: "16px",
+  small: "16px",
+  medium: "24px",
+  large: "32px",
+  jumbo: "64px"
+};
+var IconTailwind = ({
+  size,
+  fixedWidth,
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = cn(
+    "Icon",
+    "seeds-icon",
+    { "seeds-icon-fixed-width": fixedWidth },
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ...rest,
+      className: classes,
+      style: {
+        ...rest.style,
+        "--icon-size": sizeMap[size]
+      },
+      children
+    }
+  );
+};
+IconTailwind.displayName = "IconTailwind";
+
+// src/iconShared.tsx
+var React2 = require("react");
+var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_icons = require("@sproutsocial/seeds-icons");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var AllViewboxes = {
   ...import_seeds_icons.AiViewBoxes,
   ...import_seeds_icons.ExternalViewBoxes,
   ...import_seeds_icons.GeneralViewBoxes,
   ...import_seeds_icons.SproutViewBoxes
 };
-var Icon = ({
+function resolveIconName(name, size) {
+  const defaultVariant = size === "mini" ? "solid" : "outline";
+  return !name?.endsWith("-outline") && !name?.endsWith("-solid") && !(0, import_seeds_react_utilities.includes)(import_seeds_icons.ExternalIconNames, name) ? (
+    // then add default variant
+    `${name}-${defaultVariant}`
+  ) : (
+    // else use name as is
+    name
+  );
+}
+function getAriaProps(ariaLabel, ariaLabelFromRest) {
+  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;
+  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
+  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? ariaLabelFromRest } : {};
+  return { containerAriaProps, svgAriaProps };
+}
+var IconSvg = ({
+  iconName,
+  iconViewBox,
+  svgProps,
+  svgAriaProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    className: "Icon-svg",
+    viewBox: iconViewBox,
+    focusable: false,
+    "data-qa-icon-svg": `${iconName}-svg`,
+    ...svgProps,
+    ...svgAriaProps,
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "use",
+      {
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        xlinkHref: `#seeds-svgs_${iconName}`
+      }
+    )
+  }
+);
+
+// src/IconHybrid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SC_CLASS_PATTERN = /\bsc-[a-zA-Z0-9]+\b/;
+var IconHybrid = ({
   name,
   size = "small",
   fixedWidth = false,
@@ -106,7 +211,7 @@ var Icon = ({
   svgProps,
   ...rest
 }) => {
-  if ((0, import_seeds_react_utilities.includes)(import_seeds_partner_logos.LogoNamesWithoutVariants, name)) {
+  if ((0, import_seeds_react_utilities2.includes)(import_seeds_partner_logos.LogoNamesWithoutVariants, name)) {
     const logoSize = size === "default" ? "small" : size;
     const logoProps = {
       partnerName: name,
@@ -114,7 +219,7 @@ var Icon = ({
       logoType: "symbol",
       svgProps
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_seeds_react_partner_logo.default,
       {
         "aria-label": ariaLabel,
@@ -123,53 +228,58 @@ var Icon = ({
       }
     );
   }
-  const defaultVariant = size === "mini" ? "solid" : "outline";
-  const iconName = (
-    // if not external and has no variant
-    !name?.endsWith("-outline") && !name?.endsWith("-solid") && !(0, import_seeds_react_utilities.includes)(import_seeds_icons.ExternalIconNames, name) ? (
-      // then add default variant
-      `${name}-${defaultVariant}`
-    ) : (
-      // else use name as is
-      name
-    )
-  );
+  const iconName = resolveIconName(name, size);
   const iconViewBox = AllViewboxes[iconName];
   const { "aria-label": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;
-  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;
-  const containerAriaProps = hasAriaLabel ? {} : { "aria-hidden": "true" };
-  const svgAriaProps = hasAriaLabel ? { role: "img", "aria-label": ariaLabel ?? ariaLabelFromRest } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    styles_default,
+  const { containerAriaProps, svgAriaProps } = getAriaProps(
+    ariaLabel,
+    ariaLabelFromRest
+  );
+  const svg = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    IconSvg,
+    {
+      iconName,
+      iconViewBox,
+      svgProps,
+      svgAriaProps
+    }
+  );
+  const className = restWithoutAriaLabel.className;
+  const needsSC = color !== void 0 || restWithoutAriaLabel.cursor !== void 0 || (0, import_seeds_react_system_props2.needsStyledComponents)(restWithoutAriaLabel) || typeof className === "string" && SC_CLASS_PATTERN.test(className);
+  if (needsSC) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      styles_default,
+      {
+        iconSize: size,
+        fixedWidth: !!fixedWidth,
+        "data-qa-icon": iconName,
+        color,
+        ...restWithoutAriaLabel,
+        ...containerAriaProps,
+        children: svg
+      },
+      iconName
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    IconTailwind,
     {
-      iconSize: size,
+      size,
       fixedWidth: !!fixedWidth,
       "data-qa-icon": iconName,
-      color,
       ...restWithoutAriaLabel,
       ...containerAriaProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "svg",
-        {
-          className: "Icon-svg",
-          viewBox: iconViewBox,
-          focusable: false,
-          "data-qa-icon-svg": `${iconName}-svg`,
-          ...svgProps,
-          ...svgAriaProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "use",
-            {
-              xmlnsXlink: "http://www.w3.org/1999/xlink",
-              xlinkHref: `#seeds-svgs_${iconName}`
-            }
-          )
-        }
-      )
+      children: svg
     },
     iconName
   );
 };
+IconHybrid.displayName = "Icon";
+var IconHybrid_default = IconHybrid;
+
+// src/Icon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Icon = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconHybrid_default, { ...props });
 var ToggleableIcon = (0, import_styled_components2.default)(Icon)`
   transition: all ${(p) => p.theme.duration.fast} linear;
 
@@ -193,8 +303,8 @@ var IconToggle = ({
   ariaLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box.default, { as: "span", position: "relative", display: "inline-flex", ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box.default, { as: "span", position: "relative", display: "inline-flex", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ToggleableIcon,
       {
         active: isActive,
@@ -205,7 +315,7 @@ var IconToggle = ({
         "aria-label": !isActive ? void 0 : ariaLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ToggleableIcon,
       {
         active: !isActive,
@@ -223,14 +333,14 @@ Icon.Toggle = IconToggle;
 var Icon_default = Icon;
 
 // src/IconTypes.ts
-var React2 = require("react");
+var React5 = require("react");
 
 // src/v2/Icon.tsx
-var React3 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 
 // src/v2/styles.ts
 var import_styled_components3 = __toESM(require("styled-components"));
-var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_system_props3 = require("@sproutsocial/seeds-react-system-props");
 var dimensions = {
   default: { container: "24px", icon: "18px" },
   small: { container: "20px", icon: "15px" }
@@ -251,19 +361,19 @@ var Container2 = import_styled_components3.default.span`
     fill: currentColor;
   }
 
-  ${import_seeds_react_system_props2.COMMON}
-  ${import_seeds_react_system_props2.FLEXBOX}
-  ${import_seeds_react_system_props2.LAYOUT}
+  ${import_seeds_react_system_props3.COMMON}
+  ${import_seeds_react_system_props3.FLEXBOX}
+  ${import_seeds_react_system_props3.LAYOUT}
 `;
 var styles_default2 = Container2;
 
 // src/v2/Icon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Icon2 = React3.forwardRef(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Icon2 = React6.forwardRef(
   ({ size = "default", children, icon, "aria-label": ariaLabel, ...rest }, ref) => {
     const content = children ?? icon;
     const ariaProps = ariaLabel ? { role: "img", "aria-label": ariaLabel } : { "aria-hidden": true };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       styles_default2,
       {
         ref,
@@ -280,7 +390,7 @@ Icon2.displayName = "IconV2";
 var Icon_default2 = Icon2;
 
 // src/v2/IconTypes.ts
-var React4 = require("react");
+var React7 = require("react");
 
 // src/index.ts
 var src_default = Icon_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Icon.tsx","../src/styles.ts","../src/IconTypes.ts","../src/v2/Icon.tsx","../src/v2/styles.ts","../src/v2/IconTypes.ts"],"sourcesContent":["import Icon from \"./Icon\";\n\nexport default Icon;\nexport { Icon };\nexport { default as IconContainer } from \"./styles\";\nexport * from \"./IconTypes\";\n\n// Icon v2 exports (structural SVG wrapper; distinct API from v1)\nexport { default as IconV2 } from \"./v2\";\nexport type { TypeIconV2Props, TypeIconV2Size } from \"./v2\";\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport PartnerLogo from \"@sproutsocial/seeds-react-partner-logo\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport { LogoNamesWithoutVariants as PartnerLogoNames } from \"@sproutsocial/seeds-partner-logos\";\n\nimport type { TypeIconProps, TypeToggleProps } from \"./IconTypes\";\nimport Container from \"./styles\";\nimport {\n  AiViewBoxes,\n  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\n  ...AiViewBoxes,\n  ...ExternalViewBoxes,\n  ...GeneralViewBoxes,\n  ...SproutViewBoxes,\n};\n\nconst Icon = ({\n  name,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  color,\n  svgProps,\n  ...rest\n}: TypeIconProps) => {\n  if (includes(PartnerLogoNames, name)) {\n    // Icon's \"default\" size is equivalent to PartnerLogo's \"small\" size\n    const logoSize = size === \"default\" ? \"small\" : size;\n    const logoProps = {\n      partnerName: name,\n      size: logoSize,\n      logoType: \"symbol\" as const,\n      svgProps,\n    };\n    return (\n      <PartnerLogo\n        // ariaLabel needs to be overridable by aria-label prop in ...rest\n        aria-label={ariaLabel}\n        {...rest}\n        {...logoProps}\n      />\n    );\n  }\n\n  const defaultVariant = size === \"mini\" ? \"solid\" : \"outline\";\n\n  const iconName: EnumIconSvgNames =\n    // if not external and has no variant\n    !name?.endsWith(\"-outline\") &&\n    !name?.endsWith(\"-solid\") &&\n    !includes(ExternalIconNames, name)\n      ? // then add default variant\n        `${name as EnumIconNamesWithoutVariants}-${defaultVariant}`\n      : // else use name as is\n        (name as EnumIconSvgNames);\n\n  const iconViewBox = AllViewboxes[iconName];\n\n  const { \"aria-label\": ariaLabelFromRest, ...restWithoutAriaLabel } = rest;\n  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;\n  const containerAriaProps = hasAriaLabel ? {} : { \"aria-hidden\": \"true\" };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\", \"aria-label\": ariaLabel ?? ariaLabelFromRest }\n    : {};\n\n  return (\n    <Container\n      iconSize={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      data-qa-icon={iconName}\n      color={color}\n      {...restWithoutAriaLabel}\n      {...containerAriaProps}\n    >\n      <svg\n        className=\"Icon-svg\"\n        viewBox={iconViewBox}\n        focusable={false}\n        data-qa-icon-svg={`${iconName}-svg`}\n        {...svgProps}\n        {...svgAriaProps}\n      >\n        <use\n          xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n          xlinkHref={`#seeds-svgs_${iconName}`}\n        />\n      </svg>\n    </Container>\n  );\n};\n\nconst ToggleableIcon = styled(Icon)<{ active: boolean }>`\n  transition: all ${(p) => p.theme.duration.fast} linear;\n\n  ${(p) =>\n    p.active &&\n    css`\n      opacity: 1;\n      transform: scale(1);\n    `}\n\n  ${(p) =>\n    !p.active &&\n    css`\n      position: absolute;\n      opacity: 0;\n      transform: scale(0);\n    `}\n`;\n\nconst IconToggle = ({\n  activeName,\n  inactiveName,\n  isActive,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  ...rest\n}: TypeToggleProps) => {\n  return (\n    <Box as=\"span\" position=\"relative\" display=\"inline-flex\" {...rest}>\n      <ToggleableIcon\n        active={isActive}\n        name={activeName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={!isActive}\n        aria-label={!isActive ? undefined : ariaLabel}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={isActive}\n        aria-label={isActive ? ariaLabel : undefined}\n      />\n    </Box>\n  );\n};\n\nIconToggle.displayName = \"Icon.Toggle\";\n/**\n * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.\n *\n * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button\n * @example\n * const [toggleState, setToggleState] = useState(false);\n * <Button  // Wrap Icon.Toggle with Button\n *  appearance='pill'\n *  aria-label='like' // required for accessibility\n *  aria-pressed={toggleState} // required for accessibility\n *  onClick={() => setToggleState(!toggleState)}\n * >\n *  <Icon.Toggle\n *    activeName=\"heart-solid\"\n *    inactiveName=\"heart-outline\"\n *    isActive={toggleState}\n *   />\n * </Button>\n */\nIcon.Toggle = IconToggle;\n\nexport default Icon;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\nconst sizes: { [key in TypeIconSize]: string } = {\n  mini: \"12px\",\n\n  /** TODO: deprecate default  in favor of small in future release */\n  default: \"16px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n};\n\nconst stylesForSize = (iconActualSize: string, fixedWidth: boolean) => css`\n  line-height: ${iconActualSize};\n\n  &,\n  .Icon-svg {\n    height: ${iconActualSize};\n    fill: currentColor;\n  }\n\n  ${fixedWidth &&\n  `\n    &,\n    & .Icon-svg {\n      width: ${iconActualSize}\n    }\n  `}\n`;\n\nconst Container = styled.span.attrs({\n  className: \"Icon\",\n})<{\n  iconSize: TypeIconSize;\n  fixedWidth: boolean;\n}>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n\n  ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}\n\n  ${COMMON}\n  ${verticalAlign}\n`;\nexport default Container;\n","import * as React from \"react\";\nimport type { EnumIconNames } from \"@sproutsocial/seeds-icons\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;\n\nexport type TypeIconSize =\n  | \"mini\" // 12x12\n  // TODO: deprecate default  in favor of small in future release\n  | \"default\" // 16x16\n  | \"small\" // 16x16\n  | \"medium\" // 24x24\n  | \"large\" // 32x32\n  | \"jumbo\"; // 64x64\n\nexport interface TypeIconProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** Name of the icon in the svg sprite */\n  name: TypeIconName;\n  size?: TypeIconSize;\n  /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */\n  fixedWidth?: boolean;\n  /** Label used to describe the icon if not used with an accompanying visual label */\n  ariaLabel?: string;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n\nexport interface TypeToggleProps extends TypeBoxProps {\n  /** Name of the icon to be shown in the active state */\n  activeName: TypeIconName;\n  /** Name of the icon to be shown in the inactive state */\n  inactiveName: TypeIconName;\n  /** Whether the active icon should be shown or not */\n  isActive: boolean;\n  /** The size of the icon. `small` is the default */\n  size?: TypeIconSize;\n  fixedWidth?: boolean;\n  ariaLabel?: string;\n}\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeIconV2Props } from \"./IconTypes\";\n\n/**\n * **Icon (v2)** — a structural wrapper that centers a caller-supplied SVG inside a\n * fixed-size container, slightly larger than the icon to give it breathing room\n * (a buffer against focus rings, hover backgrounds, and button padding).\n *\n * The caller passes the SVG directly via `children` (or the `icon` alias). The SVG\n * should use `viewBox=\"0 0 24 24\"` and `currentColor` fills — the component controls\n * only the rendered width/height and centering, never the viewBox or path-level fills.\n *\n * Sizes:\n * - `default` — 24×24px container, icon renders at 18×18px\n * - `small` — 20×20px container, icon renders at 15×15px\n *\n * Accessibility: decorative by default (`aria-hidden`). Pass `aria-label` to expose a\n * standalone icon — the container then gets `role=\"img\"` and the label.\n *\n * @example\n * <Icon aria-label=\"Settings\"><MySvg /></Icon>\n */\nconst Icon = React.forwardRef<HTMLSpanElement, TypeIconV2Props>(\n  (\n    { size = \"default\", children, icon, \"aria-label\": ariaLabel, ...rest },\n    ref\n  ) => {\n    const content = children ?? icon;\n    const ariaProps = ariaLabel\n      ? { role: \"img\" as const, \"aria-label\": ariaLabel }\n      : { \"aria-hidden\": true };\n\n    return (\n      <Container\n        ref={ref}\n        iconSize={size}\n        data-qa-icon-v2={size}\n        {...ariaProps}\n        {...rest}\n      >\n        {content}\n      </Container>\n    );\n  }\n);\n\nIcon.displayName = \"IconV2\";\n\nexport default Icon;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  FLEXBOX,\n  LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconV2Size } from \"./IconTypes\";\n\nconst dimensions: {\n  [key in TypeIconV2Size]: { container: string; icon: string };\n} = {\n  default: { container: \"24px\", icon: \"18px\" },\n  small: { container: \"20px\", icon: \"15px\" },\n};\n\n/**\n * Structural, non-semantic container that centers a caller-supplied SVG inside a\n * fixed-size box (slightly larger than the icon, for breathing room). The child\n * `svg` is sized via CSS to the icon dimensions and inherits color through\n * `currentColor` — no background or border.\n */\nconst Container = styled.span<{\n  iconSize: TypeIconV2Size;\n}>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n  width: ${(props) => dimensions[props.iconSize].container};\n  height: ${(props) => dimensions[props.iconSize].container};\n\n  & > svg {\n    width: ${(props) => dimensions[props.iconSize].icon};\n    height: ${(props) => dimensions[props.iconSize].icon};\n    flex-shrink: 0;\n    fill: currentColor;\n  }\n\n  ${COMMON}\n  ${FLEXBOX}\n  ${LAYOUT}\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\nexport type TypeIconV2Size =\n  | \"default\" // 24x24 container, 18x18 icon\n  | \"small\"; // 20x20 container, 15x15 icon\n\nexport interface TypeIconV2Props\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** Container/icon size variant. Defaults to `\"default\"` (24px container, 18px icon). */\n  size?: TypeIconV2Size;\n  /** The SVG element to render inside the container. Should use `viewBox=\"0 0 24 24\"` and `currentColor` fills. */\n  children?: React.ReactNode;\n  /** Alias for `children`. When both are provided, `children` wins. */\n  icon?: React.ReactNode;\n  /** When provided, the container gets `role=\"img\"` and this label, making a standalone icon accessible. Omit for decorative icons (the container is `aria-hidden` automatically). */\n  \"aria-label\"?: string;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAAA;AAAA,EAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,IAAAC,4BAA4B;AAC5B,6BAAgB;AAChB,sCAAwB;AACxB,mCAAyB;AACzB,iCAA6D;;;ACL7D,+BAA4B;AAC5B,2BAA8B;AAC9B,sCAAuB;AAGvB,IAAM,QAA2C;AAAA,EAC/C,MAAM;AAAA;AAAA,EAGN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,gBAAgB,CAAC,gBAAwB,eAAwB;AAAA,iBACtD,cAAc;AAAA;AAAA;AAAA;AAAA,cAIjB,cAAc;AAAA;AAAA;AAAA;AAAA,IAIxB,cACF;AAAA;AAAA;AAAA,eAGa,cAAc;AAAA;AAAA,GAE1B;AAAA;AAGH,IAAM,YAAY,yBAAAC,QAAO,KAAK,MAAM;AAAA,EAClC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAQG,CAAC,UAAU,cAAc,MAAM,MAAM,QAAQ,GAAG,MAAM,UAAU,CAAC;AAAA;AAAA,IAEjE,sCAAM;AAAA,IACN,kCAAa;AAAA;AAEjB,IAAO,iBAAQ;;;ADxCf,yBAQO;AA4BD;AA1BN,IAAM,eAAe;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,IAAM,OAAO,CAAC;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqB;AACnB,UAAI,uCAAS,2BAAAC,0BAAkB,IAAI,GAAG;AAEpC,UAAM,WAAW,SAAS,YAAY,UAAU;AAChD,UAAM,YAAY;AAAA,MAChB,aAAa;AAAA,MACb,MAAM;AAAA,MACN,UAAU;AAAA,MACV;AAAA,IACF;AACA,WACE;AAAA,MAAC,gCAAAC;AAAA,MAAA;AAAA,QAEC,cAAY;AAAA,QACX,GAAG;AAAA,QACH,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,QAAM,iBAAiB,SAAS,SAAS,UAAU;AAEnD,QAAM;AAAA;AAAA,IAEJ,CAAC,MAAM,SAAS,UAAU,KAC1B,CAAC,MAAM,SAAS,QAAQ,KACxB,KAAC,uCAAS,sCAAmB,IAAI;AAAA;AAAA,MAE7B,GAAG,IAAoC,IAAI,cAAc;AAAA;AAAA;AAAA,MAExD;AAAA;AAAA;AAEP,QAAM,cAAc,aAAa,QAAQ;AAEzC,QAAM,EAAE,cAAc,mBAAmB,GAAG,qBAAqB,IAAI;AACrE,QAAM,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AACtC,QAAM,qBAAqB,eAAe,CAAC,IAAI,EAAE,eAAe,OAAO;AACvE,QAAM,eAAe,eACjB,EAAE,MAAM,OAAO,cAAc,aAAa,kBAAkB,IAC5D,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY,CAAC,CAAC;AAAA,MAEd,gBAAc;AAAA,MACd;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,WAAW;AAAA,UACX,oBAAkB,GAAG,QAAQ;AAAA,UAC5B,GAAG;AAAA,UACH,GAAG;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAW,eAAe,QAAQ;AAAA;AAAA,UACpC;AAAA;AAAA,MACF;AAAA;AAAA,IAlBK;AAAA,EAmBP;AAEJ;AAEA,IAAM,qBAAiB,0BAAAC,SAAO,IAAI;AAAA,oBACd,CAAC,MAAM,EAAE,MAAM,SAAS,IAAI;AAAA;AAAA,IAE5C,CAAC,MACD,EAAE,UACF;AAAA;AAAA;AAAA,KAGC;AAAA;AAAA,IAED,CAAC,MACD,CAAC,EAAE,UACH;AAAA;AAAA;AAAA;AAAA,KAIC;AAAA;AAGL,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAAuB;AACrB,SACE,6CAAC,uBAAAC,SAAA,EAAI,IAAG,QAAO,UAAS,YAAW,SAAQ,eAAe,GAAG,MAC3D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,eAAa,CAAC;AAAA,QACd,cAAY,CAAC,WAAW,SAAY;AAAA;AAAA,IACtC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,CAAC;AAAA,QACT,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,cAAY,WAAW,YAAY;AAAA;AAAA,IACrC;AAAA,KACF;AAEJ;AAEA,WAAW,cAAc;AAoBzB,KAAK,SAAS;AAEd,IAAO,eAAQ;;;AE9Kf,IAAAC,SAAuB;;;ACAvB,IAAAC,SAAuB;;;ACAvB,IAAAC,4BAAmB;AACnB,IAAAC,mCAIO;AAGP,IAAM,aAEF;AAAA,EACF,SAAS,EAAE,WAAW,QAAQ,MAAM,OAAO;AAAA,EAC3C,OAAO,EAAE,WAAW,QAAQ,MAAM,OAAO;AAC3C;AAQA,IAAMC,aAAY,0BAAAC,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQd,CAAC,UAAU,WAAW,MAAM,QAAQ,EAAE,SAAS;AAAA,YAC9C,CAAC,UAAU,WAAW,MAAM,QAAQ,EAAE,SAAS;AAAA;AAAA;AAAA,aAG9C,CAAC,UAAU,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA,cACzC,CAAC,UAAU,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpD,uCAAM;AAAA,IACN,wCAAO;AAAA,IACP,uCAAM;AAAA;AAGV,IAAOC,kBAAQF;;;ADVT,IAAAG,sBAAA;AAXN,IAAMC,QAAa;AAAA,EACjB,CACE,EAAE,OAAO,WAAW,UAAU,MAAM,cAAc,WAAW,GAAG,KAAK,GACrE,QACG;AACH,UAAM,UAAU,YAAY;AAC5B,UAAM,YAAY,YACd,EAAE,MAAM,OAAgB,cAAc,UAAU,IAChD,EAAE,eAAe,KAAK;AAE1B,WACE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,mBAAiB;AAAA,QAChB,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEAD,MAAK,cAAc;AAEnB,IAAOE,gBAAQF;;;AEjDf,IAAAG,SAAuB;;;ANEvB,IAAO,cAAQ;","names":["Icon_default","import_styled_components","styled","PartnerLogoNames","PartnerLogo","styled","Box","React","React","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_jsx_runtime","Icon","styles_default","Icon_default","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Icon.tsx","../src/IconHybrid.tsx","../src/styles.ts","../src/IconTailwind.tsx","../src/iconShared.tsx","../src/IconTypes.ts","../src/v2/Icon.tsx","../src/v2/styles.ts","../src/v2/IconTypes.ts"],"sourcesContent":["import Icon from \"./Icon\";\n\nexport default Icon;\nexport { Icon };\nexport { default as IconContainer } from \"./styles\";\nexport * from \"./IconTypes\";\n\n// Icon v2 exports (structural SVG wrapper; distinct API from v1)\nexport { default as IconV2 } from \"./v2\";\nexport type { TypeIconV2Props, TypeIconV2Size } from \"./v2\";\n","import * as React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nimport type { TypeIconProps, TypeToggleProps } from \"./IconTypes\";\nimport IconHybrid from \"./IconHybrid\";\n\n/**\n * Icon. Automatically routes between the Tailwind implementation (preferred, for\n * bare icons) and the styled-components implementation (for consumers using\n * `color` tokens, system props, or a styled() extension). The routing logic and\n * shared name/variant/aria/svg handling live in IconHybrid / iconShared.\n */\nconst Icon = (props: TypeIconProps) => <IconHybrid {...props} />;\n\nconst ToggleableIcon = styled(Icon)<{ active: boolean }>`\n  transition: all ${(p) => p.theme.duration.fast} linear;\n\n  ${(p) =>\n    p.active &&\n    css`\n      opacity: 1;\n      transform: scale(1);\n    `}\n\n  ${(p) =>\n    !p.active &&\n    css`\n      position: absolute;\n      opacity: 0;\n      transform: scale(0);\n    `}\n`;\n\nconst IconToggle = ({\n  activeName,\n  inactiveName,\n  isActive,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  ...rest\n}: TypeToggleProps) => {\n  return (\n    <Box as=\"span\" position=\"relative\" display=\"inline-flex\" {...rest}>\n      <ToggleableIcon\n        active={isActive}\n        name={activeName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={!isActive}\n        aria-label={!isActive ? undefined : ariaLabel}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-hidden={isActive}\n        aria-label={isActive ? ariaLabel : undefined}\n      />\n    </Box>\n  );\n};\n\nIconToggle.displayName = \"Icon.Toggle\";\n/**\n * **Accessibility note:** It is best practice to wrap `<Icon.Toggle />` in a button. The button must include `aria-label` and `aria-pressed` in order for a screen reader to properly communicate the icon's state. See example below.\n *\n * @link https://www.w3.org/TR/wai-aria-practices-1.1/#button\n * @example\n * const [toggleState, setToggleState] = useState(false);\n * <Button  // Wrap Icon.Toggle with Button\n *  appearance='pill'\n *  aria-label='like' // required for accessibility\n *  aria-pressed={toggleState} // required for accessibility\n *  onClick={() => setToggleState(!toggleState)}\n * >\n *  <Icon.Toggle\n *    activeName=\"heart-solid\"\n *    inactiveName=\"heart-outline\"\n *    isActive={toggleState}\n *   />\n * </Button>\n */\nIcon.Toggle = IconToggle;\n\nexport default Icon;\n","/**\n * Hybrid Icon component.\n * Automatically chooses between the Tailwind (pure CSS-class) render path and the\n * styled-components path based on props, preserving 100% backward compatibility:\n *\n *  - `color` tokens (e.g. \"icon.base\"), styled-system props (margins, layout),\n *    a styled() extension (theme/forwardedComponent), or an injected `sc-*`\n *    className all route to the styled-components Container.\n *  - bare icons (name + size + fixedWidth, no system props) render via the\n *    lighter Tailwind <span>.\n *\n * Name/variant resolution, viewBox lookup, aria handling, and the <svg> markup\n * are shared with the styled-components path via iconShared.tsx.\n */\nimport * as React from \"react\";\nimport PartnerLogo from \"@sproutsocial/seeds-react-partner-logo\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport { LogoNamesWithoutVariants as PartnerLogoNames } from \"@sproutsocial/seeds-partner-logos\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeIconProps } from \"./IconTypes\";\nimport Container from \"./styles\";\nimport { IconTailwind } from \"./IconTailwind\";\nimport {\n  AllViewboxes,\n  resolveIconName,\n  getAriaProps,\n  IconSvg,\n} from \"./iconShared\";\n\n// Matches the generated styled-components class (e.g. \"sc-bdVaJa\"). A styled(Icon)\n// extension injects such a class; routing it to the styled path keeps its\n// generated styles (and avoids leaking `theme`/custom props onto the DOM span).\nconst SC_CLASS_PATTERN = /\\bsc-[a-zA-Z0-9]+\\b/;\n\nconst IconHybrid = ({\n  name,\n  size = \"small\",\n  fixedWidth = false,\n  ariaLabel,\n  color,\n  svgProps,\n  ...rest\n}: TypeIconProps) => {\n  if (includes(PartnerLogoNames, name)) {\n    // Icon's \"default\" size is equivalent to PartnerLogo's \"small\" size\n    const logoSize = size === \"default\" ? \"small\" : size;\n    const logoProps = {\n      partnerName: name,\n      size: logoSize,\n      logoType: \"symbol\" as const,\n      svgProps,\n    };\n    return (\n      <PartnerLogo\n        // ariaLabel needs to be overridable by aria-label prop in ...rest\n        aria-label={ariaLabel}\n        {...rest}\n        {...logoProps}\n      />\n    );\n  }\n\n  const iconName = resolveIconName(name, size);\n  const iconViewBox = AllViewboxes[iconName];\n\n  const { \"aria-label\": ariaLabelFromRest, ...restWithoutAriaLabel } =\n    rest as Record<string, any>;\n  const { containerAriaProps, svgAriaProps } = getAriaProps(\n    ariaLabel,\n    ariaLabelFromRest\n  );\n\n  const svg = (\n    <IconSvg\n      iconName={iconName}\n      iconViewBox={iconViewBox}\n      svgProps={svgProps}\n      svgAriaProps={svgAriaProps}\n    />\n  );\n\n  // Route to styled-components whenever backward compatibility requires it.\n  // `color` is destructured out of `rest`, so it must be checked explicitly —\n  // the Tailwind path only does `fill: currentColor` and cannot resolve a token\n  // like \"icon.base\".\n  // `cursor` is a public Icon prop applied by the legacy Container via the\n  // COMMON mixin, but is not in STYLED_SYSTEM_PROPS, so `needsStyledComponents`\n  // does not catch it. Gate it explicitly (like `color`) so it keeps routing to\n  // SC instead of leaking onto the Tailwind span as an invalid DOM attribute.\n  // It is read (not destructured) off `restWithoutAriaLabel` so it still spreads\n  // onto Container below.\n  const className = restWithoutAriaLabel.className;\n  const needsSC =\n    color !== undefined ||\n    restWithoutAriaLabel.cursor !== undefined ||\n    needsStyledComponents(restWithoutAriaLabel) ||\n    (typeof className === \"string\" && SC_CLASS_PATTERN.test(className));\n\n  if (needsSC) {\n    return (\n      <Container\n        iconSize={size}\n        fixedWidth={!!fixedWidth}\n        key={iconName}\n        data-qa-icon={iconName}\n        color={color as React.ComponentProps<typeof Container>[\"color\"]}\n        {...restWithoutAriaLabel}\n        {...containerAriaProps}\n      >\n        {svg}\n      </Container>\n    );\n  }\n\n  return (\n    <IconTailwind\n      size={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      data-qa-icon={iconName}\n      {...restWithoutAriaLabel}\n      {...containerAriaProps}\n    >\n      {svg}\n    </IconTailwind>\n  );\n};\n\nIconHybrid.displayName = \"Icon\";\nexport default IconHybrid;\n","import styled, { css } from \"styled-components\";\nimport { verticalAlign } from \"styled-system\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\nconst sizes: { [key in TypeIconSize]: string } = {\n  mini: \"12px\",\n\n  /** TODO: deprecate default  in favor of small in future release */\n  default: \"16px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n};\n\nconst stylesForSize = (iconActualSize: string, fixedWidth: boolean) => css`\n  line-height: ${iconActualSize};\n\n  &,\n  .Icon-svg {\n    height: ${iconActualSize};\n    fill: currentColor;\n  }\n\n  ${fixedWidth &&\n  `\n    &,\n    & .Icon-svg {\n      width: ${iconActualSize}\n    }\n  `}\n`;\n\nconst Container = styled.span.attrs({\n  className: \"Icon\",\n})<{\n  iconSize: TypeIconSize;\n  fixedWidth: boolean;\n}>`\n  display: inline-block;\n  color: inherit;\n  vertical-align: middle;\n\n  ${(props) => stylesForSize(sizes[props.iconSize], props.fixedWidth)}\n\n  ${COMMON}\n  ${verticalAlign}\n`;\nexport default Container;\n","/**\n * Tailwind/CSS-class implementation of the Icon container.\n * Uses the Seeds icon CSS classes from icon.css. Presentational only: it applies\n * the `.Icon`/`.seeds-icon` classes and the `--icon-size` custom property, then\n * renders the precomputed <svg> (passed as children). All name/variant/aria\n * logic lives in iconShared.tsx and IconHybrid.tsx.\n */\nimport React from \"react\";\nimport type { TypeIconSize } from \"./IconTypes\";\n\n// Utility for merging class names properly.\n// Mirror of the local helper in ButtonTailwind.tsx — `cn` is NOT exported from\n// @sproutsocial/seeds-react-utilities, so it is duplicated here intentionally.\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\n// Pixel lookup driving --icon-size. Mirrors `sizes` in styles.ts (kept local so\n// styles.ts stays untouched for the legacy styled-components path).\nconst sizeMap: { [key in TypeIconSize]: string } = {\n  mini: \"12px\",\n\n  /** TODO: deprecate default in favor of small in future release */\n  default: \"16px\",\n  small: \"16px\",\n  medium: \"24px\",\n  large: \"32px\",\n  jumbo: \"64px\",\n};\n\ntype TypeIconTailwindProps = {\n  size: TypeIconSize;\n  fixedWidth: boolean;\n  className?: string;\n  children: React.ReactNode;\n} & Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\">;\n\nexport const IconTailwind = ({\n  size,\n  fixedWidth,\n  className,\n  children,\n  ...rest\n}: TypeIconTailwindProps) => {\n  // \"Icon\" preserves downstream descendant selectors (e.g. `.Icon` in\n  // seeds-react-switch / seeds-react-data-viz) that the styled-components\n  // Container added via .attrs({ className: \"Icon\" }).\n  const classes = cn(\n    \"Icon\",\n    \"seeds-icon\",\n    { \"seeds-icon-fixed-width\": fixedWidth },\n    className\n  );\n\n  return (\n    <span\n      {...rest}\n      className={classes}\n      style={\n        {\n          ...rest.style,\n          \"--icon-size\": sizeMap[size],\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </span>\n  );\n};\n\nIconTailwind.displayName = \"IconTailwind\";\n","/**\n * Shared, non-styling Icon logic used by BOTH render paths (the styled-components\n * Container path and the Tailwind <span> path). Factoring this out keeps the two\n * paths from diverging: name/variant resolution, viewBox lookup, aria handling,\n * and the <svg> markup live here once.\n *\n * Not part of the public export surface (not re-exported from index.ts).\n */\nimport * as React from \"react\";\nimport { includes } from \"@sproutsocial/seeds-react-utilities\";\nimport {\n  AiViewBoxes,\n  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\nimport type { TypeIconName, TypeIconSize } from \"./IconTypes\";\n\nexport const AllViewboxes = {\n  ...AiViewBoxes,\n  ...ExternalViewBoxes,\n  ...GeneralViewBoxes,\n  ...SproutViewBoxes,\n};\n\n/**\n * Resolve a bare icon name to its concrete svg-sprite name by applying the\n * default variant (`solid` for `mini`, `outline` otherwise) unless the name is\n * already variant-suffixed or is an external icon. Matches the original\n * Icon.tsx resolution exactly.\n */\nexport function resolveIconName(\n  name: TypeIconName,\n  size: TypeIconSize\n): EnumIconSvgNames {\n  const defaultVariant = size === \"mini\" ? \"solid\" : \"outline\";\n  return !name?.endsWith(\"-outline\") &&\n    !name?.endsWith(\"-solid\") &&\n    !includes(ExternalIconNames, name)\n    ? // then add default variant\n      (`${name as EnumIconNamesWithoutVariants}-${defaultVariant}` as EnumIconSvgNames)\n    : // else use name as is\n      (name as EnumIconSvgNames);\n}\n\n/**\n * Compute the aria attributes for the container and the svg. When an aria-label\n * is present (via the `ariaLabel` prop or a spread `aria-label`), the svg gets\n * role=\"img\" + aria-label and the container is left visible; otherwise the\n * container is marked aria-hidden. Matches the original Icon.tsx behavior.\n */\nexport function getAriaProps(ariaLabel?: string, ariaLabelFromRest?: string) {\n  const hasAriaLabel = !!ariaLabel || !!ariaLabelFromRest;\n  const containerAriaProps = hasAriaLabel\n    ? {}\n    : { \"aria-hidden\": \"true\" as const };\n  const svgAriaProps = hasAriaLabel\n    ? { role: \"img\" as const, \"aria-label\": ariaLabel ?? ariaLabelFromRest }\n    : {};\n  return { containerAriaProps, svgAriaProps };\n}\n\n/**\n * The icon <svg> markup, identical for both render paths. `svgAriaProps` is\n * spread last so aria attributes win over any `svgProps` (matching the original\n * Icon.tsx spread order).\n */\nexport const IconSvg = ({\n  iconName,\n  iconViewBox,\n  svgProps,\n  svgAriaProps,\n}: {\n  iconName: string;\n  iconViewBox?: string;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n  svgAriaProps: React.ComponentPropsWithoutRef<\"svg\">;\n}) => (\n  <svg\n    className=\"Icon-svg\"\n    viewBox={iconViewBox}\n    focusable={false}\n    data-qa-icon-svg={`${iconName}-svg`}\n    {...svgProps}\n    {...svgAriaProps}\n  >\n    <use\n      xmlnsXlink=\"http://www.w3.org/1999/xlink\"\n      xlinkHref={`#seeds-svgs_${iconName}`}\n    />\n  </svg>\n);\n","import * as React from \"react\";\nimport type { EnumIconNames } from \"@sproutsocial/seeds-icons\";\nimport type { EnumLogoNamesWithoutVariants } from \"@sproutsocial/seeds-partner-logos\";\nimport type {\n  TypeStyledComponentsCommonProps,\n  TypeSystemCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;\n\nexport type TypeIconSize =\n  | \"mini\" // 12x12\n  // TODO: deprecate default  in favor of small in future release\n  | \"default\" // 16x16\n  | \"small\" // 16x16\n  | \"medium\" // 24x24\n  | \"large\" // 32x32\n  | \"jumbo\"; // 64x64\n\nexport interface TypeIconProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** Name of the icon in the svg sprite */\n  name: TypeIconName;\n  size?: TypeIconSize;\n  /** Whether the icon should have a fixed width or not. Use this when you need to align icons/text vertically in a list. */\n  fixedWidth?: boolean;\n  /** Label used to describe the icon if not used with an accompanying visual label */\n  ariaLabel?: string;\n  svgProps?: React.ComponentPropsWithoutRef<\"svg\">;\n}\n\nexport interface TypeToggleProps extends TypeBoxProps {\n  /** Name of the icon to be shown in the active state */\n  activeName: TypeIconName;\n  /** Name of the icon to be shown in the inactive state */\n  inactiveName: TypeIconName;\n  /** Whether the active icon should be shown or not */\n  isActive: boolean;\n  /** The size of the icon. `small` is the default */\n  size?: TypeIconSize;\n  fixedWidth?: boolean;\n  ariaLabel?: string;\n}\n","import * as React from \"react\";\nimport Container from \"./styles\";\nimport type { TypeIconV2Props } from \"./IconTypes\";\n\n/**\n * **Icon (v2)** — a structural wrapper that centers a caller-supplied SVG inside a\n * fixed-size container, slightly larger than the icon to give it breathing room\n * (a buffer against focus rings, hover backgrounds, and button padding).\n *\n * The caller passes the SVG directly via `children` (or the `icon` alias). The SVG\n * should use `viewBox=\"0 0 24 24\"` and `currentColor` fills — the component controls\n * only the rendered width/height and centering, never the viewBox or path-level fills.\n *\n * Sizes:\n * - `default` — 24×24px container, icon renders at 18×18px\n * - `small` — 20×20px container, icon renders at 15×15px\n *\n * Accessibility: decorative by default (`aria-hidden`). Pass `aria-label` to expose a\n * standalone icon — the container then gets `role=\"img\"` and the label.\n *\n * @example\n * <Icon aria-label=\"Settings\"><MySvg /></Icon>\n */\nconst Icon = React.forwardRef<HTMLSpanElement, TypeIconV2Props>(\n  (\n    { size = \"default\", children, icon, \"aria-label\": ariaLabel, ...rest },\n    ref\n  ) => {\n    const content = children ?? icon;\n    const ariaProps = ariaLabel\n      ? { role: \"img\" as const, \"aria-label\": ariaLabel }\n      : { \"aria-hidden\": true };\n\n    return (\n      <Container\n        ref={ref}\n        iconSize={size}\n        data-qa-icon-v2={size}\n        {...ariaProps}\n        {...rest}\n      >\n        {content}\n      </Container>\n    );\n  }\n);\n\nIcon.displayName = \"IconV2\";\n\nexport default Icon;\n","import styled from \"styled-components\";\nimport {\n  COMMON,\n  FLEXBOX,\n  LAYOUT,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconV2Size } from \"./IconTypes\";\n\nconst dimensions: {\n  [key in TypeIconV2Size]: { container: string; icon: string };\n} = {\n  default: { container: \"24px\", icon: \"18px\" },\n  small: { container: \"20px\", icon: \"15px\" },\n};\n\n/**\n * Structural, non-semantic container that centers a caller-supplied SVG inside a\n * fixed-size box (slightly larger than the icon, for breathing room). The child\n * `svg` is sized via CSS to the icon dimensions and inherits color through\n * `currentColor` — no background or border.\n */\nconst Container = styled.span<{\n  iconSize: TypeIconV2Size;\n}>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n  width: ${(props) => dimensions[props.iconSize].container};\n  height: ${(props) => dimensions[props.iconSize].container};\n\n  & > svg {\n    width: ${(props) => dimensions[props.iconSize].icon};\n    height: ${(props) => dimensions[props.iconSize].icon};\n    flex-shrink: 0;\n    fill: currentColor;\n  }\n\n  ${COMMON}\n  ${FLEXBOX}\n  ${LAYOUT}\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\nexport type TypeIconV2Size =\n  | \"default\" // 24x24 container, 18x18 icon\n  | \"small\"; // 20x20 container, 15x15 icon\n\nexport interface TypeIconV2Props\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"span\">, \"color\"> {\n  /** Container/icon size variant. Defaults to `\"default\"` (24px container, 18px icon). */\n  size?: TypeIconV2Size;\n  /** The SVG element to render inside the container. Should use `viewBox=\"0 0 24 24\"` and `currentColor` fills. */\n  children?: React.ReactNode;\n  /** Alias for `children`. When both are provided, `children` wins. */\n  icon?: React.ReactNode;\n  /** When provided, the container gets `role=\"img\"` and this label, making a standalone icon accessible. Omit for decorative icons (the container is `aria-hidden` automatically). */\n  \"aria-label\"?: string;\n}\n"],"mappings":"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","names":["Icon_default","React","import_styled_components","React","import_seeds_react_utilities","import_seeds_react_system_props","styled","React","import_jsx_runtime","import_jsx_runtime","PartnerLogoNames","PartnerLogo","import_jsx_runtime","styled","Box","React","React","import_styled_components","import_seeds_react_system_props","Container","styled","styles_default","import_jsx_runtime","Icon","styles_default","Icon_default","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-icon",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "Seeds React Icon component",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -15,7 +15,8 @@
       "types": "./dist/v2/index.d.ts",
       "import": "./dist/esm/v2/index.js",
       "require": "./dist/v2/index.js"
-    }
+    },
+    "./dist/icon.css": "./dist/icon.css"
   },
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -23,8 +24,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/icon.css dist/icon.css",
+    "build:debug": "tsup --dts --metafile && cp src/icon.css dist/icon.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -33,10 +34,10 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.22",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.14",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-theme": "^4.1.1",
+    "@sproutsocial/seeds-react-box": "^1.1.24",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.16",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-theme": "^4.2.0",
     "@sproutsocial/seeds-react-utilities": "^4.0.1",
     "styled-system": "^5.1.5"
   },