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

package/es/Text/Text.js

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

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/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.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/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;

package/lib/Heading/props/propTypes.js

@@ -12,8 +12,9 @@ var propTypes = {
   title: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   dataTitle: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  onDoubleClick: _propTypes["default"].func,
-  a11y: _propTypes["default"].object
+  customProps: _propTypes["default"].object,
+  children: _propTypes["default"].node,
+  a11y: _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/Label/Label.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Typography = _interopRequireDefault(require("../Typography/Typography"));
 var _LabelModule = _interopRequireDefault(require("./Label.module.css"));
 var _LabelColorsModule = _interopRequireDefault(require("./LabelColors.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -48,14 +49,16 @@ var Label = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props.customClass,
         id = _this$props.id;
       return /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
+        className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n           ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(customClass, " "),
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,
         "data-selector-id": dataSelectorId,
         onClick: onClick,
         id: id
-      }, text);
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: "".concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(_LabelModule["default"][size])
+      }, text));
     }
   }]);
   return Label;