@semcore/card 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.4.0] - 2022-02-03
+
+### Changed
+
+- Changed styles
+
+## [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

package/lib/cjs/Card.js

@@ -31,7 +31,9 @@ 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"));
+
+var _findComponent = require("@semcore/utils/lib/findComponent");
 
 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; }
 
@@ -46,74 +48,97 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SCard_1rohh_gg_{border:1px solid #ccc;border-radius:2px}.___STitle_1rohh_gg_{font-size:19px;font-weight:500}.___SIcon_1rohh_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_1rohh_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
+".___SCard_81jzm_gg_{border:1px solid #ccc;border-radius:2px;box-sizing:border-box;background:#fff}.___STitle_81jzm_gg_{font-size:19px;font-weight:500}.___SIcon_81jzm_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_81jzm_gg_{margin-bottom:12px;font-size:14px;color:#757575}.___SHeader_81jzm_gg_{padding-bottom:0}.___SBody_81jzm_gg_,.___SHeader_81jzm_gg_{padding-left:24px;padding-right:24px;padding-top:20px}.___SBody_81jzm_gg_{padding-bottom:24px}"
 /*__inner_css_end__*/
-, "2l9cm8_gg_")
+, "11udogg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_1rohh_gg_",
-  "__STitle": "___STitle_1rohh_gg_",
-  "__SIcon": "___SIcon_1rohh_gg_",
-  "__SDescription": "___SDescription_1rohh_gg_"
+  "__SCard": "___SCard_81jzm_gg_",
+  "__STitle": "___STitle_81jzm_gg_",
+  "__SIcon": "___SIcon_81jzm_gg_",
+  "__SDescription": "___SDescription_81jzm_gg_",
+  "__SHeader": "___SHeader_81jzm_gg_",
+  "__SBody": "___SBody_81jzm_gg_"
 });
 
-var Card = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Card, _Component);
+var CardRoot = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(CardRoot, _Component);
 
-  var _super = _createSuper(Card);
+  var _super = _createSuper(CardRoot);
 
-  function Card() {
-    (0, _classCallCheck2["default"])(this, Card);
+  function CardRoot() {
+    (0, _classCallCheck2["default"])(this, CardRoot);
     return _super.apply(this, arguments);
   }
 
-  (0, _createClass2["default"])(Card, [{
+  (0, _createClass2["default"])(CardRoot, [{
     key: "render",
     value: function render() {
       var _ref = this ? this.asProps : arguments[0],
-          _ref4;
+          _ref6;
 
       var SCard = _flexBox.Box;
-      var styles = this.asProps.styles;
-      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCard, _ref4.cn("SCard", _objectSpread({}, (0, _core.assignProps)({
-        "p": 6
-      }, _ref))));
+      var _this$asProps = this.asProps,
+          Children = _this$asProps.Children,
+          styles = _this$asProps.styles;
+      var advanceMode = (0, _findComponent.isAdvanceMode)(Children, [Card.Header.displayName, Card.Body.displayName]);
+      return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SCard, _ref6.cn("SCard", _objectSpread({}, (0, _core.assignProps)({}, _ref))), advanceMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(Card.Body, null, /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {}))));
     }
   }]);
-  return Card;
+  return CardRoot;
 }(_core.Component);
 
-(0, _defineProperty2["default"])(Card, "displayName", 'Card');
-(0, _defineProperty2["default"])(Card, "style", style);
+(0, _defineProperty2["default"])(CardRoot, "displayName", 'Card');
+(0, _defineProperty2["default"])(CardRoot, "style", style);
 
 function Title(props) {
   var _ref2 = this ? this.asProps : arguments[0],
-      _ref5;
+      _ref7;
 
   var styles = props.styles,
       hint = props.hint;
   var STitle = _typography.Text;
-  var SIcon = _xs["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", {
+  var SIcon = _m["default"];
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(STitle, _ref7.cn("STitle", _objectSpread({}, (0, _core.assignProps)({}, _ref2)))), hint && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], _ref7.cn("Tooltip", {
     "title": hint
-  }), /*#__PURE__*/_react["default"].createElement(SIcon, _ref5.cn("SIcon", {}))));
+  }), /*#__PURE__*/_react["default"].createElement(SIcon, _ref7.cn("SIcon", {}))));
 }
 
 function Description(props) {
   var _ref3 = this ? this.asProps : arguments[0],
-      _ref6;
+      _ref8;
 
   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)({
+  return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDescription, _ref8.cn("SDescription", _objectSpread({}, (0, _core.assignProps)({
     "tag": "p"
   }, _ref3))));
 }
 
-var _default = (0, _core["default"])(Card, {
+function Header(props) {
+  var _ref4 = this ? this.asProps : arguments[0],
+      _ref9;
+
+  var styles = props.styles;
+  var SHeader = _flexBox.Box;
+  return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeader, _ref9.cn("SHeader", _objectSpread({}, (0, _core.assignProps)(_objectSpread({}, props), _ref4))));
+}
+
+function Body(props) {
+  var _ref5 = this ? this.asProps : arguments[0],
+      _ref10;
+
+  var styles = props.styles;
+  var SBody = _flexBox.Box;
+  return _ref10 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBody, _ref10.cn("SBody", _objectSpread({}, (0, _core.assignProps)(_objectSpread({}, props), _ref5))));
+}
+
+var Card = (0, _core["default"])(CardRoot, {
   Title: Title,
-  Description: Description
+  Description: Description,
+  Header: Header,
+  Body: Body
 });
-
+var _default = Card;
 exports["default"] = _default;
 //# sourceMappingURL=Card.js.map

package/lib/cjs/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card.tsx"],"names":["Card","SCard","Box","styles","asProps","Component","style","Title","props","hint","STitle","Text","SIcon","InfoXS","Description","SDescription"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;IAWMA,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;AAAA,aAAuB;AAAvB,iBAAvB;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,cAAd;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,sBAMbH,IANa,EAMP;AACNO,EAAAA,KAAK,EAALA,KADM;AAENO,EAAAA,WAAW,EAAXA;AAFM,CANO,C","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, { Component, Merge, sstyled, Root } 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 = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<SCard render={Box} p={6} />);\n  }\n}\n\nfunction Title(props) {\n  const { styles, hint } = props;\n  const STitle = Root;\n  const SIcon = InfoXS;\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<\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":["CardRoot","SCard","Box","asProps","Children","styles","advanceMode","Card","Header","displayName","Body","Component","style","Title","props","hint","STitle","Text","SIcon","Info","Description","SDescription","SHeader","SBody"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEMA,Q;;;;;;;;;;;;WAKJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,KAAK,GAMMC,YANjB;AADO,0BAEsB,KAAKC,OAF3B;AAAA,UAECC,QAFD,iBAECA,QAFD;AAAA,UAEWC,MAFX,iBAEWA,MAFX;AAIP,UAAMC,WAAW,GAAG,kCAAcF,QAAd,EAAwB,CAACG,IAAI,CAACC,MAAL,CAAYC,WAAb,EAA0BF,IAAI,CAACG,IAAL,CAAUD,WAApC,CAAxB,CAApB;AAEA,qBAAO,mBAAQJ,MAAR,CAAP,eACE,gCAAC,KAAD,0EACGC,WAAW,gBACV,gCAAC,QAAD,2BADU,gBAGV,gCAAC,IAAD,CAAM,IAAN,qBACE,gCAAC,QAAD,2BADF,CAJJ,CADF;AAWD;;;EAtBoBK,e;;iCAAjBX,Q,iBACiB,M;iCADjBA,Q,WAGWY,K;;AAsBjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AAAA,MACZT,MADY,GACKS,KADL,CACZT,MADY;AAAA,MACJU,IADI,GACKD,KADL,CACJC,IADI;AAEpB,MAAMC,MAAM,GAIQC,gBAJpB;AACA,MAAMC,KAAK,GAAGC,aAAd;AACA,iBAAO,mBAAQd,MAAR,CAAP,eACE,+EACE,gCAAC,MAAD,2EADF,EAEGU,IAAI,iBACH,gCAAC,mBAAD;AAAA,aAAgBA;AAAhB,mBACE,gCAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASK,WAAT,CAAqBN,KAArB,EAA4B;AAAA;AAAA;;AAAA,MAClBT,MADkB,GACPS,KADO,CAClBT,MADkB;AAE1B,MAAMgB,YAAY,GAC2BJ,gBAD7C;AACA,iBAAO,mBAAQZ,MAAR,CAAP,eAAuB,gCAAC,YAAD;AAAA,WAAgC;AAAhC,cAAvB;AACD;;AAED,SAASG,MAAT,CAAgBM,KAAhB,EAAuB;AAAA;AAAA;;AAAA,MACbT,MADa,GACFS,KADE,CACbT,MADa;AAErB,MAAMiB,OAAO,GAC2BpB,YADxC;AACA,iBAAO,mBAAQG,MAAR,CAAP,eAAuB,gCAAC,OAAD,iFAA0BS,KAA1B,YAAvB;AACD;;AAED,SAASJ,IAAT,CAAcI,KAAd,EAAqB;AAAA;AAAA;;AAAA,MACXT,MADW,GACAS,KADA,CACXT,MADW;AAEnB,MAAMkB,KAAK,GAC2BrB,YADtC;AACA,kBAAO,mBAAQG,MAAR,CAAP,eAAuB,gCAAC,KAAD,gFAAwBS,KAAxB,YAAvB;AACD;;AAED,IAAMP,IAAI,GAAG,sBAAgBP,QAAhB,EAA0B;AACrCa,EAAAA,KAAK,EAALA,KADqC;AAErCO,EAAAA,WAAW,EAAXA,WAFqC;AAGrCZ,EAAAA,MAAM,EAANA,MAHqC;AAIrCE,EAAAA,IAAI,EAAJA;AAJqC,CAA1B,CAAb;eAOeH,I","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';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nclass CardRoot extends Component {\n  static displayName = 'Card';\n\n  static style = style;\n\n  render() {\n    const SCard = Root;\n    const { Children, styles } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);\n\n    return sstyled(styles)(\n      <SCard render={Box}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Card.Body>\n            <Children />\n          </Card.Body>\n        )}\n      </SCard>,\n    );\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\nfunction Header(props) {\n  const { styles } = props;\n  const SHeader = Root;\n  return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props) {\n  const { styles } = props;\n  const SBody = Root;\n  return sstyled(styles)(<SBody render={Box} {...props} />);\n}\n\nconst Card = createComponent(CardRoot, {\n  Title,\n  Description,\n  Header,\n  Body,\n});\n\nexport default Card;\n"],"file":"Card.js"}

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;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,8 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 STitle {
@@ -21,3 +23,17 @@ SDescription {
   font-size: var(--fs-200);
   color: var(--gray60);
 }
+
+SHeader {
+  padding-bottom: 0;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+}
+
+SBody {
+  padding-bottom: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+}

package/lib/es6/Card.js

@@ -5,6 +5,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps5 } from "@semcore/core";
+import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
@@ -20,85 +22,109 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 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 style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SCard_1rohh_gg_{border:1px solid #ccc;border-radius:2px}.___STitle_1rohh_gg_{font-size:19px;font-weight:500}.___SIcon_1rohh_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_1rohh_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
+".___SCard_81jzm_gg_{border:1px solid #ccc;border-radius:2px;box-sizing:border-box;background:#fff}.___STitle_81jzm_gg_{font-size:19px;font-weight:500}.___SIcon_81jzm_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_81jzm_gg_{margin-bottom:12px;font-size:14px;color:#757575}.___SHeader_81jzm_gg_{padding-bottom:0}.___SBody_81jzm_gg_,.___SHeader_81jzm_gg_{padding-left:24px;padding-right:24px;padding-top:20px}.___SBody_81jzm_gg_{padding-bottom:24px}"
 /*__inner_css_end__*/
-, "2l9cm8_gg_")
+, "11udogg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_1rohh_gg_",
-  "__STitle": "___STitle_1rohh_gg_",
-  "__SIcon": "___SIcon_1rohh_gg_",
-  "__SDescription": "___SDescription_1rohh_gg_"
+  "__SCard": "___SCard_81jzm_gg_",
+  "__STitle": "___STitle_81jzm_gg_",
+  "__SIcon": "___SIcon_81jzm_gg_",
+  "__SDescription": "___SDescription_81jzm_gg_",
+  "__SHeader": "___SHeader_81jzm_gg_",
+  "__SBody": "___SBody_81jzm_gg_"
 });
+import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
 
-var Card = /*#__PURE__*/function (_Component) {
-  _inherits(Card, _Component);
+var CardRoot = /*#__PURE__*/function (_Component) {
+  _inherits(CardRoot, _Component);
 
-  var _super = _createSuper(Card);
+  var _super = _createSuper(CardRoot);
 
-  function Card() {
-    _classCallCheck(this, Card);
+  function CardRoot() {
+    _classCallCheck(this, CardRoot);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass(Card, [{
+  _createClass(CardRoot, [{
     key: "render",
     value: function render() {
       var _ref = this ? this.asProps : arguments[0],
-          _ref4;
+          _ref6;
 
       var SCard = Box;
-      var styles = this.asProps.styles;
-      return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SCard, _ref4.cn("SCard", _objectSpread({}, _assignProps({
-        "p": 6
-      }, _ref))));
+      var _this$asProps = this.asProps,
+          Children = _this$asProps.Children,
+          styles = _this$asProps.styles;
+      var advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
+      return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SCard, _ref6.cn("SCard", _objectSpread({}, _assignProps({}, _ref))), advanceMode ? /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})) : /*#__PURE__*/React.createElement(Card.Body, null, /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {}))));
     }
   }]);
 
-  return Card;
+  return CardRoot;
 }(Component);
 
-_defineProperty(Card, "displayName", 'Card');
+_defineProperty(CardRoot, "displayName", 'Card');
 
-_defineProperty(Card, "style", style);
+_defineProperty(CardRoot, "style", style);
 
 function Title(props) {
   var _ref2 = this ? this.asProps : arguments[0],
-      _ref5;
+      _ref7;
 
   var styles = props.styles,
       hint = props.hint;
   var STitle = Text;
-  var SIcon = InfoXS;
-  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", {
+  var SIcon = Info;
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(STitle, _ref7.cn("STitle", _objectSpread({}, _assignProps2({}, _ref2)))), hint && /*#__PURE__*/React.createElement(Tooltip, _ref7.cn("Tooltip", {
     "title": hint
-  }), /*#__PURE__*/React.createElement(SIcon, _ref5.cn("SIcon", {}))));
+  }), /*#__PURE__*/React.createElement(SIcon, _ref7.cn("SIcon", {}))));
 }
 
 function Description(props) {
   var _ref3 = this ? this.asProps : arguments[0],
-      _ref6;
+      _ref8;
 
   var styles = props.styles;
   var SDescription = Text;
-  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SDescription, _ref6.cn("SDescription", _objectSpread({}, _assignProps3({
+  return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SDescription, _ref8.cn("SDescription", _objectSpread({}, _assignProps3({
     "tag": "p"
   }, _ref3))));
 }
 
-export default createComponent(Card, {
+function Header(props) {
+  var _ref4 = this ? this.asProps : arguments[0],
+      _ref9;
+
+  var styles = props.styles;
+  var SHeader = Box;
+  return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(SHeader, _ref9.cn("SHeader", _objectSpread({}, _assignProps4(_objectSpread({}, props), _ref4))));
+}
+
+function Body(props) {
+  var _ref5 = this ? this.asProps : arguments[0],
+      _ref10;
+
+  var styles = props.styles;
+  var SBody = Box;
+  return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SBody, _ref10.cn("SBody", _objectSpread({}, _assignProps5(_objectSpread({}, props), _ref5))));
+}
+
+var Card = createComponent(CardRoot, {
   Title: Title,
-  Description: Description
+  Description: Description,
+  Header: Header,
+  Body: Body
 });
+export default Card;
 //# sourceMappingURL=Card.js.map

package/lib/es6/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card.tsx"],"names":["React","createComponent","Component","sstyled","Root","Box","Text","Tooltip","InfoXS","Card","SCard","styles","asProps","style","Title","props","hint","STitle","SIcon","Description","SDescription"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAsD,OAAtD;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAA4CC,OAA5C,EAAqDC,IAArD,QAAiE,eAAjE;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,SAAqBC,IAArB,QAAiC,qBAAjC,C,CACA;;AACA,OAAOC,OAAP,MAAoB,kBAApB;AACA,OAAOC,MAAP,MAAmB,2BAAnB;;;;;;;;;;;;;;;;;;IAWMC,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;AAAA,aAAuB;AAAvB,iBAAvB;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,MAAd;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,CAM5BQ,IAN4B,EAMtB;AACNK,EAAAA,KAAK,EAALA,KADM;AAENK,EAAAA,WAAW,EAAXA;AAFM,CANsB,CAA9B","sourcesContent":["import React, { ComponentProps, HTMLAttributes } from 'react';\nimport createComponent, { Component, Merge, sstyled, Root } 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 = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(<SCard render={Box} p={6} />);\n  }\n}\n\nfunction Title(props) {\n  const { styles, hint } = props;\n  const STitle = Root;\n  const SIcon = InfoXS;\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<\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","isAdvanceMode","CardRoot","SCard","asProps","Children","styles","advanceMode","Card","Header","displayName","Body","style","Title","props","hint","STitle","SIcon","Description","SDescription","SHeader","SBody"],"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;;;;;;;;;;;;;;;;;;;AAGA,SAASC,aAAT,QAA8B,kCAA9B;;IAEMC,Q;;;;;;;;;;;;;WAKJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,KAAK,GAMMN,GANjB;AADO,0BAEsB,KAAKO,OAF3B;AAAA,UAECC,QAFD,iBAECA,QAFD;AAAA,UAEWC,MAFX,iBAEWA,MAFX;AAIP,UAAMC,WAAW,GAAGN,aAAa,CAACI,QAAD,EAAW,CAACG,IAAI,CAACC,MAAL,CAAYC,WAAb,EAA0BF,IAAI,CAACG,IAAL,CAAUD,WAApC,CAAX,CAAjC;AAEA,qBAAOf,OAAO,CAACW,MAAD,CAAd,eACE,oBAAC,KAAD,gEACGC,WAAW,gBACV,oBAAC,QAAD,2BADU,gBAGV,oBAAC,IAAD,CAAM,IAAN,qBACE,oBAAC,QAAD,2BADF,CAJJ,CADF;AAWD;;;;EAtBoBb,S;;gBAAjBQ,Q,iBACiB,M;;gBADjBA,Q,WAGWU,K;;AAsBjB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AAAA,MACZR,MADY,GACKQ,KADL,CACZR,MADY;AAAA,MACJS,IADI,GACKD,KADL,CACJC,IADI;AAEpB,MAAMC,MAAM,GAIQlB,IAJpB;AACA,MAAMmB,KAAK,GAAGjB,IAAd;AACA,iBAAOL,OAAO,CAACW,MAAD,CAAd,eACE,uDACE,oBAAC,MAAD,kEADF,EAEGS,IAAI,iBACH,oBAAC,OAAD;AAAA,aAAgBA;AAAhB,mBACE,oBAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASG,WAAT,CAAqBJ,KAArB,EAA4B;AAAA;AAAA;;AAAA,MAClBR,MADkB,GACPQ,KADO,CAClBR,MADkB;AAE1B,MAAMa,YAAY,GAC2BrB,IAD7C;AACA,iBAAOH,OAAO,CAACW,MAAD,CAAd,eAAuB,oBAAC,YAAD;AAAA,WAAgC;AAAhC,cAAvB;AACD;;AAED,SAASG,MAAT,CAAgBK,KAAhB,EAAuB;AAAA;AAAA;;AAAA,MACbR,MADa,GACFQ,KADE,CACbR,MADa;AAErB,MAAMc,OAAO,GAC2BvB,GADxC;AACA,iBAAOF,OAAO,CAACW,MAAD,CAAd,eAAuB,oBAAC,OAAD,wEAA0BQ,KAA1B,YAAvB;AACD;;AAED,SAASH,IAAT,CAAcG,KAAd,EAAqB;AAAA;AAAA;;AAAA,MACXR,MADW,GACAQ,KADA,CACXR,MADW;AAEnB,MAAMe,KAAK,GAC2BxB,GADtC;AACA,kBAAOF,OAAO,CAACW,MAAD,CAAd,eAAuB,oBAAC,KAAD,uEAAwBQ,KAAxB,YAAvB;AACD;;AAED,IAAMN,IAAI,GAAGf,eAAe,CAACS,QAAD,EAAW;AACrCW,EAAAA,KAAK,EAALA,KADqC;AAErCK,EAAAA,WAAW,EAAXA,WAFqC;AAGrCT,EAAAA,MAAM,EAANA,MAHqC;AAIrCE,EAAAA,IAAI,EAAJA;AAJqC,CAAX,CAA5B;AAOA,eAAeH,IAAf","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';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\n\nclass CardRoot extends Component {\n  static displayName = 'Card';\n\n  static style = style;\n\n  render() {\n    const SCard = Root;\n    const { Children, styles } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);\n\n    return sstyled(styles)(\n      <SCard render={Box}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Card.Body>\n            <Children />\n          </Card.Body>\n        )}\n      </SCard>,\n    );\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\nfunction Header(props) {\n  const { styles } = props;\n  const SHeader = Root;\n  return sstyled(styles)(<SHeader render={Box} {...props} />);\n}\n\nfunction Body(props) {\n  const { styles } = props;\n  const SBody = Root;\n  return sstyled(styles)(<SBody render={Box} {...props} />);\n}\n\nconst Card = createComponent(CardRoot, {\n  Title,\n  Description,\n  Header,\n  Body,\n});\n\nexport default Card;\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,8 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 STitle {
@@ -21,3 +23,17 @@ SDescription {
   font-size: var(--fs-200);
   color: var(--gray60);
 }
+
+SHeader {
+  padding-bottom: 0;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+}
+
+SBody {
+  padding-bottom: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+}

package/lib/types/index.d.ts

@@ -1,2 +1,20 @@
-export { default } from './Card';
-export * from './Card';
+import React from 'react';
+import { CProps, ReturnEl } from '@semcore/core';
+import { Box, 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;
+  Header: typeof Box;
+  Body: typeof Box;
+};
+
+export default Card;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@semcore/card",
   "description": "SEMRush Card Component",
-  "version": "2.2.0",
+  "version": "2.4.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,13 +17,13 @@
     "@semcore/flex-box": "^4",
     "@semcore/typography": "^3",
     "@semcore/tooltip": "^4",
-    "@semcore/icon": "^2"
+    "@semcore/icon": "^2.16"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
     "react": "16.8 - 17"
   },
   "jest": {
-    "preset": "jest-preset-ui"
+    "preset": "@semcore/jest-preset-ui"
   }
 }

package/src/Card.js

@@ -0,0 +1,77 @@
+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';
+import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
+
+class CardRoot extends Component {
+  static displayName = 'Card';
+
+  static style = style;
+
+  render() {
+    const SCard = Root;
+    const { Children, styles } = this.asProps;
+
+    const advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
+
+    return sstyled(styles)(
+      <SCard render={Box}>
+        {advanceMode ? (
+          <Children />
+        ) : (
+          <Card.Body>
+            <Children />
+          </Card.Body>
+        )}
+      </SCard>,
+    );
+  }
+}
+
+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" />);
+}
+
+function Header(props) {
+  const { styles } = props;
+  const SHeader = Root;
+  return sstyled(styles)(<SHeader render={Box} {...props} />);
+}
+
+function Body(props) {
+  const { styles } = props;
+  const SBody = Root;
+  return sstyled(styles)(<SBody render={Box} {...props} />);
+}
+
+const Card = createComponent(CardRoot, {
+  Title,
+  Description,
+  Header,
+  Body,
+});
+
+export default Card;

package/src/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CProps, ReturnEl } from '@semcore/core';
+import { Box, 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;
+  Header: typeof Box;
+  Body: typeof Box;
+};
+
+export default Card;

package/src/style/card.shadow.css

@@ -3,6 +3,8 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 STitle {
@@ -21,3 +23,17 @@ SDescription {
   font-size: var(--fs-200);
   color: var(--gray60);
 }
+
+SHeader {
+  padding-bottom: 0;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+}
+
+SBody {
+  padding-bottom: 24px;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+}

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,62 +0,0 @@
-import React, { ComponentProps, HTMLAttributes } from 'react';
-import createComponent, { Component, Merge, sstyled, Root } 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 = Root;
-    const { styles } = this.asProps;
-
-    return sstyled(styles)(<SCard render={Box} p={6} />);
-  }
-}
-
-function Title(props) {
-  const { styles, hint } = props;
-  const STitle = Root;
-  const SIcon = InfoXS;
-  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<
-  ComponentProps<typeof Box>,
-  {
-    Title: Merge<ITitleProps, HTMLAttributes<HTMLSpanElement>>;
-    Description: ComponentProps<typeof Text>;
-  }
->(Card, {
-  Title,
-  Description,
-});