@semcore/card 2.1.0 → 2.3.0

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.3.0] - 2022-01-18
+
+### Changed
+
+- Up version icons and use new icon.
+- Rewrite code from TS to JS 🧑‍💻
+
+## [2.2.2] - 2021-9-20
+
+### Fixed
+
+- Fixed padding
+
+## [2.2.1] - 2021-8-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [2.2.0] - 2021-04-26
+
+### Changed
+
+- Version of dependence `@semcore/core` has been changed to `1.11`.
+- Improved performance. Removed one component wrapper.
+- The style processing system has been changed.
+- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
+
 ## [2.1.0] - 2020-12-17
 
 ### Added
@@ -42,7 +70,7 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 ### Fixed
 
-- Исправлена проблема в установке произвольного className в `Description` и `Title`. Спасибо [Dmitry Shashkov](https://gitlab.semrush.net/ui-kit/intergalactic/merge_requests/295)
+- Исправлена проблема в установке произвольного className в `Description` и `Title`.
 
 ## [1.2.1] - 2020-03-06
 

package/lib/cjs/Card.js

@@ -21,53 +21,41 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = _interopRequireWildcard(require("@semcore/core"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = _interopRequireWildcard(require("@semcore/core"));
-
 var _flexBox = require("@semcore/flex-box");
 
 var _typography = require("@semcore/typography");
 
 var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
 
-var _xs = _interopRequireDefault(require("@semcore/icon/lib/Info/xs"));
+var _m = _interopRequireDefault(require("@semcore/icon/Info/m"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 /*__reshadow-styles__:"./style/card.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.sstyled.insert(
 /*__inner_css_start__*/
-".___SCard_679n2_gg_{border:1px solid #ccc;border-radius:2px}.___STitle_679n2_gg_{font-size:19px;font-weight:500}.___SIcon_679n2_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_679n2_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
+".___SCard_19clt_gg_{border:1px solid #ccc;border-radius:2px;padding:20px 24px 24px}.___STitle_19clt_gg_{font-size:19px;font-weight:500}.___SIcon_19clt_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_19clt_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
 /*__inner_css_end__*/
-, "1tjzg9r_gg_")
+, "3hx1s_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_679n2_gg_",
-  "__STitle": "___STitle_679n2_gg_",
-  "__SIcon": "___SIcon_679n2_gg_",
-  "__SDescription": "___SDescription_679n2_gg_"
-}),
-    style = (0, _extends2["default"])({}, _ref);
-
-if (false) {
-  /*__reshadow_css_start__*/
-  (0, _core.__css__)(
-  /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___STitle_679n2_gg_ {\n  font-size: 24.7px;\n}\n\n.___SDescription_679n2_gg_ {\n  font-size: 18.2px;\n}}"
-  /*__inner_css_end__*/
-  , "12w8vvi_gg_")
-  /*__reshadow_css_end__*/
-  ;
-}
-
-var styled_c8 = (0, _core.create)([]);
+  "__SCard": "___SCard_19clt_gg_",
+  "__STitle": "___STitle_19clt_gg_",
+  "__SIcon": "___SIcon_19clt_gg_",
+  "__SDescription": "___SDescription_19clt_gg_"
+});
 
 var Card = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Card, _Component);
@@ -82,12 +70,12 @@ var Card = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(Card, [{
     key: "render",
     value: function render() {
-      var SCard = this.Root;
+      var _ref = this ? this.asProps : arguments[0],
+          _ref4;
+
+      var SCard = _flexBox.Box;
       var styles = this.asProps.styles;
-      return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(SCard, (0, _core.map)("SCard", {
-        render: _flexBox.Box,
-        p: 6
-      }))));
+      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCard, _ref4.cn("SCard", _objectSpread({}, (0, _core.assignProps)({}, _ref))));
     }
   }]);
   return Card;
@@ -95,31 +83,29 @@ var Card = /*#__PURE__*/function (_Component) {
 
 (0, _defineProperty2["default"])(Card, "displayName", 'Card');
 (0, _defineProperty2["default"])(Card, "style", style);
-var styled_12c = (0, _core.create)([]);
 
 function Title(props) {
-  var STitle = props.Root,
-      styles = props.styles,
+  var _ref2 = this ? this.asProps : arguments[0],
+      _ref5;
+
+  var styles = props.styles,
       hint = props.hint;
-  var SIcon = _xs["default"];
-  return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(STitle, (0, _core.map)("STitle", {
-    render: _typography.Text
-  })), hint && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], (0, _core.map)("Tooltip", {
-    title: hint
-  }), /*#__PURE__*/_react["default"].createElement(SIcon, {
-    className: _core.styled.styles["__SIcon"]
-  })))));
+  var STitle = _typography.Text;
+  var SIcon = _m["default"];
+  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(STitle, _ref5.cn("STitle", _objectSpread({}, (0, _core.assignProps)({}, _ref2)))), hint && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], _ref5.cn("Tooltip", {
+    "title": hint
+  }), /*#__PURE__*/_react["default"].createElement(SIcon, _ref5.cn("SIcon", {}))));
 }
 
-var styled_190 = (0, _core.create)([]);
-
 function Description(props) {
-  var SDescription = props.Root,
-      styles = props.styles;
-  return (0, _core.styled)(((0, _core.set)([styled_190, styles]), /*#__PURE__*/_react["default"].createElement(SDescription, (0, _core.map)("SDescription", {
-    render: _typography.Text,
-    tag: "p"
-  }))));
+  var _ref3 = this ? this.asProps : arguments[0],
+      _ref6;
+
+  var styles = props.styles;
+  var SDescription = _typography.Text;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDescription, _ref6.cn("SDescription", _objectSpread({}, (0, _core.assignProps)({
+    "tag": "p"
+  }, _ref3))));
 }
 
 var _default = (0, _core["default"])(Card, {

package/lib/cjs/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card.tsx"],"names":["Card","SCard","Root","styles","asProps","Box","Component","style","Title","props","STitle","hint","SIcon","InfoXS","Text","Description","SDescription"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWMA,I;;;;;;;;;;;;6BAKK;AACP,UAAMC,KAAK,GAAG,KAAKC,IAAnB;AADO,UAECC,MAFD,GAEY,KAAKC,OAFjB,CAECD,MAFD;AAIP,aAAO,8CAAOA,MAAP,iBAAe,gCAAC,KAAD;AAAA,gBAAeE,YAAf;AAAA,WAAuB;AAAvB,SAAf,EAAP;AACD;;;EAVgBC,e;;iCAAbN,I,iBACiB,M;iCADjBA,I,WAGWO,K;;;AAUjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA,MACNC,MADM,GACmBD,KADnB,CACZP,IADY;AAAA,MACEC,MADF,GACmBM,KADnB,CACEN,MADF;AAAA,MACUQ,IADV,GACmBF,KADnB,CACUE,IADV;AAEpB,MAAMC,KAAK,GAAGC,cAAd;AACA,SAAO,+CAAOV,MAAP,iBACL,+EACE,gCAAC,MAAD;AAAA,YAAgBW;AAAhB,KADF,EAEGH,IAAI,iBACH,gCAAC,mBAAD;AAAA,WAAgBA;AAAhB,mBACE,gCAAC,KAAD;AAAA;AAAA,IADF,CAHJ,CADK,EAAP;AAUD;;;;AAED,SAASI,WAAT,CAAqBN,KAArB,EAA4B;AAAA,MACZO,YADY,GACaP,KADb,CAClBP,IADkB;AAAA,MACEC,MADF,GACaM,KADb,CACEN,MADF;AAE1B,SAAO,+CAAOA,MAAP,iBAAe,gCAAC,YAAD;AAAA,YAAsBW,gBAAtB;AAAA,SAAgC;AAAhC,KAAf,EAAP;AACD;;eAEc,sBAMbd,IANa,EAMP;AACNQ,EAAAA,KAAK,EAALA,KADM;AAENO,EAAAA,WAAW,EAAXA;AAFM,CANO,C","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, { Component, Merge, styled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { ITextProps, Text } from '@semcore/typography';\n// eslint-disable-next-line import/no-named-as-default\nimport Tooltip from '@semcore/tooltip';\nimport InfoXS from '@semcore/icon/lib/Info/xs';\n\nimport style from './style/card.shadow.css';\n\nexport interface ITitleProps extends ITextProps {\n  /**\n   * Tooltip text\n   */\n  hint?: React.ReactNode;\n}\n\nclass Card extends Component {\n  static displayName = 'Card';\n\n  static style = style;\n\n  render() {\n    const SCard = this.Root;\n    const { styles } = this.asProps;\n\n    return styled(styles)(<SCard render={Box} p={6} />);\n  }\n}\n\nfunction Title(props) {\n  const { Root: STitle, styles, hint } = props;\n  const SIcon = InfoXS;\n  return styled(styles)(\n    <>\n      <STitle render={Text} />\n      {hint && (\n        <Tooltip title={hint}>\n          <SIcon />\n        </Tooltip>\n      )}\n    </>,\n  );\n}\n\nfunction Description(props) {\n  const { Root: SDescription, styles } = props;\n  return styled(styles)(<SDescription render={Text} tag=\"p\" />);\n}\n\nexport default createComponent<\n  ComponentProps<typeof Box>,\n  {\n    Title: Merge<ITitleProps, HTMLAttributes<HTMLSpanElement>>;\n    Description: ComponentProps<typeof Text>;\n  }\n>(Card, {\n  Title,\n  Description,\n});\n"],"file":"Card.js"}
+{"version":3,"sources":["../../src/Card.js"],"names":["Card","SCard","Box","styles","asProps","Component","style","Title","props","hint","STitle","Text","SIcon","Info","Description","SDescription"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,I;;;;;;;;;;;;WAKJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,KAAK,GAG2BC,YAHtC;AADO,UAECC,MAFD,GAEY,KAAKC,OAFjB,CAECD,MAFD;AAIP,qBAAO,mBAAQA,MAAR,CAAP,eAAuB,gCAAC,KAAD,yEAAvB;AACD;;;EAVgBE,e;;iCAAbL,I,iBACiB,M;iCADjBA,I,WAGWM,K;;AAUjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AAAA,MACZL,MADY,GACKK,KADL,CACZL,MADY;AAAA,MACJM,IADI,GACKD,KADL,CACJC,IADI;AAEpB,MAAMC,MAAM,GAIQC,gBAJpB;AACA,MAAMC,KAAK,GAAGC,aAAd;AACA,iBAAO,mBAAQV,MAAR,CAAP,eACE,+EACE,gCAAC,MAAD,2EADF,EAEGM,IAAI,iBACH,gCAAC,mBAAD;AAAA,aAAgBA;AAAhB,mBACE,gCAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASK,WAAT,CAAqBN,KAArB,EAA4B;AAAA;AAAA;;AAAA,MAClBL,MADkB,GACPK,KADO,CAClBL,MADkB;AAE1B,MAAMY,YAAY,GAC2BJ,gBAD7C;AACA,iBAAO,mBAAQR,MAAR,CAAP,eAAuB,gCAAC,YAAD;AAAA,WAAgC;AAAhC,cAAvB;AACD;;eAEc,sBAAgBH,IAAhB,EAAsB;AACnCO,EAAAA,KAAK,EAALA,KADmC;AAEnCO,EAAAA,WAAW,EAAXA;AAFmC,CAAtB,C","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\nimport Tooltip from '@semcore/tooltip';\nimport Info from '@semcore/icon/Info/m';\n\nimport style from './style/card.shadow.css';\n\nclass Card extends Component {\n  static displayName = 'Card';\n\n  static style = style;\n\n  render() {\n    const SCard = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<SCard render={Box} />);\n  }\n}\n\nfunction Title(props) {\n  const { styles, hint } = props;\n  const STitle = Root;\n  const SIcon = Info;\n  return sstyled(styles)(\n    <>\n      <STitle render={Text} />\n      {hint && (\n        <Tooltip title={hint}>\n          <SIcon />\n        </Tooltip>\n      )}\n    </>,\n  );\n}\n\nfunction Description(props) {\n  const { styles } = props;\n  const SDescription = Root;\n  return sstyled(styles)(<SDescription render={Text} tag=\"p\" />);\n}\n\nexport default createComponent(Card, {\n  Title,\n  Description,\n});\n"],"file":"Card.js"}

package/lib/cjs/index.js

@@ -18,6 +18,7 @@ var _Card = _interopRequireWildcard(require("./Card"));
 Object.keys(_Card).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Card[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Card';\nexport * from './Card';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Card';\nexport * from './Card';\n"],"file":"index.js"}

package/lib/cjs/style/card.shadow.css

@@ -3,6 +3,7 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
+  padding: 20px 24px 24px;
 }
 
 STitle {

package/lib/es6/Card.js

@@ -4,49 +4,41 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps3 } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import createComponent, { Component, styled, css, __css__, set, create, map } from '@semcore/core';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
-import { Text } from '@semcore/typography'; // eslint-disable-next-line import/no-named-as-default
-
+import { Text } from '@semcore/typography';
 import Tooltip from '@semcore/tooltip';
-import InfoXS from '@semcore/icon/lib/Info/xs';
+import Info from '@semcore/icon/Info/m';
 
 /*__reshadow-styles__:"./style/card.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-__css__(
+_sstyled.insert(
 /*__inner_css_start__*/
-".___SCard_679n2_gg_{border:1px solid #ccc;border-radius:2px}.___STitle_679n2_gg_{font-size:19px;font-weight:500}.___SIcon_679n2_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_679n2_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
+".___SCard_19clt_gg_{border:1px solid #ccc;border-radius:2px;padding:20px 24px 24px}.___STitle_19clt_gg_{font-size:19px;font-weight:500}.___SIcon_19clt_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_19clt_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
 /*__inner_css_end__*/
-, "1tjzg9r_gg_")
+, "3hx1s_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_679n2_gg_",
-  "__STitle": "___STitle_679n2_gg_",
-  "__SIcon": "___SIcon_679n2_gg_",
-  "__SDescription": "___SDescription_679n2_gg_"
-}),
-    style = _extends({}, _ref);
-
-if (false) {
-  /*__reshadow_css_start__*/
-  __css__(
-  /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___STitle_679n2_gg_ {\n  font-size: 24.7px;\n}\n\n.___SDescription_679n2_gg_ {\n  font-size: 18.2px;\n}}"
-  /*__inner_css_end__*/
-  , "12w8vvi_gg_")
-  /*__reshadow_css_end__*/
-  ;
-}
-
-var styled_c8 = create([]);
+  "__SCard": "___SCard_19clt_gg_",
+  "__STitle": "___STitle_19clt_gg_",
+  "__SIcon": "___SIcon_19clt_gg_",
+  "__SDescription": "___SDescription_19clt_gg_"
+});
 
 var Card = /*#__PURE__*/function (_Component) {
   _inherits(Card, _Component);
@@ -62,12 +54,12 @@ var Card = /*#__PURE__*/function (_Component) {
   _createClass(Card, [{
     key: "render",
     value: function render() {
-      var SCard = this.Root;
+      var _ref = this ? this.asProps : arguments[0],
+          _ref4;
+
+      var SCard = Box;
       var styles = this.asProps.styles;
-      return styled((set([styled_c8, styles]), /*#__PURE__*/React.createElement(SCard, map("SCard", {
-        render: Box,
-        p: 6
-      }))));
+      return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SCard, _ref4.cn("SCard", _objectSpread({}, _assignProps({}, _ref))));
     }
   }]);
 
@@ -78,31 +70,28 @@ _defineProperty(Card, "displayName", 'Card');
 
 _defineProperty(Card, "style", style);
 
-var styled_12c = create([]);
-
 function Title(props) {
-  var STitle = props.Root,
-      styles = props.styles,
+  var _ref2 = this ? this.asProps : arguments[0],
+      _ref5;
+
+  var styles = props.styles,
       hint = props.hint;
-  var SIcon = InfoXS;
-  return styled((set([styled_12c, styles]), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STitle, map("STitle", {
-    render: Text
-  })), hint && /*#__PURE__*/React.createElement(Tooltip, map("Tooltip", {
-    title: hint
-  }), /*#__PURE__*/React.createElement(SIcon, {
-    className: styled.styles["__SIcon"]
-  })))));
+  var STitle = Text;
+  var SIcon = Info;
+  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STitle, _ref5.cn("STitle", _objectSpread({}, _assignProps2({}, _ref2)))), hint && /*#__PURE__*/React.createElement(Tooltip, _ref5.cn("Tooltip", {
+    "title": hint
+  }), /*#__PURE__*/React.createElement(SIcon, _ref5.cn("SIcon", {}))));
 }
 
-var styled_190 = create([]);
-
 function Description(props) {
-  var SDescription = props.Root,
-      styles = props.styles;
-  return styled((set([styled_190, styles]), /*#__PURE__*/React.createElement(SDescription, map("SDescription", {
-    render: Text,
-    tag: "p"
-  }))));
+  var _ref3 = this ? this.asProps : arguments[0],
+      _ref6;
+
+  var styles = props.styles;
+  var SDescription = Text;
+  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SDescription, _ref6.cn("SDescription", _objectSpread({}, _assignProps3({
+    "tag": "p"
+  }, _ref3))));
 }
 
 export default createComponent(Card, {

package/lib/es6/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card.tsx"],"names":["React","createComponent","Component","styled","Box","Text","Tooltip","InfoXS","Card","SCard","Root","styles","asProps","style","Title","props","STitle","hint","SIcon","Description","SDescription"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAsD,OAAtD;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAA4CC,MAA5C,wCAA0D,qBAA1D;AACA,SAASC,GAAT,QAAoB,yBAApB;AACA,SAAqBC,IAArB,QAAiC,2BAAjC,C,CACA;;AACA,OAAOC,OAAP,MAAoB,wBAApB;AACA,OAAOC,MAAP,MAAmB,iCAAnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWMC,I;;;;;;;;;;;;;6BAKK;AACP,UAAMC,KAAK,GAAG,KAAKC,IAAnB;AADO,UAECC,MAFD,GAEY,KAAKC,OAFjB,CAECD,MAFD;AAIP,aAAO,wBAAOA,MAAP,iBAAe,oBAAC,KAAD;AAAA,gBAAeP,GAAf;AAAA,WAAuB;AAAvB,SAAf,EAAP;AACD;;;;EAVgBF,S;;gBAAbM,I,iBACiB,M;;gBADjBA,I,WAGWK,K;;;;AAUjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA,MACNC,MADM,GACmBD,KADnB,CACZL,IADY;AAAA,MACEC,MADF,GACmBI,KADnB,CACEJ,MADF;AAAA,MACUM,IADV,GACmBF,KADnB,CACUE,IADV;AAEpB,MAAMC,KAAK,GAAGX,MAAd;AACA,SAAO,yBAAOI,MAAP,iBACL,uDACE,oBAAC,MAAD;AAAA,YAAgBN;AAAhB,KADF,EAEGY,IAAI,iBACH,oBAAC,OAAD;AAAA,WAAgBA;AAAhB,mBACE,oBAAC,KAAD;AAAA;AAAA,IADF,CAHJ,CADK,EAAP;AAUD;;;;AAED,SAASE,WAAT,CAAqBJ,KAArB,EAA4B;AAAA,MACZK,YADY,GACaL,KADb,CAClBL,IADkB;AAAA,MACEC,MADF,GACaI,KADb,CACEJ,MADF;AAE1B,SAAO,yBAAOA,MAAP,iBAAe,oBAAC,YAAD;AAAA,YAAsBN,IAAtB;AAAA,SAAgC;AAAhC,KAAf,EAAP;AACD;;AAED,eAAeJ,eAAe,CAM5BO,IAN4B,EAMtB;AACNM,EAAAA,KAAK,EAALA,KADM;AAENK,EAAAA,WAAW,EAAXA;AAFM,CANsB,CAA9B","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, { Component, Merge, styled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { ITextProps, Text } from '@semcore/typography';\n// eslint-disable-next-line import/no-named-as-default\nimport Tooltip from '@semcore/tooltip';\nimport InfoXS from '@semcore/icon/lib/Info/xs';\n\nimport style from './style/card.shadow.css';\n\nexport interface ITitleProps extends ITextProps {\n  /**\n   * Tooltip text\n   */\n  hint?: React.ReactNode;\n}\n\nclass Card extends Component {\n  static displayName = 'Card';\n\n  static style = style;\n\n  render() {\n    const SCard = this.Root;\n    const { styles } = this.asProps;\n\n    return styled(styles)(<SCard render={Box} p={6} />);\n  }\n}\n\nfunction Title(props) {\n  const { Root: STitle, styles, hint } = props;\n  const SIcon = InfoXS;\n  return styled(styles)(\n    <>\n      <STitle render={Text} />\n      {hint && (\n        <Tooltip title={hint}>\n          <SIcon />\n        </Tooltip>\n      )}\n    </>,\n  );\n}\n\nfunction Description(props) {\n  const { Root: SDescription, styles } = props;\n  return styled(styles)(<SDescription render={Text} tag=\"p\" />);\n}\n\nexport default createComponent<\n  ComponentProps<typeof Box>,\n  {\n    Title: Merge<ITitleProps, HTMLAttributes<HTMLSpanElement>>;\n    Description: ComponentProps<typeof Text>;\n  }\n>(Card, {\n  Title,\n  Description,\n});\n"],"file":"Card.js"}
+{"version":3,"sources":["../../src/Card.js"],"names":["React","createComponent","Component","sstyled","Root","Box","Text","Tooltip","Info","Card","SCard","styles","asProps","style","Title","props","hint","STitle","SIcon","Description","SDescription"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,SAASC,IAAT,QAAqB,qBAArB;AACA,OAAOC,OAAP,MAAoB,kBAApB;AACA,OAAOC,IAAP,MAAiB,sBAAjB;;;;;;;;;;;;;;;;;;IAIMC,I;;;;;;;;;;;;;WAKJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,KAAK,GAG2BL,GAHtC;AADO,UAECM,MAFD,GAEY,KAAKC,OAFjB,CAECD,MAFD;AAIP,qBAAOR,OAAO,CAACQ,MAAD,CAAd,eAAuB,oBAAC,KAAD,+DAAvB;AACD;;;;EAVgBT,S;;gBAAbO,I,iBACiB,M;;gBADjBA,I,WAGWI,K;;AAUjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AAAA,MACZJ,MADY,GACKI,KADL,CACZJ,MADY;AAAA,MACJK,IADI,GACKD,KADL,CACJC,IADI;AAEpB,MAAMC,MAAM,GAIQX,IAJpB;AACA,MAAMY,KAAK,GAAGV,IAAd;AACA,iBAAOL,OAAO,CAACQ,MAAD,CAAd,eACE,uDACE,oBAAC,MAAD,kEADF,EAEGK,IAAI,iBACH,oBAAC,OAAD;AAAA,aAAgBA;AAAhB,mBACE,oBAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASG,WAAT,CAAqBJ,KAArB,EAA4B;AAAA;AAAA;;AAAA,MAClBJ,MADkB,GACPI,KADO,CAClBJ,MADkB;AAE1B,MAAMS,YAAY,GAC2Bd,IAD7C;AACA,iBAAOH,OAAO,CAACQ,MAAD,CAAd,eAAuB,oBAAC,YAAD;AAAA,WAAgC;AAAhC,cAAvB;AACD;;AAED,eAAeV,eAAe,CAACQ,IAAD,EAAO;AACnCK,EAAAA,KAAK,EAALA,KADmC;AAEnCK,EAAAA,WAAW,EAAXA;AAFmC,CAAP,CAA9B","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { Text } from '@semcore/typography';\nimport Tooltip from '@semcore/tooltip';\nimport Info from '@semcore/icon/Info/m';\n\nimport style from './style/card.shadow.css';\n\nclass Card extends Component {\n  static displayName = 'Card';\n\n  static style = style;\n\n  render() {\n    const SCard = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<SCard render={Box} />);\n  }\n}\n\nfunction Title(props) {\n  const { styles, hint } = props;\n  const STitle = Root;\n  const SIcon = Info;\n  return sstyled(styles)(\n    <>\n      <STitle render={Text} />\n      {hint && (\n        <Tooltip title={hint}>\n          <SIcon />\n        </Tooltip>\n      )}\n    </>,\n  );\n}\n\nfunction Description(props) {\n  const { styles } = props;\n  const SDescription = Root;\n  return sstyled(styles)(<SDescription render={Text} tag=\"p\" />);\n}\n\nexport default createComponent(Card, {\n  Title,\n  Description,\n});\n"],"file":"Card.js"}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AACA,cAAc,QAAd","sourcesContent":["export { default } from './Card';\nexport * from './Card';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB;AACA,cAAc,QAAd","sourcesContent":["export { default } from './Card';\nexport * from './Card';\n"],"file":"index.js"}

package/lib/es6/style/card.shadow.css

@@ -3,6 +3,7 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
+  padding: 20px 24px 24px;
 }
 
 STitle {

package/lib/types/index.d.ts

@@ -1,2 +1,18 @@
-export { default } from './Card';
-export * from './Card';
+import React from 'react';
+import { CProps, ReturnEl } from '@semcore/core';
+import { IBoxProps } from '@semcore/flex-box';
+import { Text, ITextProps } from '@semcore/typography';
+
+export interface ITitleProps extends ITextProps {
+  /**
+   * Tooltip text
+   */
+  hint?: React.ReactNode;
+}
+
+declare const Card: (<T>(props: CProps<IBoxProps & T>) => ReturnEl) & {
+  Title: <T>(props: ITitleProps & T) => ReturnEl;
+  Description: typeof Text;
+};
+
+export default Card;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@semcore/card",
   "description": "SEMRush Card Component",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build",
+    "build": "build --source=js",
     "test": "jest"
   },
   "dependencies": {
@@ -16,10 +17,10 @@
     "@semcore/flex-box": "^4",
     "@semcore/typography": "^3",
     "@semcore/tooltip": "^4",
-    "@semcore/icon": "^2"
+    "@semcore/icon": "^2.16"
   },
   "peerDependencies": {
-    "@semcore/core": "^1.3",
+    "@semcore/core": "^1.11",
     "react": "16.8 - 17"
   },
   "jest": {

package/src/Card.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
+import { Text } from '@semcore/typography';
+import Tooltip from '@semcore/tooltip';
+import Info from '@semcore/icon/Info/m';
+
+import style from './style/card.shadow.css';
+
+class Card extends Component {
+  static displayName = 'Card';
+
+  static style = style;
+
+  render() {
+    const SCard = Root;
+    const { styles } = this.asProps;
+
+    return sstyled(styles)(<SCard render={Box} />);
+  }
+}
+
+function Title(props) {
+  const { styles, hint } = props;
+  const STitle = Root;
+  const SIcon = Info;
+  return sstyled(styles)(
+    <>
+      <STitle render={Text} />
+      {hint && (
+        <Tooltip title={hint}>
+          <SIcon />
+        </Tooltip>
+      )}
+    </>,
+  );
+}
+
+function Description(props) {
+  const { styles } = props;
+  const SDescription = Root;
+  return sstyled(styles)(<SDescription render={Text} tag="p" />);
+}
+
+export default createComponent(Card, {
+  Title,
+  Description,
+});

package/src/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CProps, ReturnEl } from '@semcore/core';
+import { IBoxProps } from '@semcore/flex-box';
+import { Text, ITextProps } from '@semcore/typography';
+
+export interface ITitleProps extends ITextProps {
+  /**
+   * Tooltip text
+   */
+  hint?: React.ReactNode;
+}
+
+declare const Card: (<T>(props: CProps<IBoxProps & T>) => ReturnEl) & {
+  Title: <T>(props: ITitleProps & T) => ReturnEl;
+  Description: typeof Text;
+};
+
+export default Card;

package/src/style/card.shadow.css

@@ -3,6 +3,7 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
+  padding: 20px 24px 24px;
 }
 
 STitle {

package/lib/types/Card.d.ts

@@ -1,16 +0,0 @@
-import React, { ComponentProps, HTMLAttributes } from 'react';
-import { Merge } from '@semcore/core';
-import { ITextProps, Text } from '@semcore/typography';
-export interface ITitleProps extends ITextProps {
-    /**
-     * Tooltip text
-     */
-    hint?: React.ReactNode;
-}
-declare const _default: import("@semcore/core").ComponentType<import("@semcore/core").PropsAndRef<Merge<import("@semcore/flex-box").IBoxProps, React.HTMLAttributes<HTMLDivElement>>, {}, {}>, {
-    Title: Merge<ITitleProps, HTMLAttributes<HTMLSpanElement>>;
-    Description: ComponentProps<typeof Text>;
-}, {}, {
-    [key: string]: (arg: unknown) => void;
-}, null>;
-export default _default;

package/src/Card.tsx

@@ -1,60 +0,0 @@
-import React, { ComponentProps, HTMLAttributes } from 'react';
-import createComponent, { Component, Merge, styled } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import { ITextProps, Text } from '@semcore/typography';
-// eslint-disable-next-line import/no-named-as-default
-import Tooltip from '@semcore/tooltip';
-import InfoXS from '@semcore/icon/lib/Info/xs';
-
-import style from './style/card.shadow.css';
-
-export interface ITitleProps extends ITextProps {
-  /**
-   * Tooltip text
-   */
-  hint?: React.ReactNode;
-}
-
-class Card extends Component {
-  static displayName = 'Card';
-
-  static style = style;
-
-  render() {
-    const SCard = this.Root;
-    const { styles } = this.asProps;
-
-    return styled(styles)(<SCard render={Box} p={6} />);
-  }
-}
-
-function Title(props) {
-  const { Root: STitle, styles, hint } = props;
-  const SIcon = InfoXS;
-  return styled(styles)(
-    <>
-      <STitle render={Text} />
-      {hint && (
-        <Tooltip title={hint}>
-          <SIcon />
-        </Tooltip>
-      )}
-    </>,
-  );
-}
-
-function Description(props) {
-  const { Root: SDescription, styles } = props;
-  return styled(styles)(<SDescription render={Text} tag="p" />);
-}
-
-export default createComponent<
-  ComponentProps<typeof Box>,
-  {
-    Title: Merge<ITitleProps, HTMLAttributes<HTMLSpanElement>>;
-    Description: ComponentProps<typeof Text>;
-  }
->(Card, {
-  Title,
-  Description,
-});