@semcore/icon 2.29.5 → 2.30.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.30.0] - 2022-08-18
+
+### Added
+
+- Added `onKeyDown` functionality.
+
 ## [2.29.5] - 2022-08-18
 
 ### Changed

package/lib/cjs/Icon.js

@@ -46,16 +46,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_2xx8d_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_2xx8d)}.___SIcon_2xx8d_gg_.__keyboardFocused_2xx8d_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_2xx8d_gg_.__interactive_2xx8d_gg_{cursor:pointer}.___SIcon_2xx8d_gg_.__interactive_2xx8d_gg_:hover{color:var(--color-interactive_2xx8d)}"
+".___SIcon_65xbq_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_65xbq)}.___SIcon_65xbq_gg_.__keyboardFocused_65xbq_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_65xbq_gg_.__interactive_65xbq_gg_{cursor:pointer}.___SIcon_65xbq_gg_.__interactive_65xbq_gg_:hover{color:var(--color-interactive_65xbq)}"
 /*__inner_css_end__*/
-, "2xx8d_gg_")
+, "65xbq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_2xx8d_gg_",
-  "--color": "--color_2xx8d",
-  "_keyboardFocused": "__keyboardFocused_2xx8d_gg_",
-  "_interactive": "__interactive_2xx8d_gg_",
-  "--color-interactive": "--color-interactive_2xx8d"
+  "__SIcon": "___SIcon_65xbq_gg_",
+  "--color": "--color_65xbq",
+  "_keyboardFocused": "__keyboardFocused_65xbq_gg_",
+  "_interactive": "__interactive_65xbq_gg_",
+  "--color-interactive": "--color-interactive_65xbq"
 });
 
 function Icon(props, ref) {
@@ -91,9 +91,20 @@ function Icon(props, ref) {
       className = _sstyles$cn.className,
       style = _sstyles$cn.style;
 
+  function onKeyDown(event) {
+    if (props.onKeyDown) {
+      return;
+    }
+
+    if (event.code === 'Enter' && interactive) {
+      props.onClick && props.onClick();
+    }
+  }
+
   return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({}, (0, _propsForElement["default"])(propsWithKeyboardEnhance), {
     style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
-    className: (0, _classnames["default"])(className, propsWithKeyboardEnhance.className, props.className) || undefined
+    className: (0, _classnames["default"])(className, propsWithKeyboardEnhance.className, props.className) || undefined,
+    onKeyDown: onKeyDown
   }));
 }
 

package/lib/cjs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","SIcon","other","interactive","colorProps","color","resolveColor","keyboardFocusEnhance","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","sstyled","styles","cn","shade","className","style","propsForElement","Object","assign","undefined","displayName","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';\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      ...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  return (\n    <SIcon\n      {...propsForElement(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\n    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuB,IAAAC,eAAA;IAEnBC,GAAG,EAAE,KAFc;IAGnB,gBAAgB,MAHG;IAInBC,KAAK,EAAE,EAJY;IAKnBC,MAAM,EAAE,EALW;IAMnBC,OAAO,EAAE;EANU,GAOhBN,KAPgB,GASrBC,GATqB,CAAvB;EAAA;EAAA,IAAOM,KAAP;EAAA,IAAcC,KAAd;;EAYA,IAAQC,WAAR,GAA2CT,KAA3C,CAAQS,WAAR;EAAA,IAA4BC,UAA5B,GAA2CV,KAA3C,CAAqBW,KAArB;EACA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAaF,UAAb,CAAd;;EACA,4BAAyD,IAAAG,iCAAA;IACvDC,QAAQ,EAAE,CAACL;EAD4C,GAEpDD,KAFoD,EAAzD;EAAA,IAAQO,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAG,IAAAC,aAAA,EAAQC,MAAR,CAAhB;;EACA,kBAA6BF,OAAO,CAACG,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqB,IAAAC,YAAA,EAAMV,KAAN,EAAa,CAAC,IAAd,CAD0B;IAE/C,aAAaA,KAFkC;IAG/CF,WAAW,EAAEA,WAHkC;IAI/CM,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQO,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,oBACE,gCAAC,KAAD,gCACM,IAAAC,2BAAA,EAAgBR,wBAAhB,CADN;IAEE,KAAK,EAAES,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBH,KAAlB,EAAyBP,wBAAwB,CAACO,KAAlD,EAAyDvB,KAAK,CAACuB,KAA/D,CAFT;IAGE,SAAS,EAAE,IAAAH,sBAAA,EAAGE,SAAH,EAAcN,wBAAwB,CAACM,SAAvC,EAAkDtB,KAAK,CAACsB,SAAxD,KAAsEK;EAHnF,GADF;AAOD;;AAED5B,IAAI,CAAC6B,WAAL,GAAmB,MAAnB;;eAEe,IAAAC,yBAAA,EAAoB9B,IAApB,C"}
+{"version":3,"file":"Icon.js","names":["Icon","props","ref","useBox","tag","width","height","viewBox","SIcon","other","interactive","colorProps","color","resolveColor","keyboardFocusEnhance","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","sstyled","styles","cn","shade","className","style","onKeyDown","event","code","onClick","propsForElement","Object","assign","undefined","displayName","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';\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      ...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;\n    }\n\n    if (event.code === 'Enter' && interactive) {\n      props.onClick && props.onClick();\n    }\n  }\n\n  return (\n    <SIcon\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    />\n  );\n}\n\nIcon.displayName = 'Icon';\n\nexport default createBaseComponent(Icon);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuB,IAAAC,eAAA;IAEnBC,GAAG,EAAE,KAFc;IAGnB,gBAAgB,MAHG;IAInBC,KAAK,EAAE,EAJY;IAKnBC,MAAM,EAAE,EALW;IAMnBC,OAAO,EAAE;EANU,GAOhBN,KAPgB,GASrBC,GATqB,CAAvB;EAAA;EAAA,IAAOM,KAAP;EAAA,IAAcC,KAAd;;EAYA,IAAQC,WAAR,GAA2CT,KAA3C,CAAQS,WAAR;EAAA,IAA4BC,UAA5B,GAA2CV,KAA3C,CAAqBW,KAArB;EACA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAaF,UAAb,CAAd;;EACA,4BAAyD,IAAAG,iCAAA;IACvDC,QAAQ,EAAE,CAACL;EAD4C,GAEpDD,KAFoD,EAAzD;EAAA,IAAQO,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAG,IAAAC,aAAA,EAAQC,MAAR,CAAhB;;EACA,kBAA6BF,OAAO,CAACG,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqB,IAAAC,YAAA,EAAMV,KAAN,EAAa,CAAC,IAAd,CAD0B;IAE/C,aAAaA,KAFkC;IAG/CF,WAAW,EAAEA,WAHkC;IAI/CM,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQO,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACxB,IAAIzB,KAAK,CAACwB,SAAV,EAAqB;MACnB;IACD;;IAED,IAAIC,KAAK,CAACC,IAAN,KAAe,OAAf,IAA0BjB,WAA9B,EAA2C;MACzCT,KAAK,CAAC2B,OAAN,IAAiB3B,KAAK,CAAC2B,OAAN,EAAjB;IACD;EACF;;EAED,oBACE,gCAAC,KAAD,gCACM,IAAAC,2BAAA,EAAgBZ,wBAAhB,CADN;IAEE,KAAK,EAAEa,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBP,KAAlB,EAAyBP,wBAAwB,CAACO,KAAlD,EAAyDvB,KAAK,CAACuB,KAA/D,CAFT;IAGE,SAAS,EAAE,IAAAH,sBAAA,EAAGE,SAAH,EAAcN,wBAAwB,CAACM,SAAvC,EAAkDtB,KAAK,CAACsB,SAAxD,KAAsES,SAHnF;IAIE,SAAS,EAAEP;EAJb,GADF;AAQD;;AAEDzB,IAAI,CAACiC,WAAL,GAAmB,MAAnB;;eAEe,IAAAC,yBAAA,EAAoBlC,IAApB,C"}

package/lib/es6/Icon.js

@@ -22,16 +22,16 @@ var styles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SIcon_2xx8d_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_2xx8d)}.___SIcon_2xx8d_gg_.__keyboardFocused_2xx8d_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_2xx8d_gg_.__interactive_2xx8d_gg_{cursor:pointer}.___SIcon_2xx8d_gg_.__interactive_2xx8d_gg_:hover{color:var(--color-interactive_2xx8d)}"
+".___SIcon_65xbq_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:none;color:var(--color_65xbq)}.___SIcon_65xbq_gg_.__keyboardFocused_65xbq_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SIcon_65xbq_gg_.__interactive_65xbq_gg_{cursor:pointer}.___SIcon_65xbq_gg_.__interactive_65xbq_gg_:hover{color:var(--color-interactive_65xbq)}"
 /*__inner_css_end__*/
-, "2xx8d_gg_")
+, "65xbq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SIcon": "___SIcon_2xx8d_gg_",
-  "--color": "--color_2xx8d",
-  "_keyboardFocused": "__keyboardFocused_2xx8d_gg_",
-  "_interactive": "__interactive_2xx8d_gg_",
-  "--color-interactive": "--color-interactive_2xx8d"
+  "__SIcon": "___SIcon_65xbq_gg_",
+  "--color": "--color_65xbq",
+  "_keyboardFocused": "__keyboardFocused_65xbq_gg_",
+  "_interactive": "__interactive_65xbq_gg_",
+  "--color-interactive": "--color-interactive_65xbq"
 });
 
 function Icon(props, ref) {
@@ -67,9 +67,20 @@ function Icon(props, ref) {
       className = _sstyles$cn.className,
       style = _sstyles$cn.style;
 
+  function onKeyDown(event) {
+    if (props.onKeyDown) {
+      return;
+    }
+
+    if (event.code === 'Enter' && interactive) {
+      props.onClick && props.onClick();
+    }
+  }
+
   return /*#__PURE__*/React.createElement(SIcon, _extends({}, propsForElement(propsWithKeyboardEnhance), {
     style: Object.assign({}, style, propsWithKeyboardEnhance.style, props.style),
-    className: cn(className, propsWithKeyboardEnhance.className, props.className) || undefined
+    className: cn(className, propsWithKeyboardEnhance.className, props.className) || undefined,
+    onKeyDown: onKeyDown
   }));
 }
 

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","Icon","props","ref","tag","width","height","viewBox","SIcon","other","interactive","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","Object","assign","undefined","displayName"],"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';\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      ...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  return (\n    <SIcon\n      {...propsForElement(propsWithKeyboardEnhance)}\n      style={Object.assign({}, style, propsWithKeyboardEnhance.style, props.style)}\n      className={cn(className, propsWithKeyboardEnhance.className, props.className) || undefined}\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;;;;;;;;;;;;;;;;;;;AAIA,SAASC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuBP,MAAM;IAEzBQ,GAAG,EAAE,KAFoB;IAGzB,gBAAgB,MAHS;IAIzBC,KAAK,EAAE,EAJkB;IAKzBC,MAAM,EAAE,EALiB;IAMzBC,OAAO,EAAE;EANgB,GAOtBL,KAPsB,GAS3BC,GAT2B,CAA7B;EAAA;EAAA,IAAOK,KAAP;EAAA,IAAcC,KAAd;;EAYA,IAAQC,WAAR,GAA2CR,KAA3C,CAAQQ,WAAR;EAAA,IAA4BC,UAA5B,GAA2CT,KAA3C,CAAqBU,KAArB;EACA,IAAMA,KAAK,GAAGf,YAAY,CAACc,UAAD,CAA1B;;EACA,4BAAyDZ,oBAAoB;IAC3Ec,QAAQ,EAAE,CAACH;EADgE,GAExED,KAFwE,EAA7E;EAAA,IAAQK,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAGrB,OAAO,CAACsB,MAAD,CAAvB;;EACA,kBAA6BD,OAAO,CAACvB,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqBK,KAAK,CAACc,KAAD,EAAQ,CAAC,IAAT,CADqB;IAE/C,aAAaA,KAFkC;IAG/CF,WAAW,EAAEA,WAHkC;IAI/CI,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQI,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,oBACE,oBAAC,KAAD,eACMnB,eAAe,CAACe,wBAAD,CADrB;IAEE,KAAK,EAAEK,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBF,KAAlB,EAAyBJ,wBAAwB,CAACI,KAAlD,EAAyDjB,KAAK,CAACiB,KAA/D,CAFT;IAGE,SAAS,EAAE1B,EAAE,CAACyB,SAAD,EAAYH,wBAAwB,CAACG,SAArC,EAAgDhB,KAAK,CAACgB,SAAtD,CAAF,IAAsEI;EAHnF,GADF;AAOD;;AAEDrB,IAAI,CAACsB,WAAL,GAAmB,MAAnB;AAEA,eAAe7B,mBAAmB,CAACO,IAAD,CAAlC"}
+{"version":3,"file":"Icon.js","names":["React","cn","createBaseComponent","sstyled","useBox","resolveColor","shade","keyboardFocusEnhance","propsForElement","Icon","props","ref","tag","width","height","viewBox","SIcon","other","interactive","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","className","style","onKeyDown","event","code","onClick","Object","assign","undefined","displayName"],"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';\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      ...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;\n    }\n\n    if (event.code === 'Enter' && interactive) {\n      props.onClick && props.onClick();\n    }\n  }\n\n  return (\n    <SIcon\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    />\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;;;;;;;;;;;;;;;;;;;AAIA,SAASC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;EACxB,cAAuBP,MAAM;IAEzBQ,GAAG,EAAE,KAFoB;IAGzB,gBAAgB,MAHS;IAIzBC,KAAK,EAAE,EAJkB;IAKzBC,MAAM,EAAE,EALiB;IAMzBC,OAAO,EAAE;EANgB,GAOtBL,KAPsB,GAS3BC,GAT2B,CAA7B;EAAA;EAAA,IAAOK,KAAP;EAAA,IAAcC,KAAd;;EAYA,IAAQC,WAAR,GAA2CR,KAA3C,CAAQQ,WAAR;EAAA,IAA4BC,UAA5B,GAA2CT,KAA3C,CAAqBU,KAArB;EACA,IAAMA,KAAK,GAAGf,YAAY,CAACc,UAAD,CAA1B;;EACA,4BAAyDZ,oBAAoB;IAC3Ec,QAAQ,EAAE,CAACH;EADgE,GAExED,KAFwE,EAA7E;EAAA,IAAQK,eAAR,yBAAQA,eAAR;EAAA,IAA4BC,wBAA5B;;EAIA,IAAMC,OAAO,GAAGrB,OAAO,CAACsB,MAAD,CAAvB;;EACA,kBAA6BD,OAAO,CAACvB,EAAR,CAAW,OAAX,EAAoB;IAC/C,qBAAqBK,KAAK,CAACc,KAAD,EAAQ,CAAC,IAAT,CADqB;IAE/C,aAAaA,KAFkC;IAG/CF,WAAW,EAAEA,WAHkC;IAI/CI,eAAe,EAAEA;EAJ8B,CAApB,CAA7B;EAAA,IAAQI,SAAR,eAAQA,SAAR;EAAA,IAAmBC,KAAnB,eAAmBA,KAAnB;;EAOA,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;IACxB,IAAInB,KAAK,CAACkB,SAAV,EAAqB;MACnB;IACD;;IAED,IAAIC,KAAK,CAACC,IAAN,KAAe,OAAf,IAA0BZ,WAA9B,EAA2C;MACzCR,KAAK,CAACqB,OAAN,IAAiBrB,KAAK,CAACqB,OAAN,EAAjB;IACD;EACF;;EAED,oBACE,oBAAC,KAAD,eACMvB,eAAe,CAACe,wBAAD,CADrB;IAEE,KAAK,EAAES,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBN,KAAlB,EAAyBJ,wBAAwB,CAACI,KAAlD,EAAyDjB,KAAK,CAACiB,KAA/D,CAFT;IAGE,SAAS,EAAE1B,EAAE,CAACyB,SAAD,EAAYH,wBAAwB,CAACG,SAArC,EAAgDhB,KAAK,CAACgB,SAAtD,CAAF,IAAsEQ,SAHnF;IAIE,SAAS,EAAEN;EAJb,GADF;AAQD;;AAEDnB,IAAI,CAAC0B,WAAL,GAAmB,MAAnB;AAEA,eAAejC,mBAAmB,CAACO,IAAD,CAAlC"}

package/package.json

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