@sproutsocial/seeds-react-icon 1.1.0 → 1.1.2

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 // src/Icon.tsx
-import * as React from "react";
+import "react";
 import styled2, { css as css2 } from "styled-components";
 import Box from "@sproutsocial/seeds-react-box";
 import PartnerLogo from "@sproutsocial/seeds-react-partner-logo";
@@ -56,6 +56,7 @@ import {
   SproutViewBoxes,
   ExternalIconNames
 } from "@sproutsocial/seeds-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
 var AllViewboxes = {
   ...ExternalViewBoxes,
   ...GeneralViewBoxes,
@@ -78,7 +79,7 @@ var Icon = ({
       logoType: "symbol",
       svgProps
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       PartnerLogo,
       {
         "aria-label": ariaLabel,
@@ -99,35 +100,35 @@ var Icon = ({
     )
   );
   const iconViewBox = AllViewboxes[iconName];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     styles_default,
     {
       iconSize: size,
       fixedWidth: !!fixedWidth,
-      key: iconName,
       role: "img",
       "aria-label": ariaLabel,
       "data-qa-icon": iconName,
       color,
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        className: "Icon-svg",
-        viewBox: iconViewBox,
-        focusable: false,
-        "data-qa-icon-svg": `${iconName}-svg`,
-        ...svgProps
-      },
-      /* @__PURE__ */ React.createElement(
-        "use",
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "svg",
         {
-          xmlnsXlink: "http://www.w3.org/1999/xlink",
-          xlinkHref: `#seeds-svgs_${iconName}`
+          className: "Icon-svg",
+          viewBox: iconViewBox,
+          focusable: false,
+          "data-qa-icon-svg": `${iconName}-svg`,
+          ...svgProps,
+          children: /* @__PURE__ */ jsx(
+            "use",
+            {
+              xmlnsXlink: "http://www.w3.org/1999/xlink",
+              xlinkHref: `#seeds-svgs_${iconName}`
+            }
+          )
         }
       )
-    )
+    },
+    iconName
   );
 };
 var ToggleableIcon = styled2(Icon)`
@@ -153,37 +154,43 @@ var IconToggle = ({
   ariaLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(Box, { as: "span", position: "relative", display: "inline-flex", ...rest }, /* @__PURE__ */ React.createElement(
-    ToggleableIcon,
-    {
-      active: isActive,
-      name: activeName,
-      size,
-      fixedWidth,
-      "aria-label": ariaLabel,
-      "aria-hidden": !isActive
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ToggleableIcon,
-    {
-      active: !isActive,
-      name: inactiveName,
-      size,
-      fixedWidth,
-      "aria-label": ariaLabel,
-      "aria-hidden": isActive
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Box, { as: "span", position: "relative", display: "inline-flex", ...rest, children: [
+    /* @__PURE__ */ jsx(
+      ToggleableIcon,
+      {
+        active: isActive,
+        name: activeName,
+        size,
+        fixedWidth,
+        "aria-label": ariaLabel,
+        "aria-hidden": !isActive
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToggleableIcon,
+      {
+        active: !isActive,
+        name: inactiveName,
+        size,
+        fixedWidth,
+        "aria-label": ariaLabel,
+        "aria-hidden": isActive
+      }
+    )
+  ] });
 };
 IconToggle.displayName = "Icon.Toggle";
 Icon.Toggle = IconToggle;
 var Icon_default = Icon;
 
+// src/IconTypes.ts
+import "react";
+
 // src/index.ts
-var src_default = Icon_default;
+var index_default = Icon_default;
 export {
   Icon_default as Icon,
   styles_default as IconContainer,
-  src_default as default
+  index_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/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  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\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  return (\n    <Container\n      iconSize={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      role=\"img\"\n      aria-label={ariaLabel}\n      data-qa-icon={iconName}\n      color={color}\n      {...rest}\n    >\n      <svg\n        className=\"Icon-svg\"\n        viewBox={iconViewBox}\n        focusable={false}\n        data-qa-icon-svg={`${iconName}-svg`}\n        {...svgProps}\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-label={ariaLabel}\n        aria-hidden={!isActive}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-label={ariaLabel}\n        aria-hidden={isActive}\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 { 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 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  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\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  return (\n    <Container\n      iconSize={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      role=\"img\"\n      aria-label={ariaLabel}\n      data-qa-icon={iconName}\n      color={color}\n      {...rest}\n    >\n      <svg\n        className=\"Icon-svg\"\n        viewBox={iconViewBox}\n        focusable={false}\n        data-qa-icon-svg={`${iconName}-svg`}\n        {...svgProps}\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-label={ariaLabel}\n        aria-hidden={!isActive}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-label={ariaLabel}\n        aria-hidden={isActive}\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"]}

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { EnumIconNames } from '@sproutsocial/seeds-icons';
 import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
@@ -31,7 +32,7 @@ interface TypeToggleProps extends TypeBoxProps {
 }
 
 declare const Icon: {
-    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): React.JSX.Element;
+    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: 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.
      *
@@ -52,7 +53,7 @@ declare const Icon: {
      * </Button>
      */
     Toggle: {
-        ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): React.JSX.Element;
+        ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { EnumIconNames } from '@sproutsocial/seeds-icons';
 import { EnumLogoNamesWithoutVariants } from '@sproutsocial/seeds-partner-logos';
@@ -31,7 +32,7 @@ interface TypeToggleProps extends TypeBoxProps {
 }
 
 declare const Icon: {
-    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: TypeIconProps): React.JSX.Element;
+    ({ name, size, fixedWidth, ariaLabel, color, svgProps, ...rest }: 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.
      *
@@ -52,7 +53,7 @@ declare const Icon: {
      * </Button>
      */
     Toggle: {
-        ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): React.JSX.Element;
+        ({ activeName, inactiveName, isActive, size, fixedWidth, ariaLabel, ...rest }: TypeToggleProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.js

@@ -28,16 +28,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Icon: () => Icon_default,
   IconContainer: () => styles_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Icon.tsx
-var React = __toESM(require("react"));
+var React = require("react");
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_partner_logo = __toESM(require("@sproutsocial/seeds-react-partner-logo"));
@@ -89,6 +89,7 @@ var styles_default = Container;
 
 // src/Icon.tsx
 var import_seeds_icons = require("@sproutsocial/seeds-icons");
+var import_jsx_runtime = require("react/jsx-runtime");
 var AllViewboxes = {
   ...import_seeds_icons.ExternalViewBoxes,
   ...import_seeds_icons.GeneralViewBoxes,
@@ -111,7 +112,7 @@ var Icon = ({
       logoType: "symbol",
       svgProps
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_seeds_react_partner_logo.default,
       {
         "aria-label": ariaLabel,
@@ -132,35 +133,35 @@ var Icon = ({
     )
   );
   const iconViewBox = AllViewboxes[iconName];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     styles_default,
     {
       iconSize: size,
       fixedWidth: !!fixedWidth,
-      key: iconName,
       role: "img",
       "aria-label": ariaLabel,
       "data-qa-icon": iconName,
       color,
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(
-      "svg",
-      {
-        className: "Icon-svg",
-        viewBox: iconViewBox,
-        focusable: false,
-        "data-qa-icon-svg": `${iconName}-svg`,
-        ...svgProps
-      },
-      /* @__PURE__ */ React.createElement(
-        "use",
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
         {
-          xmlnsXlink: "http://www.w3.org/1999/xlink",
-          xlinkHref: `#seeds-svgs_${iconName}`
+          className: "Icon-svg",
+          viewBox: iconViewBox,
+          focusable: false,
+          "data-qa-icon-svg": `${iconName}-svg`,
+          ...svgProps,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "use",
+            {
+              xmlnsXlink: "http://www.w3.org/1999/xlink",
+              xlinkHref: `#seeds-svgs_${iconName}`
+            }
+          )
         }
       )
-    )
+    },
+    iconName
   );
 };
 var ToggleableIcon = (0, import_styled_components2.default)(Icon)`
@@ -186,34 +187,40 @@ var IconToggle = ({
   ariaLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(import_seeds_react_box.default, { as: "span", position: "relative", display: "inline-flex", ...rest }, /* @__PURE__ */ React.createElement(
-    ToggleableIcon,
-    {
-      active: isActive,
-      name: activeName,
-      size,
-      fixedWidth,
-      "aria-label": ariaLabel,
-      "aria-hidden": !isActive
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ToggleableIcon,
-    {
-      active: !isActive,
-      name: inactiveName,
-      size,
-      fixedWidth,
-      "aria-label": ariaLabel,
-      "aria-hidden": isActive
-    }
-  ));
+  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)(
+      ToggleableIcon,
+      {
+        active: isActive,
+        name: activeName,
+        size,
+        fixedWidth,
+        "aria-label": ariaLabel,
+        "aria-hidden": !isActive
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ToggleableIcon,
+      {
+        active: !isActive,
+        name: inactiveName,
+        size,
+        fixedWidth,
+        "aria-label": ariaLabel,
+        "aria-hidden": isActive
+      }
+    )
+  ] });
 };
 IconToggle.displayName = "Icon.Toggle";
 Icon.Toggle = IconToggle;
 var Icon_default = Icon;
 
+// src/IconTypes.ts
+var React2 = require("react");
+
 // src/index.ts
-var src_default = Icon_default;
+var index_default = Icon_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Icon,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Icon.tsx","../src/styles.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  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\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  return (\n    <Container\n      iconSize={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      role=\"img\"\n      aria-label={ariaLabel}\n      data-qa-icon={iconName}\n      color={color}\n      {...rest}\n    >\n      <svg\n        className=\"Icon-svg\"\n        viewBox={iconViewBox}\n        focusable={false}\n        data-qa-icon-svg={`${iconName}-svg`}\n        {...svgProps}\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-label={ariaLabel}\n        aria-hidden={!isActive}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-label={ariaLabel}\n        aria-hidden={isActive}\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 { 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"],"mappings":"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","names":["import_styled_components","styled","PartnerLogoNames","PartnerLogo","styled","Box"]}
+{"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  ExternalViewBoxes,\n  GeneralViewBoxes,\n  SproutViewBoxes,\n  ExternalIconNames,\n  type EnumIconSvgNames,\n  type EnumIconNamesWithoutVariants,\n} from \"@sproutsocial/seeds-icons\";\n\nconst AllViewboxes = {\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  return (\n    <Container\n      iconSize={size}\n      fixedWidth={!!fixedWidth}\n      key={iconName}\n      role=\"img\"\n      aria-label={ariaLabel}\n      data-qa-icon={iconName}\n      color={color}\n      {...rest}\n    >\n      <svg\n        className=\"Icon-svg\"\n        viewBox={iconViewBox}\n        focusable={false}\n        data-qa-icon-svg={`${iconName}-svg`}\n        {...svgProps}\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-label={ariaLabel}\n        aria-hidden={!isActive}\n      />\n      <ToggleableIcon\n        active={!isActive}\n        name={inactiveName}\n        size={size}\n        fixedWidth={fixedWidth}\n        aria-label={ariaLabel}\n        aria-hidden={isActive}\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-icon",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Seeds React Icon component",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -12,26 +12,28 @@
   ],
   "scripts": {
     "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.0.1",
-    "@sproutsocial/seeds-react-partner-logo": "^1.0.0",
-    "@sproutsocial/seeds-react-system-props": "^2.2.0",
-    "@sproutsocial/seeds-react-theme": "^1.0.0",
-    "@sproutsocial/seeds-react-utilities": "^3.0.0",
+    "@sproutsocial/seeds-react-box": "^1.1.1",
+    "@sproutsocial/seeds-react-partner-logo": "^1.3.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-utilities": "^4.0.1",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
-    "@sproutsocial/seeds-icons": "^1.8.0",
-    "@sproutsocial/seeds-partner-logos": "^1.5.0",
+    "@sproutsocial/seeds-icons": "^1.14.0",
+    "@sproutsocial/seeds-partner-logos": "^1.12.0",
     "styled-components": "^5.2.3",
-    "typescript": "^5.1.6",
-    "tsup": "^8.0.2"
+    "typescript": "^5.6.2",
+    "tsup": "^8.0.2",
+    "@sproutsocial/seeds-tsconfig": "*"
   },
   "peerDependencies": {
     "@sproutsocial/seeds-icons": ">=1.8.0",