@semcore/card 2.2.2

package/CHANGELOG.md

@@ -0,0 +1,112 @@
+# Changelog
+
+CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+
+## [2.2.2] - 2021-9-20
+
+### Fixed
+
+- Fixed padding
+
+## [2.2.1] - 2021-8-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [2.2.0] - 2021-04-26
+
+### Changed
+
+- Version of dependence `@semcore/core` has been changed to `1.11`.
+- Improved performance. Removed one component wrapper.
+- The style processing system has been changed.
+- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
+
+## [2.1.0] - 2020-12-17
+
+### Added
+
+- Added supported react@17.
+
+## [2.0.3] - 2020-10-29
+
+### Fixed
+
+- Added the placeholder for ID style tag to improve collision protection.
+
+## [2.0.2] - 2020-09-08
+
+### Fixed
+
+- Fixed possible styles collisions between components with different versions, but same styles
+
+## [2.0.1] - 2020-06-10
+
+### Fixed
+
+- Исправлены TS типы
+
+## [2.0.0] - 2020-06-08
+
+### BREAK
+
+- Изменения описаны в [migration guide](/internal/migration-guide)
+
+## [1.2.3] - 2020-04-07
+
+### Fixed
+
+- Исправлено поведение при котором отображалась иконка и тултип при пустом `hint`.
+
+## [1.2.2] - 2020-03-23
+
+### Fixed
+
+- Исправлена проблема в установке произвольного className в `Description` и `Title`.
+
+## [1.2.1] - 2020-03-06
+
+### Added
+
+- Добавили средную жирность для начертания шрифта в компоненте `Card.Title` (`font-weigth: 500`)
+
+## [1.2.0] - 2020-02-13
+
+### Added
+
+- Добавились компоненты `Card.Title` и `Card.Description`
+
+## [1.1.0] - 2019-12-12
+
+### Added
+
+- Появилась возможность добавления различных стилистических тем через css переменные
+- Появилась возможность оптицонально подключать адаптивноссть
+- Появилась возможность изолировать стили даже в пределах одной страницы
+
+### Changed
+
+- Изменен алгоритм вставки стилей в head
+
+### Removed
+
+- Убраны относительные единицы измерения(rem), которые использовались для адаптивности
+
+## [1.0.4] - 2019-09-30
+
+### Fixed
+
+- Исправлены ts типы
+
+## [1.0.3] - 2019-09-30
+
+### Changed
+
+- Нужные зависимости перенесены в `utils`, размер должен стать меньше
+
+## [1.0.0] - 2018-03-13
+
+### Added
+
+- Initial release

package/lib/cjs/Card.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = _interopRequireWildcard(require("@semcore/core"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _flexBox = require("@semcore/flex-box");
+
+var _typography = require("@semcore/typography");
+
+var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
+
+var _xs = _interopRequireDefault(require("@semcore/icon/lib/Info/xs"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/*__reshadow-styles__:"./style/card.shadow.css"*/
+var style = (
+/*__reshadow_css_start__*/
+_core.sstyled.insert(
+/*__inner_css_start__*/
+".___SCard_30o7x_gg_{border:1px solid #ccc;border-radius:2px;padding:20px 24px 24px}.___STitle_30o7x_gg_{font-size:19px;font-weight:500}.___SIcon_30o7x_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_30o7x_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
+/*__inner_css_end__*/
+, "3hx1s_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SCard": "___SCard_30o7x_gg_",
+  "__STitle": "___STitle_30o7x_gg_",
+  "__SIcon": "___SIcon_30o7x_gg_",
+  "__SDescription": "___SDescription_30o7x_gg_"
+});
+
+var Card = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Card, _Component);
+
+  var _super = _createSuper(Card);
+
+  function Card() {
+    (0, _classCallCheck2["default"])(this, Card);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(Card, [{
+    key: "render",
+    value: function render() {
+      var _ref = this ? this.asProps : arguments[0],
+          _ref4;
+
+      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))));
+    }
+  }]);
+  return Card;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(Card, "displayName", 'Card');
+(0, _defineProperty2["default"])(Card, "style", style);
+
+function Title(props) {
+  var _ref2 = this ? this.asProps : arguments[0],
+      _ref5;
+
+  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", {
+    "title": hint
+  }), /*#__PURE__*/_react["default"].createElement(SIcon, _ref5.cn("SIcon", {}))));
+}
+
+function Description(props) {
+  var _ref3 = this ? this.asProps : arguments[0],
+      _ref6;
+
+  var styles = props.styles;
+  var SDescription = _typography.Text;
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SDescription, _ref6.cn("SDescription", _objectSpread({}, (0, _core.assignProps)({
+    "tag": "p"
+  }, _ref3))));
+}
+
+var _default = (0, _core["default"])(Card, {
+  Title: Title,
+  Description: Description
+});
+
+exports["default"] = _default;
+//# sourceMappingURL=Card.js.map

package/lib/cjs/Card.js.map

@@ -0,0 +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,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,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} />);\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"}

package/lib/cjs/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Card["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];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,24 @@
+@import '@semcore/utils/style/var.css';
+
+SCard {
+  border: 1px solid var(--gray80);
+  border-radius: 2px;
+  padding: 20px 24px 24px;
+}
+
+STitle {
+  font-size: var(--fs-400);
+  font-weight: 500;
+}
+
+SIcon {
+  margin-left: 4px;
+  color: var(--stone);
+  cursor: help;
+}
+
+SDescription {
+  margin-bottom: 12px;
+  font-size: var(--fs-200);
+  color: var(--gray60);
+}

package/lib/es6/Card.js

@@ -0,0 +1,102 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps3 } from "@semcore/core";
+import { assignProps as _assignProps2 } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+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 Tooltip from '@semcore/tooltip';
+import InfoXS from '@semcore/icon/lib/Info/xs';
+
+/*__reshadow-styles__:"./style/card.shadow.css"*/
+var style = (
+/*__reshadow_css_start__*/
+_sstyled.insert(
+/*__inner_css_start__*/
+".___SCard_30o7x_gg_{border:1px solid #ccc;border-radius:2px;padding:20px 24px 24px}.___STitle_30o7x_gg_{font-size:19px;font-weight:500}.___SIcon_30o7x_gg_{margin-left:4px;color:#a6b0b3;cursor:help}.___SDescription_30o7x_gg_{margin-bottom:12px;font-size:14px;color:#757575}"
+/*__inner_css_end__*/
+, "3hx1s_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SCard": "___SCard_30o7x_gg_",
+  "__STitle": "___STitle_30o7x_gg_",
+  "__SIcon": "___SIcon_30o7x_gg_",
+  "__SDescription": "___SDescription_30o7x_gg_"
+});
+
+var Card = /*#__PURE__*/function (_Component) {
+  _inherits(Card, _Component);
+
+  var _super = _createSuper(Card);
+
+  function Card() {
+    _classCallCheck(this, Card);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Card, [{
+    key: "render",
+    value: function render() {
+      var _ref = this ? this.asProps : arguments[0],
+          _ref4;
+
+      var SCard = Box;
+      var styles = this.asProps.styles;
+      return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SCard, _ref4.cn("SCard", _objectSpread({}, _assignProps({}, _ref))));
+    }
+  }]);
+
+  return Card;
+}(Component);
+
+_defineProperty(Card, "displayName", 'Card');
+
+_defineProperty(Card, "style", style);
+
+function Title(props) {
+  var _ref2 = this ? this.asProps : arguments[0],
+      _ref5;
+
+  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", {
+    "title": hint
+  }), /*#__PURE__*/React.createElement(SIcon, _ref5.cn("SIcon", {}))));
+}
+
+function Description(props) {
+  var _ref3 = this ? this.asProps : arguments[0],
+      _ref6;
+
+  var styles = props.styles;
+  var SDescription = Text;
+  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SDescription, _ref6.cn("SDescription", _objectSpread({}, _assignProps3({
+    "tag": "p"
+  }, _ref3))));
+}
+
+export default createComponent(Card, {
+  Title: Title,
+  Description: Description
+});
+//# sourceMappingURL=Card.js.map

package/lib/es6/Card.js.map

@@ -0,0 +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,+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,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} />);\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"}

package/lib/es6/index.js

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

package/lib/es6/index.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,24 @@
+@import '@semcore/utils/style/var.css';
+
+SCard {
+  border: 1px solid var(--gray80);
+  border-radius: 2px;
+  padding: 20px 24px 24px;
+}
+
+STitle {
+  font-size: var(--fs-400);
+  font-weight: 500;
+}
+
+SIcon {
+  margin-left: 4px;
+  color: var(--stone);
+  cursor: help;
+}
+
+SDescription {
+  margin-bottom: 12px;
+  font-size: var(--fs-200);
+  color: var(--gray60);
+}

package/lib/types/Card.d.ts

@@ -0,0 +1,16 @@
+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/lib/types/index.d.ts

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

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@semcore/card",
+  "description": "SEMRush Card Component",
+  "version": "2.2.2",
+  "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",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@semcore/utils": "^3.15",
+    "@semcore/flex-box": "^4",
+    "@semcore/typography": "^3",
+    "@semcore/tooltip": "^4",
+    "@semcore/icon": "^2"
+  },
+  "peerDependencies": {
+    "@semcore/core": "^1.11",
+    "react": "16.8 - 17"
+  },
+  "jest": {
+    "preset": "jest-preset-ui"
+  }
+}

package/src/Card.tsx

@@ -0,0 +1,62 @@
+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} />);
+  }
+}
+
+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,
+});

package/src/index.tsx

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

package/src/style/card.shadow.css

@@ -0,0 +1,24 @@
+@import '@semcore/utils/style/var.css';
+
+SCard {
+  border: 1px solid var(--gray80);
+  border-radius: 2px;
+  padding: 20px 24px 24px;
+}
+
+STitle {
+  font-size: var(--fs-400);
+  font-weight: 500;
+}
+
+SIcon {
+  margin-left: 4px;
+  color: var(--stone);
+  cursor: help;
+}
+
+SDescription {
+  margin-bottom: 12px;
+  font-size: var(--fs-200);
+  color: var(--gray60);
+}