@semcore/icon 16.7.1 → 16.7.2-prerelease.0

package/lib/cjs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_core","require","_keyboardFocusEnhance2","_interopRequireDefault","_hasLabels","_logger","_propsForElement","_ref","_useColorResolver","_flexBox","_classnames","_react","_excluded","styles","sstyled","insert","Icon","props","ref","_useBox","useBox","_objectSpread2","interactive","_useBox2","_slicedToArray2","SIcon","other","colorProps","color","resolveColor","useColorResolver","_keyboardFocusEnhance","keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties2","sstyles","_sstyles$cn","cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","current","hasLabels","displayName","forkedRef","useForkRef","createElement","_extends2","role","undefined","propsForElement","Object","assign","_default","exports","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useForkRef } from '@semcore/core/lib/utils/ref';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport { useBox } from '@semcore/flex-box';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      'tag': 'svg',\n      'data-ui-name': 'Icon',\n      'width': 16,\n      'height': 16,\n      'viewBox': '0 0 16 16',\n      'focusable': props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    'interactive': interactive,\n    'keyboardFocused': keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        labelCheckRef.current && !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      {...propsForElement(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["_core","require","_baseComponents","_keyboardFocusEnhance2","_interopRequireDefault","_hasLabels","_logger","_propsForElement","_ref","_useColorResolver","_classnames","_react","_excluded","styles","sstyled","insert","Icon","props","ref","_useBox","useBox","_objectSpread2","interactive","_useBox2","_slicedToArray2","SIcon","other","colorProps","color","resolveColor","useColorResolver","_keyboardFocusEnhance","keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties2","sstyles","_sstyles$cn","cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","current","hasLabels","displayName","forkedRef","useForkRef","createElement","_extends2","role","undefined","propsForElement","Object","assign","_default","exports","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import { useBox } from '@semcore/base-components';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useForkRef } from '@semcore/core/lib/utils/ref';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      'tag': 'svg',\n      'data-ui-name': 'Icon',\n      'width': 16,\n      'height': 16,\n      'viewBox': '0 0 16 16',\n      'focusable': props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    'interactive': interactive,\n    'keyboardFocused': keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        labelCheckRef.current && !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      {...propsForElement(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/flex-box';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Icon width */\n    width?: string | number;\n    /** Icon height */\n    height?: string | number;\n    /** SVG viewBox attribute */\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/base-components';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Icon width */\n    width?: string | number;\n    /** Icon height */\n    height?: string | number;\n    /** SVG viewBox attribute */\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":"","ignoreList":[]}

package/lib/es6/Icon.js

@@ -4,6 +4,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { sstyled as _sstyled } from "@semcore/core";
 var _excluded = ["keyboardFocused"];
+import { useBox } from '@semcore/base-components';
 import { createBaseComponent, sstyled } from '@semcore/core';
 import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import hasLabels from '@semcore/core/lib/utils/hasLabels';
@@ -11,16 +12,15 @@ import logger from '@semcore/core/lib/utils/logger';
 import propsForElement from '@semcore/core/lib/utils/propsForElement';
 import { useForkRef } from '@semcore/core/lib/utils/ref';
 import { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';
-import { useBox } from '@semcore/flex-box';
 import cn from 'classnames';
 import React from 'react';
 /*!__reshadow-styles__:"./style/icon.shadow.css"*/
-var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SIcon_yxgog_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_yxgog)}.___SIcon_yxgog_gg_.__interactive_yxgog_gg_{cursor:pointer}@media (hover:hover){.___SIcon_yxgog_gg_.__interactive_yxgog_gg_:hover{filter:brightness(.8)}}", /*__inner_css_end__*/"yxgog_gg_"),
+var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SIcon_14s6y_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_14s6y)}.___SIcon_14s6y_gg_.__interactive_14s6y_gg_{cursor:pointer}@media (hover:hover){.___SIcon_14s6y_gg_.__interactive_14s6y_gg_:hover{filter:brightness(.8)}}", /*__inner_css_end__*/"14s6y_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SIcon": "___SIcon_yxgog_gg_",
-  "--color": "--color_yxgog",
-  "_interactive": "__interactive_yxgog_gg_"
+  "__SIcon": "___SIcon_14s6y_gg_",
+  "--color": "--color_14s6y",
+  "_interactive": "__interactive_14s6y_gg_"
 });
 function Icon(props, ref) {
   var _useBox = useBox(_objectSpread({

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["createBaseComponent","sstyled","keyboardFocusEnhance","hasLabels","logger","propsForElement","useForkRef","useColorResolver","useBox","cn","React","styles","_sstyled","insert","Icon","props","ref","_useBox","_objectSpread","interactive","_useBox2","_slicedToArray","SIcon","other","colorProps","color","resolveColor","_keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties","_excluded","sstyles","_sstyles$cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","createElement","_extends","role","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import { createBaseComponent, sstyled } from '@semcore/core';\nimport keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useForkRef } from '@semcore/core/lib/utils/ref';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport { useBox } from '@semcore/flex-box';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      'tag': 'svg',\n      'data-ui-name': 'Icon',\n      'width': 16,\n      'height': 16,\n      'viewBox': '0 0 16 16',\n      'focusable': props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    'interactive': interactive,\n    'keyboardFocused': keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        labelCheckRef.current && !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      {...propsForElement(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;AAAA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ,eAAe;AAC5D,OAAOC,oBAAoB,MAAM,uDAAuD;AACxF,OAAOC,SAAS,MAAM,mCAAmC;AACzD,OAAOC,MAAM,MAAM,gCAAgC;AACnD,OAAOC,eAAe,MAAM,yCAAyC;AACrE,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,gBAAgB,QAAQ,8CAA8C;AAC/E,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,EAAE,MAAM,YAAY;AAC3B,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,IAAIA,CAACC,KAAK,EAAEC,GAAG,EAAE;EACxB,IAAAC,OAAA,GAAuBT,MAAM,CAAAU,aAAA;MAEzB,KAAK,EAAE,KAAK;MACZ,cAAc,EAAE,MAAM;MACtB,OAAO,EAAE,EAAE;MACX,QAAQ,EAAE,EAAE;MACZ,SAAS,EAAE,WAAW;MACtB,WAAW,EAAEH,KAAK,CAACI;IAAW,GAC3BJ,KAAK,GAEVC,GACF,CAAC;IAAAI,QAAA,GAAAC,cAAA,CAAAJ,OAAA;IAXMK,KAAK,GAAAF,QAAA;IAAEG,KAAK,GAAAH,QAAA;EAanB,IAAQD,WAAW,GAAwBJ,KAAK,CAAxCI,WAAW;IAASK,UAAU,GAAKT,KAAK,CAA3BU,KAAK;EAC1B,IAAMC,YAAY,GAAGnB,gBAAgB,CAAC,CAAC;EACvC,IAAMkB,KAAK,GAAGC,YAAY,CAACF,UAAU,CAAC;EACtC,IAAAG,qBAAA,GAA6CzB,oBAAoB,CAAC,CAAC,CAAAgB,aAAA;MACjEU,QAAQ,EAAE,CAACT;IAAW,GACnBI,KAAK,CACT,CAAC;IAHMM,eAAe,GAAAF,qBAAA,CAAfE,eAAe;IAAKC,YAAY,GAAAC,wBAAA,CAAAJ,qBAAA,EAAAK,SAAA;EAIxC,IAAMC,OAAO,GAAGhC,OAAO,CAACU,MAAM,CAAC;EAC/B,IAAAuB,WAAA,GAA6BD,OAAO,CAACxB,EAAE,CAAC,OAAO,EAAE;MAC/C,WAAW,EAAEgB,KAAK;MAClB,aAAa,EAAEN,WAAW;MAC1B,iBAAiB,EAAEU;IACrB,CAAC,CAAC;IAJMM,SAAS,GAAAD,WAAA,CAATC,SAAS;IAAEC,KAAK,GAAAF,WAAA,CAALE,KAAK;EAMxB,SAASC,SAASA,CAACC,KAAK,EAAE;IACxB,IAAIR,YAAY,CAACO,SAAS,EAAE;MAC1B,OAAOP,YAAY,CAACO,SAAS,CAACC,KAAK,CAAC;IACtC;IAEA,IAAInB,WAAW,IAAIW,YAAY,CAACS,OAAO,KAAKD,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,CAAC,EAAE;MACvFF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBX,YAAY,CAACS,OAAO,CAACD,KAAK,CAAC;IAC7B;EACF;EAEA,IAAMI,aAAa,GAAGhC,KAAK,CAACiC,MAAM,CAAC,CAAC;EACpCjC,KAAK,CAACkC,SAAS,CAAC,YAAM;IACpB,IAAI,CAACzB,WAAW,EAAE;IAClB,IAAI0B,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;MACzC3C,MAAM,CAAC4C,IAAI,CACTN,aAAa,CAACO,OAAO,IAAI,CAAC9C,SAAS,CAACuC,aAAa,CAACO,OAAO,CAAC,gFAE1DlC,KAAK,CAAC,cAAc,CAAC,IAAID,IAAI,CAACoC,WAChC,CAAC;IACH;EACF,CAAC,EAAE,CAAC/B,WAAW,CAAC,CAAC;EACjB,IAAMgC,SAAS,GAAG7C,UAAU,CAACU,GAAG,EAAE0B,aAAa,CAAC;EAEhD,oBACEhC,KAAA,CAAA0C,aAAA,CAAC9B,KAAK,EAAA+B,QAAA;IACJC,IAAI,EAAEnC,WAAW,GAAG,QAAQ,GAAGoC,SAAU;IACzC,eAAapC,WAAW,GAAGoC,SAAS,GAAG;EAAO,GAC1ClD,eAAe,CAACyB,YAAY,CAAC;IACjCM,KAAK,EAAEoB,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAErB,KAAK,EAAEN,YAAY,CAACM,KAAK,CAAE;IACpDD,SAAS,EAAE1B,EAAE,CAAC0B,SAAS,EAAEL,YAAY,CAACK,SAAS,CAAC,IAAIoB,SAAU;IAC9DlB,SAAS,EAAEA,SAAU;IACrBrB,GAAG,EAAEmC;EAAU,EAChB,CAAC;AAEN;AAEArC,IAAI,CAACoC,WAAW,GAAG,MAAM;AAEzB,eAAelD,mBAAmB,CAACc,IAAI,CAAC","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["useBox","createBaseComponent","sstyled","keyboardFocusEnhance","hasLabels","logger","propsForElement","useForkRef","useColorResolver","cn","React","styles","_sstyled","insert","Icon","props","ref","_useBox","_objectSpread","interactive","_useBox2","_slicedToArray","SIcon","other","colorProps","color","resolveColor","_keyboardFocusEnhance","disabled","keyboardFocused","propsEnhance","_objectWithoutProperties","_excluded","sstyles","_sstyles$cn","className","style","onKeyDown","event","onClick","key","preventDefault","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","createElement","_extends","role","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import { useBox } from '@semcore/base-components';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\nimport hasLabels from '@semcore/core/lib/utils/hasLabels';\nimport logger from '@semcore/core/lib/utils/logger';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport { useForkRef } from '@semcore/core/lib/utils/ref';\nimport { useColorResolver } from '@semcore/core/lib/utils/use/useColorResolver';\nimport cn from 'classnames';\nimport React from 'react';\n\nimport styles from './style/icon.shadow.css';\n\nfunction Icon(props, ref) {\n  const [SIcon, other] = useBox(\n    {\n      'tag': 'svg',\n      'data-ui-name': 'Icon',\n      'width': 16,\n      'height': 16,\n      'viewBox': '0 0 16 16',\n      'focusable': props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const resolveColor = useColorResolver();\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'use:color': color,\n    'interactive': interactive,\n    'keyboardFocused': keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (propsEnhance.onKeyDown) {\n      return propsEnhance.onKeyDown(event);\n    }\n\n    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      propsEnhance.onClick(event);\n    }\n  }\n\n  const labelCheckRef = React.useRef();\n  React.useEffect(() => {\n    if (!interactive) return;\n    if (process.env.NODE_ENV !== 'production') {\n      logger.warn(\n        labelCheckRef.current && !hasLabels(labelCheckRef.current),\n        `'aria-label' or 'aria-labelledby' are required props for interactive icons`,\n        props['data-ui-name'] || Icon.displayName,\n      );\n    }\n  }, [interactive]);\n  const forkedRef = useForkRef(ref, labelCheckRef);\n\n  return (\n    <SIcon\n      role={interactive ? 'button' : undefined}\n      aria-hidden={interactive ? undefined : 'true'}\n      {...propsForElement(propsEnhance)}\n      style={Object.assign({}, style, propsEnhance.style)}\n      className={cn(className, propsEnhance.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/flex-box';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Icon width */\n    width?: string | number;\n    /** Icon height */\n    height?: string | number;\n    /** SVG viewBox attribute */\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { BoxProps } from '@semcore/base-components';\nimport { Intergalactic, UnknownProperties } from '@semcore/core';\nimport { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';\n\n/** @deprecated */\nexport interface IIconProps extends IconProps, UnknownProperties {}\nexport type IconProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Icon width */\n    width?: string | number;\n    /** Icon height */\n    height?: string | number;\n    /** SVG viewBox attribute */\n    viewBox?: string;\n    /** Make an icon interactive */\n    interactive?: boolean;\n    /** Icon color */\n    color?: string;\n  };\n\ndeclare const Icon: Intergalactic.Component<'svg', IconProps>;\n\nexport default Icon;\n"],"mappings":"","ignoreList":[]}

package/lib/esm/Icon.mjs

@@ -3,13 +3,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { createBaseComponent, sstyled } from "@semcore/core";
+import { useBox } from "@semcore/base-components";
 import keyboardFocusEnhance from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
 import hasLabels from "@semcore/core/lib/utils/hasLabels";
 import logger from "@semcore/core/lib/utils/logger";
 import propsForElement from "@semcore/core/lib/utils/propsForElement";
 import { useForkRef } from "@semcore/core/lib/utils/ref";
 import { useColorResolver } from "@semcore/core/lib/utils/use/useColorResolver";
-import { useBox } from "@semcore/flex-box";
 import cn from "classnames";
 import React from "react";
 var _excluded = ["keyboardFocused"];
@@ -18,14 +18,14 @@ var styles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SIcon_yxgog_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_yxgog)}.___SIcon_yxgog_gg_.__interactive_yxgog_gg_{cursor:pointer}@media (hover:hover){.___SIcon_yxgog_gg_.__interactive_yxgog_gg_:hover{filter:brightness(.8)}}",
+    ".___SIcon_14s6y_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_14s6y)}.___SIcon_14s6y_gg_.__interactive_14s6y_gg_{cursor:pointer}@media (hover:hover){.___SIcon_14s6y_gg_.__interactive_14s6y_gg_:hover{filter:brightness(.8)}}",
     /*__inner_css_end__*/
-    "yxgog_gg_"
+    "14s6y_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SIcon": "___SIcon_yxgog_gg_",
-    "--color": "--color_yxgog",
-    "_interactive": "__interactive_yxgog_gg_"
+    "__SIcon": "___SIcon_14s6y_gg_",
+    "--color": "--color_14s6y",
+    "_interactive": "__interactive_14s6y_gg_"
   })
 );
 function Icon(props, ref) {

package/lib/types/index.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '@semcore/flex-box';
+import { BoxProps } from '@semcore/base-components';
 import { Intergalactic, UnknownProperties } from '@semcore/core';
 import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/icon",
   "description": "Semrush Icon Component",
-  "version": "16.7.1",
+  "version": "16.7.2-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
@@ -9,11 +9,10 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/flex-box": "16.0.9",
     "classnames": "2.2.6"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^16.3.0-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -22,9 +21,10 @@
   },
   "devDependencies": {
     "@types/classnames": "2.2.6",
-    "@semcore/base-components": "16.2.3",
+    "@semcore/icon-transform-svg": "1.1.0",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon-transform-svg": "1.1.0"
+    "@semcore/core": "16.4.0-prerelease.0",
+    "@semcore/base-components": "16.3.0-prerelease.0"
   },
   "exports": {
     ".": {
@@ -362,16 +362,6 @@
       "import": "./color/GoogleDocs/l/index.mjs",
       "types": "./color/GoogleDocs/l/index.d.ts"
     },
-    "./color/GoogleDataStudio/m": {
-      "require": "./color/GoogleDataStudio/m/index.js",
-      "import": "./color/GoogleDataStudio/m/index.mjs",
-      "types": "./color/GoogleDataStudio/m/index.d.ts"
-    },
-    "./color/GoogleDataStudio/l": {
-      "require": "./color/GoogleDataStudio/l/index.js",
-      "import": "./color/GoogleDataStudio/l/index.mjs",
-      "types": "./color/GoogleDataStudio/l/index.d.ts"
-    },
     "./color/GoogleDisplayVideoAds/m": {
       "require": "./color/GoogleDisplayVideoAds/m/index.js",
       "import": "./color/GoogleDisplayVideoAds/m/index.mjs",
@@ -382,6 +372,16 @@
       "import": "./color/GoogleDisplayVideoAds/l/index.mjs",
       "types": "./color/GoogleDisplayVideoAds/l/index.d.ts"
     },
+    "./color/GoogleDataStudio/m": {
+      "require": "./color/GoogleDataStudio/m/index.js",
+      "import": "./color/GoogleDataStudio/m/index.mjs",
+      "types": "./color/GoogleDataStudio/m/index.d.ts"
+    },
+    "./color/GoogleDataStudio/l": {
+      "require": "./color/GoogleDataStudio/l/index.js",
+      "import": "./color/GoogleDataStudio/l/index.mjs",
+      "types": "./color/GoogleDataStudio/l/index.d.ts"
+    },
     "./color/GoogleColor/m": {
       "require": "./color/GoogleColor/m/index.js",
       "import": "./color/GoogleColor/m/index.mjs",
@@ -592,16 +592,6 @@
       "import": "./pay/Visa/l/index.mjs",
       "types": "./pay/Visa/l/index.d.ts"
     },
-    "./pay/PayPal/m": {
-      "require": "./pay/PayPal/m/index.js",
-      "import": "./pay/PayPal/m/index.mjs",
-      "types": "./pay/PayPal/m/index.d.ts"
-    },
-    "./pay/PayPal/l": {
-      "require": "./pay/PayPal/l/index.js",
-      "import": "./pay/PayPal/l/index.mjs",
-      "types": "./pay/PayPal/l/index.d.ts"
-    },
     "./pay/UnionPay/m": {
       "require": "./pay/UnionPay/m/index.js",
       "import": "./pay/UnionPay/m/index.mjs",
@@ -612,15 +602,25 @@
       "import": "./pay/UnionPay/l/index.mjs",
       "types": "./pay/UnionPay/l/index.d.ts"
     },
-    "./pay/Discover/m": {
-      "require": "./pay/Discover/m/index.js",
-      "import": "./pay/Discover/m/index.mjs",
-      "types": "./pay/Discover/m/index.d.ts"
+    "./pay/PayPal/m": {
+      "require": "./pay/PayPal/m/index.js",
+      "import": "./pay/PayPal/m/index.mjs",
+      "types": "./pay/PayPal/m/index.d.ts"
     },
-    "./pay/Discover/l": {
-      "require": "./pay/Discover/l/index.js",
-      "import": "./pay/Discover/l/index.mjs",
-      "types": "./pay/Discover/l/index.d.ts"
+    "./pay/PayPal/l": {
+      "require": "./pay/PayPal/l/index.js",
+      "import": "./pay/PayPal/l/index.mjs",
+      "types": "./pay/PayPal/l/index.d.ts"
+    },
+    "./pay/Mastercard/m": {
+      "require": "./pay/Mastercard/m/index.js",
+      "import": "./pay/Mastercard/m/index.mjs",
+      "types": "./pay/Mastercard/m/index.d.ts"
+    },
+    "./pay/Mastercard/l": {
+      "require": "./pay/Mastercard/l/index.js",
+      "import": "./pay/Mastercard/l/index.mjs",
+      "types": "./pay/Mastercard/l/index.d.ts"
     },
     "./pay/JCB/m": {
       "require": "./pay/JCB/m/index.js",
@@ -632,6 +632,16 @@
       "import": "./pay/JCB/l/index.mjs",
       "types": "./pay/JCB/l/index.d.ts"
     },
+    "./pay/Discover/m": {
+      "require": "./pay/Discover/m/index.js",
+      "import": "./pay/Discover/m/index.mjs",
+      "types": "./pay/Discover/m/index.d.ts"
+    },
+    "./pay/Discover/l": {
+      "require": "./pay/Discover/l/index.js",
+      "import": "./pay/Discover/l/index.mjs",
+      "types": "./pay/Discover/l/index.d.ts"
+    },
     "./pay/Diners/m": {
       "require": "./pay/Diners/m/index.js",
       "import": "./pay/Diners/m/index.mjs",
@@ -662,16 +672,6 @@
       "import": "./pay/AmericanExpress/l/index.mjs",
       "types": "./pay/AmericanExpress/l/index.d.ts"
     },
-    "./pay/Mastercard/m": {
-      "require": "./pay/Mastercard/m/index.js",
-      "import": "./pay/Mastercard/m/index.mjs",
-      "types": "./pay/Mastercard/m/index.d.ts"
-    },
-    "./pay/Mastercard/l": {
-      "require": "./pay/Mastercard/l/index.js",
-      "import": "./pay/Mastercard/l/index.mjs",
-      "types": "./pay/Mastercard/l/index.d.ts"
-    },
     "./platform/TrafficMarketToolkit": {
       "require": "./platform/TrafficMarketToolkit/index.js",
       "import": "./platform/TrafficMarketToolkit/index.mjs",
@@ -697,16 +697,16 @@
       "import": "./platform/PRToolkit/index.mjs",
       "types": "./platform/PRToolkit/index.d.ts"
     },
-    "./platform/LocalToolkit": {
-      "require": "./platform/LocalToolkit/index.js",
-      "import": "./platform/LocalToolkit/index.mjs",
-      "types": "./platform/LocalToolkit/index.d.ts"
-    },
     "./platform/HomePlatform": {
       "require": "./platform/HomePlatform/index.js",
       "import": "./platform/HomePlatform/index.mjs",
       "types": "./platform/HomePlatform/index.d.ts"
     },
+    "./platform/LocalToolkit": {
+      "require": "./platform/LocalToolkit/index.js",
+      "import": "./platform/LocalToolkit/index.mjs",
+      "types": "./platform/LocalToolkit/index.d.ts"
+    },
     "./platform/EnterpriseSolutions": {
       "require": "./platform/EnterpriseSolutions/index.js",
       "import": "./platform/EnterpriseSolutions/index.mjs",
@@ -1097,16 +1097,6 @@
       "import": "./TopStories/l/index.mjs",
       "types": "./TopStories/l/index.d.ts"
     },
-    "./TimeNight/m": {
-      "require": "./TimeNight/m/index.js",
-      "import": "./TimeNight/m/index.mjs",
-      "types": "./TimeNight/m/index.d.ts"
-    },
-    "./TimeNight/l": {
-      "require": "./TimeNight/l/index.js",
-      "import": "./TimeNight/l/index.mjs",
-      "types": "./TimeNight/l/index.d.ts"
-    },
     "./TimeDay/m": {
       "require": "./TimeDay/m/index.js",
       "import": "./TimeDay/m/index.mjs",
@@ -1117,6 +1107,16 @@
       "import": "./TimeDay/l/index.mjs",
       "types": "./TimeDay/l/index.d.ts"
     },
+    "./TimeNight/m": {
+      "require": "./TimeNight/m/index.js",
+      "import": "./TimeNight/m/index.mjs",
+      "types": "./TimeNight/m/index.d.ts"
+    },
+    "./TimeNight/l": {
+      "require": "./TimeNight/l/index.js",
+      "import": "./TimeNight/l/index.mjs",
+      "types": "./TimeNight/l/index.d.ts"
+    },
     "./TimeClock/m": {
       "require": "./TimeClock/m/index.js",
       "import": "./TimeClock/m/index.mjs",
@@ -1217,16 +1217,6 @@
       "import": "./Text/l/index.mjs",
       "types": "./Text/l/index.d.ts"
     },
-    "./TagFilled/m": {
-      "require": "./TagFilled/m/index.js",
-      "import": "./TagFilled/m/index.mjs",
-      "types": "./TagFilled/m/index.d.ts"
-    },
-    "./TagFilled/l": {
-      "require": "./TagFilled/l/index.js",
-      "import": "./TagFilled/l/index.mjs",
-      "types": "./TagFilled/l/index.d.ts"
-    },
     "./Telescope/m": {
       "require": "./Telescope/m/index.js",
       "import": "./Telescope/m/index.mjs",
@@ -1237,6 +1227,16 @@
       "import": "./Telescope/l/index.mjs",
       "types": "./Telescope/l/index.d.ts"
     },
+    "./TagFilled/m": {
+      "require": "./TagFilled/m/index.js",
+      "import": "./TagFilled/m/index.mjs",
+      "types": "./TagFilled/m/index.d.ts"
+    },
+    "./TagFilled/l": {
+      "require": "./TagFilled/l/index.js",
+      "import": "./TagFilled/l/index.mjs",
+      "types": "./TagFilled/l/index.d.ts"
+    },
     "./Tag/m": {
       "require": "./Tag/m/index.js",
       "import": "./Tag/m/index.mjs",
@@ -1567,16 +1567,6 @@
       "import": "./SemrushRank/l/index.mjs",
       "types": "./SemrushRank/l/index.d.ts"
     },
-    "./Sellzone/m": {
-      "require": "./Sellzone/m/index.js",
-      "import": "./Sellzone/m/index.mjs",
-      "types": "./Sellzone/m/index.d.ts"
-    },
-    "./Sellzone/l": {
-      "require": "./Sellzone/l/index.js",
-      "import": "./Sellzone/l/index.mjs",
-      "types": "./Sellzone/l/index.d.ts"
-    },
     "./Semrush/m": {
       "require": "./Semrush/m/index.js",
       "import": "./Semrush/m/index.mjs",
@@ -1587,6 +1577,16 @@
       "import": "./Semrush/l/index.mjs",
       "types": "./Semrush/l/index.d.ts"
     },
+    "./Sellzone/m": {
+      "require": "./Sellzone/m/index.js",
+      "import": "./Sellzone/m/index.mjs",
+      "types": "./Sellzone/m/index.d.ts"
+    },
+    "./Sellzone/l": {
+      "require": "./Sellzone/l/index.js",
+      "import": "./Sellzone/l/index.mjs",
+      "types": "./Sellzone/l/index.d.ts"
+    },
     "./SeeResultsAbout/m": {
       "require": "./SeeResultsAbout/m/index.js",
       "import": "./SeeResultsAbout/m/index.mjs",
@@ -2027,16 +2027,6 @@
       "import": "./Pinterest/l/index.mjs",
       "types": "./Pinterest/l/index.d.ts"
     },
-    "./Pins/m": {
-      "require": "./Pins/m/index.js",
-      "import": "./Pins/m/index.mjs",
-      "types": "./Pins/m/index.d.ts"
-    },
-    "./Pins/l": {
-      "require": "./Pins/l/index.js",
-      "import": "./Pins/l/index.mjs",
-      "types": "./Pins/l/index.d.ts"
-    },
     "./PinUsd/m": {
       "require": "./PinUsd/m/index.js",
       "import": "./PinUsd/m/index.mjs",
@@ -2047,6 +2037,16 @@
       "import": "./PinUsd/l/index.mjs",
       "types": "./PinUsd/l/index.d.ts"
     },
+    "./Pins/m": {
+      "require": "./Pins/m/index.js",
+      "import": "./Pins/m/index.mjs",
+      "types": "./Pins/m/index.d.ts"
+    },
+    "./Pins/l": {
+      "require": "./Pins/l/index.js",
+      "import": "./Pins/l/index.mjs",
+      "types": "./Pins/l/index.d.ts"
+    },
     "./PinNo/m": {
       "require": "./PinNo/m/index.js",
       "import": "./PinNo/m/index.mjs",
@@ -2507,16 +2507,6 @@
       "import": "./LockYes/l/index.mjs",
       "types": "./LockYes/l/index.d.ts"
     },
-    "./ListNumber/m": {
-      "require": "./ListNumber/m/index.js",
-      "import": "./ListNumber/m/index.mjs",
-      "types": "./ListNumber/m/index.d.ts"
-    },
-    "./ListNumber/l": {
-      "require": "./ListNumber/l/index.js",
-      "import": "./ListNumber/l/index.mjs",
-      "types": "./ListNumber/l/index.d.ts"
-    },
     "./LockNo/m": {
       "require": "./LockNo/m/index.js",
       "import": "./LockNo/m/index.mjs",
@@ -2527,6 +2517,16 @@
       "import": "./LockNo/l/index.mjs",
       "types": "./LockNo/l/index.d.ts"
     },
+    "./ListNumber/m": {
+      "require": "./ListNumber/m/index.js",
+      "import": "./ListNumber/m/index.mjs",
+      "types": "./ListNumber/m/index.d.ts"
+    },
+    "./ListNumber/l": {
+      "require": "./ListNumber/l/index.js",
+      "import": "./ListNumber/l/index.mjs",
+      "types": "./ListNumber/l/index.d.ts"
+    },
     "./ListCheck/m": {
       "require": "./ListCheck/m/index.js",
       "import": "./ListCheck/m/index.mjs",
@@ -3747,16 +3747,6 @@
       "import": "./ChevronDoubleLeft/l/index.mjs",
       "types": "./ChevronDoubleLeft/l/index.d.ts"
     },
-    "./Checkbox/m": {
-      "require": "./Checkbox/m/index.js",
-      "import": "./Checkbox/m/index.mjs",
-      "types": "./Checkbox/m/index.d.ts"
-    },
-    "./Checkbox/l": {
-      "require": "./Checkbox/l/index.js",
-      "import": "./Checkbox/l/index.mjs",
-      "types": "./Checkbox/l/index.d.ts"
-    },
     "./ChevronDoubleDown/m": {
       "require": "./ChevronDoubleDown/m/index.js",
       "import": "./ChevronDoubleDown/m/index.mjs",
@@ -3767,6 +3757,16 @@
       "import": "./ChevronDoubleDown/l/index.mjs",
       "types": "./ChevronDoubleDown/l/index.d.ts"
     },
+    "./Checkbox/m": {
+      "require": "./Checkbox/m/index.js",
+      "import": "./Checkbox/m/index.mjs",
+      "types": "./Checkbox/m/index.d.ts"
+    },
+    "./Checkbox/l": {
+      "require": "./Checkbox/l/index.js",
+      "import": "./Checkbox/l/index.mjs",
+      "types": "./Checkbox/l/index.d.ts"
+    },
     "./CheckDouble/m": {
       "require": "./CheckDouble/m/index.js",
       "import": "./CheckDouble/m/index.mjs",
@@ -4297,16 +4297,6 @@
       "import": "./Airplane/l/index.mjs",
       "types": "./Airplane/l/index.d.ts"
     },
-    "./Adult/m": {
-      "require": "./Adult/m/index.js",
-      "import": "./Adult/m/index.mjs",
-      "types": "./Adult/m/index.d.ts"
-    },
-    "./Adult/l": {
-      "require": "./Adult/l/index.js",
-      "import": "./Adult/l/index.mjs",
-      "types": "./Adult/l/index.d.ts"
-    },
     "./AdobeExperienceCloud/m": {
       "require": "./AdobeExperienceCloud/m/index.js",
       "import": "./AdobeExperienceCloud/m/index.mjs",
@@ -4317,6 +4307,16 @@
       "import": "./AdobeExperienceCloud/l/index.mjs",
       "types": "./AdobeExperienceCloud/l/index.d.ts"
     },
+    "./Adult/m": {
+      "require": "./Adult/m/index.js",
+      "import": "./Adult/m/index.mjs",
+      "types": "./Adult/m/index.d.ts"
+    },
+    "./Adult/l": {
+      "require": "./Adult/l/index.js",
+      "import": "./Adult/l/index.mjs",
+      "types": "./Adult/l/index.d.ts"
+    },
     "./AddressPack/m": {
       "require": "./AddressPack/m/index.js",
       "import": "./AddressPack/m/index.mjs",

package/pay/Discover/l/index.js

@@ -32,7 +32,7 @@ function RootDiscover(_ref, ref) {
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M17.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
-    fill: "url(#intergalactic-icon-Discover_l_a-16.7.1)",
+    fill: "url(#intergalactic-icon-Discover_l_a-16.7.2)",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("path", {
     fillRule: "evenodd",

package/pay/Discover/l/index.mjs

@@ -21,7 +21,7 @@ function RootDiscover({
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M17.5 14a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
-    fill: "url(#intergalactic-icon-Discover_l_a-16.7.1)",
+    fill: "url(#intergalactic-icon-Discover_l_a-16.7.2)",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",

package/pay/Discover/m/index.js

@@ -32,7 +32,7 @@ function RootDiscover(_ref, ref) {
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M11.48 9.33c.91 0 1.64-.74 1.64-1.66 0-.92-.73-1.67-1.64-1.67-.9 0-1.64.75-1.64 1.67 0 .92.74 1.66 1.64 1.66Z",
-    fill: "url(#intergalactic-icon-Discover_m_a-16.7.1)",
+    fill: "url(#intergalactic-icon-Discover_m_a-16.7.2)",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("path", {
     fillRule: "evenodd",

package/pay/Discover/m/index.mjs

@@ -21,7 +21,7 @@ function RootDiscover({
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M11.48 9.33c.91 0 1.64-.74 1.64-1.66 0-.92-.73-1.67-1.64-1.67-.9 0-1.64.75-1.64 1.67 0 .92.74 1.66 1.64 1.66Z",
-    fill: "url(#intergalactic-icon-Discover_m_a-16.7.1)",
+    fill: "url(#intergalactic-icon-Discover_m_a-16.7.2)",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",