@semcore/card 2.3.0 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.0] - 2022-02-18
+
+### BREAK
+
+- `Card` was divided into Header and Body
+
+### Added
+
+- Background was added
+
+## [2.5.0] - 2021-02-18
+
+### Fixed
+
+- Reverted `Card` to a previous state with styles in the card itself and without `Header` and `Body`
+
+## [2.4.1] - 2021-02-14
+
+### Fixed
+
+- Up version of `Utils`
+
+## [2.4.0] - 2022-02-03
+
+### Changed
+
+- `Card` has been split into Header and Body and a background has been added
+
 ## [2.3.0] - 2022-01-18
 
 ### Changed

package/lib/cjs/Card.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,9 +33,15 @@ var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
 
 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; }
+var _findComponent = require("@semcore/utils/lib/findComponent");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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); }; }
 
@@ -46,72 +52,97 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___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}"
+".___SCard_8373t_gg_{border:1px solid #cccccc;border-radius:2px;box-sizing:border-box;background:#fff}.___STitle_8373t_gg_{font-size:19px;font-weight:500}.___SIcon_8373t_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_8373t_gg_{margin-bottom:12px;font-size:14px;color:#757575}.___SHeader_8373t_gg_{padding-bottom:0;padding-left:24px;padding-right:24px;padding-top:20px}.___SBody_8373t_gg_{padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:20px}"
 /*__inner_css_end__*/
-, "3hx1s_gg_")
+, "11udogg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_19clt_gg_",
-  "__STitle": "___STitle_19clt_gg_",
-  "__SIcon": "___SIcon_19clt_gg_",
-  "__SDescription": "___SDescription_19clt_gg_"
+  "__SCard": "___SCard_8373t_gg_",
+  "__STitle": "___STitle_8373t_gg_",
+  "__SIcon": "___SIcon_8373t_gg_",
+  "__SDescription": "___SDescription_8373t_gg_",
+  "__SHeader": "___SHeader_8373t_gg_",
+  "__SBody": "___SBody_8373t_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)({}, _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 = _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", {
+  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.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"}
+{"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;AACA,0BAA6B,KAAKC,OAAlC;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,MAAlB,iBAAkBA,MAAlB;AAEA,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;;AACpB,MAAQT,MAAR,GAAyBS,KAAzB,CAAQT,MAAR;AAAA,MAAgBU,IAAhB,GAAyBD,KAAzB,CAAgBC,IAAhB;AACA,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;;AAC1B,MAAQT,MAAR,GAAmBS,KAAnB,CAAQT,MAAR;AACA,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;;AACrB,MAAQT,MAAR,GAAmBS,KAAnB,CAAQT,MAAR;AACA,MAAMiB,OAAO,GAC2BpB,YADxC;AACA,iBAAO,mBAAQG,MAAR,CAAP,eAAuB,gCAAC,OAAD,iFAA0BS,KAA1B,YAAvB;AACD;;AAED,SAASJ,IAAT,CAAcI,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAQT,MAAR,GAAmBS,KAAnB,CAAQT,MAAR;AACA,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

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -26,4 +26,8 @@ Object.keys(_Card).forEach(function (key) {
     }
   });
 });
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

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

@@ -3,7 +3,8 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
-  padding: 20px 24px 24px;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 STitle {
@@ -22,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,13 +5,15 @@ 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";
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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); }; }
 
@@ -29,73 +31,100 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___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}"
+".___SCard_8373t_gg_{border:1px solid #cccccc;border-radius:2px;box-sizing:border-box;background:#fff}.___STitle_8373t_gg_{font-size:19px;font-weight:500}.___SIcon_8373t_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_8373t_gg_{margin-bottom:12px;font-size:14px;color:#757575}.___SHeader_8373t_gg_{padding-bottom:0;padding-left:24px;padding-right:24px;padding-top:20px}.___SBody_8373t_gg_{padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:20px}"
 /*__inner_css_end__*/
-, "3hx1s_gg_")
+, "11udogg_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_19clt_gg_",
-  "__STitle": "___STitle_19clt_gg_",
-  "__SIcon": "___SIcon_19clt_gg_",
-  "__SDescription": "___SDescription_19clt_gg_"
+  "__SCard": "___SCard_8373t_gg_",
+  "__STitle": "___STitle_8373t_gg_",
+  "__SIcon": "___SIcon_8373t_gg_",
+  "__SDescription": "___SDescription_8373t_gg_",
+  "__SHeader": "___SHeader_8373t_gg_",
+  "__SBody": "___SBody_8373t_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({}, _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 = 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", {
+  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.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"}
+{"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;AACA,0BAA6B,KAAKO,OAAlC;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,MAAlB,iBAAkBA,MAAlB;AAEA,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;;AACpB,MAAQR,MAAR,GAAyBQ,KAAzB,CAAQR,MAAR;AAAA,MAAgBS,IAAhB,GAAyBD,KAAzB,CAAgBC,IAAhB;AACA,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;;AAC1B,MAAQR,MAAR,GAAmBQ,KAAnB,CAAQR,MAAR;AACA,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;;AACrB,MAAQR,MAAR,GAAmBQ,KAAnB,CAAQR,MAAR;AACA,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;;AACnB,MAAQR,MAAR,GAAmBQ,KAAnB,CAAQR,MAAR;AACA,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/style/card.shadow.css

@@ -3,7 +3,8 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
-  padding: 20px 24px 24px;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 STitle {
@@ -22,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,6 +1,6 @@
 import React from 'react';
 import { CProps, ReturnEl } from '@semcore/core';
-import { IBoxProps } from '@semcore/flex-box';
+import { Box, IBoxProps } from '@semcore/flex-box';
 import { Text, ITextProps } from '@semcore/typography';
 
 export interface ITitleProps extends ITextProps {
@@ -13,6 +13,8 @@ export interface ITitleProps extends ITextProps {
 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,7 +1,7 @@
 {
   "name": "@semcore/card",
   "description": "SEMRush Card Component",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -13,7 +13,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@semcore/utils": "^3.15",
+    "@semcore/utils": "^3.31",
     "@semcore/flex-box": "^4",
     "@semcore/typography": "^3",
     "@semcore/tooltip": "^4",
@@ -24,6 +24,6 @@
     "react": "16.8 - 17"
   },
   "jest": {
-    "preset": "jest-preset-ui"
+    "preset": "@semcore/jest-preset-ui"
   }
 }

package/src/Card.js

@@ -6,17 +6,30 @@ 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 Card extends Component {
+class CardRoot extends Component {
   static displayName = 'Card';
 
   static style = style;
 
   render() {
     const SCard = Root;
-    const { styles } = this.asProps;
+    const { Children, styles } = this.asProps;
 
-    return sstyled(styles)(<SCard render={Box} />);
+    const advanceMode = isAdvanceMode(Children, [Card.Header.displayName, Card.Body.displayName]);
+
+    return sstyled(styles)(
+      <SCard render={Box}>
+        {advanceMode ? (
+          <Children />
+        ) : (
+          <Card.Body>
+            <Children />
+          </Card.Body>
+        )}
+      </SCard>,
+    );
   }
 }
 
@@ -42,7 +55,23 @@ function Description(props) {
   return sstyled(styles)(<SDescription render={Text} tag="p" />);
 }
 
-export default createComponent(Card, {
+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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CProps, ReturnEl } from '@semcore/core';
-import { IBoxProps } from '@semcore/flex-box';
+import { Box, IBoxProps } from '@semcore/flex-box';
 import { Text, ITextProps } from '@semcore/typography';
 
 export interface ITitleProps extends ITextProps {
@@ -13,6 +13,8 @@ export interface ITitleProps extends ITextProps {
 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,7 +3,8 @@
 SCard {
   border: 1px solid var(--gray80);
   border-radius: 2px;
-  padding: 20px 24px 24px;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 STitle {
@@ -22,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;
+}