@sproutsocial/seeds-react-icon 1.1.1 → 1.1.2

package/dist/esm/index.js

@@ -187,10 +187,10 @@ var Icon_default = Icon;
 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/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"]}
+{"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.js

@@ -28,13 +28,13 @@ 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 = require("react");
@@ -220,7 +220,7 @@ var Icon_default = Icon;
 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","../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"]}
+{"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.1",
+  "version": "1.1.2",
   "description": "Seeds React Icon component",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
@@ -12,23 +12,24 @@
   ],
   "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": "^*",
-    "@sproutsocial/seeds-react-partner-logo": "*",
-    "@sproutsocial/seeds-react-system-props": "*",
-    "@sproutsocial/seeds-react-theme": "*",
-    "@sproutsocial/seeds-react-utilities": "*",
+    "@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": "*",
-    "@sproutsocial/seeds-partner-logos": "*",
+    "@sproutsocial/seeds-icons": "^1.14.0",
+    "@sproutsocial/seeds-partner-logos": "^1.12.0",
     "styled-components": "^5.2.3",
     "typescript": "^5.6.2",
     "tsup": "^8.0.2",