@zohodesk/dot 1.0.0-temp-96 → 1.0.0-temp-97

package/lib/form/fields/PhoneField/props/propTypes.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
+  dataId: _propTypes["default"].string,
+  errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
+  fieldSize: _propTypes["default"].oneOf(['small', 'medium']),
+  getRef: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  infoText: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isMandatory: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  labelCustomClass: _propTypes["default"].string,
+  labelName: _propTypes["default"].string.isRequired,
+  labelPalette: _propTypes["default"].string,
+  maxLength: _propTypes["default"].number,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  placeHolder: _propTypes["default"].string,
+  textBoxSize: _propTypes["default"].string,
+  textBoxType: _propTypes["default"].string,
+  textBoxVariant: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  validationMessage: _propTypes["default"].string,
+  value: _propTypes["default"].string,
+  i18nKeys: _propTypes["default"].shape({
+    callTitle: _propTypes["default"].string
+  }),
+  onCall: _propTypes["default"].func,
+  ePhiData: _propTypes["default"].shape({
+    ePhiTitle: _propTypes["default"].string,
+    ePhiText: _propTypes["default"].string,
+    ePhiStatus: _propTypes["default"].bool
+  }),
+  customProps: _propTypes["default"].shape({
+    LinkProps: _propTypes["default"].object,
+    TextBoxFieldProps: _propTypes["default"].object
+  })
+};
+exports.propTypes = propTypes;

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

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
@@ -156,46 +158,8 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports["default"] = RadioField;
-RadioField.propTypes = {
-  dataId: _propTypes["default"].string,
-  errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
-  id: _propTypes["default"].string,
-  isActive: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isMandatory: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  labelName: _propTypes["default"].string,
-  labelPalette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
-  labelSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].array,
-  selectedValue: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  validationMessage: _propTypes["default"].string,
-  validationPalette: _propTypes["default"].string,
-  validationRuleMessage: _propTypes["default"].string,
-  validationRulePalette: _propTypes["default"].string,
-  valueField: _propTypes["default"].string,
-  variant: _propTypes["default"].oneOf(['primary', 'default', 'secondary']),
-  customProps: _propTypes["default"].shape({
-    LabelProps: _propTypes["default"].object,
-    RadioProps: _propTypes["default"].object,
-    ValidationMessageProps1: _propTypes["default"].object,
-    ValidationMessageProps2: _propTypes["default"].object
-  })
-};
-RadioField.defaultProps = {
-  errorType: 'primary',
-  isMandatory: false,
-  isDisabled: false,
-  isReadOnly: false,
-  variant: 'primary',
-  labelSize: 'medium',
-  labelPalette: 'default',
-  isActive: false,
-  customProps: {}
-};
+RadioField.propTypes = _propTypes.propTypes;
+RadioField.defaultProps = _defaultProps.defaultProps;
 
 if (false) {
   RadioField.docs = {

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  errorType: 'primary',
+  isMandatory: false,
+  isDisabled: false,
+  isReadOnly: false,
+  variant: 'primary',
+  labelSize: 'medium',
+  labelPalette: 'default',
+  isActive: false,
+  customProps: {}
+};
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  dataId: _propTypes["default"].string,
+  errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
+  id: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isMandatory: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  labelName: _propTypes["default"].string,
+  labelPalette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  onChange: _propTypes["default"].func,
+  options: _propTypes["default"].array,
+  selectedValue: _propTypes["default"].string,
+  size: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  validationMessage: _propTypes["default"].string,
+  validationPalette: _propTypes["default"].string,
+  validationRuleMessage: _propTypes["default"].string,
+  validationRulePalette: _propTypes["default"].string,
+  valueField: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(['primary', 'default', 'secondary']),
+  customProps: _propTypes["default"].shape({
+    LabelProps: _propTypes["default"].object,
+    RadioProps: _propTypes["default"].object,
+    ValidationMessageProps1: _propTypes["default"].object,
+    ValidationMessageProps2: _propTypes["default"].object
+  })
+};
+exports.propTypes = propTypes;

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

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _Label = _interopRequireDefault(require("@zohodesk/components/lib/Label/Label"));
 
@@ -21,10 +23,6 @@ var _IdProvider = require("@zohodesk/components/lib/Provider/IdProvider");
 
 var _FieldContainer = _interopRequireDefault(require("../FieldContainer/FieldContainer"));
 
-var _FieldCommonDefaultProps = require("../props/FieldCommonDefaultProps");
-
-var _FieldCommonPropTypes = require("../props/FieldCommonPropTypes");
-
 var _FieldsModule = _interopRequireDefault(require("../Fields.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,12 +31,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-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; }
-
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -229,68 +221,8 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports["default"] = SelectField;
-SelectField.propTypes = _objectSpread({
-  animationStyle: _propTypes["default"].string,
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
-  emptyMessage: _propTypes["default"].string,
-  errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
-  excludeOptions: _propTypes["default"].array,
-  fieldClass: _propTypes["default"].string,
-  fieldSize: _propTypes["default"].oneOf(['small', 'medium']),
-  getNextOptions: _propTypes["default"].func,
-  getRef: _propTypes["default"].func,
-  id: _propTypes["default"].string,
-  isFocusOnLabelClick: _propTypes["default"].bool,
-  isNextOptions: _propTypes["default"].bool,
-  labelCustomClass: _propTypes["default"].string,
-  labelName: _propTypes["default"].string,
-  labelPalette: _propTypes["default"].string,
-  needLocalSearch: _propTypes["default"].bool,
-  needSearch: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  onSearch: _propTypes["default"].func,
-  options: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].string), _propTypes["default"].arrayOf(_propTypes["default"].object)]).isRequired,
-  popupGroup: _propTypes["default"].string,
-  searchBoxPlaceHolder: _propTypes["default"].string,
-  searchBoxSize: _propTypes["default"].string,
-  selectedValue: _propTypes["default"].string,
-  textBoxSize: _propTypes["default"].string,
-  textBoxVariant: _propTypes["default"].string,
-  textField: _propTypes["default"].string,
-  title: _propTypes["default"].string,
-  validationMessage: _propTypes["default"].string,
-  validationPalette: _propTypes["default"].string,
-  validationRuleMessage: _propTypes["default"].string,
-  validationRulePalette: _propTypes["default"].string,
-  valueField: _propTypes["default"].string,
-  isDefaultSelectValue: _propTypes["default"].bool,
-  placeHolder: _propTypes["default"].string,
-  children: _propTypes["default"].node,
-  onFocus: _propTypes["default"].func,
-  iconOnHover: _propTypes["default"].bool,
-  customProps: _propTypes["default"].shape({
-    LabelProps: _propTypes["default"].object,
-    SelectProps: _propTypes["default"].object,
-    ValidationMessageProps1: _propTypes["default"].object,
-    ValidationMessageProps2: _propTypes["default"].object
-  })
-}, (0, _FieldCommonPropTypes.FieldCommonPropTypes)());
-SelectField.defaultProps = _objectSpread({
-  errorType: 'primary',
-  needSearch: false,
-  searchBoxSize: 'small',
-  textBoxSize: 'xmedium',
-  textBoxVariant: 'primary',
-  borderColor: 'default',
-  fieldSize: 'medium',
-  isFocusOnLabelClick: true,
-  labelPalette: 'default',
-  labelCustomClass: '',
-  isDefaultSelectValue: true,
-  placeHolder: '',
-  customProps: {}
-}, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
+SelectField.propTypes = _propTypes.propTypes;
+SelectField.defaultProps = _defaultProps.defaultProps;
 
 if (false) {
   SelectField.docs = {

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+
+var _FieldCommonDefaultProps = require("../../props/FieldCommonDefaultProps");
+
+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 defaultProps = _objectSpread({
+  errorType: 'primary',
+  needSearch: false,
+  searchBoxSize: 'small',
+  textBoxSize: 'xmedium',
+  textBoxVariant: 'primary',
+  borderColor: 'default',
+  fieldSize: 'medium',
+  isFocusOnLabelClick: true,
+  labelPalette: 'default',
+  labelCustomClass: '',
+  isDefaultSelectValue: true,
+  placeHolder: '',
+  customProps: {}
+}, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
+
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FieldCommonPropTypes = require("../../props/FieldCommonPropTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var propTypes = _objectSpread({
+  animationStyle: _propTypes["default"].string,
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
+  emptyMessage: _propTypes["default"].string,
+  errorType: _propTypes["default"].oneOf(['primary', 'secondary']),
+  excludeOptions: _propTypes["default"].array,
+  fieldClass: _propTypes["default"].string,
+  fieldSize: _propTypes["default"].oneOf(['small', 'medium']),
+  getNextOptions: _propTypes["default"].func,
+  getRef: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  isFocusOnLabelClick: _propTypes["default"].bool,
+  isNextOptions: _propTypes["default"].bool,
+  labelCustomClass: _propTypes["default"].string,
+  labelName: _propTypes["default"].string,
+  labelPalette: _propTypes["default"].string,
+  needLocalSearch: _propTypes["default"].bool,
+  needSearch: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  onSearch: _propTypes["default"].func,
+  options: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].string), _propTypes["default"].arrayOf(_propTypes["default"].object)]).isRequired,
+  popupGroup: _propTypes["default"].string,
+  searchBoxPlaceHolder: _propTypes["default"].string,
+  searchBoxSize: _propTypes["default"].string,
+  selectedValue: _propTypes["default"].string,
+  textBoxSize: _propTypes["default"].string,
+  textBoxVariant: _propTypes["default"].string,
+  textField: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  validationMessage: _propTypes["default"].string,
+  validationPalette: _propTypes["default"].string,
+  validationRuleMessage: _propTypes["default"].string,
+  validationRulePalette: _propTypes["default"].string,
+  valueField: _propTypes["default"].string,
+  isDefaultSelectValue: _propTypes["default"].bool,
+  placeHolder: _propTypes["default"].string,
+  children: _propTypes["default"].node,
+  onFocus: _propTypes["default"].func,
+  iconOnHover: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    LabelProps: _propTypes["default"].object,
+    SelectProps: _propTypes["default"].object,
+    ValidationMessageProps1: _propTypes["default"].object,
+    ValidationMessageProps2: _propTypes["default"].object
+  })
+}, (0, _FieldCommonPropTypes.FieldCommonPropTypes)());
+
+exports.propTypes = propTypes;

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

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _Layout = require("@zohodesk/components/lib/Layout");
 
@@ -333,58 +335,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = TagsMultiSelect;
-TagsMultiSelect.propTypes = {
-  addTag: _propTypes["default"].func,
-  boxPosition: _propTypes["default"].string,
-  className: _propTypes["default"].string,
-  deleteTag: _propTypes["default"].func,
-  getContainerRef: _propTypes["default"].func,
-  getTargetRef: _propTypes["default"].func,
-  getTextInputRef: _propTypes["default"].func,
-  handleChange: _propTypes["default"].func,
-  handleKeyUp: _propTypes["default"].func,
-  handleTogglePopup: _propTypes["default"].func,
-  isPopupOpen: _propTypes["default"].bool,
-  isPopupReady: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  isTagListLoading: _propTypes["default"].bool,
-  name: _propTypes["default"].string,
-  noMoreData: _propTypes["default"].bool,
-  onScroll: _propTypes["default"].func,
-  searchList: _propTypes["default"].array,
-  selectSearchIndex: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  tagsList: _propTypes["default"].array,
-  chipNeedToShow: _propTypes["default"].string,
-  listDisabled: _propTypes["default"].bool,
-  dataId: _propTypes["default"].string,
-  i18nKeys: _propTypes["default"].shape({
-    newTagText: _propTypes["default"].string.isRequired,
-    emptyTitleText: _propTypes["default"].string.isRequired,
-    emptyDescription: _propTypes["default"].string.isRequired,
-    errorMessage: _propTypes["default"].string.isRequired,
-    deleteText: _propTypes["default"].string.isRequired,
-    lessText: _propTypes["default"].string.isRequired,
-    moreText: _propTypes["default"].string.isRequired,
-    placeholderText: _propTypes["default"].string
-  }),
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
-  needBorder: _propTypes["default"].bool,
-  getTextBoxChildren: _propTypes["default"].func,
-  htmlId: _propTypes["default"].string,
-  boxSize: _propTypes["default"].string,
-  onSelectTag: _propTypes["default"].func,
-  clickableTag: _propTypes["default"].bool
-};
-TagsMultiSelect.defaultProps = {
-  className: '',
-  i18nKeys: {},
-  chipNeedToShow: '5',
-  borderColor: 'default',
-  needBorder: true,
-  dataId: '',
-  boxSize: 'default',
-  clickableTag: false
-};
+TagsMultiSelect.propTypes = _propTypes.propTypes;
+TagsMultiSelect.defaultProps = _defaultProps.defaultProps;
 
 if (false) {
   TagsMultiSelect.docs = {

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

@@ -1,107 +1,107 @@
-.tag {
-  max-width: 100%;
-}
-[dir=ltr] .moreLess, [dir=ltr] .tag {
-  margin: 0 var(--zd_size6) var(--zd_size6) 0;
-}
-[dir=rtl] .moreLess, [dir=rtl] .tag {
-  margin: 0 0 var(--zd_size6) var(--zd_size6);
-}
-.input {
-  height: var(--zd_size20);
-  width: 100%;
-  margin-bottom: var(--zd_size4);
-}
-.viewpopNew {
-  max-height: var(--zd_size250);
-}
-.tagDiv {
-  max-height: var(--zd_size160);
-  margin-top: var(--zd_size5);
-}
-.hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-}
-.borderColor_transparent {
-  border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
-}
-.borderColor_transparent:hover {
-  border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
-}
-.borderColor_transparent.active {
-  border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
-}
-.borderColor_default {
-  border-bottom-color: var(--zdt_tagsmultiselect_default_border);
-}
-.borderColor_default:hover {
-  border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
-}
-.borderColor_default.active {
-  border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
-}
-.borderColor_dark {
-  border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
-}
-.borderColor_dark:hover {
-  border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
-}
-.borderColor_dark.active {
-  border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
-}
-.moreLess {
-  color: var(--zdt_tagsmultiselect_more_text);
-  font-size: var(--zd_font_size13);
-  cursor: pointer;
-}
-.moreLess:hover {
-  color: var(--zdt_tagsmultiselect_more_hover_text);
-}
-.inputWrapper {
-  position: relative;
-  max-width: 100%;
-  min-width: var(--zd_size5);
-  font-size: 0;
-}
-.newTagLabel {
-  color: var(--zdt_tagsmultiselect_labelt_text);
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-}
-[dir=ltr] .newTagLabel {
-  margin-right: var(--zd_size5);
-}
-[dir=rtl] .newTagLabel {
-  margin-left: var(--zd_size5);
-}
-.dotted {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.dropdown {
-  margin-top: var(--zd_size1);
-}
-.custmSpan {
-  height: var(--zd_size25);
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  max-width: 100%;
-  visibility: hidden;
-}
-.custmInp {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInp {
-  left: 0;
-}
-[dir=rtl] .custmInp {
-  right: 0;
-}
-.newTagText {
-  color: var(--zdt_tagsmultiselect_more_text);
-}
+.tag {
+  max-width: 100%;
+}
+[dir=ltr] .moreLess, [dir=ltr] .tag {
+  margin: 0 var(--zd_size6) var(--zd_size6) 0;
+}
+[dir=rtl] .moreLess, [dir=rtl] .tag {
+  margin: 0 0 var(--zd_size6) var(--zd_size6);
+}
+.input {
+  height: var(--zd_size20);
+  width: 100%;
+  margin-bottom: var(--zd_size4);
+}
+.viewpopNew {
+  max-height: var(--zd_size250);
+}
+.tagDiv {
+  max-height: var(--zd_size160);
+  margin-top: var(--zd_size5);
+}
+.hasBorder {
+  transition: border var(--zd_transition2) linear 0s;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+.borderColor_transparent {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_border);
+}
+.borderColor_transparent:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_hover_border);
+}
+.borderColor_transparent.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_transparent_active_border);
+}
+.borderColor_default {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_border);
+}
+.borderColor_default:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_hover_border);
+}
+.borderColor_default.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_default_active_border);
+}
+.borderColor_dark {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_border);
+}
+.borderColor_dark:hover {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_hover_border);
+}
+.borderColor_dark.active {
+  border-bottom-color: var(--zdt_tagsmultiselect_dark_active_border);
+}
+.moreLess {
+  color: var(--zdt_tagsmultiselect_more_text);
+  font-size: var(--zd_font_size13);
+  cursor: pointer;
+}
+.moreLess:hover {
+  color: var(--zdt_tagsmultiselect_more_hover_text);
+}
+.inputWrapper {
+  position: relative;
+  max-width: 100%;
+  min-width: var(--zd_size5);
+  font-size: 0;
+}
+.newTagLabel {
+  color: var(--zdt_tagsmultiselect_labelt_text);
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .newTagLabel {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .newTagLabel {
+  margin-left: var(--zd_size5);
+}
+.dotted {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+.dropdown {
+  margin-top: var(--zd_size1);
+}
+.custmSpan {
+  height: var(--zd_size25);
+  display: inline-block;
+  vertical-align: middle;
+  opacity: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 100%;
+  visibility: hidden;
+}
+.custmInp {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+[dir=ltr] .custmInp {
+  left: 0;
+}
+[dir=rtl] .custmInp {
+  right: 0;
+}
+.newTagText {
+  color: var(--zdt_tagsmultiselect_more_text);
+}