@zohodesk/dot 1.0.0-temp-175.6 → 1.0.0-temp-181

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

@@ -77,20 +77,20 @@
   background-color: transparent;
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
   color: var(--zdt_texteditor_default_text);
 }
 
-.small :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li.KB_Editor_sel {
+.small :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .small :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .medium :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .large :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li:hover, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li.KB_Editor_sel {
   background-color: var(--zdt_texteditor_menu_li_bg);
 }
 
@@ -101,10 +101,10 @@
 /* large type editor - ticket add form editor */
 .large :global .KB_Editor,
 .large :global .KB_Editor_menus .KB_Editor_MultiTools,
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
 .default :global .KB_Editor,
 .default :global .KB_Editor_menus .KB_Editor_MultiTools,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -160,24 +160,24 @@
   min-height: inherit ;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li,
-.default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li,
+.default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.large :global .KB_Editor_menus .KB_Editor_MultiTools>li, .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.large :global .KB_Editor_menus .KB_Editor_MultiTools > li, .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   padding: 0 ;
   float: unset;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-left: 0 ;
 }
 
@@ -190,14 +190,14 @@
   float: unset !important;
 }
 
-.large :global .KB_Editor_menus>ul>li>span>svg,
-.default :global .KB_Editor_menus>ul>li>span>svg {
+.large :global .KB_Editor_menus > ul > li > span > svg,
+.default :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size28) ;
   height: var(--zd_size28) ;
 }
 
-.large :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg,
-.default :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+.large :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg,
+.default :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -241,18 +241,18 @@
   left: 0 ;
 }
 
-[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=ltr] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=ltr] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: var(--zd_size2) ;
 }
 
-[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools>li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=rtl] .large :global .KB_Editor_menus .KB_Editor_MultiTools > li, [dir=rtl] .default :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-left: var(--zd_size2) ;
 }
 
 /* xlarge type editor - reply area, blue print cases - full height hover style */
 .xlarge :global .KB_Editor,
 .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools,
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -293,7 +293,7 @@
   min-height: inherit ;
 }
 
-.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -302,11 +302,11 @@
   float: unset;
 }
 
-[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=ltr] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-right: 0 ;
 }
 
-[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+[dir=rtl] .xlarge :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   margin-left: 0 ;
 }
 
@@ -324,12 +324,12 @@
   padding: var(--zd_size6) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span>svg {
+.xlarge :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+.xlarge :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
@@ -354,13 +354,13 @@
   left: 0 ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span.SnippetIcon svg {
+.xlarge :global .KB_Editor_menus > ul > li > span.SnippetIcon svg {
   width: var(--zd_size17) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span.TemplateIcon svg {
+.xlarge :global .KB_Editor_menus > ul > li > span.TemplateIcon svg {
   width: var(--zd_size16) ;
   height: var(--zd_size16) ;
   padding: 0 var(--zd_size9) ;
@@ -393,16 +393,31 @@
   padding: 0 var(--zd_size7) ;
 }
 
-.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
+.xlarge :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
+.xlarge
+  :global
+  .KB_Editor_menus
+  > ul
+  > li
+  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
+    .TemplateIcon
+  ):not(.KB_Editor_Richtext):not(.KB_Editor_PlainText) {
   height: var(--zd_size21) ;
 }
 
-.xlarge :global .KB_Editor_menus>ul>li>span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(.TemplateIcon)>svg {
+.xlarge
+  :global
+  .KB_Editor_menus
+  > ul
+  > li
+  > span:not(.KB_Editor_Bdr_div):not(.KBEditortools-Block-down-arrow):not(.Kbeditor_more_icon):not(.SnippetIcon):not(
+    .TemplateIcon
+  )
+  > svg {
   width: var(--zd_size21) ;
   height: var(--zd_size21) ;
   padding: 0 var(--zd_size4) ;
@@ -427,7 +442,7 @@
 /* medium type editor - snippet, bug tracker cases */
 .medium :global .KB_Editor,
 .medium :global .KB_Editor_menus .KB_Editor_MultiTools,
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -468,7 +483,7 @@
   min-height: inherit ;
 }
 
-.medium :global .KB_Editor_menus .KB_Editor_MultiTools>li {
+.medium :global .KB_Editor_menus .KB_Editor_MultiTools > li {
   height: unset;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -481,21 +496,21 @@
   line-height: 0;
 }
 
-.medium :global .KB_Editor_menus>ul>li>span>svg {
+.medium :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size22) ;
   height: var(--zd_size22) ;
 }
 
-.medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+.medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   width: var(--zd_size8) ;
   height: var(--zd_size8) ;
 }
 
-[dir=ltr] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+[dir=ltr] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   padding: 0 0 0 var(--zd_size2) ;
 }
 
-[dir=rtl] .medium :global .KB_Editor_menus>ul>li>span.KB_Editor_Bdr_div>svg {
+[dir=rtl] .medium :global .KB_Editor_menus > ul > li > span.KB_Editor_Bdr_div > svg {
   padding: 0 var(--zd_size2) 0 0 ;
 }
 
@@ -532,7 +547,7 @@
   padding: 0 var(--zd_size3) ;
 }
 
-.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon>svg {
+.medium :global .KB_Editor_MultiTools li .Kbeditor_more_icon > svg {
   width: var(--zd_size12) ;
   height: var(--zd_size12) ;
 }
@@ -612,13 +627,13 @@
   line-height: 0;
 }
 
-.small :global .KB_Editor_menus>ul>li>span>svg,
-.mini :global .KB_Editor_menus>ul>li>span>svg {
+.small :global .KB_Editor_menus > ul > li > span > svg,
+.mini :global .KB_Editor_menus > ul > li > span > svg {
   width: var(--zd_size25) ;
   height: var(--zd_size25) ;
 }
 
-.small :global .KB_Editor_menus>ul>li>span>svg, .mini :global .KB_Editor_menus>ul>li>span>svg {
+.small :global .KB_Editor_menus > ul > li > span > svg, .mini :global .KB_Editor_menus > ul > li > span > svg {
   padding: 0 var(--zd_size6) ;
 }
 
@@ -759,7 +774,8 @@
   position: absolute !important;
   top: 0 ;
   opacity: 0;
-  visibility: hidden;
+  /* visibility: hidden; */
+  z-index: -1;
 }
 
 [dir=ltr] .editorHide :global .KB_Editor {
@@ -768,4 +784,4 @@
 
 [dir=rtl] .editorHide :global .KB_Editor {
   right: 0 ;
-}
+}

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -508,7 +508,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
             needMultiLineText: needMultiLineText,
             a11y: {
               role: isSearch ? 'option' : 'menuitem',
-              ariaSelected: value === item[keyName]
+              ariaSelected: value === item[keyName],
+              'data-a11y-list-active': selectedIndex === i
             }
           }));
         })) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {

package/lib/list/status/StatusListItem/StatusListItem.js

@@ -112,7 +112,9 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
           isDisabled = _this$props4.isDisabled,
           bulletColor = _this$props4.bulletColor,
           a11y = _this$props4.a11y,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          customClass = _this$props4.customClass,
+          children = _this$props4.children;
       var options = {};
       var role = a11y.role,
           ariaSelected = a11y.ariaSelected,
@@ -130,7 +132,7 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         isCover: false,
         align: "baseline",
         alignBox: "row",
-        className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : ''),
+        className: "".concat(_StatusListItemModule["default"].list, " ").concat(_StatusListItemModule["default"][size], " ").concat(_StatusListItemModule["default"][palette], " ").concat(active ? _StatusListItemModule["default"].active : highlight && !isDisabled ? _StatusListItemModule["default"].hover : '', " ").concat(autoHover && !isDisabled ? _StatusListItemModule["default"].effect : '', " ").concat(needTick ? _StatusListItemModule["default"].withTick : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? _StatusListItemModule["default"].withBorder : '', " ").concat(customClass),
         dataId: String(value).replace("'", '_'),
         onClick: !isDisabled && this.handleClick,
         onMouseEnter: this.handleMouseEnter,
@@ -138,14 +140,19 @@ var StatusListItem = /*#__PURE__*/function (_React$Component) {
         tagName: isLink ? 'a' : 'li',
         "data-title": isDisabled ? disableTitle : null,
         tabindex: isDisabled ? '-1' : '0'
-      }, options), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, options, a11y), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_StatusListItemModule["default"].statusType, " ").concat(_StatusListItemModule["default"][bulletColor])
       }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        "data-title": isDisabled ? null : title,
         flexible: true,
+        shrink: true
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        align: needMultiLineText ? 'top' : 'vertical'
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        "data-title": isDisabled ? null : title,
         shrink: true,
         className: needMultiLineText ? _StatusListItemModule["default"].multiLineValue : _StatusListItemModule["default"].value
-      }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, value), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children && children))), needTick && active ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _StatusListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/list/status/StatusListItem/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   needBorder: true,
   bulletColor: 'black',
   a11y: {},
-  needMultiLineText: false
+  needMultiLineText: false,
+  customClass: ''
 };
 exports.defaultProps = defaultProps;

package/lib/list/status/StatusListItem/props/propTypes.js

@@ -35,6 +35,8 @@ var propTypes = {
     role: _propTypes["default"].string,
     ariaSelected: _propTypes["default"].bool,
     ariaHidden: _propTypes["default"].bool
-  })
+  }),
+  customClass: _propTypes["default"].string,
+  children: _propTypes["default"].node
 };
 exports.propTypes = propTypes;

package/lib/lookup/Lookup/Lookup.js

@@ -21,12 +21,20 @@ var _LookupModule = _interopRequireDefault(require("./Lookup.module.css"));
 
 var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
 
+var _excluded = ["role", "ariaLabelledby", "ariaDescribedby", "ariaLabel", "ariaModal"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -102,13 +110,16 @@ var Lookup = /*#__PURE__*/function (_Component) {
           needFocusScope = _this$props.needFocusScope,
           customProps = _this$props.customProps,
           isMinHeight = _this$props.isMinHeight;
+
       var _a11y$role = a11y.role,
           role = _a11y$role === void 0 ? 'dialog' : _a11y$role,
           ariaLabelledby = a11y.ariaLabelledby,
           ariaDescribedby = a11y.ariaDescribedby,
           ariaLabel = a11y.ariaLabel,
           _a11y$ariaModal = a11y.ariaModal,
-          ariaModal = _a11y$ariaModal === void 0 ? isActive ? true : undefined : _a11y$ariaModal;
+          ariaModal = _a11y$ariaModal === void 0 ? isActive ? true : undefined : _a11y$ariaModal,
+          a11yAttributes = _objectWithoutProperties(a11y, _excluded);
+
       var _customProps$focusSco = customProps.focusScopeProps,
           focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
       var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -122,7 +133,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
           needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
-      var content = /*#__PURE__*/_react["default"].createElement("div", {
+      var content = /*#__PURE__*/_react["default"].createElement("div", _extends({
         ref: this.createRef,
         tabIndex: "-1",
         "data-a11y-need-focus-style": "false",
@@ -135,7 +146,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
         className: "".concat(_LookupModule["default"].box, " ").concat(_LookupModule["default"]["".concat(size, "Size")]),
         "data-id": dataId,
         "data-test-id": dataId
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         "data-drag-container": "true",
         isCover: false,
         className: isMinHeight ? "".concat(_LookupModule["default"].wrapper) : "".concat(_LookupModule["default"].coverwrap)

package/lib/v1/DotWrapper/DotWrapper.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = DotWrapper;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("@zohodesk/variables/assets/sizeVariables.module.css");
+
+var _dynamicImports = require("./libraryChunks/dynamicImports");
+
+var _propTypes = require("./props/propTypes");
+
+var _defaultProps = require("./props/defaultProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function DotWrapper(props) {
+  var appearance = props.appearance,
+      theme = props.theme,
+      library = props.library,
+      isZoom = props.isZoom,
+      baseZoomSize = props.baseZoomSize;
+  (0, _dynamicImports.getAppearance)(appearance, library);
+  (0, _dynamicImports.getTheme)(appearance, theme, library);
+  var wrapperStyle = {
+    background: 'aqua',
+    color: '#000',
+    padding: 'var(--zd_size20)',
+    '--zd_baseSize': baseZoomSize
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "rootWrapper",
+    style: wrapperStyle
+  }, "Dot Wrapper");
+}
+
+DotWrapper.propTypes = _propTypes.propTypes;
+DotWrapper.defaultProps = _defaultProps.defaultProps;

package/lib/v1/DotWrapper/libraryChunks/appearance/component/DarkMode_Component.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/component/LightMode_Component.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/component/PureDarkMode_Component.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/dot/DarkMode_Dot.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./../../../../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/dot/LightMode_Dot.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./../../../../../../assets/Appearance/light/mode/Dot_LightMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/dot/PureDarkMode_Dot.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./../../../../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/svg/DarkMode_SVG.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk/svg/assets/Appearance/dark/mode/SVG_DarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/svg/LightMode_SVG.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk/svg/assets/Appearance/light/mode/SVG_LightMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/appearance/svg/PureDarkMode_SVG.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css");

package/lib/v1/DotWrapper/libraryChunks/dynamicImports.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAppearance = getAppearance;
+exports.getTheme = getTheme;
+
+var _appearanceProperties = require("../utils/appearanceProperties");
+
+var _themeProperties = require("../utils/themeProperties");
+
+var _importFiles = require("../utils/importFiles");
+
+var _errorMessage = require("../utils/errorMessage");
+
+var defaultLib = ['component', 'dot', 'svg'];
+var modeArray = ['light', 'dark', 'pureDark'];
+var themeArray = ['blue', 'green', 'orange', 'red', 'yellow'];
+
+function getAppearance(mode, library) {
+  var libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+  console.log('get appearance -->', mode, libArray);
+  (0, _errorMessage.errorMessage)(modeArray, mode, 'appearance');
+  (0, _importFiles.importFiles)(libArray, _appearanceProperties.appearanceMapping, _appearanceProperties.appearanceImports, mode);
+}
+
+function getTheme(mode, theme, library) {
+  var libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+  console.log('get theme -->', theme, libArray);
+  (0, _errorMessage.errorMessage)(themeArray, theme, 'theme');
+  (0, _importFiles.importFiles)(libArray, _themeProperties.themeMapping, _themeProperties.themeImports, mode, theme);
+}

package/lib/v1/DotWrapper/libraryChunks/themes/component/blue/Blue_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/blue/Blue_Light_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/blue/Blue_PureDark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/green/Green_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/green/Green_Light_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/green/Green_PureDark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/orange/Orange_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/orange/Orange_Light_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/orange/Orange_PureDark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css");

package/lib/v1/DotWrapper/libraryChunks/themes/component/red/Red_Dark_Component.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css");