@zohodesk/components 1.0.0-temp-199.19 → 1.0.0-temp-245.1

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -55,8 +55,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -981,10 +979,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           autoComplete = _this$props9.autoComplete,
           getTargetRef = _this$props9.getTargetRef,
           isFocus = _this$props9.isFocus,
-          limit = _this$props9.limit,
-          customProps = _this$props9.customProps;
-      var _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          limit = _this$props9.limit;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
@@ -1150,7 +1145,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({}, SuggestionsProps, {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1165,7 +1160,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             limit: limit,
             limitReachedMessage: limitReachedMessage,
             dataId: "".concat(dataId, "_Options")
-          })));
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1171,9 +1171,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
-          limit = _this$props15.limit,
-          customProps = _this$props15.customProps;
+          limit = _this$props15.limit;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -247,19 +247,15 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props2.htmlId,
           a11y = _this$props2.a11y,
           getVirtualizerPublicMethods = _this$props2.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction,
-          customClass = _this$props2.customClass;
+          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
-      var _customClass$containe = customClass.containerClass,
-          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable,
-        className: containerClass
+        "aria-multiselectable": ariaMultiselectable
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''

package/lib/MultiSelect/props/defaultProps.js

@@ -46,7 +46,6 @@ var AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
@@ -185,7 +184,6 @@ exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
-  customClass: {},
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -133,8 +133,7 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
@@ -190,8 +189,7 @@ var SelectedOptions_propTypes = {
   limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
-
-var Suggestions_propTypes = _defineProperty({
+var Suggestions_propTypes = {
   a11y: _propTypes["default"].shape({
     ariaParentRole: _propTypes["default"].string,
     ariaMultiselectable: _propTypes["default"].bool
@@ -225,12 +223,8 @@ var Suggestions_propTypes = _defineProperty({
   })),
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
-  limitReachedMessage: _propTypes["default"].string,
-  customClass: _propTypes["default"].shape({
-    containerClass: _propTypes["default"].string
-  })
-}, "needMultiLineText", _propTypes["default"].bool);
-
+  limitReachedMessage: _propTypes["default"].string
+};
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
@@ -301,9 +295,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].shape({
-  SuggestionsProps: _propTypes["default"].object
-})), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/Provider/LibraryContext.js

@@ -46,6 +46,8 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
       shouldIndicateSwitchState = _ref.shouldIndicateSwitchState,
       shouldStrikeThroughDisabledButton = _ref.shouldStrikeThroughDisabledButton,
+      labelRequiredType = _ref.labelRequiredType,
+      shouldHighlightRequiredLabel = _ref.shouldHighlightRequiredLabel,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
@@ -54,7 +56,9 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
     coloredTagVariant: coloredTagVariant,
     hasTagColorInheritedToText: hasTagColorInheritedToText,
     shouldIndicateSwitchState: shouldIndicateSwitchState,
-    shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton
+    shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton,
+    labelRequiredType: labelRequiredType,
+    shouldHighlightRequiredLabel: shouldHighlightRequiredLabel
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
@@ -80,7 +84,9 @@ LibraryContextProvider.propTypes = {
   hasTagColorInheritedToText: _propTypes["default"].bool,
   direction: _propTypes["default"].string,
   shouldIndicateSwitchState: _propTypes["default"].bool,
-  shouldStrikeThroughDisabledButton: _propTypes["default"].bool
+  shouldStrikeThroughDisabledButton: _propTypes["default"].bool,
+  labelRequiredType: _propTypes["default"].oneOf(['asterisk', 'text']),
+  shouldHighlightRequiredLabel: _propTypes["default"].bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: (0, _Config.getLibraryConfig)('isReducedMotion'),
@@ -88,7 +94,9 @@ LibraryContextProvider.defaultProps = {
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
-  shouldStrikeThroughDisabledButton: false
+  shouldStrikeThroughDisabledButton: false,
+  labelRequiredType: 'asterisk',
+  shouldHighlightRequiredLabel: true
 };
 var _default = LibraryContextProvider;
 exports["default"] = _default;

package/lib/Select/GroupSelect.js

@@ -700,8 +700,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
-          _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,

package/lib/Select/SelectWithAvatar.js

@@ -221,8 +221,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          getTargetRef = _this$props.getTargetRef,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -245,8 +245,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       var ariaErrorId = this.getNextAriaId();
       var TextBoxProps = customProps.TextBoxProps,
           DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
-          _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),

package/lib/Select/SelectWithIcon.js

@@ -431,8 +431,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
           dataSelectorId = _this$props7.dataSelectorId,
-          customProps = _this$props7.customProps,
-          customClass = _this$props7.customClass;
+          customProps = _this$props7.customProps;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -450,10 +449,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
-      var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          ListItemProps = customProps.ListItemProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -546,10 +542,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           size: boxSize,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row",
-          customClass: {
-            customDropBox: dropBoxClass
-          }
+          alignBox: "row"
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader

package/lib/Select/props/defaultProps.js

@@ -91,8 +91,7 @@ var GroupSelect_defaultProps = {
   allowValueFallback: true
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
-
-var SelectWithAvatar_defaultProps = _defineProperty({
+var SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -118,8 +117,7 @@ var SelectWithAvatar_defaultProps = _defineProperty({
   customProps: {},
   needEffect: true,
   isLoading: false
-}, "customProps", {});
-
+};
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   isReadOnly: false,
@@ -130,5 +128,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -203,8 +203,7 @@ var GroupSelect_propTypes = {
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   allowValueFallback: _propTypes["default"].bool
 };
@@ -269,10 +268,7 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    SuggestionsProps: _propTypes["default"].object
-  })
+  dataSelectorId: _propTypes["default"].string
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -339,11 +335,7 @@ var SelectWithIcon_propTypes = {
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
-  }),
-  customClass: _propTypes["default"].shape({
-    dropBoxClass: _propTypes["default"].string
+    TextBoxIconProps: _propTypes["default"].object
   })
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp, 3);
+  -webkit-line-clamp: var(--line-clamp,2);
 }
 
 .offSelection {

package/lib/v1/Label/Label.js

@@ -3,49 +3,107 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Label;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
 var _propTypes = require("./props/propTypes");
 
-var _LabelModule = _interopRequireDefault(require("../../Label/Label.module.css"));
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _LabelColorsModule = _interopRequireDefault(require("../../Label/LabelColors.module.css"));
+var _utils = require("@zohodesk/utils");
+
+var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
+
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
+var _Label_v1Module = _interopRequireDefault(require("./css/Label_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function Label(props) {
-  var text = props.text,
-      type = props.type,
-      palette = props.palette,
-      size = props.size,
-      clipped = props.clipped,
-      htmlFor = props.htmlFor,
-      title = props.title,
+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); }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Label = function Label(props) {
+  var htmlFor = props.htmlFor,
       onClick = props.onClick,
-      dataId = props.dataId,
-      dataSelectorId = props.dataSelectorId,
-      variant = props.variant,
+      text = props.text,
+      customId = props.customId,
+      testId = props.testId,
+      tagAttributes = props.tagAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customProps = props.customProps,
+      isRequired = props.isRequired,
+      requiredType = props.requiredType,
+      isClipped = props.isClipped,
+      renderRightPlaceholderNode = props.renderRightPlaceholderNode,
+      renderLeftPlaceholderNode = props.renderLeftPlaceholderNode,
       customClass = props.customClass,
-      id = props.id,
-      _props$a11y = props.a11y,
-      a11y = _props$a11y === void 0 ? {} : _props$a11y;
-  var tabIndex = a11y.tabIndex;
-  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, " "),
-    htmlFor: htmlFor,
-    "data-title": title,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    onClick: onClick,
-    id: id,
-    tabIndex: tabIndex
-  }, text);
-}
-
-Label.defaultProps = _defaultProps.defaultProps;
+      size = props.size;
+  var tagAttributes_container = tagAttributes.container,
+      tagAttributes_label = tagAttributes.label;
+  var a11yAttributes_container = a11yAttributes.container,
+      a11yAttributes_label = a11yAttributes.label;
+  var customProps_container = customProps.container,
+      customProps_label = customProps.label;
+  var customClass_container = customClass.container;
+  var style = (0, _utils.mergeStyle)(_Label_v1Module["default"]);
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+    style: style
+  })),
+      labelClass = _cssJSLogic.labelClass,
+      requiredClass = _cssJSLogic.requiredClass,
+      asteriskClass = _cssJSLogic.asteriskClass;
+
+  var a11yAttributes_requiredText = {
+    'aria-hidden': 'true'
+  };
+
+  var renderRequired = function renderRequired() {
+    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_tagName: "span",
+      $ui_className: requiredClass,
+      $a11yAttributes_text: a11yAttributes_requiredText
+    }, requiredType === 'text' ? '(Required)' : requiredType === 'asterisk' ? '*' : null);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({}, customProps_container, {
+    $tagAttributes_container: _objectSpread({
+      'data-selector-id': customId
+    }, tagAttributes_container),
+    $ui_displayMode: "inline",
+    $ui_alignItems: "center",
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    $ui_className: customClass_container
+  }), (0, _utils.isRenderable)(renderRightPlaceholderNode) ? (0, _utils.renderNode)(renderRightPlaceholderNode) : null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, customProps_label, {
+    $tagAttributes_text: _objectSpread({
+      htmlFor: htmlFor,
+      onClick: onClick
+    }, tagAttributes_label),
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $a11yAttributes_text: a11yAttributes_label,
+    $ui_size: style[size]
+  }), text, isRequired ? !isClipped && renderRequired() : null), isRequired ? isClipped && renderRequired() : null, (0, _utils.isRenderable)(renderLeftPlaceholderNode) ? (0, _utils.renderNode)(renderLeftPlaceholderNode) : null);
+};
+
+var _default = (0, _ComponentRegistry.withComponentRegistrar)(Label, {
+  name: 'ZDC_v1_Label'
+});
+
+exports["default"] = _default;
+Label.defaultProps = _defaultProps["default"];
 Label.propTypes = _propTypes.propTypes;

package/lib/v1/Label/css/Label_v1.module.css

@@ -0,0 +1,58 @@
+:root {
+    --label_text_color: var(--zdt_v1_label_text);
+    --label_required_color: var(--zdt_v1_label_required_text);
+    --label_disabled_color: var(--zdt_v1_label_disabled_text);
+}
+.label {
+    font-size: var(--zd_font_size14) ;
+    color: var(--label_text_color);
+    cursor: pointer;
+}
+
+.dotted {
+    composes: dotted from '../../../common/common.module.css';
+    max-width: 100% ;
+}
+
+.required {
+    color: var(--label_required_color);
+}
+
+/* .asterisk{
+    height: 16px;
+} */
+.asterisk:after {
+    content: "*";
+    color: var(--label_required_color);
+}
+[dir=ltr] .asterisk:after {
+    margin-left: var(--zd_size2) ;
+}
+[dir=rtl] .asterisk:after {
+    margin-right: var(--zd_size2) ;
+}
+
+.requiredTxt {
+    color: var(--label_required_color);
+    font-size: var(--zd_font_size14) ;
+}
+
+[dir=ltr] .requiredTxt {
+    margin-left: var(--zd_size5) ;
+}
+
+[dir=rtl] .requiredTxt {
+    margin-right: var(--zd_size5) ;
+}
+
+.disabled {
+    color: var(--label_disabled_color);
+}
+
+.medium{
+    font-size: var(--zd_font_size14) ;
+}
+
+.small{
+    font-size: var(--zd_font_size13) ;
+}

package/lib/v1/Label/css/cssJSLogic.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _compileClassNames4 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+
+var _excluded = ["style"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function cssJSLogic(_ref) {
+  var _compileClassNames;
+
+  var style = _ref.style,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var isClipped = props.isClipped,
+      shouldHighlightRequired = props.shouldHighlightRequired,
+      isRequired = props.isRequired,
+      isDisabled = props.isDisabled,
+      customClass = props.customClass;
+  var customClass_label = customClass.label;
+  var labelClass = (0, _compileClassNames4["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, style.label, true), _defineProperty(_compileClassNames, style.dotted, isClipped), _defineProperty(_compileClassNames, style.required, isRequired && shouldHighlightRequired), _defineProperty(_compileClassNames, style.disabled, isDisabled && !isRequired), _defineProperty(_compileClassNames, customClass_label, !!customClass_label), _compileClassNames));
+  var requiredClass = (0, _compileClassNames4["default"])(_defineProperty({}, style.requiredTxt, true));
+  var asteriskClass = (0, _compileClassNames4["default"])(_defineProperty({}, style.asterisk, true));
+  return {
+    labelClass: labelClass,
+    requiredClass: requiredClass,
+    asteriskClass: asteriskClass
+  };
+}

package/lib/v1/Label/props/defaultProps.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultProps = void 0;
-var defaultProps = {
-  clipped: false,
-  dataId: 'label',
-  palette: 'default',
-  size: 'medium',
-  text: 'Label',
-  type: 'title',
-  variant: 'default',
-  customClass: '',
-  dataSelectorId: 'label'
+exports["default"] = void 0;
+var _default = {
+  customProps: {},
+  tagAttributes: {},
+  a11yAttributes: {},
+  customClass: {},
+  shouldHighlightRequired: true,
+  isDisabled: false,
+  isClipped: false,
+  requiredType: 'asterisk',
+  size: 'medium'
 };
-exports.defaultProps = defaultProps;
+exports["default"] = _default;