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

package/es/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/es/Text/props/defaultProps.js

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  tagName: 'div',
+  a11y: {},
+  className: '',
+  customProps: {},
+  size: 'inherit'
+};

package/es/Text/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  title: PropTypes.string,
+  a11y: PropTypes.object,
+  children: PropTypes.node,
+  customProps: PropTypes.object,
+  size: PropTypes.oneOf(['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '30', '50', 'inherit'])
+};

package/es/Typography/Typography.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Typography.module.css';
+export default class Typography extends React.Component {
+  render() {
+    let {
+      tagName,
+      className,
+      dataTitle,
+      dataId,
+      a11y,
+      children,
+      customProps,
+      size,
+      needReset
+    } = this.props;
+    return /*#__PURE__*/React.createElement(tagName, {
+      className: `${needReset ? style.reset : ''} ${style[`size${size}`]} ${className}`,
+      'data-title': dataTitle,
+      'data-id': dataId,
+      ...customProps,
+      ...a11y
+    }, children);
+  }
+}
+Typography.propTypes = propTypes;
+Typography.defaultProps = defaultProps;

package/es/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;
+}

package/es/Typography/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  tagName: 'div',
+  a11y: {},
+  className: '',
+  customProps: {},
+  size: 'inherit',
+  needReset: true
+};

package/es/Typography/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  tagName: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  a11y: PropTypes.object,
+  children: PropTypes.node,
+  customProps: PropTypes.object,
+  needReset: PropTypes.bool,
+  size: PropTypes.oneOf(['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '30', '50', 'inherit'])
+};

package/es/index.js

@@ -38,4 +38,6 @@ export { default as Tooltip } from './Tooltip/Tooltip';
 import * as _utils from './utils';
 export { _utils as utils };
 export * from './VelocityAnimation';
-export * from './semantic';
+export * from './semantic';
+export { default as Text } from './Text/Text';
+export { default as Typography } from './Typography/Typography';

package/es/utils/css/mergeStyle.js

@@ -47,7 +47,7 @@ export default function mergeStyle(defaultStyle) {
       res[next] = customStyle[next];
     } else if (!defaultStyle[next] && !additionalStyle.includes(next)) {
       // res[next] = customStyle[next];
-      `UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${next}" is not available in that component style`;
+      throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${next}" is not available in that component style`);
     }
     return res;
   }, {

package/es/utils/datetime/common.js

@@ -1,4 +1,3 @@
-import { offsetMap } from './GMTZones.js';
 let dateFormat = {
   dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
   monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -11,15 +10,8 @@ export function pad(n) {
   n = `${n}`;
   return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
 }
-export function getTimeOffset() {
-  const GMT = new Date();
-  const matchingOffset = Object.keys(offsetMap).find(offset => GMT.getTimezoneOffset() === Number(offset));
-  return matchingOffset ? offsetMap[matchingOffset].toString().split(' ') : ['', ''];
-}
 export function formatDate(dateMill, mask) {
   let date = new Date(dateMill);
-  let O = getTimeOffset()[0];
-  let Z = getTimeOffset()[1];
   let d = date.getDate();
   let D = date.getDay();
   let m = date.getMonth();
@@ -30,7 +22,6 @@ export function formatDate(dateMill, mask) {
   let L = date.getMilliseconds();
   let flags = {
     d: d,
-    O: O,
     dd: pad(d, 2),
     ddd: dateFormat.dayNames[D],
     dddd: dateFormat.dayNames[D + 7],
@@ -58,13 +49,9 @@ export function formatDate(dateMill, mask) {
     L: pad(Math.round(L / 10)),
     t: H < 12 ? dateFormat.timeNames[0] : dateFormat.timeNames[1],
     A: H < 12 ? dateFormat.timeNames[6] : dateFormat.timeNames[7],
-    a: H < 12 ? dateFormat.timeNames[6] : dateFormat.timeNames[7],
-    T: H < 12 ? dateFormat.timeNames[4] : dateFormat.timeNames[5],
-    Z: Z,
-    VV: Z,
-    SSS: pad(L, 3)
+    T: H < 12 ? dateFormat.timeNames[4] : dateFormat.timeNames[5]
   };
-  let token = /D{1,4}|d{1,4}|M{1,4}|YYYY|yyyy|YY|O|Z|VV|SSS|yy?|([HhmsAa])\1?|[LloSZWN]|\[[^\]]*\]|'[^']*'/g;
+  let token = /D{1,4}|d{1,4}|M{1,4}|YYYY|yyyy|YY|yy?|([HhmsA])\1?|[LloSZWN]|\[[^\]]*\]|'[^']*'/g;
   let dat = mask.replace(token, match => {
     if (match in flags) {
       return flags[match];

package/lib/Avatar/Avatar.js

@@ -10,6 +10,7 @@ var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
 var _getInitial = require("../utils/getInitial");
 var _AvatarSize = _interopRequireDefault(require("../Provider/AvatarSize"));
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _AvatarModule = _interopRequireDefault(require("./Avatar.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); }
@@ -176,10 +177,13 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         "data-id": dataId,
         onClick: onClick,
         "data-selector-id": dataSelectorId
-      }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
+      }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: "".concat(_AvatarModule["default"].initial),
-        "data-id": "".concat(dataId, "_AvatarInitial"),
-        "data-selector-id": "".concat(dataSelectorId, "_AvatarInitial")
+        dataId: "".concat(dataId, "_AvatarInitial"),
+        customProps: {
+          'data-selector-id': "".concat(dataSelectorId, "_AvatarInitial")
+        },
+        tagName: "span"
       }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
         className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),

package/lib/DateTime/CalendarView.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("./props/propTypes");
 var _defaultProps = require("./props/defaultProps");
 var _Layout = require("../Layout");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 var _common = require("../utils/datetime/common");
 var _DaysRow = _interopRequireDefault(require("./DaysRow"));
@@ -234,7 +235,9 @@ var Span = /*#__PURE__*/function (_React$PureComponent2) {
         key: i,
         onClick: this.handleSelectChild,
         "aria-label": incremday
-      }, incremday);
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        size: "13"
+      }, incremday));
     }
   }]);
   return Span;

package/lib/DateTime/DateTime.js

@@ -194,8 +194,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         timeZone = _this$props2.timeZone,
         isDateTimeField = _this$props2.isDateTimeField,
         dateFormat = _this$props2.dateFormat,
-        is24Hour = _this$props2.is24Hour,
-        customDateFormat = _this$props2.customDateFormat;
+        is24Hour = _this$props2.is24Hour;
       var year = selectedInfo.year,
         month = selectedInfo.month,
         date = selectedInfo.date,
@@ -217,13 +216,10 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         selectedInMillis,
         selectedValue = '',
         formattedValue;
-      var currentDate = new Date();
-      var sec = currentDate.getSeconds();
-      var milliSec = currentDate.getMilliseconds();
-      if (isDateTimeField || customDateFormat) {
-        selectedInMillis = _datetimejs["default"].tz.tzToUtc(Date.UTC(year, month, date, hours, mins, sec, milliSec), timeZone);
+      if (isDateTimeField) {
+        selectedInMillis = _datetimejs["default"].tz.tzToUtc(Date.UTC(year, month, date, hours, mins), timeZone);
         selectedValue = _datetimejs["default"].ISO(selectedInMillis);
-        formattedValue = (0, _common.formatDate)(new Date(year, month, date, hours, mins, sec, milliSec), customDateFormat == null ? is24Hour ? "".concat(dateFormat, " HH:mm:ss") : "".concat(dateFormat, " hh:mm:ss A") : "".concat(customDateFormat));
+        formattedValue = (0, _common.formatDate)(new Date(year, month, date, hours, mins), is24Hour ? "".concat(dateFormat, " HH:mm") : "".concat(dateFormat, " hh:mm A"));
       } else {
         selectedInMillis = Date.UTC(year, month, date);
         selectedValue = (0, _common.formatDate)(new Date(year, month, date), 'YYYY-MM-DD');

package/lib/DateTime/DateTime.module.css

@@ -44,13 +44,15 @@
 
 .thArrow,
 .datesStr {
-  font-size: 13px;
   color: var(--zdt_datetime_datestr_text);
 }
 
 .thArrow, .datesStr {
   cursor: pointer;
 }
+.thArrow{
+   font-size: var(--zd_font_size13);
+}
 
 .thArrow:hover,
 .datesStr:hover {
@@ -94,7 +96,6 @@
 }
 
 .daysStr {
-  font-size: 10px;
   color: var(--zdt_datetime_daystr_text);
   text-transform: uppercase;
   composes: semibold;
@@ -201,7 +202,6 @@
 
 .text {
   composes: boxPadding;
-  font-size: 11px;
   text-transform: uppercase;
   color: var(--zdt_datetime_text);
   composes: semibold;
@@ -233,4 +233,4 @@
   border-radius: 3px;
   box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
-}
+}

package/lib/DateTime/DateTimePopupHeader.js

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Layout = require("../Layout");
 var _icons = require("@zohodesk/icons");
-var _Heading = _interopRequireDefault(require("../Heading/Heading"));
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
@@ -90,14 +90,11 @@ var DateTimePopupHeader = /*#__PURE__*/function (_PureComponent) {
         className: _DateTimeModule["default"].dateText,
         dataId: "selectYear",
         onClick: onOpenYearView
-      }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: _DateTimeModule["default"].thMonYear,
-        title: showMonthTxt,
         tagName: "h2",
-        a11y: {
-          tabindex: '0'
-        }
-      }), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        size: "13"
+      }, showMonthTxt), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-GN-dropdown",
         size: "12",
         iconClass: _DateTimeModule["default"].downArrow

package/lib/DateTime/DaysRow.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 var _Layout = require("../Layout");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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; }
@@ -43,10 +44,12 @@ var DaysRow = /*#__PURE__*/function (_PureComponent) {
       }, dayNames.map(function (dayName, index) {
         return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           key: dayName,
-          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(index === 0 ? _DateTimeModule["default"].sunday : ''),
           "data-title": dayName,
           "aria-label": dayName
-        }, dayNamesShort[index]);
+        }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+          className: "".concat(_DateTimeModule["default"].daysStr, " ").concat(_DateTimeModule["default"].grid, " ").concat(index === 0 ? _DateTimeModule["default"].sunday : ''),
+          size: "10"
+        }, " ", dayNamesShort[index]));
       }));
     }
   }]);

package/lib/DateTime/Time.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Layout = require("../Layout");
 var _Select = _interopRequireDefault(require("../Select/Select"));
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _DateTimeModule = _interopRequireDefault(require("./DateTime.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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); }
@@ -50,8 +51,10 @@ var Time = /*#__PURE__*/function (_PureComponent) {
         onAmPmSelect = _this$props.onAmPmSelect,
         amPm = _this$props.amPm,
         is24Hour = _this$props.is24Hour;
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-        className: _DateTimeModule["default"].text
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: _DateTimeModule["default"].text,
+        tagName: "span",
+        size: "11"
       }, timeText), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "vertical",

package/lib/DateTime/YearView.js

@@ -11,7 +11,7 @@ var _defaultProps = require("./props/defaultProps");
 var _virtualizer = require("@zohodesk/virtualizer");
 var _Layout = require("../Layout");
 var _icons = require("@zohodesk/icons");
-var _Heading = _interopRequireDefault(require("../Heading/Heading"));
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _YearViewModule = _interopRequireDefault(require("./YearView.module.css"));
 var _dateFormatUtils = require("./dateFormatUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -72,14 +72,12 @@ var Year = /*#__PURE__*/function (_React$PureComponent) {
         align: "vertical"
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: _YearViewModule["default"].yearText,
-        title: year,
-        a11y: {
-          tabindex: '0'
-        },
-        tagName: "h4"
-      })), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+        tagName: "h2",
+        size: "11",
+        dataTitle: year
+      }, year)), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-arrowDownSingle",
         size: "7",
         isBold: true,
@@ -123,7 +121,9 @@ var Month = /*#__PURE__*/function (_React$PureComponent2) {
         onClick: this.handleClick,
         "data-title": hoverText,
         "aria-label": month
-      }, displayText);
+      }, /*#__PURE__*/_react["default"].createElement(Typo, {
+        size: "12"
+      }, displayText));
     }
   }]);
   return Month;

package/lib/DateTime/YearView.module.css

@@ -8,7 +8,6 @@
 
 .month {
   width: 30.333%;
-  font-size: 12px;
   line-height: var(--zd_size26);
   height: 26px;
   color: var(--zdt_yearview_month_text);
@@ -48,7 +47,6 @@
 
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
-  font-size: 11px;
 }
 
 .arrow {
@@ -63,7 +61,6 @@
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
-  font-size: 11px;
 }
 
 .arrowActive {
@@ -96,4 +93,4 @@
 .toggleYear {
   height: 0;
   padding: 0;
-}
+}

package/lib/DateTime/props/defaultProps.js

@@ -27,8 +27,7 @@ var DateTime_defaultProps = {
   isPadding: false,
   i18nKeys: {},
   is24Hour: false,
-  isDefaultPosition: false,
-  customDateFormat: null
+  isDefaultPosition: false
 };
 exports.DateTime_defaultProps = DateTime_defaultProps;
 var DateWidget_defaultProps = {

package/lib/Heading/Heading.js

@@ -38,19 +38,18 @@ var Heading = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         tagName = _this$props.tagName,
         className = _this$props.className,
-        onClick = _this$props.onClick,
-        onDoubleClick = _this$props.onDoubleClick,
         title = _this$props.title,
         dataTitle = _this$props.dataTitle,
         dataId = _this$props.dataId,
-        a11y = _this$props.a11y;
-      return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread({
-        className: "".concat(_HeadingModule["default"].reset, " ").concat(className),
-        onClick: onClick,
-        onDoubleClick: onDoubleClick,
+        a11y = _this$props.a11y,
+        customProps = _this$props.customProps,
+        size = _this$props.size,
+        children = _this$props.children;
+      return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread(_objectSpread({
+        className: "".concat(_HeadingModule["default"].reset, " ").concat(_HeadingModule["default"]["size".concat(size)], "  ").concat(className),
         'data-title': dataTitle || title,
         'data-id': dataId
-      }, a11y), title);
+      }, customProps), a11y), title, children);
     }
   }]);
   return Heading;

package/lib/Heading/Heading.module.css

@@ -2,4 +2,71 @@
   font-size: initial;
   font-weight: initial;
   margin: 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/Heading/props/defaultProps.js

@@ -7,6 +7,8 @@ exports.defaultProps = void 0;
 var defaultProps = {
   tagName: 'h1',
   a11y: {},
-  className: ''
+  className: '',
+  customProps: {},
+  size: 'inherit'
 };
 exports.defaultProps = defaultProps;