@semcore/card 3.0.5 → 4.0.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+
+## [3.0.7] - 2022-05-16
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
+
+## [3.0.6] - 2022-04-28
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.20.0 ~> 2.21.0]).
+
 ## [3.0.5] - 2022-03-21
 
 ### Changed

package/lib/cjs/Card.js

@@ -52,17 +52,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SCard_1g2jr_gg_{border:1px solid #cccccc;border-radius:2px;box-sizing:border-box;background:#fff}.___STitle_1g2jr_gg_{font-size:19px;font-weight:500}.___SIcon_1g2jr_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_1g2jr_gg_{margin-bottom:12px;font-size:14px;color:#757575}.___SHeader_1g2jr_gg_{padding-bottom:0;padding-left:24px;padding-right:24px;padding-top:20px}.___SBody_1g2jr_gg_{padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:20px}"
+".___SCard_cju2a_gg_{box-sizing:border-box;background:#ffffff;padding:0;border:none;border-radius:6px;box-shadow:0 0 1px rgba(25,27,35,.16),0 1px 2px rgba(25,27,35,.12);font-family:Inter,sans-serif}.___STitle_cju2a_gg_{color:#191b23;font-size:16px;line-height:1.5;font-weight:700;margin-right:4px}.___SIcon_cju2a_gg_{color:#a9abb6;cursor:help;margin-right:4px}.___STooltip_cju2a_gg_{display:inline-flex;vertical-align:middle}.___SDescription_cju2a_gg_{margin-bottom:0;margin-top:8px;font-size:14px;color:#6c6e79}.___SHeader_cju2a_gg_{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;box-shadow:inset 0 -1px 0 #e0e1e9}.___SBody_cju2a_gg_{color:#191b23;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:20px}"
 /*__inner_css_end__*/
-, "11udogg_gg_")
+, "7y1f1d_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_1g2jr_gg_",
-  "__STitle": "___STitle_1g2jr_gg_",
-  "__SIcon": "___SIcon_1g2jr_gg_",
-  "__SDescription": "___SDescription_1g2jr_gg_",
-  "__SHeader": "___SHeader_1g2jr_gg_",
-  "__SBody": "___SBody_1g2jr_gg_"
+  "__SCard": "___SCard_cju2a_gg_",
+  "__STitle": "___STitle_cju2a_gg_",
+  "__SIcon": "___SIcon_cju2a_gg_",
+  "__STooltip": "___STooltip_cju2a_gg_",
+  "__SDescription": "___SDescription_cju2a_gg_",
+  "__SHeader": "___SHeader_cju2a_gg_",
+  "__SBody": "___SBody_cju2a_gg_"
 });
 
 var CardRoot = /*#__PURE__*/function (_Component) {
@@ -78,7 +79,7 @@ var CardRoot = /*#__PURE__*/function (_Component) {
   (0, _createClass2["default"])(CardRoot, [{
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref6;
 
       var SCard = _flexBox.Box;
@@ -96,20 +97,21 @@ var CardRoot = /*#__PURE__*/function (_Component) {
 (0, _defineProperty2["default"])(CardRoot, "style", style);
 
 function Title(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref7;
 
   var styles = props.styles,
       hint = props.hint;
   var STitle = _typography.Text;
   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", {
+  var STooltip = _tooltip["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(STooltip, _ref7.cn("STooltip", {
     "title": hint
   }), /*#__PURE__*/_react["default"].createElement(SIcon, _ref7.cn("SIcon", {}))));
 }
 
 function Description(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref8;
 
   var styles = props.styles;
@@ -120,7 +122,7 @@ function Description(props) {
 }
 
 function Header(props) {
-  var _ref4 = this ? this.asProps : arguments[0],
+  var _ref4 = arguments[0],
       _ref9;
 
   var styles = props.styles;
@@ -129,7 +131,7 @@ function Header(props) {
 }
 
 function Body(props) {
-  var _ref5 = this ? this.asProps : arguments[0],
+  var _ref5 = arguments[0],
       _ref10;
 
   var styles = props.styles;

package/lib/cjs/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card.jsx"],"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"}
+{"version":3,"sources":["../../src/Card.jsx"],"names":["CardRoot","SCard","Box","asProps","Children","styles","advanceMode","Card","Header","displayName","Body","Component","style","Title","props","hint","STitle","Text","SIcon","InfoM","STooltip","Tooltip","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,GAKQC,gBALpB;AACA,MAAMC,KAAK,GAAGC,aAAd;AACA,MAAMC,QAAQ,GAAGC,mBAAjB;AACA,iBAAO,mBAAQhB,MAAR,CAAP,eACE,+EACE,gCAAC,MAAD,2EADF,EAEGU,IAAI,iBACH,gCAAC,QAAD;AAAA,aAAiBA;AAAjB,mBACE,gCAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASO,WAAT,CAAqBR,KAArB,EAA4B;AAAA;AAAA;;AAC1B,MAAQT,MAAR,GAAmBS,KAAnB,CAAQT,MAAR;AACA,MAAMkB,YAAY,GAC2BN,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,MAAMmB,OAAO,GAC2BtB,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,MAAMoB,KAAK,GAC2BvB,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;AAErCS,EAAAA,WAAW,EAAXA,WAFqC;AAGrCd,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 InfoM 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 = InfoM;\n  const STooltip = Tooltip;\n  return sstyled(styles)(\n    <>\n      <STitle render={Text} />\n      {hint && (\n        <STooltip title={hint}>\n          <SIcon />\n        </STooltip>\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.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/lib/cjs/index.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
   }
 });
 
-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() {
-      return _Card[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; }
+var _Card = _interopRequireDefault(require("./Card"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './Card';\n"],"file":"index.js"}

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

@@ -1,39 +1,52 @@
 @import '@semcore/utils/style/var.css';
 
 SCard {
-  border: 1px solid var(--gray80);
-  border-radius: 2px;
   box-sizing: border-box;
   background: var(--white);
+  padding: 0;
+  border: none;
+  border-radius: var(--rounded-m);
+  box-shadow: 0 0 1px rgba(25, 27, 35, 0.16), 0 1px 2px rgba(25, 27, 35, 0.12);
+  font-family: Inter, sans-serif;
 }
 
 STitle {
-  font-size: var(--fs-400);
-  font-weight: 500;
+  color: var(--gray-800);
+  font-size: var(--fs-300);
+  line-height: var(--lh-300);
+  font-weight: 700;
+  margin-right: 4px;
 }
 
 SIcon {
-  margin-left: 4px;
-  color: var(--stone);
+  color: var(--gray-300);
   cursor: help;
+  margin-right: 4px;
+}
+STooltip {
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 SDescription {
-  margin-bottom: 12px;
+  margin-bottom: 0;
+  margin-top: 8px;
   font-size: var(--fs-200);
-  color: var(--gray60);
+  color: var(--gray-500);
 }
 
 SHeader {
-  padding-bottom: 0;
-  padding-left: 24px;
-  padding-right: 24px;
-  padding-top: 20px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  box-shadow: inset 0 -1px 0 var(--gray-100);
 }
 
 SBody {
-  padding-bottom: 24px;
-  padding-left: 24px;
-  padding-right: 24px;
+  color: var(--gray-800);
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
   padding-top: 20px;
 }

package/lib/es6/Card.js

@@ -24,24 +24,25 @@ 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 InfoM from '@semcore/icon/Info/m';
 
 /*__reshadow-styles__:"./style/card.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SCard_1g2jr_gg_{border:1px solid #cccccc;border-radius:2px;box-sizing:border-box;background:#fff}.___STitle_1g2jr_gg_{font-size:19px;font-weight:500}.___SIcon_1g2jr_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_1g2jr_gg_{margin-bottom:12px;font-size:14px;color:#757575}.___SHeader_1g2jr_gg_{padding-bottom:0;padding-left:24px;padding-right:24px;padding-top:20px}.___SBody_1g2jr_gg_{padding-bottom:24px;padding-left:24px;padding-right:24px;padding-top:20px}"
+".___SCard_cju2a_gg_{box-sizing:border-box;background:#ffffff;padding:0;border:none;border-radius:6px;box-shadow:0 0 1px rgba(25,27,35,.16),0 1px 2px rgba(25,27,35,.12);font-family:Inter,sans-serif}.___STitle_cju2a_gg_{color:#191b23;font-size:16px;line-height:1.5;font-weight:700;margin-right:4px}.___SIcon_cju2a_gg_{color:#a9abb6;cursor:help;margin-right:4px}.___STooltip_cju2a_gg_{display:inline-flex;vertical-align:middle}.___SDescription_cju2a_gg_{margin-bottom:0;margin-top:8px;font-size:14px;color:#6c6e79}.___SHeader_cju2a_gg_{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;box-shadow:inset 0 -1px 0 #e0e1e9}.___SBody_cju2a_gg_{color:#191b23;padding-bottom:20px;padding-left:20px;padding-right:20px;padding-top:20px}"
 /*__inner_css_end__*/
-, "11udogg_gg_")
+, "7y1f1d_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SCard": "___SCard_1g2jr_gg_",
-  "__STitle": "___STitle_1g2jr_gg_",
-  "__SIcon": "___SIcon_1g2jr_gg_",
-  "__SDescription": "___SDescription_1g2jr_gg_",
-  "__SHeader": "___SHeader_1g2jr_gg_",
-  "__SBody": "___SBody_1g2jr_gg_"
+  "__SCard": "___SCard_cju2a_gg_",
+  "__STitle": "___STitle_cju2a_gg_",
+  "__SIcon": "___SIcon_cju2a_gg_",
+  "__STooltip": "___STooltip_cju2a_gg_",
+  "__SDescription": "___SDescription_cju2a_gg_",
+  "__SHeader": "___SHeader_cju2a_gg_",
+  "__SBody": "___SBody_cju2a_gg_"
 });
 import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
 
@@ -59,7 +60,7 @@ var CardRoot = /*#__PURE__*/function (_Component) {
   _createClass(CardRoot, [{
     key: "render",
     value: function render() {
-      var _ref = this ? this.asProps : arguments[0],
+      var _ref = this.asProps,
           _ref6;
 
       var SCard = Box;
@@ -79,20 +80,21 @@ _defineProperty(CardRoot, "displayName", 'Card');
 _defineProperty(CardRoot, "style", style);
 
 function Title(props) {
-  var _ref2 = this ? this.asProps : arguments[0],
+  var _ref2 = arguments[0],
       _ref7;
 
   var styles = props.styles,
       hint = props.hint;
   var STitle = Text;
-  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", {
+  var SIcon = InfoM;
+  var STooltip = 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(STooltip, _ref7.cn("STooltip", {
     "title": hint
   }), /*#__PURE__*/React.createElement(SIcon, _ref7.cn("SIcon", {}))));
 }
 
 function Description(props) {
-  var _ref3 = this ? this.asProps : arguments[0],
+  var _ref3 = arguments[0],
       _ref8;
 
   var styles = props.styles;
@@ -103,7 +105,7 @@ function Description(props) {
 }
 
 function Header(props) {
-  var _ref4 = this ? this.asProps : arguments[0],
+  var _ref4 = arguments[0],
       _ref9;
 
   var styles = props.styles;
@@ -112,7 +114,7 @@ function Header(props) {
 }
 
 function Body(props) {
-  var _ref5 = this ? this.asProps : arguments[0],
+  var _ref5 = arguments[0],
       _ref10;
 
   var styles = props.styles;

package/lib/es6/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card.jsx"],"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"}
+{"version":3,"sources":["../../src/Card.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","Text","Tooltip","InfoM","isAdvanceMode","CardRoot","SCard","asProps","Children","styles","advanceMode","Card","Header","displayName","Body","style","Title","props","hint","STitle","SIcon","STooltip","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,KAAP,MAAkB,sBAAlB;;;;;;;;;;;;;;;;;;;;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,GAKQlB,IALpB;AACA,MAAMmB,KAAK,GAAGjB,KAAd;AACA,MAAMkB,QAAQ,GAAGnB,OAAjB;AACA,iBAAOJ,OAAO,CAACW,MAAD,CAAd,eACE,uDACE,oBAAC,MAAD,kEADF,EAEGS,IAAI,iBACH,oBAAC,QAAD;AAAA,aAAiBA;AAAjB,mBACE,oBAAC,KAAD,wBADF,CAHJ,CADF;AAUD;;AAED,SAASI,WAAT,CAAqBL,KAArB,EAA4B;AAAA;AAAA;;AAC1B,MAAQR,MAAR,GAAmBQ,KAAnB,CAAQR,MAAR;AACA,MAAMc,YAAY,GAC2BtB,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,MAAMe,OAAO,GAC2BxB,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,MAAMgB,KAAK,GAC2BzB,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;AAErCM,EAAAA,WAAW,EAAXA,WAFqC;AAGrCV,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 InfoM 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 = InfoM;\n  const STooltip = Tooltip;\n  return sstyled(styles)(\n    <>\n      <STitle render={Text} />\n      {hint && (\n        <STooltip title={hint}>\n          <SIcon />\n        </STooltip>\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.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/lib/es6/index.js

@@ -1,3 +1,2 @@
 export { default } from './Card';
-export * from './Card';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,QAAxB","sourcesContent":["export { default } from './Card';\n"],"file":"index.js"}

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

@@ -1,39 +1,52 @@
 @import '@semcore/utils/style/var.css';
 
 SCard {
-  border: 1px solid var(--gray80);
-  border-radius: 2px;
   box-sizing: border-box;
   background: var(--white);
+  padding: 0;
+  border: none;
+  border-radius: var(--rounded-m);
+  box-shadow: 0 0 1px rgba(25, 27, 35, 0.16), 0 1px 2px rgba(25, 27, 35, 0.12);
+  font-family: Inter, sans-serif;
 }
 
 STitle {
-  font-size: var(--fs-400);
-  font-weight: 500;
+  color: var(--gray-800);
+  font-size: var(--fs-300);
+  line-height: var(--lh-300);
+  font-weight: 700;
+  margin-right: 4px;
 }
 
 SIcon {
-  margin-left: 4px;
-  color: var(--stone);
+  color: var(--gray-300);
   cursor: help;
+  margin-right: 4px;
+}
+STooltip {
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 SDescription {
-  margin-bottom: 12px;
+  margin-bottom: 0;
+  margin-top: 8px;
   font-size: var(--fs-200);
-  color: var(--gray60);
+  color: var(--gray-500);
 }
 
 SHeader {
-  padding-bottom: 0;
-  padding-left: 24px;
-  padding-right: 24px;
-  padding-top: 20px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  box-shadow: inset 0 -1px 0 var(--gray-100);
 }
 
 SBody {
-  padding-bottom: 24px;
-  padding-left: 24px;
-  padding-right: 24px;
+  color: var(--gray-800);
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
   padding-top: 20px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/card",
   "description": "SEMRush Card Component",
-  "version": "3.0.5",
+  "version": "4.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -30,5 +30,10 @@
     "type": "git",
     "url": "https://github.com/semrush/intergalactic.git",
     "directory": "semcore/card"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@semcore/typography": "*",
+    "@semcore/icon": "*"
   }
 }

package/src/Card.jsx

@@ -3,7 +3,7 @@ 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 InfoM from '@semcore/icon/Info/m';
 
 import style from './style/card.shadow.css';
 import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
@@ -36,14 +36,15 @@ class CardRoot extends Component {
 function Title(props) {
   const { styles, hint } = props;
   const STitle = Root;
-  const SIcon = Info;
+  const SIcon = InfoM;
+  const STooltip = Tooltip;
   return sstyled(styles)(
     <>
       <STitle render={Text} />
       {hint && (
-        <Tooltip title={hint}>
+        <STooltip title={hint}>
           <SIcon />
-        </Tooltip>
+        </STooltip>
       )}
     </>,
   );

package/src/index.js

@@ -1,2 +1 @@
 export { default } from './Card';
-export * from './Card';

package/src/style/card.shadow.css

@@ -1,39 +1,52 @@
 @import '@semcore/utils/style/var.css';
 
 SCard {
-  border: 1px solid var(--gray80);
-  border-radius: 2px;
   box-sizing: border-box;
   background: var(--white);
+  padding: 0;
+  border: none;
+  border-radius: var(--rounded-m);
+  box-shadow: 0 0 1px rgba(25, 27, 35, 0.16), 0 1px 2px rgba(25, 27, 35, 0.12);
+  font-family: Inter, sans-serif;
 }
 
 STitle {
-  font-size: var(--fs-400);
-  font-weight: 500;
+  color: var(--gray-800);
+  font-size: var(--fs-300);
+  line-height: var(--lh-300);
+  font-weight: 700;
+  margin-right: 4px;
 }
 
 SIcon {
-  margin-left: 4px;
-  color: var(--stone);
+  color: var(--gray-300);
   cursor: help;
+  margin-right: 4px;
+}
+STooltip {
+  display: inline-flex;
+  vertical-align: middle;
 }
 
 SDescription {
-  margin-bottom: 12px;
+  margin-bottom: 0;
+  margin-top: 8px;
   font-size: var(--fs-200);
-  color: var(--gray60);
+  color: var(--gray-500);
 }
 
 SHeader {
-  padding-bottom: 0;
-  padding-left: 24px;
-  padding-right: 24px;
-  padding-top: 20px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 20px;
+  padding-right: 20px;
+  box-shadow: inset 0 -1px 0 var(--gray-100);
 }
 
 SBody {
-  padding-bottom: 24px;
-  padding-left: 24px;
-  padding-right: 24px;
+  color: var(--gray-800);
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
   padding-top: 20px;
 }