@sproutsocial/seeds-react-icon 2.3.6 → 2.4.0

package/dist/esm/chunk-G3D4UOOY.js

@@ -0,0 +1,61 @@
+// src/v2/Icon.tsx
+import * as React from "react";
+
+// src/v2/styles.ts
+import styled from "styled-components";
+import { COMMON, FLEXBOX, LAYOUT } from "@sproutsocial/seeds-react-system-props";
+var dimensions = {
+  default: { container: "24px", icon: "18px" },
+  small: { container: "20px", icon: "15px" }
+};
+var Container = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: inherit;
+  width: ${(props) => dimensions[props.iconSize].container};
+  height: ${(props) => dimensions[props.iconSize].container};
+
+  & > svg {
+    width: ${(props) => dimensions[props.iconSize].icon};
+    height: ${(props) => dimensions[props.iconSize].icon};
+    flex-shrink: 0;
+    fill: currentColor;
+  }
+
+  ${COMMON}
+  ${FLEXBOX}
+  ${LAYOUT}
+`;
+var styles_default = Container;
+
+// src/v2/Icon.tsx
+import { jsx } from "react/jsx-runtime";
+var Icon = React.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__ */ jsx(
+      styles_default,
+      {
+        ref,
+        iconSize: size,
+        "data-qa-icon-v2": size,
+        ...ariaProps,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+Icon.displayName = "IconV2";
+var Icon_default = Icon;
+
+// src/v2/IconTypes.ts
+import "react";
+
+export {
+  Icon_default
+};
+//# sourceMappingURL=chunk-G3D4UOOY.js.map

package/dist/esm/chunk-G3D4UOOY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/v2/Icon.tsx","../../src/v2/styles.ts","../../src/v2/IconTypes.ts"],"sourcesContent":["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  ({ size = \"default\", children, icon, \"aria-label\": ariaLabel, ...rest }, ref) => {\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 { COMMON, FLEXBOX, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconV2Size } from \"./IconTypes\";\n\nconst dimensions: { [key in TypeIconV2Size]: { container: string; icon: string } } = {\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,YAAY,WAAW;;;ACAvB,OAAO,YAAY;AACnB,SAAS,QAAQ,SAAS,cAAc;AAGxC,IAAM,aAA+E;AAAA,EACnF,SAAS,EAAE,WAAW,QAAQ,MAAM,OAAO;AAAA,EAC3C,OAAO,EAAE,WAAW,QAAQ,MAAM,OAAO;AAC3C;AAQA,IAAM,YAAY,OAAO;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,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADPT;AARN,IAAM,OAAa;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,UAAU,MAAM,cAAc,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/E,UAAM,UAAU,YAAY;AAC5B,UAAM,YAAY,YACd,EAAE,MAAM,OAAgB,cAAc,UAAU,IAChD,EAAE,eAAe,KAAK;AAE1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,mBAAiB;AAAA,QAChB,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;;;AE9Cf,OAAuB;","names":[]}

package/dist/esm/index.js

@@ -1,3 +1,7 @@
+import {
+  Icon_default
+} from "./chunk-G3D4UOOY.js";
+
 // src/Icon.tsx
 import "react";
 import styled2, { css as css2 } from "styled-components";
@@ -187,16 +191,17 @@ var IconToggle = ({
 };
 IconToggle.displayName = "Icon.Toggle";
 Icon.Toggle = IconToggle;
-var Icon_default = Icon;
+var Icon_default2 = Icon;
 
 // src/IconTypes.ts
 import "react";
 
 // src/index.ts
-var index_default = Icon_default;
+var src_default = Icon_default2;
 export {
-  Icon_default as Icon,
+  Icon_default2 as Icon,
   styles_default as IconContainer,
-  index_default as default
+  Icon_default as IconV2,
+  src_default as default
 };
 //# sourceMappingURL=index.js.map

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"],"mappings":"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","names":["styled","css","styled","css"]}
+{"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"]}

package/dist/esm/v2/index.js

@@ -0,0 +1,8 @@
+import {
+  Icon_default
+} from "../chunk-G3D4UOOY.js";
+export {
+  Icon_default as Icon,
+  Icon_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.d.mts

@@ -5,6 +5,7 @@ import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos'
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 import * as styled_components from 'styled-components';
+export { Icon as IconV2, TypeIconV2Props, TypeIconV2Size } from './v2/index.mjs';
 
 type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;
 type TypeIconSize = "mini" | "default" | "small" | "medium" | "large" | "jumbo";

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos'
 import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
 import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 import * as styled_components from 'styled-components';
+export { Icon as IconV2, TypeIconV2Props, TypeIconV2Size } from './v2/index.js';
 
 type TypeIconName = EnumIconNames | EnumLogoNamesWithoutVariants;
 type TypeIconSize = "mini" | "default" | "small" | "medium" | "large" | "jumbo";

package/dist/index.js

@@ -28,13 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   Icon: () => Icon_default,
   IconContainer: () => styles_default,
-  default: () => index_default
+  IconV2: () => Icon_default2,
+  default: () => src_default
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/Icon.tsx
 var React = require("react");
@@ -224,11 +225,69 @@ var Icon_default = Icon;
 // src/IconTypes.ts
 var React2 = require("react");
 
+// src/v2/Icon.tsx
+var React3 = __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 dimensions = {
+  default: { container: "24px", icon: "18px" },
+  small: { container: "20px", icon: "15px" }
+};
+var Container2 = import_styled_components3.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: inherit;
+  width: ${(props) => dimensions[props.iconSize].container};
+  height: ${(props) => dimensions[props.iconSize].container};
+
+  & > svg {
+    width: ${(props) => dimensions[props.iconSize].icon};
+    height: ${(props) => dimensions[props.iconSize].icon};
+    flex-shrink: 0;
+    fill: currentColor;
+  }
+
+  ${import_seeds_react_system_props2.COMMON}
+  ${import_seeds_react_system_props2.FLEXBOX}
+  ${import_seeds_react_system_props2.LAYOUT}
+`;
+var styles_default2 = Container2;
+
+// src/v2/Icon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Icon2 = React3.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)(
+      styles_default2,
+      {
+        ref,
+        iconSize: size,
+        "data-qa-icon-v2": size,
+        ...ariaProps,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+Icon2.displayName = "IconV2";
+var Icon_default2 = Icon2;
+
+// src/v2/IconTypes.ts
+var React4 = require("react");
+
 // src/index.ts
-var index_default = Icon_default;
+var src_default = Icon_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Icon,
-  IconContainer
+  IconContainer,
+  IconV2
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Icon.tsx","../src/styles.ts","../src/IconTypes.ts"],"sourcesContent":["import Icon from \"./Icon\";\n\nexport default Icon;\nexport { Icon };\nexport { default as IconContainer } from \"./styles\";\nexport * from \"./IconTypes\";\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"],"mappings":"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","names":["import_styled_components","styled","PartnerLogoNames","PartnerLogo","styled","Box","React"]}
+{"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  ({ size = \"default\", children, icon, \"aria-label\": ariaLabel, ...rest }, ref) => {\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 { COMMON, FLEXBOX, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconV2Size } from \"./IconTypes\";\n\nconst dimensions: { [key in TypeIconV2Size]: { container: string; icon: string } } = {\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","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"]}

package/dist/v2/index.d.mts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type TypeIconV2Size = "default" | "small";
+interface TypeIconV2Props extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    /** Container/icon size variant. Defaults to `"default"` (24px container, 18px icon). */
+    size?: TypeIconV2Size;
+    /** The SVG element to render inside the container. Should use `viewBox="0 0 24 24"` and `currentColor` fills. */
+    children?: React.ReactNode;
+    /** Alias for `children`. When both are provided, `children` wins. */
+    icon?: React.ReactNode;
+    /** 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). */
+    "aria-label"?: string;
+}
+
+/**
+ * **Icon (v2)** — a structural wrapper that centers a caller-supplied SVG inside a
+ * fixed-size container, slightly larger than the icon to give it breathing room
+ * (a buffer against focus rings, hover backgrounds, and button padding).
+ *
+ * The caller passes the SVG directly via `children` (or the `icon` alias). The SVG
+ * should use `viewBox="0 0 24 24"` and `currentColor` fills — the component controls
+ * only the rendered width/height and centering, never the viewBox or path-level fills.
+ *
+ * Sizes:
+ * - `default` — 24×24px container, icon renders at 18×18px
+ * - `small` — 20×20px container, icon renders at 15×15px
+ *
+ * Accessibility: decorative by default (`aria-hidden`). Pass `aria-label` to expose a
+ * standalone icon — the container then gets `role="img"` and the label.
+ *
+ * @example
+ * <Icon aria-label="Settings"><MySvg /></Icon>
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<TypeIconV2Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Icon, type TypeIconV2Props, type TypeIconV2Size, Icon as default };

package/dist/v2/index.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps } from '@sproutsocial/seeds-react-system-props';
+
+type TypeIconV2Size = "default" | "small";
+interface TypeIconV2Props extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, Omit<React.ComponentPropsWithoutRef<"span">, "color"> {
+    /** Container/icon size variant. Defaults to `"default"` (24px container, 18px icon). */
+    size?: TypeIconV2Size;
+    /** The SVG element to render inside the container. Should use `viewBox="0 0 24 24"` and `currentColor` fills. */
+    children?: React.ReactNode;
+    /** Alias for `children`. When both are provided, `children` wins. */
+    icon?: React.ReactNode;
+    /** 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). */
+    "aria-label"?: string;
+}
+
+/**
+ * **Icon (v2)** — a structural wrapper that centers a caller-supplied SVG inside a
+ * fixed-size container, slightly larger than the icon to give it breathing room
+ * (a buffer against focus rings, hover backgrounds, and button padding).
+ *
+ * The caller passes the SVG directly via `children` (or the `icon` alias). The SVG
+ * should use `viewBox="0 0 24 24"` and `currentColor` fills — the component controls
+ * only the rendered width/height and centering, never the viewBox or path-level fills.
+ *
+ * Sizes:
+ * - `default` — 24×24px container, icon renders at 18×18px
+ * - `small` — 20×20px container, icon renders at 15×15px
+ *
+ * Accessibility: decorative by default (`aria-hidden`). Pass `aria-label` to expose a
+ * standalone icon — the container then gets `role="img"` and the label.
+ *
+ * @example
+ * <Icon aria-label="Settings"><MySvg /></Icon>
+ */
+declare const Icon: React.ForwardRefExoticComponent<Omit<TypeIconV2Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Icon, type TypeIconV2Props, type TypeIconV2Size, Icon as default };

package/dist/v2/index.js

@@ -0,0 +1,98 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/v2/index.ts
+var v2_exports = {};
+__export(v2_exports, {
+  Icon: () => Icon_default,
+  default: () => Icon_default
+});
+module.exports = __toCommonJS(v2_exports);
+
+// src/v2/Icon.tsx
+var React = __toESM(require("react"));
+
+// src/v2/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var dimensions = {
+  default: { container: "24px", icon: "18px" },
+  small: { container: "20px", icon: "15px" }
+};
+var Container = import_styled_components.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: inherit;
+  width: ${(props) => dimensions[props.iconSize].container};
+  height: ${(props) => dimensions[props.iconSize].container};
+
+  & > svg {
+    width: ${(props) => dimensions[props.iconSize].icon};
+    height: ${(props) => dimensions[props.iconSize].icon};
+    flex-shrink: 0;
+    fill: currentColor;
+  }
+
+  ${import_seeds_react_system_props.COMMON}
+  ${import_seeds_react_system_props.FLEXBOX}
+  ${import_seeds_react_system_props.LAYOUT}
+`;
+var styles_default = Container;
+
+// src/v2/Icon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Icon = React.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_runtime.jsx)(
+      styles_default,
+      {
+        ref,
+        iconSize: size,
+        "data-qa-icon-v2": size,
+        ...ariaProps,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+Icon.displayName = "IconV2";
+var Icon_default = Icon;
+
+// src/v2/IconTypes.ts
+var React2 = require("react");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon
+});
+//# sourceMappingURL=index.js.map

package/dist/v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/v2/index.ts","../../src/v2/Icon.tsx","../../src/v2/styles.ts","../../src/v2/IconTypes.ts"],"sourcesContent":["// Icon v2 - Explicit named + default exports for optimal tree shaking\nexport { default, default as Icon } from \"./Icon\";\nexport * from \"./IconTypes\";\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  ({ size = \"default\", children, icon, \"aria-label\": ariaLabel, ...rest }, ref) => {\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 { COMMON, FLEXBOX, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconV2Size } from \"./IconTypes\";\n\nconst dimensions: { [key in TypeIconV2Size]: { container: string; icon: string } } = {\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;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,sCAAwC;AAGxC,IAAM,aAA+E;AAAA,EACnF,SAAS,EAAE,WAAW,QAAQ,MAAM,OAAO;AAAA,EAC3C,OAAO,EAAE,WAAW,QAAQ,MAAM,OAAO;AAC3C;AAQA,IAAM,YAAY,yBAAAA,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,sCAAM;AAAA,IACN,uCAAO;AAAA,IACP,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADPT;AARN,IAAM,OAAa;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,UAAU,MAAM,cAAc,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/E,UAAM,UAAU,YAAY;AAC5B,UAAM,YAAY,YACd,EAAE,MAAM,OAAgB,cAAc,UAAU,IAChD,EAAE,eAAe,KAAK;AAE1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,mBAAiB;AAAA,QAChB,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;;;AE9Cf,IAAAC,SAAuB;","names":["styled","React"]}

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@sproutsocial/seeds-react-icon",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "description": "Seeds React Icon component",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./v2": {
+      "types": "./dist/v2/index.d.ts",
+      "import": "./dist/esm/v2/index.js",
+      "require": "./dist/v2/index.js"
+    }
+  },
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "files": [
@@ -16,20 +28,27 @@
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.16",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.7",
-    "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-theme": "^3.6.2",
+    "@sproutsocial/seeds-react-box": "^1.1.21",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.13",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-theme": "^4.1.0",
     "@sproutsocial/seeds-react-utilities": "^4.0.1",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
-    "@sproutsocial/seeds-icons": "^2.8.0",
-    "@sproutsocial/seeds-partner-logos": "^2.3.0",
+    "@sproutsocial/seeds-icons": "^2.9.0",
+    "@sproutsocial/seeds-partner-logos": "^2.4.1",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "react": "^18.0.0",
     "styled-components": "^5.2.3",
     "typescript": "^5.6.2",
     "tsup": "^8.3.4",