@zohodesk/components 1.0.0-temp-161 → 1.0.0-temp-162

package/lib/ListItem/ListItem.js

@@ -10,6 +10,7 @@ var _Layout = require("../Layout");
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _icons = require("@zohodesk/icons");
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -129,9 +130,12 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         customProps: ListItemProps
       }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
-        adjust: true,
-        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        adjust: true
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
+        size: "13",
+        dataTitle: value
+      }, value)) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         shrink: true,
         adjust: true,
         className: _ListItemModule["default"].children

package/lib/ListItem/ListItem.module.css

@@ -25,7 +25,6 @@
   position: relative;
   list-style: none;
   color: var(--listitem_text_color);
-  font-size: 13px;
   height: var(--listitem_height);
   min-height: var(--listitem_min_height);
   text-decoration: none;

package/lib/ListItem/ListItemWithAvatar.js

@@ -13,6 +13,7 @@ var _propTypes = require("./props/propTypes");
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
 var _icons = require("@zohodesk/icons");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -155,9 +156,12 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
-        "data-title": isDisabled ? null : title,
-        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : title
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
+        size: "13",
+        dataTitle: value
+      }, value)) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),

package/lib/ListItem/ListItemWithCheckBox.js

@@ -11,6 +11,7 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _CheckBox = _interopRequireDefault(require("../CheckBox/CheckBox"));
 var _Layout = require("../Layout");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -128,9 +129,12 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
-        "data-title": isDisabled ? null : title,
-        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value));
+        "data-title": isDisabled ? null : title
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
+        size: "13",
+        dataTitle: value
+      }, value)));
     }
   }]);
   return ListItemWithCheckBox;

package/lib/ListItem/ListItemWithIcon.js

@@ -11,6 +11,7 @@ var _icons = require("@zohodesk/icons");
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -137,10 +138,13 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }) : null, value && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
-        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
-      }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
+        size: "13",
+        dataTitle: value
+      }, value)), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),

package/lib/ListItem/ListItemWithRadio.js

@@ -11,6 +11,7 @@ var _Layout = require("../Layout");
 var _ListContainer = _interopRequireDefault(require("./ListContainer"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -130,9 +131,12 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,
-        "data-title": disableTitle ? null : title,
-        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
-      }, value));
+        "data-title": disableTitle ? null : title
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value,
+        size: "13",
+        dataTitle: value
+      }, value)));
     }
   }]);
   return ListItemWithRadio;

package/lib/Responsive/ResizeComponent.js

@@ -34,22 +34,9 @@ var ResizeComponent = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.noSpaceForChildren = false;
     _this.childrenCurrentList = [];
-    _this.widthCheck = debounce(_this.widthCheck.bind(_assertThisInitialized(_this)), 10);
-    var debounce = function debounce(cb) {
-      var timer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-      var timeoutId = null;
-      return function () {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(function () {
-          cb();
-        }, timer);
-      };
-    };
-    _this.widthCheck = debounce(_this.widthCheck.bind(_assertThisInitialized(_this)), 500); // this.widthCheck = this.widthCheck.bind(this);
-
-    _this.onResize = debounce(_this.onResize.bind(_assertThisInitialized(_this)), 500);
+    _this.widthCheck = (0, _Common.debounce)(_this.widthCheck.bind(_assertThisInitialized(_this)), 10);
+    // this.widthCheck = this.widthCheck.bind(this);
+    _this.onResize = _this.onResize.bind(_assertThisInitialized(_this));
     _this.onResizeMutation = _this.onResizeMutation.bind(_assertThisInitialized(_this));
     _this.tabsObserver = new _ResizeObserver["default"](_this.onResize);
     _this.tabObserver = new MutationObserver(_this.onResizeMutation);

package/lib/Tab/Tab.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _Layout = require("../Layout");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _Common = require("../utils/Common");
 var _TabModule = _interopRequireDefault(require("./Tab.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -102,9 +103,10 @@ function Tab(_ref) {
     className: _TabModule["default"].textContainer
   }, text && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
-    adjust: true,
+    adjust: true
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
     className: _TabModule["default"].tabText
-  }, text), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+  }, text)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     shrink: true
   }, children) : null));
 }

package/lib/Tab/Tabs.js

@@ -51,19 +51,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       tabKeys: []
     };
     _Common.bind.apply(_assertThisInitialized(_this), ['moreTabSelect', 'onResize', 'onTabResize', 'getHighlightRef', 'getTabsRef', 'getTabRef', 'getHighlightDim', 'onSizeChange', 'onScroll', 'togglePopup', 'setMaxDim']);
-    var debounce = function debounce(cb) {
-      var timer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
-      var timeoutId = null;
-      return function () {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(function () {
-          cb();
-        }, timer);
-      };
-    };
-    _this.tabsObserver = new _ResizeObserver["default"](debounce(_this.onResize));
+    _this.tabsObserver = new _ResizeObserver["default"](_this.onResize);
     _this.tabObserver = {};
     return _this;
   }
@@ -255,15 +243,16 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onResize",
     value: function onResize(timer) {
+      var _this6 = this;
       var isResponsive = this.props.isResponsive;
       if (this.tabsEle && isResponsive) {
-        // if (!timer) {
-        //   this.onSizeChange();
-        // } else {
-        //   setTimeout(() => {
-        this.onSizeChange();
-        // }, timer);
-        // }
+        if (!timer) {
+          this.onSizeChange();
+        } else {
+          setTimeout(function () {
+            _this6.onSizeChange();
+          }, timer);
+        }
       }
     }
   }, {
@@ -276,14 +265,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getTabDimensions",
     value: function getTabDimensions() {
-      var _this6 = this;
+      var _this7 = this;
       var _this$props4 = this.props,
         children = _this$props4.children,
         align = _this$props4.align,
         childType = _this$props4.childType;
       var tabDimensions = {};
       _react["default"].Children.forEach(children, function (child) {
-        return /*#__PURE__*/_react["default"].isValidElement(child) && child.type === childType && _this6[child.props.id] && Object.assign(tabDimensions, _defineProperty({}, child.props.id, _this6[child.props.id] && (0, _Common.getTotalDimension)(_this6[child.props.id], align)));
+        return /*#__PURE__*/_react["default"].isValidElement(child) && child.type === childType && _this7[child.props.id] && Object.assign(tabDimensions, _defineProperty({}, child.props.id, _this7[child.props.id] && (0, _Common.getTotalDimension)(_this7[child.props.id], align)));
       });
       return tabDimensions;
     }
@@ -417,7 +406,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderTabs",
     value: function renderTabs(mainTabs, moreTabs, isVirtual) {
-      var _this7 = this;
+      var _this8 = this;
       var _this$props8 = this.props,
         selectedTab = _this$props8.selectedTab,
         moreButtonClass = _this$props8.moreButtonClass,
@@ -465,9 +454,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }
         return /*#__PURE__*/_react["default"].isValidElement(child) && /*#__PURE__*/_react["default"].createElement(MainTab, _extends({}, child.props, {
           key: child.props.id,
-          getTabRef: _this7.getTabRef,
+          getTabRef: _this8.getTabRef,
           onSelect: onSelect,
-          recalculateDimension: _this7.recalculateDimension,
+          recalculateDimension: _this8.recalculateDimension,
           isActive: child.props.id === selectedTab,
           type: type,
           isAnimate: isAnimate,
@@ -511,13 +500,13 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
         }, DropBoxProps, {
           isResponsivePadding: true,
           needFocusScope: true,
-          onClose: _this7.togglePopup
-        }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this7.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          onClose: _this8.togglePopup
+        }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(_this8.props), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,
           scroll: "vertical",
           className: "".concat(tabletMode ? '' : _TabsModule["default"].menuBox, " ").concat(moreBoxClass),
-          onScroll: _this7.onScroll
+          onScroll: _this8.onScroll
         }, _react["default"].Children.map(moreTabs, function (child) {
           if (!child) {
             return null;
@@ -534,7 +523,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react["default"].isValidElement(child) && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: id,
             value: value,
-            onClick: _this7.moreTabSelect,
+            onClick: _this8.moreTabSelect,
             id: id,
             title: title || text,
             isLink: isLink,

package/lib/Tab/Tabs.module.css

@@ -122,6 +122,12 @@
 }
 
 
+.bottomRightToLeft,
+.topRightToLeft,
+.bottomCenterToLeft {
+}
+
+
 [dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
@@ -131,6 +137,11 @@
   left: calc(var(--tab_position_gap) * -1);
 }
 
+.bottomLeftToRight,
+.topLeftToRight,
+.bottomCenterToRight {
+}
+
 [dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
   left: calc(var(--tab_position_gap) * -1);
 }

package/lib/Tag/Tag.js

@@ -12,6 +12,7 @@ var _icons = require("@zohodesk/icons");
 var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _Layout = require("../Layout");
 var _Button = _interopRequireDefault(require("../semantic/Button/Button"));
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _IdProvider = require("../Provider/IdProvider");
 var _TagModule = _interopRequireDefault(require("./Tag.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -147,10 +148,14 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
         size: iconSize
-      })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+      })) : null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: "".concat(_TagModule["default"].text, " ").concat(textSizes),
-        "aria-hidden": true,
-        id: getAriaId
+        a11y: {
+          'aria-hidden': true
+        },
+        customProps: {
+          id: getAriaId
+        }
       }, text), onRemove && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         customClass: "".concat(_TagModule["default"].close, " ").concat(active ? _TagModule["default"]["active".concat(closePalette, "Close")] : '', "\n            ").concat(rounded ? _TagModule["default"].lgRadiusClose : _TagModule["default"].smRadiusClose, " ").concat(isDarkPalette ? _TagModule["default"].darkTagClose : '', "\n            ").concat(customTagClose, " ").concat(_TagModule["default"]["close".concat(closePalette)]),
         dataId: "".concat(dataId, "_RemoveTag"),

package/lib/Text/Text.js

@@ -0,0 +1,58 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _defaultProps = require("./props/defaultProps");
+var _propTypes = require("./props/propTypes");
+var _TextModule = _interopRequireDefault(require("./Text.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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) { _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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var Text = /*#__PURE__*/function (_React$Component) {
+  _inherits(Text, _React$Component);
+  var _super = _createSuper(Text);
+  function Text() {
+    _classCallCheck(this, Text);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Text, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        tagName = _this$props.tagName,
+        className = _this$props.className,
+        dataTitle = _this$props.dataTitle,
+        dataId = _this$props.dataId,
+        a11y = _this$props.a11y,
+        children = _this$props.children,
+        customProps = _this$props.customProps,
+        size = _this$props.size;
+      return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread(_objectSpread({
+        className: "".concat(_TextModule["default"]["size".concat(size)], " ").concat(className),
+        'data-title': dataTitle,
+        'data-id': dataId
+      }, customProps), a11y), children);
+    }
+  }]);
+  return Text;
+}(_react["default"].Component);
+exports["default"] = Text;
+Text.propTypes = _propTypes.propTypes;
+Text.defaultProps = _defaultProps.defaultProps;

package/lib/Text/Text.module.css

@@ -0,0 +1,72 @@
+.reset {
+  font-weight: initial;
+  margin: initial;
+  padding: initial;
+}
+
+.size8{
+  font-size: 8px;
+}
+.size9{
+  font-size: 9px;
+}
+.size10{
+  font-size: 10px;
+}
+.size11{
+  font-size: 11px;
+}
+.size12{
+  font-size: 12px;
+}
+.size13{
+  font-size: 13px;
+}
+.size14{
+  font-size: 14px;
+}
+.size15{
+  font-size: 15px;
+}
+.size16{
+  font-size: 16px;
+}
+.size17{
+  font-size: 17px;
+}
+.size18{
+  font-size: 18px;
+}
+.size19{
+  font-size: 19px;
+}
+.size20{
+  font-size: 20px;
+}
+.size21{
+  font-size: 21px;
+}
+.size22{
+  font-size: 22px;
+}
+.size23{
+  font-size: 23px;
+}
+.size24{
+  font-size: 24px;
+}
+.size25{
+  font-size: 25px;
+}
+.size26{
+  font-size: 26px;
+}
+.size30{
+  font-size: 30px;
+}
+.size50{
+  font-size: 50px;
+}
+.sizeinherit{
+  font-size: inherit;
+}

package/lib/Text/props/defaultProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  tagName: 'div',
+  a11y: {},
+  className: '',
+  customProps: {},
+  size: 'inherit'
+};
+exports.defaultProps = defaultProps;

package/lib/Text/props/propTypes.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var propTypes = {
+  tagName: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  dataTitle: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  a11y: _propTypes["default"].object,
+  children: _propTypes["default"].node,
+  customProps: _propTypes["default"].object,
+  size: _propTypes["default"].oneOf(['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '30', '50', 'inherit'])
+};
+exports.propTypes = propTypes;

package/lib/Typography/Typography.js

@@ -0,0 +1,59 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _defaultProps = require("./props/defaultProps");
+var _propTypes = require("./props/propTypes");
+var _TypographyModule = _interopRequireDefault(require("./Typography.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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) { _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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+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; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var Typography = /*#__PURE__*/function (_React$Component) {
+  _inherits(Typography, _React$Component);
+  var _super = _createSuper(Typography);
+  function Typography() {
+    _classCallCheck(this, Typography);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Typography, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        tagName = _this$props.tagName,
+        className = _this$props.className,
+        dataTitle = _this$props.dataTitle,
+        dataId = _this$props.dataId,
+        a11y = _this$props.a11y,
+        children = _this$props.children,
+        customProps = _this$props.customProps,
+        size = _this$props.size,
+        needReset = _this$props.needReset;
+      return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread(_objectSpread({
+        className: "".concat(needReset ? _TypographyModule["default"].reset : '', " ").concat(_TypographyModule["default"]["size".concat(size)], " ").concat(className),
+        'data-title': dataTitle,
+        'data-id': dataId
+      }, customProps), a11y), children);
+    }
+  }]);
+  return Typography;
+}(_react["default"].Component);
+exports["default"] = Typography;
+Typography.propTypes = _propTypes.propTypes;
+Typography.defaultProps = _defaultProps.defaultProps;

package/lib/Typography/Typography.module.css

@@ -0,0 +1,72 @@
+.reset {
+  font-weight: initial;
+  margin: initial;
+  padding: initial;
+}
+
+.size8{
+  font-size: 8px;
+}
+.size9{
+  font-size: 9px;
+}
+.size10{
+  font-size: 10px;
+}
+.size11{
+  font-size: 11px;
+}
+.size12{
+  font-size: 12px;
+}
+.size13{
+  font-size: 13px;
+}
+.size14{
+  font-size: 14px;
+}
+.size15{
+  font-size: 15px;
+}
+.size16{
+  font-size: 16px;
+}
+.size17{
+  font-size: 17px;
+}
+.size18{
+  font-size: 18px;
+}
+.size19{
+  font-size: 19px;
+}
+.size20{
+  font-size: 20px;
+}
+.size21{
+  font-size: 21px;
+}
+.size22{
+  font-size: 22px;
+}
+.size23{
+  font-size: 23px;
+}
+.size24{
+  font-size: 24px;
+}
+.size25{
+  font-size: 25px;
+}
+.size26{
+  font-size: 26px;
+}
+.size30{
+  font-size: 30px;
+}
+.size50{
+  font-size: 50px;
+}
+.sizeinherit{
+  font-size: inherit;
+}