@zohodesk/components 1.0.0-temp-71 → 1.0.0-temp-73

package/lib/Tooltip/Tooltip.module.css

@@ -17,7 +17,6 @@
   max-width: 420px;
   line-height: var(--zd_size20);
   min-height: var(--zd_size24);
-  white-space: normal;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);
   padding: 0 var(--zd_size10);
@@ -25,6 +24,12 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
+.tooltipWrapCont {
+  white-space: pre-wrap;
+}
+.tooltipNormalCont {
+  white-space: normal;
+}
 .tooltiparrow {
   content: '';
   position: absolute;

package/lib/Tooltip/docs/Tooltip__default.docs.js

@@ -94,11 +94,26 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         background: 'var(--zdt_cta_primary_bg)',
         padding: '3px 15px',
         color: '#fff',
-        borderRadius: '4px'
+        borderRadius: '4px',
+        marginBottom: '5px'
+      },
+          whiteSpaceNoWrap = {
+        overflow: 'hidden',
+        display: '-webkit-box',
+        webkitLineClamp: '3',
+        webkitBoxOrient: 'vertical',
+        whiteSpace: 'pre-wrap',
+        fontSize: '14px',
+        background: 'var(--zdt_cta_primary_bg)',
+        padding: '3px 15px',
+        color: '#fff',
+        borderRadius: '4px',
+        marginBottom: '5px',
+        width: '200px'
       };
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Top Position Tooltip"), " - 1) Lengthy Content, 2) Default Top, 3) Show in Bottom Area if Top doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Top Position Tooltip"), " - 1) Lengthy Content, 2) Default Top, 3) Show in Bottom Area if Top doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "Register Account with Lengthy Content",
         "data-title-position": "top"
@@ -146,9 +161,14 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "top"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
+        style: whiteSpaceNoWrap,
+        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
+        "data-title-position": "top",
+        "data-title-wrap": "true"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Bottom Position Tooltip"), " - 1) Lengthy Content, 2) Default Bottom, 3) Show in Top Area if Bottom doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Bottom Position Tooltip"), " - 1) Lengthy Content, 2) Default Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "Register Account with Lengthy Content",
         "data-title-position": "bottom"
@@ -197,9 +217,14 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "bottom"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
+        style: whiteSpaceNoWrap,
+        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
+        "data-title-position": "bottom",
+        "data-title-wrap": "true"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Left Position Tooltip"), " - 1) Lengthy Content, 2) Default Left, 3) Show in Right Area if Left doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Left Position Tooltip"), " - 1) Lengthy Content, 2) Default Left, 3) Show in Right Area if Left doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.",
         "data-title-position": "left"
@@ -248,9 +273,14 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "left"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
+        style: whiteSpaceNoWrap,
+        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
+        "data-title-position": "left",
+        "data-title-wrap": "true"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Right Position Tooltip"), " - 1) Lengthy Content, 2) Default Right, 3) Show in Left Area if Right doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Right Position Tooltip"), " - 1) Lengthy Content, 2) Default Right, 3) Show in Left Area if Right doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.",
         "data-title-position": "right"
@@ -299,9 +329,14 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "right"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
+        style: whiteSpaceNoWrap,
+        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
+        "data-title-position": "right",
+        "data-title-wrap": "true"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "No Position Tooltip"), " - 1) Lengthy Content, 2) Default Top/Bottom, 3) Show in Top Area if Bottom doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "No Position Tooltip"), " - 1) Lengthy Content, 2) Default Top/Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position."
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -343,7 +378,11 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
       }))), /*#__PURE__*/_react["default"].createElement("span", {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")));
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
+        style: whiteSpaceNoWrap,
+        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
+        "data-title-wrap": "true"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted")));
     }
   }, {
     key: "render",

package/lib/Tooltip/props/defaultProps.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  dataId: 'toolTip',
+  customClass: ''
+};
+exports.defaultProps = defaultProps;

package/lib/Tooltip/props/propTypes.js

@@ -0,0 +1,19 @@
+"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,
+  isHtml: _propTypes["default"].string,
+  isPosition: _propTypes["default"].oneOf(['top', 'bottom', 'left', 'right']),
+  title: _propTypes["default"].string,
+  customClass: _propTypes["default"].string
+};
+exports.propTypes = propTypes;

package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.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 _velocityReact = require("velocity-react");
 
@@ -115,28 +117,8 @@ var VelocityAnimation = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = VelocityAnimation;
-VelocityAnimation.defaultProps = {
-  runOnMount: false,
-  isCustomized: true,
-  needUIPack: true,
-  isFlex: false,
-  duration: 300
-};
-VelocityAnimation.propTypes = {
-  children: _propTypes["default"].node.isRequired,
-  delay: _propTypes["default"].number,
-  duration: _propTypes["default"].number,
-  isActive: _propTypes["default"].bool.isRequired,
-  isCustomized: _propTypes["default"].bool,
-  isFlex: _propTypes["default"].bool,
-  name: _propTypes["default"].oneOf(['fade', 'slideRight', 'shrink', 'expand', 'slideDown', 'flyDown', 'slideLeft']),
-  needUIPack: _propTypes["default"].bool,
-  runOnMount: _propTypes["default"].bool
-};
-VelocityAnimation.contextTypes = {
-  direction: _propTypes["default"].string,
-  isReducedMotion: _propTypes["default"].bool
-};
+VelocityAnimation.defaultProps = _defaultProps.defaultProps;
+VelocityAnimation.propTypes = _propTypes.propTypes;
 VelocityAnimation.contextType = _LibraryContextInit["default"];
 
 if (false) {

package/lib/VelocityAnimation/VelocityAnimation/props/defaultProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  runOnMount: false,
+  isCustomized: true,
+  needUIPack: true,
+  isFlex: false,
+  duration: 300
+};
+exports.defaultProps = defaultProps;

package/lib/VelocityAnimation/VelocityAnimation/props/propTypes.js

@@ -0,0 +1,23 @@
+"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 = {
+  children: _propTypes["default"].node.isRequired,
+  delay: _propTypes["default"].number,
+  duration: _propTypes["default"].number,
+  isActive: _propTypes["default"].bool.isRequired,
+  isCustomized: _propTypes["default"].bool,
+  isFlex: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOf(['fade', 'slideRight', 'shrink', 'expand', 'slideDown', 'flyDown', 'slideLeft']),
+  needUIPack: _propTypes["default"].bool,
+  runOnMount: _propTypes["default"].bool
+};
+exports.propTypes = propTypes;

package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.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 _velocityReact = require("velocity-react");
 
@@ -19,6 +21,12 @@ var _LibraryContextInit = _interopRequireDefault(require("../../Provider/Library
 
 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; }
+
 function _extends() { _extends = Object.assign || 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"); } }
@@ -143,44 +151,10 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = VelocityAnimationGroup;
-VelocityAnimationGroup.defaultProps = {
-  runOnMount: false,
-  enterHideStyle: {
-    display: 'none'
-  },
-  enterShowStyle: {
-    display: ''
-  },
-  isFlex: false,
-  enterDuration: 300,
-  exitDuration: 300,
-  isActive: false,
-  isCustomized: true,
-  needUIPack: true,
+VelocityAnimationGroup.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.defaultProps), {}, {
   component: _react["default"].Fragment
-};
-VelocityAnimationGroup.propTypes = {
-  children: _propTypes["default"].node.isRequired,
-  component: _propTypes["default"].element,
-  enterDelay: _propTypes["default"].number,
-  enterDuration: _propTypes["default"].number,
-  enterHideStyle: _propTypes["default"].object,
-  enterName: _propTypes["default"].string,
-  enterShowStyle: _propTypes["default"].object,
-  exitDelay: _propTypes["default"].number,
-  exitDuration: _propTypes["default"].number,
-  exitName: _propTypes["default"].string,
-  isActive: _propTypes["default"].bool,
-  isCustomized: _propTypes["default"].bool,
-  isFlex: _propTypes["default"].bool,
-  name: _propTypes["default"].oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
-  needUIPack: _propTypes["default"].bool,
-  runOnMount: _propTypes["default"].bool
-};
-VelocityAnimationGroup.contextTypes = {
-  direction: _propTypes["default"].string,
-  isReducedMotion: _propTypes["default"].bool
-};
+});
+VelocityAnimationGroup.propTypes = _propTypes.propTypes;
 VelocityAnimationGroup.contextType = _LibraryContextInit["default"];
 
 if (false) {

package/lib/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  runOnMount: false,
+  enterHideStyle: {
+    display: 'none'
+  },
+  enterShowStyle: {
+    display: ''
+  },
+  isFlex: false,
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  isCustomized: true,
+  needUIPack: true
+};
+exports.defaultProps = defaultProps;

package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js

@@ -0,0 +1,30 @@
+"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 = {
+  children: _propTypes["default"].node.isRequired,
+  component: _propTypes["default"].element,
+  enterDelay: _propTypes["default"].number,
+  enterDuration: _propTypes["default"].number,
+  enterHideStyle: _propTypes["default"].object,
+  enterName: _propTypes["default"].string,
+  enterShowStyle: _propTypes["default"].object,
+  exitDelay: _propTypes["default"].number,
+  exitDuration: _propTypes["default"].number,
+  exitName: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  isCustomized: _propTypes["default"].bool,
+  isFlex: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
+  needUIPack: _propTypes["default"].bool,
+  runOnMount: _propTypes["default"].bool
+};
+exports.propTypes = propTypes;

package/lib/common/common.module.css

@@ -23,6 +23,19 @@
   overflow: auto;
 }
 
+.preventScrollBubbleX {
+  overscroll-behavior-x: contain;
+}
+
+.preventScrollBubbleY {
+  overscroll-behavior-y: contain;
+}
+
+.preventScrollBubbleBoth {
+  overscroll-behavior: contain;
+}
+
+
 /*  --Position Props-- */
 .posrel {
   position: relative;
@@ -53,14 +66,17 @@
 .clboth {
   clear: both;
 }
+
 .disable,
 .disabled {
   position: relative;
 }
+
 .disable::after {
   cursor: no-drop;
   background: var(--zdt_disable_bg);
 }
+
 .disable::after,
 .disabled::after,
 .readonly::after {
@@ -71,10 +87,12 @@
   content: '';
   user-select: none;
 }
+
 [dir=ltr] .disable::after, [dir=ltr] .disabled::after, [dir=ltr] .readonly::after {
   left: 0;
   right: 0;
 }
+
 [dir=rtl] .disable::after, [dir=rtl] .disabled::after, [dir=rtl] .readonly::after {
   right: 0;
   left: 0;
@@ -83,6 +101,7 @@
 .disabled, .readonly {
   cursor: not-allowed;
 }
+
 .disabled::after, .readonly::after {
   cursor: not-allowed;
 }
@@ -217,6 +236,7 @@
   -ms-flex-align: end;
   align-items: flex-end;
 }
+
 .alignBaseline {
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -466,6 +486,7 @@
   word-wrap: normal;
   text-overflow: ellipsis;
 }
+
 .clamp {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -492,11 +513,13 @@
   position: sticky;
   position: -webkit-sticky;
 }
-.fitContWidth{
+
+.fitContWidth {
   width: fit-content;
   width: -moz-fit-content;
 }
-.fitContHeight{
+
+.fitContHeight {
   height: fit-content;
   height: -moz-fit-content;
-}
+}

package/lib/common/docStyle.module.css

@@ -260,8 +260,12 @@
   background: #fff;
 }
 [data-mode='dark'] {
-  color: #E2E4E6;
-  background: #232B38;
+  color: #e2e4e6;
+  background: #232b38;
+}
+[data-mode='pureDark'] {
+  color: #e2e4e6;
+  background: #212121;
 }
 
 .baseHue {

package/lib/css.js

@@ -54,8 +54,6 @@ require("./Ribbon/Ribbon.module.css");
 
 require("./MultiSelect/MultiSelect.module.css");
 
-require("./MultiSelect/AdvancedMultiSelect.module.css");
-
 require("./Select/Select.module.css");
 
 require("./ListItem/ListItem.module.css");

package/lib/{MultiSelect → deprecated}/AdvancedMultiSelect.module.css

@@ -124,4 +124,4 @@
   margin-top: var(--zd_size5);
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
-}
+}

package/lib/deprecated/PortalLayer/PortalLayer.js

@@ -9,7 +9,9 @@ exports["default"] = exports.RefElement = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes = require("./props/propTypes");
+
+var _defaultProps = require("./props/defaultProps");
 
 var _Modal = _interopRequireDefault(require("../../Modal/Modal"));
 
@@ -141,21 +143,8 @@ var PortalLayer = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = PortalLayer;
-PortalLayer.defaultProps = {
-  autoZIndexNeeded: true,
-  isChildrenRestrictionNeeded: false,
-  portalId: 'portal1'
-};
-PortalLayer.propTypes = {
-  autoZIndexNeeded: _propTypes["default"].bool,
-  children: _propTypes["default"].element,
-  initialState: _propTypes["default"].bool,
-  isChildrenRestrictionNeeded: _propTypes["default"].bool,
-  portalId: _propTypes["default"].string,
-  renderChildren: _propTypes["default"].func,
-  saveGetFunction: _propTypes["default"].func,
-  saveUpdateFunction: _propTypes["default"].func
-};
+PortalLayer.defaultProps = _defaultProps.defaultProps;
+PortalLayer.propTypes = _propTypes.propTypes;
 
 if (false) {
   PortalLayer.docs = {

package/lib/deprecated/PortalLayer/props/defaultProps.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  autoZIndexNeeded: true,
+  isChildrenRestrictionNeeded: false,
+  portalId: 'portal1'
+};
+exports.defaultProps = defaultProps;

package/lib/deprecated/PortalLayer/props/propTypes.js

@@ -0,0 +1,22 @@
+"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 = {
+  autoZIndexNeeded: _propTypes["default"].bool,
+  children: _propTypes["default"].element,
+  initialState: _propTypes["default"].bool,
+  isChildrenRestrictionNeeded: _propTypes["default"].bool,
+  portalId: _propTypes["default"].string,
+  renderChildren: _propTypes["default"].func,
+  saveGetFunction: _propTypes["default"].func,
+  saveUpdateFunction: _propTypes["default"].func
+};
+exports.propTypes = propTypes;

package/lib/deprecated/advancedMultiSelectVariableJson.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var componentAppearanceVariables = [{
+  "comment": "advanced multiselect",
+  "data": {
+    "zdt_advancedmultiselect_default_border": {
+      'light': ['var(--dot_inputLine)'],
+      'dark': ['var(--dot_inputLine)'],
+      'pureDark': ['var(--dot_inputLine)']
+    },
+    "zdt_advancedmultiselect_transparent_border": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_dark_border": {
+      'light': ['var(--dot_mulledwine)'],
+      'dark': ['var(--dot_mulledwine)'],
+      'pureDark': ['var(--dot_mulledwine)']
+    },
+    "zdt_advancedmultiselect_default_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_transparent_hover_border": {
+      'light': ['var(--dot_inputLineHover)'],
+      'dark': ['var(--dot_inputLineHover)'],
+      'pureDark': ['var(--dot_inputLineHover)']
+    },
+    "zdt_advancedmultiselect_dark_hover_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_default_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_transparent_active_border": {
+      'light': ['var(--dot_inputLineFocus)'],
+      'dark': ['var(--dot_inputLineFocus)'],
+      'pureDark': ['var(--dot_inputLineFocus)']
+    },
+    "zdt_advancedmultiselect_dark_active_border": {
+      'light': ['var(--dot_stardust)'],
+      'dark': ['var(--dot_stardust)'],
+      'pureDark': ['var(--dot_stardust)']
+    },
+    "zdt_advancedmultiselect_delete_text": {
+      'light': ['var(--dot_shuttleGrey)'],
+      'dark': ['var(--dot_cadetblue)'],
+      'pureDark': ['#999']
+    },
+    "zdt_advancedmultiselect_delete_hover_text": {
+      'light': ['var(--dot_black)'],
+      'dark': ['var(--dot_platinum)'],
+      'pureDark': ['var(--dot_platinum)']
+    },
+    "zdt_advancedmultiselect_delete_bg": {
+      'light': ['var(--dot_mirror)'],
+      'dark': ['var(--dot_mirror)'],
+      'pureDark': ['var(--dot_mirror)']
+    },
+    "zdt_advancedmultiselect_box_bg": {
+      'light': ['var(--dot_white)'],
+      'dark': ['var(--dot_ebonyclay)'],
+      'pureDark': ['#212121']
+    },
+    "zdt_advancedmultiselect_droppopup_text": {
+      'light': ['var(--dot_slateGrey)'],
+      'dark': ['var(--dot_oslogrey)'],
+      'pureDark': ['var(--dot_oslogrey)']
+    },
+    "zdt_advancedmultiselect_more_text": {
+      'light': ['var(--zdt_cta_primary_text)'],
+      'dark': ['var(--zdt_cta_primary_text)'],
+      'pureDark': ['var(--zdt_cta_primary_text)']
+    }
+  }
+}];