@zohodesk/dot 1.0.0-beta.205 → 1.0.0-beta.208

package/lib/Provider.js

@@ -21,73 +21,73 @@ var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
 var _i18n2 = _interopRequireDefault(require("./i18n"));
 
-require("@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/default/mode/defaultMode.module.css");
+require("@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
 
-require("@zohodesk/components/lib/Appearance/dark/mode/darkMode.module.css");
+require("@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/default/mode/defaultEmptyStates.module.css");
+require("@zohodesk/svg/assets/Appearance/default/mode/defaultEmptyStates.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("@zohodesk/svg/lib/svg/Appearance/dark/mode/darkEmptyStates.module.css");
+require("@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css");
 
 var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
@@ -95,29 +95,29 @@ var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider"
 
 var _Switch = _interopRequireDefault(require("@zohodesk/components/lib/Switch/Switch"));
 
-require("./Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultDotTheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css");
 
-require("./Appearance/default/mode/dotDefaultMode.module.css");
+require("../assets/Appearance/default/mode/dotDefaultMode.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css");
 
-require("./Appearance/dark/mode/dotDarkMode.module.css");
+require("../assets/Appearance/dark/mode/dotDarkMode.module.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -153,7 +153,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
       }) : null);
 
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -165,7 +165,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
 
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -173,7 +173,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/form/fields/DateField/DateField.js

@@ -171,7 +171,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var getAriaId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -181,7 +181,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
         onClick: isDisabled || isReadOnly ? null : this.handleLabelClick,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",

package/lib/form/fields/Fields.module.css

@@ -43,14 +43,16 @@
 [dir=rtl] .checkboxText {
   padding-right: var(--zd_size6);
 }
-.cbTextReadonly {
-  cursor: not-allowed;
-}
 .cbTextPointer {
   cursor: pointer;
 }
-.disabled {
-  composes: disabled from '~@zohodesk/components/lib/common/common.module.css';
+.disabled, .readonly {
+  cursor: not-allowed;
+}
+.cbTextReadonly,
+.disabled .fieldLabel,
+.readonly .fieldLabel {
+  --label_cursor: not-allowed;
 }
 [dir=ltr] .radio {
   margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0;

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -184,7 +184,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
       var isDarkPalette = palette === 'dark';
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -194,7 +194,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
         ,
-        customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
         htmlFor: uniqueId
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/form/fields/RadioField/RadioField.js

@@ -105,14 +105,14 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
           _customProps$Validati2 = customProps.ValidationMessageProps2,
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",
         id: id,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-        customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)

package/lib/form/fields/SelectField/SelectField.js

@@ -152,7 +152,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -160,7 +160,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -200,10 +200,10 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           key: index
         }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
           text: name,
-          onRemove: deleteTag.bind(_this3, name),
+          onRemove: isReadOnly ? null : deleteTag.bind(_this3, name),
           closeTitle: i18nKeys.deleteText,
           palette: tagType === 'SYSTEM' ? 'primary' : 'default',
-          disabled: isReadOnly
+          isReadOnly: isReadOnly
         })) : null;
       }), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _TagsMultiSelectModule["default"].moreLess,

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -220,7 +220,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TagsMultiSelectFieldModule["default"].container
+    className: "".concat(_TagsMultiSelectFieldModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '')
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: "baseline",
@@ -231,7 +231,7 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     id: id,
     size: labelSize,
     palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: "".concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
+    customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : '', " ").concat(labelClass ? labelClass : ''),
     dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label"),
     htmlFor: htmlId
   }, LabelProps)), selectedValueCount ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/form/fields/TextBoxField/TextBoxField.js

@@ -146,7 +146,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
           ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -154,7 +154,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         text: labelName,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/form/fields/TextEditorField/TextEditorField.js

@@ -156,7 +156,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
           _ePhiData$ePhiStatus = ePhiData.ePhiStatus,
           ePhiStatus = _ePhiData$ePhiStatus === void 0 ? false : _ePhiData$ePhiStatus;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(className)
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : '', " ").concat(className || '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         alignBox: "row",
@@ -167,7 +167,7 @@ var TextEditorField = /*#__PURE__*/function (_PureComponent) {
         htmlFor: !isReadOnly && !isDisabled ? id : undefined,
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
         onClick: this.handleLabelClick,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps))), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",

package/lib/form/fields/TextareaField/TextareaField.js

@@ -142,7 +142,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
           ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
+        className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : ''
       }, labelName && /*#__PURE__*/_react["default"].createElement("div", {
         className: _FieldsModule["default"].labelContainer
@@ -151,7 +151,7 @@ var TextareaField = /*#__PURE__*/function (_PureComponent) {
         id: id,
         size: fieldSize === 'small' ? 'small' : 'medium',
         palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-        customClass: "".concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
+        customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(labelCustomClass, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         htmlFor: uniqueId,
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/lookup/header/TicketHeader/TicketHeader.js

@@ -111,6 +111,8 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
       })), needViewsList ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_TicketHeaderModule["default"].dropdown),
         dataId: "filterIdselected"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: _TicketHeaderModule["default"].menuWrapper
       }, /*#__PURE__*/_react["default"].createElement(_ViewDropDown["default"], {
         dropBoxSize: "small",
         emptyMessage: menuEmptyMessage,
@@ -120,7 +122,7 @@ var TicketHeader = /*#__PURE__*/function (_Component) {
         textField: "displayLabel",
         selectedValue: selectedViewId,
         needCloseOnSelect: true
-      })) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }))) : null)), needSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_lookupHeaderCommonModule["default"].searchContainer, " ").concat(_lookupHeaderCommonResponsiveModule["default"].searchContainer, " ").concat(_TicketHeaderModule["default"].searchContainer)
       }, /*#__PURE__*/_react["default"].createElement(_Search["default"], {
         onSearch: onSearch,

package/lib/lookup/header/TicketHeader/TicketHeader.module.css

@@ -1,5 +1,5 @@
 .dropdown {
-  margin: 0 var(--zd_size8);
+  margin: 0 var(--zd_size20);
 }
 /* Responsive */
 [dir=ltr] .small .searchContainer {
@@ -20,3 +20,4 @@
 .extraSmall .container {
   flex-direction: column;
 }
+.menuWrapper{display: inline-block;}

package/lib/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -28,7 +28,6 @@
   composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
   line-height: var(--zd_size20);
   color: var(--zdt_viewdropdown_label_text);
-  padding: 0 var(--zd_size12);
   cursor: pointer;
 }
 .labelText {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.0.0-beta.205",
+  "version": "1.0.0-beta.208",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -31,21 +31,21 @@
   "dependencies": {},
   "devDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "1.0.0-beta.25",
+    "@zohodesk/variables": "1.0.0-beta.29",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-223",
-    "@zohodesk/icons": "1.0.0-beta.85",
-    "@zohodesk/svg": "1.0.0-beta.38",
+    "@zohodesk/components": "1.0.0-alpha-227",
+    "@zohodesk/icons": "1.0.0-beta.92",
+    "@zohodesk/svg": "1.0.0-beta.41",
     "@zohodesk/virtualizer": "1.0.3",
     "react-sortable-hoc": "^0.8.3"
   },
   "peerDependencies": {
     "velocity-react": "^1.4.3",
-    "@zohodesk/variables": "^1.0.0-beta.25",
+    "@zohodesk/variables": "^1.0.0-beta.29",
     "@zohodesk/i18n": "^1.0.0-beta.7",
-    "@zohodesk/components": "1.0.0-alpha-223",
+    "@zohodesk/components": "1.0.0-alpha-227",
     "@zohodesk/icons": "^1.0.0-beta.85",
-    "@zohodesk/svg": "^1.0.0-beta.38"
+    "@zohodesk/svg": "1.0.0-beta.41"
   },
   "react-cli": {
     "preprocessor": {

package/build/Unusedfiles.json

@@ -1 +0,0 @@
-["/Users/bharathi-zt93/git/library/jsapps/dot/src/actions/index.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/form/fields/CurrencyField/CurrencyField.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/form/fields/RadioField/RadioField.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/list/BluePrintStatus/BluePrintStatus.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/list/BluePrintStatus/BluePrintStatus.module.css","/Users/bharathi-zt93/git/library/jsapps/dot/src/list/DepartmentDropDown/DepartmentDropDown.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/list/DepartmentDropDown/DepartmentDropDown.module.css","/Users/bharathi-zt93/git/library/jsapps/dot/src/list/Icons/AddNewIcon.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/list/Icons/CompleteIcon.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/lookup/header/Close/LookupClose.module.css","/Users/bharathi-zt93/git/library/jsapps/dot/src/version2/alertIcons/ErrorAlertIcon.js","/Users/bharathi-zt93/git/library/jsapps/dot/src/version2/lookup/alertLookupCommonNew.module.css"]

package/es/ActionButton/docs/ActionButton__default.docs.js

@@ -1,134 +0,0 @@
-import React from 'react';
-import ActionButton from '../ActionButton';
-export default class ActionButton__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply",
-      size: "small"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply",
-      size: "medium"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply",
-      size: "large"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply",
-      size: "large",
-      isLoading: true
-    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      iconName: "ZD-replyall",
-      iconSize: "9",
-      onClick: () => '',
-      dropdownChildren: 'children',
-      dropBoxPosition: "bottomRight",
-      size: "small",
-      isDisabled: true
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply all",
-      iconName: "ZD-replyall",
-      iconSize: "9",
-      onClick: () => '',
-      dropBoxPosition: "bottomRight",
-      size: "small"
-    }, "children")), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply all",
-      iconName: "ZD-replyall",
-      iconSize: "9",
-      onClick: () => '',
-      dropBoxPosition: "bottomRight",
-      size: "small",
-      onHover: true
-    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply all",
-      iconName: "ZD-replyall",
-      iconSize: "9",
-      dropBoxPosition: "bottomRight",
-      size: "small",
-      onHover: true
-    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply all",
-      iconName: "ZD-replyall",
-      iconSize: "9",
-      dropBoxPosition: "bottomRight",
-      size: "small"
-    }, "children")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Comment",
-      subText: "Public"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px',
-        display: 'inline-block'
-      }
-    }, /*#__PURE__*/React.createElement(ActionButton, {
-      text: "Reply all",
-      iconName: "ZD-replyall",
-      iconSize: "9",
-      onClick: () => '',
-      dropBoxPosition: "bottomRight",
-      size: "small",
-      palette: "primary"
-    }, "children")), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '20px'
-      }
-    }));
-  }
-
-}
-ActionButton__default.docs = {
-  componentGroup: 'Atom'
-};