@semcore/icon 2.19.3 → 2.21.0

package/{UserShared → UserSharedFirst}/l/index.js

@@ -19,7 +19,7 @@ var _icon = _interopRequireDefault(require("@semcore/icon"));
 
 var _excluded = ["width", "height", "viewBox"];
 
-function UserShared(_ref, ref) {
+function UserSharedFirst(_ref, ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? '24' : _ref$width,
       _ref$height = _ref.height,
@@ -29,7 +29,7 @@ function UserShared(_ref, ref) {
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
     ref: ref,
-    "data-name": "UserShared",
+    "data-name": "UserSharedFirst",
     "data-group": "l",
     width: width,
     height: height,
@@ -40,13 +40,13 @@ function UserShared(_ref, ref) {
     d: "M4 8a5 5 0 1 1 10 0A5 5 0 0 1 4 8Zm5-3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M1 19.5A4.5 4.5 0 0 1 5.5 15h7a4.5 4.5 0 0 1 4.5 4.5v.5h-2v-.5a2.5 2.5 0 0 0-2.5-2.5h-7A2.5 2.5 0 0 0 3 19.5v.5H1v-.5Zm18.293-2.793a1 1 0 0 0 1.414-1.414L18.414 13H23a1 1 0 1 0 0-2h-4.586l2.293-2.293a1 1 0 0 0-1.414-1.414l-4 4a1 1 0 0 0 0 1.414l4 4Z",
+    d: "M1 19.5A4.5 4.5 0 0 1 5.5 15h7a4.5 4.5 0 0 1 4.5 4.5v.5h-2v-.5a2.5 2.5 0 0 0-2.5-2.5h-7A2.5 2.5 0 0 0 3 19.5v.5H1v-.5ZM16 12a1 1 0 0 1 1-1h2V9a1 1 0 1 1 2 0v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 0 1-1-1Z",
     shapeRendering: "geometricPrecision"
   }));
 }
 
-UserShared.displayName = 'UserShared';
+UserSharedFirst.displayName = 'UserSharedFirst';
 
-var _default = (0, _core.createBaseComponent)(UserShared);
+var _default = (0, _core.createBaseComponent)(UserSharedFirst);
 
 exports["default"] = _default;

package/UserSharedFirst/m/index.d.ts

@@ -0,0 +1,7 @@
+
+        import React from 'react';
+        import { Merge } from '@semcore/core';
+        import { IIconProps } from '@semcore/icon';
+        declare const _default: import("@semcore/core").ComponentType<Merge<IIconProps, React.SVGAttributes<SVGElement>>, {}, {}>;
+        export default _default;
+      

package/{UserGroupNo → UserSharedFirst}/m/index.js

@@ -19,7 +19,7 @@ var _icon = _interopRequireDefault(require("@semcore/icon"));
 
 var _excluded = ["width", "height", "viewBox"];
 
-function UserGroupNo(_ref, ref) {
+function UserSharedFirst(_ref, ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? '16' : _ref$width,
       _ref$height = _ref.height,
@@ -29,22 +29,24 @@ function UserGroupNo(_ref, ref) {
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_icon["default"], (0, _extends2["default"])({
     ref: ref,
-    "data-name": "UserGroupNo",
+    "data-name": "UserSharedFirst",
     "data-group": "m",
     width: width,
     height: height,
     viewBox: viewBox
   }, props), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "m15.707 1.707-.389.389A3 3 0 0 1 13 7c0-.756-.168-1.474-.469-2.116a1 1 0 0 0 1.352-1.353l-2.931 2.931a3 3 0 0 1-3.49 3.49L6.414 11H10a3 3 0 0 1 3 3v1h-2v-1a1 1 0 0 0-1-1H4.414l-1.707 1.707-1 1a1 1 0 0 1-1.414-1.414l1-1 13-13a1 1 0 1 1 1.414 1.414ZM3 5c.17 0 .329-.042.469-.116A4.974 4.974 0 0 0 3 7a3 3 0 1 1 2.647-4.413C5 2.933 4.437 3.417 4 4a1 1 0 1 0-1 1Zm2 2 3-3a3 3 0 0 0-3 3ZM3.1 8c.049.24.115.476.197.703L0 12v-1a3 3 0 0 1 3-3h.1Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM4 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 10h1a1 1 0 0 1 1 1v1h2v-1a3 3 0 0 0-3-3h-.1a4.977 4.977 0 0 1-.9 2Z",
+    d: "M3 10a3 3 0 0 0-3 3v1h2v-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2v-1a3 3 0 0 0-3-3H3ZM13 5a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0V9h-1a1 1 0 1 1 0-2h1V6a1 1 0 0 1 1-1Z",
     shapeRendering: "geometricPrecision"
   }));
 }
 
-UserGroupNo.displayName = 'UserGroupNo';
+UserSharedFirst.displayName = 'UserSharedFirst';
 
-var _default = (0, _core.createBaseComponent)(UserGroupNo);
+var _default = (0, _core.createBaseComponent)(UserSharedFirst);
 
 exports["default"] = _default;

package/color/MicrosoftOffice/l/index.js

@@ -54,7 +54,7 @@ function MicrosoftOffice(_ref, ref) {
     d: "M15.27 18.74H7.72a1.27 1.27 0 0 0-1.21.95 1.28 1.28 0 0 0 .58 1.43l4.5 2.56a2.45 2.45 0 0 0 1.9.22 2.46 2.46 0 0 0 1.78-2.38v-2.78Z",
     fill: "url(#e)",
     shapeRendering: "geometricPrecision"
-  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "a",
     x1: "17.73",
     y1: "-1.26",
@@ -75,7 +75,7 @@ function MicrosoftOffice(_ref, ref) {
   }), /*#__PURE__*/_react["default"].createElement("stop", {
     offset: ".5",
     stopColor: "#D83B01"
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "b",
     x1: "13.5",
     y1: "-.43",
@@ -97,9 +97,9 @@ function MicrosoftOffice(_ref, ref) {
     offset: ".94",
     stopColor: "#B95799"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
+    offset: "1",
     stopColor: "#B85BA2"
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "c",
     x1: "7.16",
     y1: "21.37",
@@ -111,7 +111,7 @@ function MicrosoftOffice(_ref, ref) {
   }), /*#__PURE__*/_react["default"].createElement("stop", {
     offset: ".6",
     stopColor: "#A4070A"
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "d",
     x1: "13.75",
     y1: "-.79",
@@ -121,9 +121,9 @@ function MicrosoftOffice(_ref, ref) {
   }, /*#__PURE__*/_react["default"].createElement("stop", {
     stopOpacity: ".4"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
-    stopOpacity: 0
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+    offset: "1",
+    stopOpacity: "0"
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "e",
     x1: "18.17",
     y1: "21.74",
@@ -133,8 +133,8 @@ function MicrosoftOffice(_ref, ref) {
   }, /*#__PURE__*/_react["default"].createElement("stop", {
     stopOpacity: ".4"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
-    stopOpacity: 0
+    offset: "1",
+    stopOpacity: "0"
   }))));
 }
 

package/color/MicrosoftOffice/m/index.js

@@ -54,7 +54,7 @@ function MicrosoftOffice(_ref, ref) {
     d: "M10.4 12.5H5.23a.89.89 0 0 0-.53.17.85.85 0 0 0-.3.46.83.83 0 0 0 .03.54.86.86 0 0 0 .37.41l3.08 1.7a1.72 1.72 0 0 0 2.18-.44 1.62 1.62 0 0 0 .33-1V12.5Z",
     fill: "url(#e)",
     shapeRendering: "geometricPrecision"
-  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "a",
     x1: "12.07",
     y1: "-.84",
@@ -75,7 +75,7 @@ function MicrosoftOffice(_ref, ref) {
   }), /*#__PURE__*/_react["default"].createElement("stop", {
     offset: ".5",
     stopColor: "#D83B01"
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "b",
     x1: "9.18",
     y1: "-.29",
@@ -97,9 +97,9 @@ function MicrosoftOffice(_ref, ref) {
     offset: ".94",
     stopColor: "#B95799"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
+    offset: "1",
     stopColor: "#B85BA2"
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "c",
     x1: "4.84",
     y1: "14.25",
@@ -111,7 +111,7 @@ function MicrosoftOffice(_ref, ref) {
   }), /*#__PURE__*/_react["default"].createElement("stop", {
     offset: ".6",
     stopColor: "#A4070A"
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "d",
     x1: "9.36",
     y1: "-.53",
@@ -121,9 +121,9 @@ function MicrosoftOffice(_ref, ref) {
   }, /*#__PURE__*/_react["default"].createElement("stop", {
     stopOpacity: ".4"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
-    stopOpacity: 0
-  })), /*#__PURE__*/_react["default"].createElement("linearGradient", {
+    offset: "1",
+    stopOpacity: "0"
+  })), /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "e",
     x1: "12.38",
     y1: "14.49",
@@ -133,8 +133,8 @@ function MicrosoftOffice(_ref, ref) {
   }, /*#__PURE__*/_react["default"].createElement("stop", {
     stopOpacity: ".4"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
-    stopOpacity: 0
+    offset: "1",
+    stopOpacity: "0"
   }))));
 }
 

package/color/MicrosoftOutlook/l/index.js

@@ -39,11 +39,11 @@ function MicrosoftOutlook(_ref, ref) {
     fill: "#0A2767",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
-    x: 7,
-    y: 1,
-    width: 15,
-    height: 16,
-    rx: 1,
+    x: "7",
+    y: "1",
+    width: "15",
+    height: "16",
+    rx: "1",
     fill: "#0364B8"
   }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M17 4h-5v5h5v5h5V9h-5V4Z",

package/color/MicrosoftOutlook/m/index.js

@@ -39,10 +39,10 @@ function MicrosoftOutlook(_ref, ref) {
     fill: "#0A2767",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
-    x: 4,
-    width: 11,
-    height: 11,
-    rx: 1,
+    x: "4",
+    width: "11",
+    height: "11",
+    rx: "1",
     fill: "#0364B8"
   }), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M11.33 2H7.67v3.77h3.66v3.76H15V5.77h-3.67V2Z",

package/lib/MathMinus/s/index.js

@@ -41,10 +41,10 @@ function MathMinus(_ref, ref) {
     viewBox: viewBox
   }, props), /*#__PURE__*/_react["default"].createElement("rect", {
     id: "s-a",
-    width: 12,
-    height: 2,
-    x: 2,
-    y: 7
+    width: "12",
+    height: "2",
+    x: "2",
+    y: "7"
   }));
 }
 

package/lib/MathMinus/xs/index.js

@@ -40,10 +40,10 @@ function MathMinus(_ref, ref) {
     height: height,
     viewBox: viewBox
   }, props), /*#__PURE__*/_react["default"].createElement("rect", {
-    width: 10,
-    height: 2,
-    x: 1,
-    y: 5
+    width: "10",
+    height: "2",
+    x: "1",
+    y: "5"
   }));
 }
 

package/lib/cjs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Icon.js"],"names":["Icon","props","ref","tag","width","height","viewBox","SIcon","other","interactive","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","cn","className","style","Object","assign","undefined","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIA;;AACA,SAASA,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;AACxB,gBAAuB;AAEnBC,IAAAA,GAAG,EAAE,KAFc;AAGnB,oBAAgB,MAHG;AAInBC,IAAAA,KAAK,EAAE,EAJY;AAKnBC,IAAAA,MAAM,EAAE,EALW;AAMnBC,IAAAA,OAAO,EAAE;AANU,KAOhBL,KAPgB,GASrBC,GATqB,CAAvB;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,KAAd;;AAYA,MAAQC,WAAR,GAA2CR,KAA3C,CAAQQ,WAAR;AAAA,MAA4BC,UAA5B,GAA2CT,KAA3C,CAAqBU,KAArB;AACA,MAAMA,KAAK,GAAG,uBAAaD,UAAb,CAAd;;AACA,8BAAyD;AACvDE,IAAAA,QAAQ,EAAE,CAACH;AAD4C,KAEpDD,KAFoD,EAAzD;AAAA,MAAQK,eAAR,yBAAQA,eAAR;AAAA,MAA4BC,wBAA5B;;AAIA,MAAMC,OAAO,GAAG,mBAAQC,MAAR,CAAhB;;AACA,oBAA6BD,OAAO,CAACE,EAAR,CAAW,OAAX,EAAoB;AAC/C,yBAAqB,kBAAMN,KAAN,EAAa,CAAC,IAAd,CAD0B;AAE/C,iBAAaA,KAFkC;AAG/CF,IAAAA,WAAW,EAAEA,WAHkC;AAI/CI,IAAAA,eAAe,EAAEA;AAJ8B,GAApB,CAA7B;AAAA,MAAQK,SAAR,eAAQA,SAAR;AAAA,MAAmBC,KAAnB,eAAmBA,KAAnB;;AAOA,sBACE,gCAAC,KAAD,gCACM,iCAAgBL,wBAAhB,CADN;AAEE,IAAA,KAAK,EAAEM,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBF,KAAlB,EAAyBL,wBAAwB,CAACK,KAAlD,EAAyDlB,KAAK,CAACkB,KAA/D,CAFT;AAGE,IAAA,SAAS,EAAE,4BAAGD,SAAH,EAAcJ,wBAAwB,CAACI,SAAvC,EAAkDjB,KAAK,CAACiB,SAAxD,KAAsEI;AAHnF,KADF;AAOD;;AAEDtB,IAAI,CAACuB,WAAL,GAAmB,MAAnB;;eAEe,+BAAoBvB,IAApB,C","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\n// TODO: сделать useIcon?\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"],"file":"Icon.js"}
+{"version":3,"sources":["../../src/Icon.jsx"],"names":["Icon","props","ref","tag","width","height","viewBox","SIcon","other","interactive","colorProps","color","disabled","keyboardFocused","propsWithKeyboardEnhance","sstyles","styles","cn","className","style","Object","assign","undefined","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;;AAFA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIA;;AACA,SAASA,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;AACxB,gBAAuB;AAEnBC,IAAAA,GAAG,EAAE,KAFc;AAGnB,oBAAgB,MAHG;AAInBC,IAAAA,KAAK,EAAE,EAJY;AAKnBC,IAAAA,MAAM,EAAE,EALW;AAMnBC,IAAAA,OAAO,EAAE;AANU,KAOhBL,KAPgB,GASrBC,GATqB,CAAvB;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,KAAd;;AAYA,MAAQC,WAAR,GAA2CR,KAA3C,CAAQQ,WAAR;AAAA,MAA4BC,UAA5B,GAA2CT,KAA3C,CAAqBU,KAArB;AACA,MAAMA,KAAK,GAAG,uBAAaD,UAAb,CAAd;;AACA,8BAAyD;AACvDE,IAAAA,QAAQ,EAAE,CAACH;AAD4C,KAEpDD,KAFoD,EAAzD;AAAA,MAAQK,eAAR,yBAAQA,eAAR;AAAA,MAA4BC,wBAA5B;;AAIA,MAAMC,OAAO,GAAG,mBAAQC,MAAR,CAAhB;;AACA,oBAA6BD,OAAO,CAACE,EAAR,CAAW,OAAX,EAAoB;AAC/C,yBAAqB,kBAAMN,KAAN,EAAa,CAAC,IAAd,CAD0B;AAE/C,iBAAaA,KAFkC;AAG/CF,IAAAA,WAAW,EAAEA,WAHkC;AAI/CI,IAAAA,eAAe,EAAEA;AAJ8B,GAApB,CAA7B;AAAA,MAAQK,SAAR,eAAQA,SAAR;AAAA,MAAmBC,KAAnB,eAAmBA,KAAnB;;AAOA,sBACE,gCAAC,KAAD,gCACM,iCAAgBL,wBAAhB,CADN;AAEE,IAAA,KAAK,EAAEM,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBF,KAAlB,EAAyBL,wBAAwB,CAACK,KAAlD,EAAyDlB,KAAK,CAACkB,KAA/D,CAFT;AAGE,IAAA,SAAS,EAAE,4BAAGD,SAAH,EAAcJ,wBAAwB,CAACI,SAAvC,EAAkDjB,KAAK,CAACiB,SAAxD,KAAsEI;AAHnF,KADF;AAOD;;AAEDtB,IAAI,CAACuB,WAAL,GAAmB,MAAnB;;eAEe,+BAAoBvB,IAApB,C","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\n// TODO: сделать useIcon?\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"],"file":"Icon.js"}

package/lib/cjs/index.d.ts

@@ -0,0 +1,17 @@
+import { IBoxProps } from '@semcore/flex-box';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { ReturnEl } from '@semcore/core';
+
+export interface IIconProps extends IBoxProps, IKeyboardFocusProps {
+  width?: string | number;
+  height?: string | number;
+  viewBox?: string;
+  /** Make an icon interactive */
+  interactive?: boolean;
+  /** Icon color */
+  color?: string;
+}
+
+declare const Icon: <T>(props: IIconProps & T) => ReturnEl;
+
+export default Icon;

package/lib/color/GitHub/s/index.js

@@ -47,7 +47,7 @@ function GitHub(_ref, ref) {
     d: "M7.74 0A7.74 7.74 0 005.3 15.1c.38.06.52-.18.52-.38V13.4c-2.16.47-2.61-1.04-2.61-1.04a2.05 2.05 0 00-.86-1.13c-.7-.48.05-.47.05-.47a1.63 1.63 0 011.19.8 1.65 1.65 0 002.25.64c.04-.4.21-.76.5-1.03-1.73-.2-3.53-.86-3.53-3.83a3 3 0 01.8-2.08c-.24-.67-.22-1.4.07-2.05 0 0 .65-.2 2.13.8a7.33 7.33 0 013.88 0c1.47-1 2.12-.8 2.12-.8.29.65.32 1.38.08 2.05.52.57.8 1.3.8 2.08 0 2.97-1.81 3.63-3.54 3.82a1.85 1.85 0 01.53 1.43l-.01 2.13c0 .2.14.45.53.37A7.74 7.74 0 007.74 0z",
     fill: "#231E1B",
     shapeRendering: "geometricPrecision"
-  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clippath", {
     id: "clip0"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     fill: "#fff",

package/lib/color/GitHub/xs/index.js

@@ -47,7 +47,7 @@ function GitHub(_ref, ref) {
     d: "M5.75 0a5.75 5.75 0 00-1.82 11.2c.29.05.4-.13.4-.28l-.02-.98c-1.6.35-1.93-.77-1.93-.77-.1-.34-.33-.64-.64-.84-.52-.35.04-.35.04-.35a1.2 1.2 0 01.88.6 1.22 1.22 0 001.67.47c.03-.29.16-.56.37-.76-1.28-.15-2.62-.64-2.62-2.84 0-.57.2-1.13.6-1.55-.18-.5-.16-1.04.05-1.52 0 0 .48-.15 1.58.6a5.44 5.44 0 012.88 0c1.1-.75 1.58-.6 1.58-.6.2.48.23 1.03.05 1.52.4.42.6.98.6 1.55 0 2.2-1.35 2.69-2.63 2.83a1.37 1.37 0 01.39 1.07v1.57c0 .16.1.33.39.28A5.75 5.75 0 005.75 0z",
     fill: "#231E1B",
     shapeRendering: "geometricPrecision"
-  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clippath", {
     id: "clip0"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     fill: "#fff",

package/lib/color/WhatsApp/m/index.js

@@ -49,7 +49,7 @@ function WhatsApp(_ref, ref) {
     d: "M16.7 15.4c.3-.3.5-.6.6-1 .1-.4 0-.7-.4-.9l-1.9-1c-.3-.2-.7-.1-1 .1l-.8.9c-.3.3-1.6-.3-2.7-1.5C9.3 10.8 8.7 9.6 9 9.3l.8-.8c.3-.3.3-.6.1-1l-1-1.9c-.2-.4-.5-.5-.9-.4-.4.1-.7.3-1 .6-1.5 1.5-.6 4.9 2.1 7.6 2.7 2.6 6.1 3.6 7.6 2z",
     fill: "#fff",
     shapeRendering: "geometricPrecision"
-  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clippath", {
     id: "clip0"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     fill: "#fff",

package/lib/color/WhatsApp/s/index.js

@@ -49,7 +49,7 @@ function WhatsApp(_ref, ref) {
     d: "M12.02 12c.2-.2.4-.5.5-.8.1-.3 0-.5-.3-.7-.3-.2-1.49-.8-1.49-.8a.6.6 0 00-.7.1l-.79.7c-.3.3-1.19-.3-2.08-1.2-.9-.9-1.4-1.9-1.2-2.1l.7-.7c.2-.2.2-.5.1-.7 0 0-.6-1.2-.8-1.5-.2-.3-.4-.4-.7-.3-.3.1-.59.2-.79.5-1.19 1.2-.5 3.8 1.6 5.9 2.08 2 4.76 2.8 5.95 1.6z",
     fill: "#fff",
     shapeRendering: "geometricPrecision"
-  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clippath", {
     id: "clip0"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     fill: "#fff",

package/lib/color/WhatsApp/xs/index.js

@@ -49,7 +49,7 @@ function WhatsApp(_ref, ref) {
     d: "M8.8 8.9c.1-.1.3-.3.3-.5s0-.4-.2-.5c-.2-.1-1-.6-1-.6-.2-.1-.4-.1-.5.1l-.5.5c-.2.2-.8-.2-1.5-.8-.6-.6-1-1.3-.8-1.5l.5-.5c.1-.1.2-.3.1-.5 0 0-.4-.8-.6-1-.1-.2-.3-.3-.5-.2-.2.1-.4.1-.5.3-.8.8-.3 2.7 1.1 4.1C6.2 9.2 8 9.7 8.8 8.9z",
     fill: "#fff",
     shapeRendering: "geometricPrecision"
-  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
+  })), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clippath", {
     id: "clip0"
   }, /*#__PURE__*/_react["default"].createElement("path", {
     fill: "#fff",

package/lib/es6/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/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"],"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;;;;;;;;;;;;;;;;;IAIA;;AACA,SAASC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;AACxB,gBAAuBP,MAAM;AAEzBQ,IAAAA,GAAG,EAAE,KAFoB;AAGzB,oBAAgB,MAHS;AAIzBC,IAAAA,KAAK,EAAE,EAJkB;AAKzBC,IAAAA,MAAM,EAAE,EALiB;AAMzBC,IAAAA,OAAO,EAAE;AANgB,KAOtBL,KAPsB,GAS3BC,GAT2B,CAA7B;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,KAAd;;AAYA,MAAQC,WAAR,GAA2CR,KAA3C,CAAQQ,WAAR;AAAA,MAA4BC,UAA5B,GAA2CT,KAA3C,CAAqBU,KAArB;AACA,MAAMA,KAAK,GAAGf,YAAY,CAACc,UAAD,CAA1B;;AACA,8BAAyDZ,oBAAoB;AAC3Ec,IAAAA,QAAQ,EAAE,CAACH;AADgE,KAExED,KAFwE,EAA7E;AAAA,MAAQK,eAAR,yBAAQA,eAAR;AAAA,MAA4BC,wBAA5B;;AAIA,MAAMC,OAAO,GAAGrB,OAAO,CAACsB,MAAD,CAAvB;;AACA,oBAA6BD,OAAO,CAACvB,EAAR,CAAW,OAAX,EAAoB;AAC/C,yBAAqBK,KAAK,CAACc,KAAD,EAAQ,CAAC,IAAT,CADqB;AAE/C,iBAAaA,KAFkC;AAG/CF,IAAAA,WAAW,EAAEA,WAHkC;AAI/CI,IAAAA,eAAe,EAAEA;AAJ8B,GAApB,CAA7B;AAAA,MAAQI,SAAR,eAAQA,SAAR;AAAA,MAAmBC,KAAnB,eAAmBA,KAAnB;;AAOA,sBACE,oBAAC,KAAD,eACMnB,eAAe,CAACe,wBAAD,CADrB;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBF,KAAlB,EAAyBJ,wBAAwB,CAACI,KAAlD,EAAyDjB,KAAK,CAACiB,KAA/D,CAFT;AAGE,IAAA,SAAS,EAAE1B,EAAE,CAACyB,SAAD,EAAYH,wBAAwB,CAACG,SAArC,EAAgDhB,KAAK,CAACgB,SAAtD,CAAF,IAAsEI;AAHnF,KADF;AAOD;;AAEDrB,IAAI,CAACsB,WAAL,GAAmB,MAAnB;AAEA,eAAe7B,mBAAmB,CAACO,IAAD,CAAlC","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\n// TODO: сделать useIcon?\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"],"file":"Icon.js"}
+{"version":3,"sources":["../../src/Icon.jsx"],"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"],"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;;;;;;;;;;;;;;;;;IAIA;;AACA,SAASC,IAAT,CAAcC,KAAd,EAAqBC,GAArB,EAA0B;AACxB,gBAAuBP,MAAM;AAEzBQ,IAAAA,GAAG,EAAE,KAFoB;AAGzB,oBAAgB,MAHS;AAIzBC,IAAAA,KAAK,EAAE,EAJkB;AAKzBC,IAAAA,MAAM,EAAE,EALiB;AAMzBC,IAAAA,OAAO,EAAE;AANgB,KAOtBL,KAPsB,GAS3BC,GAT2B,CAA7B;AAAA;AAAA,MAAOK,KAAP;AAAA,MAAcC,KAAd;;AAYA,MAAQC,WAAR,GAA2CR,KAA3C,CAAQQ,WAAR;AAAA,MAA4BC,UAA5B,GAA2CT,KAA3C,CAAqBU,KAArB;AACA,MAAMA,KAAK,GAAGf,YAAY,CAACc,UAAD,CAA1B;;AACA,8BAAyDZ,oBAAoB;AAC3Ec,IAAAA,QAAQ,EAAE,CAACH;AADgE,KAExED,KAFwE,EAA7E;AAAA,MAAQK,eAAR,yBAAQA,eAAR;AAAA,MAA4BC,wBAA5B;;AAIA,MAAMC,OAAO,GAAGrB,OAAO,CAACsB,MAAD,CAAvB;;AACA,oBAA6BD,OAAO,CAACvB,EAAR,CAAW,OAAX,EAAoB;AAC/C,yBAAqBK,KAAK,CAACc,KAAD,EAAQ,CAAC,IAAT,CADqB;AAE/C,iBAAaA,KAFkC;AAG/CF,IAAAA,WAAW,EAAEA,WAHkC;AAI/CI,IAAAA,eAAe,EAAEA;AAJ8B,GAApB,CAA7B;AAAA,MAAQI,SAAR,eAAQA,SAAR;AAAA,MAAmBC,KAAnB,eAAmBA,KAAnB;;AAOA,sBACE,oBAAC,KAAD,eACMnB,eAAe,CAACe,wBAAD,CADrB;AAEE,IAAA,KAAK,EAAEK,MAAM,CAACC,MAAP,CAAc,EAAd,EAAkBF,KAAlB,EAAyBJ,wBAAwB,CAACI,KAAlD,EAAyDjB,KAAK,CAACiB,KAA/D,CAFT;AAGE,IAAA,SAAS,EAAE1B,EAAE,CAACyB,SAAD,EAAYH,wBAAwB,CAACG,SAArC,EAAgDhB,KAAK,CAACgB,SAAtD,CAAF,IAAsEI;AAHnF,KADF;AAOD;;AAEDrB,IAAI,CAACsB,WAAL,GAAmB,MAAnB;AAEA,eAAe7B,mBAAmB,CAACO,IAAD,CAAlC","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\n// TODO: сделать useIcon?\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"],"file":"Icon.js"}

package/lib/es6/index.d.ts

@@ -0,0 +1,17 @@
+import { IBoxProps } from '@semcore/flex-box';
+import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { ReturnEl } from '@semcore/core';
+
+export interface IIconProps extends IBoxProps, IKeyboardFocusProps {
+  width?: string | number;
+  height?: string | number;
+  viewBox?: string;
+  /** Make an icon interactive */
+  interactive?: boolean;
+  /** Icon color */
+  color?: string;
+}
+
+declare const Icon: <T>(props: IIconProps & T) => ReturnEl;
+
+export default Icon;

package/lib/pay/Visa/index.js

@@ -39,7 +39,7 @@ function Visa(_ref, ref) {
     width: width,
     height: height,
     viewBox: viewBox
-  }, props), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("linearGradient", {
+  }, props), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("lineargradient", {
     id: "a",
     x1: "0%",
     y1: "50%",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/icon",
   "description": "SEMRush Icon Component",
-  "version": "2.19.3",
+  "version": "2.21.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "@semcore/utils": "^3.15",
-    "@semcore/flex-box": "^4"
+    "@semcore/flex-box": "^4",
+    "classnames": "2.2.6"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
@@ -29,5 +30,8 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/icon"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
   }
 }

package/pay/CreditCard/l/index.js

@@ -41,39 +41,39 @@ function CreditCard(_ref, ref) {
     fill: "#8A8E9B",
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
-    x: 4,
-    y: 6,
-    width: 12,
-    height: 3,
+    x: "4",
+    y: "6",
+    width: "12",
+    height: "3",
     rx: "1.5",
     fill: "#F4F5F9"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
-    x: 4,
-    y: 16,
-    width: 4,
-    height: 2,
-    rx: 1,
+    x: "4",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
     fill: "#E0E1E9"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
-    x: 10,
-    y: 16,
-    width: 4,
-    height: 2,
-    rx: 1,
+    x: "10",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
     fill: "#E0E1E9"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
-    x: 16,
-    y: 16,
-    width: 4,
-    height: 2,
-    rx: 1,
+    x: "16",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
     fill: "#E0E1E9"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
-    x: 22,
-    y: 16,
-    width: 4,
-    height: 2,
-    rx: 1,
+    x: "22",
+    y: "16",
+    width: "4",
+    height: "2",
+    rx: "1",
     fill: "#E0E1E9"
   }));
 }

package/pay/CreditCard/m/index.js

@@ -42,10 +42,10 @@ function CreditCard(_ref, ref) {
     shapeRendering: "geometricPrecision"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
     x: "2.63",
-    y: 4,
+    y: "4",
     width: "7.88",
-    height: 2,
-    rx: 1,
+    height: "2",
+    rx: "1",
     fill: "#F4F5F9"
   }), /*#__PURE__*/_react["default"].createElement("rect", {
     x: "2.63",

package/pay/Discover/l/index.js

@@ -62,17 +62,17 @@ function Discover(_ref, ref) {
     d: "M9 24c5.5-1 20-5 23-8.5V22a2 2 0 0 1-2 2H9Z",
     fill: "#FE4F00",
     shapeRendering: "geometricPrecision"
-  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("radialGradient", {
+  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("radialgradient", {
     id: "a",
-    cx: 0,
-    cy: 0,
-    r: 1,
+    cx: "0",
+    cy: "0",
+    r: "1",
     gradientUnits: "userSpaceOnUse",
     gradientTransform: "matrix(-1.5 -3 3 -1.5 18.5 13)"
   }, /*#__PURE__*/_react["default"].createElement("stop", {
     stopColor: "#FF8400"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
+    offset: "1",
     stopColor: "#CC3F00"
   }))));
 }

package/pay/Discover/m/index.js

@@ -62,17 +62,17 @@ function Discover(_ref, ref) {
     d: "M5.9 16c3.62-.67 13.13-3.33 15.1-5.67v4.34c0 .73-.6 1.33-1.31 1.33H5.9Z",
     fill: "#FE4F00",
     shapeRendering: "geometricPrecision"
-  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("radialGradient", {
+  }), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("radialgradient", {
     id: "a",
-    cx: 0,
-    cy: 0,
-    r: 1,
+    cx: "0",
+    cy: "0",
+    r: "1",
     gradientUnits: "userSpaceOnUse",
     gradientTransform: "matrix(-.98438 -2 1.98103 -.97504 12.14 8.67)"
   }, /*#__PURE__*/_react["default"].createElement("stop", {
     stopColor: "#FF8400"
   }), /*#__PURE__*/_react["default"].createElement("stop", {
-    offset: 1,
+    offset: "1",
     stopColor: "#CC3F00"
   }))));
 }