@semcore/icon 3.13.1 → 3.13.3

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.13.3] - 2023-03-13
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/flex-box` [4.7.10 ~> 4.7.11], `@semcore/utils` [3.47.1 ~> 3.47.2]).
+
+## [3.13.2] - 2023-03-02
+
+### Removed
+
+- Removed automatic setting of `aria-hidden` to `true`.
+
 ## [3.13.1] - 2023-02-28
 
 ### Fixed
@@ -24,8 +36,7 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 ### Fixed
 
-- Removed `FeauturedImage` icon, use `FeaturedImage` instead.
-- Removed `FeauturedImage` icon, use `FeaturedImage` instead.
+- Renamed `FeauturedImage` icon to `FeaturedImage`.
 
 ## [3.10.2] - 2023-02-21
 
@@ -41,10 +52,10 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 ## [3.9.0] - 2023-02-09
 
-### Fixed
+### Changed
 
-- Removed `YoutubeAlt` icon, use `YoutubeColored` instead.
-- Removed `YoutubeRed` icon, use `YoutubeInvert` instead.
+- Renamed `YoutubeAlt` icon to `YoutubeColored`.
+- Renamed `YoutubeRed` icon to `YoutubeInvert`.
 
 ## [3.8.0] - 2023-01-20
 
@@ -68,7 +79,7 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 ### Fixed
 
-- Remove `Stoller` icon, use `Stroller` instead.
+- Renamed `Stoller` icon to `Stroller`.
 
 ## [3.5.1] - 2023-01-09
 
@@ -138,9 +149,9 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 ## [3.0.0] - 2022-10-10
 
-### BREAK
+### Fixed
 
-- Remove `AppBlock` icon, use `AppsBlock` instead.
+- Renamed `AppBlock` icon to `AppsBlock`.
 
 ### Changed
 

package/lib/cjs/Icon.js

@@ -44,16 +44,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_1a956_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_1a956)}.___SIcon_1a956_gg_.__keyboardFocused_1a956_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_1a956_gg_.__interactive_1a956_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1a956_gg_.__interactive_1a956_gg_:hover{color:var(--color-interactive_1a956)}}"
+".___SIcon_j24go_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_j24go)}.___SIcon_j24go_gg_.__keyboardFocused_j24go_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_j24go_gg_.__interactive_j24go_gg_{cursor:pointer}@media (hover:hover){.___SIcon_j24go_gg_.__interactive_j24go_gg_:hover{color:var(--color-interactive_j24go)}}"
 /*__inner_css_end__*/
-, "1a956_gg_")
+, "j24go_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1a956_gg_",
-  "--color": "--color_1a956",
-  "_keyboardFocused": "__keyboardFocused_1a956_gg_",
-  "_interactive": "__interactive_1a956_gg_",
-  "--color-interactive": "--color-interactive_1a956"
+  "__SIcon": "___SIcon_j24go_gg_",
+  "--color": "--color_j24go",
+  "_keyboardFocused": "__keyboardFocused_j24go_gg_",
+  "_interactive": "__interactive_j24go_gg_",
+  "--color-interactive": "--color-interactive_j24go"
 });
 
 function Icon(props, ref) {
@@ -63,7 +63,6 @@ function Icon(props, ref) {
     width: 16,
     height: 16,
     viewBox: '0 0 16 16',
-    'aria-hidden': true,
     focusable: props.interactive
   }, props), ref),
       _useBox2 = (0, _slicedToArray2["default"])(_useBox, 2),

package/lib/cjs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","resolveColor","keyboardFocusEnhance","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","sstyled","styles","cn","shade","className","style","onKeyDown","event","code","onClick","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","hasLabels","current","displayName","forkedRef","useForkRef","undefined","propsForElement","Object","assign","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\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      'aria-hidden': true,\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.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        !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(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.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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"}
+{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","resolveColor","keyboardFocusEnhance","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","sstyled","styles","cn","shade","className","style","onKeyDown","event","code","onClick","labelCheckRef","React","useRef","useEffect","process","env","NODE_ENV","logger","warn","hasLabels","current","displayName","forkedRef","useForkRef","undefined","propsForElement","Object","assign","createBaseComponent"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\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 color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.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        !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(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.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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"}

package/lib/es6/Icon.js

@@ -20,16 +20,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_1a956_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_1a956)}.___SIcon_1a956_gg_.__keyboardFocused_1a956_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_1a956_gg_.__interactive_1a956_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1a956_gg_.__interactive_1a956_gg_:hover{color:var(--color-interactive_1a956)}}"
+".___SIcon_j24go_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_j24go)}.___SIcon_j24go_gg_.__keyboardFocused_j24go_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___SIcon_j24go_gg_.__interactive_j24go_gg_{cursor:pointer}@media (hover:hover){.___SIcon_j24go_gg_.__interactive_j24go_gg_:hover{color:var(--color-interactive_j24go)}}"
 /*__inner_css_end__*/
-, "1a956_gg_")
+, "j24go_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_1a956_gg_",
-  "--color": "--color_1a956",
-  "_keyboardFocused": "__keyboardFocused_1a956_gg_",
-  "_interactive": "__interactive_1a956_gg_",
-  "--color-interactive": "--color-interactive_1a956"
+  "__SIcon": "___SIcon_j24go_gg_",
+  "--color": "--color_j24go",
+  "_keyboardFocused": "__keyboardFocused_j24go_gg_",
+  "_interactive": "__interactive_j24go_gg_",
+  "--color-interactive": "--color-interactive_j24go"
 });
 
 function Icon(props, ref) {
@@ -39,7 +39,6 @@ function Icon(props, ref) {
     width: 16,
     height: 16,
     viewBox: '0 0 16 16',
-    'aria-hidden': true,
     focusable: props.interactive
   }, props), ref),
       _useBox2 = _slicedToArray(_useBox, 2),

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","useForkRef","hasLabels","Icon","props","ref","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","onKeyDown","event","code","onClick","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\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      'aria-hidden': true,\n      focusable: props.interactive,\n      ...props,\n    },\n    ref,\n  );\n\n  const { interactive, color: colorProps } = props;\n  const color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.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        !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(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.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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"}
+{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","logger","useForkRef","hasLabels","Icon","props","ref","tag","width","height","viewBox","focusable","interactive","SIcon","other","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","onKeyDown","event","code","onClick","labelCheckRef","useRef","useEffect","process","env","NODE_ENV","warn","current","displayName","forkedRef","undefined","Object","assign"],"sources":["../../src/Icon.jsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createBaseComponent, sstyled } from '@semcore/core';\nimport { useBox } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport propsForElement from '@semcore/utils/lib/propsForElement';\nimport logger from '@semcore/utils/lib/logger';\nimport { useForkRef } from '@semcore/utils/lib/ref';\nimport hasLabels from '@semcore/utils/lib/hasLabels';\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 color = resolveColor(colorProps);\n  const { keyboardFocused, ...propsWithKeyboardEnhance } = keyboardFocusEnhance()({\n    disabled: !interactive,\n    ...other,\n  });\n  const sstyles = sstyled(styles);\n  const { className, style } = sstyles.cn('SIcon', {\n    'color-interactive': shade(color, -0.12),\n    'use:color': color,\n    interactive: interactive,\n    keyboardFocused: keyboardFocused,\n  });\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (interactive && event.code === 'Enter') {\n      props.onClick && props.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        !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(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n      onKeyDown={onKeyDown}\n      ref={forkedRef}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,EAAP,MAAe,YAAf;AACA,SAASC,mBAAT,EAA8BC,OAA9B,QAA6C,eAA7C;AACA,SAASC,MAAT,QAAuB,mBAAvB;AACA,OAAOC,YAAP,IAAuBC,KAAvB,QAAoC,0BAApC;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;AACA,OAAOC,eAAP,MAA4B,oCAA5B;AACA,OAAOC,MAAP,MAAmB,2BAAnB;AACA,SAASC,UAAT,QAA2B,wBAA3B;AACA,OAAOC,SAAP,MAAsB,8BAAtB;;;;;;;;;;;;;;;;;;;AAIA,SAASC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuBV,MAAM;IAEzBW,GAAG,EAAE,KAFoB;IAGzB,gBAAgB,MAHS;IAIzBC,KAAK,EAAE,EAJkB;IAKzBC,MAAM,EAAE,EALiB;IAMzBC,OAAO,EAAE,WANgB;IAOzBC,SAAS,EAAEN,KAAK,CAACO;EAPQ,GAQtBP,KARsB,GAU3BC,GAV2B,CAA7B;EAAA;EAAA,IAAOO,KAAP;EAAA,IAAcC,KAAd;;EAaA,IAAQF,WAAR,GAA2CP,KAA3C,CAAQO,WAAR;EAAA,IAA4BG,UAA5B,GAA2CV,KAA3C,CAAqBW,KAArB;EACA,IAAMA,KAAK,GAAGnB,YAAY,CAACkB,UAAD,CAA1B;;EACA,4BAAyDhB,oBAAoB;IAC3EkB,QAAQ,EAAE,CAACL;EADgE,GAExEE,KAFwE,EAA7E;EAAA,IAAQI,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAGzB,OAAO,CAAC0B,MAAD,CAAvB;;EACA,kBAA6BD,OAAO,CAAC3B,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqBK,KAAK,CAACkB,KAAD,EAAQ,CAAC,IAAT,CADqB;IAE/C,aAAaA,KAFkC;IAG/CJ,WAAW,EAAEA,WAHkC;IAI/CM,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQI,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACxB,IAAIpB,KAAK,CAACmB,SAAV,EAAqB;MACnB,OAAOnB,KAAK,CAACmB,SAAN,CAAgBC,KAAhB,CAAP;IACD;;IAED,IAAIb,WAAW,IAAIa,KAAK,CAACC,IAAN,KAAe,OAAlC,EAA2C;MACzCrB,KAAK,CAACsB,OAAN,IAAiBtB,KAAK,CAACsB,OAAN,CAAcF,KAAd,CAAjB;IACD;EACF;;EAED,IAAMG,aAAa,GAAGpC,KAAK,CAACqC,MAAN,EAAtB;EACArC,KAAK,CAACsC,SAAN,CAAgB,YAAM;IACpB,IAAI,CAAClB,WAAL,EAAkB;;IAClB,IAAImB,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;MACzChC,MAAM,CAACiC,IAAP,CACE,CAAC/B,SAAS,CAACyB,aAAa,CAACO,OAAf,CADZ,gFAGE9B,KAAK,CAAC,cAAD,CAAL,IAAyBD,IAAI,CAACgC,WAHhC;IAKD;EACF,CATD,EASG,CAACxB,WAAD,CATH;EAUA,IAAMyB,SAAS,GAAGnC,UAAU,CAACI,GAAD,EAAMsB,aAAN,CAA5B;EAEA,oBACE,oBAAC,KAAD;IACE,IAAI,EAAEhB,WAAW,GAAG,QAAH,GAAc0B,SADjC;IAEE,eAAa1B,WAAW,GAAG0B,SAAH,GAAe;EAFzC,GAGMtC,eAAe,CAACmB,wBAAD,CAHrB;IAIE,KAAK,EAAEoB,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBjB,KAAlB,EAAyBJ,wBAAwB,CAACI,KAAlD,EAAyDlB,KAAK,CAACkB,KAA/D,CAJT;IAKE,SAAS,EAAE9B,EAAE,CAAC6B,SAAD,EAAYH,wBAAwB,CAACG,SAArC,EAAgDjB,KAAK,CAACiB,SAAtD,CAAF,IAAsEgB,SALnF;IAME,SAAS,EAAEd,SANb;IAOE,GAAG,EAAEa;EAPP,GADF;AAWD;;AAEDjC,IAAI,CAACgC,WAAL,GAAmB,MAAnB;AAEA,eAAe1C,mBAAmB,CAACU,IAAD,CAAlC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/icon",
   "description": "Semrush Icon Component",
-  "version": "3.13.1",
+  "version": "3.13.3",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",