@zohodesk/dot 1.0.0-temp-184 → 1.0.0-temp-181.10

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -7,9 +7,9 @@ import { Box, Container } from '@zohodesk/components/lib/Layout';
 import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch'; // import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
-// import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
-
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import { scrollTo } from '@zohodesk/components/lib/utils/Common.js';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
 import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
 import StatusListItem from '../StatusListItem/StatusListItem';
 import commonStyle from '@zohodesk/components/lib/common/common.module.css';
@@ -23,20 +23,20 @@ export class StatusDropdown extends React.Component {
     super(props);
     this.state = {
       searchString: '',
-      // selectedIndex: 0,
+      selectedIndex: 0,
       options: props.options
     };
-    this.handleChange = this.handleChange.bind(this); // this.handleKeyDown = this.handleKeyDown.bind(this);
-
+    this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
     this.onSelect = this.onSelect.bind(this);
     this.handleTogglePopup = this.handleTogglePopup.bind(this);
     this.onSearchClear = this.onSearchClear.bind(this);
     this.searchList = this.searchList.bind(this);
-    this.scrollContentRef = this.scrollContentRef.bind(this); // this.handleMouseEnter = this.handleMouseEnter.bind(this);
-
+    this.scrollContentRef = this.scrollContentRef.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.searchInputRef = this.searchInputRef.bind(this);
-    this.itemRef = this.itemRef.bind(this); // this.inputRef = this.inputRef.bind(this);
-
+    this.itemRef = this.itemRef.bind(this);
+    this.inputRef = this.inputRef.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
     this.getAriaId = getUniqueId(this);
@@ -46,10 +46,11 @@ export class StatusDropdown extends React.Component {
     return /*#__PURE__*/React.createElement(EmptySearch, {
       size: "small"
     });
-  } // inputRef(el) {
-  //   this.hiddenInput = el;
-  // }
+  }
 
+  inputRef(el) {
+    this.hiddenInput = el;
+  }
 
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
@@ -103,68 +104,107 @@ export class StatusDropdown extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    // let { isPopupOpen, isSearch, idName } = this.props;
-    // let { selectedIndex, options } = this.state;
-    // if (prevProps.isPopupOpen != isPopupOpen) {
-    //   setTimeout(() => {
-    //     isPopupOpen && isSearch
-    //       ? this.searchInput && this.searchInput.focus()
-    //       : this.hiddenInput && this.hiddenInput.focus();
-    //   }, 10);
-    // }
-    // let mergeOptions = options;
-    // let option = mergeOptions[selectedIndex];
-    // let id = (option && option[idName]) || {};
-    // let selSuggestion = this[`suggestion_${id}`];
-    // if (isPopupOpen) {
-    //   this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
-    // }
+    let {
+      isPopupOpen,
+      isSearch,
+      idName
+    } = this.props;
+    let {
+      selectedIndex,
+      options
+    } = this.state;
+
+    if (prevProps.isPopupOpen != isPopupOpen) {
+      setTimeout(() => {
+        isPopupOpen && isSearch ? this.searchInput && this.searchInput.focus() : this.hiddenInput && this.hiddenInput.focus();
+      }, 10);
+    }
+
+    let mergeOptions = options;
+    let option = mergeOptions[selectedIndex];
+    let id = option && option[idName] || {};
+    let selSuggestion = this[`suggestion_${id}`];
+
+    if (isPopupOpen) {
+      this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
+    }
+
     if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
       this.onSearchClear();
     }
-  } // handleKeyDown(e) {
-  //   let { keyCode } = e;
-  //   let { selectedIndex, options } = this.state;
-  //   let totalIndex = options.length;
-  //   let { togglePopup, onClick, boxPosition, isPopupReady, isNextOptions, getNextOptions, onTogglePopup, isPopupOpen } =
-  //     this.props;
-  //   if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
-  //     e.preventDefault(); //prevent body scroll
-  //   }
-  //   if (isPopupReady) {
-  //     switch (keyCode) {
-  //       case 40:
-  //         if (selectedIndex === totalIndex - 1) {
-  //           this.setState({ selectedIndex: 0 });
-  //         } else {
-  //           if (selectedIndex === totalIndex - 3) {
-  //             isNextOptions && getNextOptions && getNextOptions();
-  //           }
-  //           this.setState({ selectedIndex: selectedIndex + 1 });
-  //         }
-  //         break;
-  //       case 38:
-  //         if (selectedIndex === 0) {
-  //           this.setState({ selectedIndex: totalIndex - 1 });
-  //         } else {
-  //           this.setState({ selectedIndex: selectedIndex - 1 });
-  //         }
-  //         break;
-  //       case 13:
-  //         onClick && onClick(options[selectedIndex].name, e);
-  //         onTogglePopup && onTogglePopup(isPopupOpen);
-  //         togglePopup(e, boxPosition);
-  //         break;
-  //       default:
-  //         break;
-  //     }
-  //   } else {
-  //     if (keyCode === 13 || keyCode === 40) {
-  //       togglePopup(e, boxPosition);
-  //     }
-  //   }
-  // }
+  }
+
+  handleKeyDown(e) {
+    let {
+      keyCode
+    } = e;
+    let {
+      selectedIndex,
+      options
+    } = this.state;
+    let totalIndex = options.length;
+    let {
+      togglePopup,
+      onClick,
+      boxPosition,
+      isPopupReady,
+      isNextOptions,
+      getNextOptions,
+      onTogglePopup,
+      isPopupOpen
+    } = this.props;
+
+    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      e.preventDefault(); //prevent body scroll
+    }
+
+    if (isPopupReady) {
+      switch (keyCode) {
+        case 40:
+          if (selectedIndex === totalIndex - 1) {
+            this.setState({
+              selectedIndex: 0
+            });
+          } else {
+            if (selectedIndex === totalIndex - 3) {
+              isNextOptions && getNextOptions && getNextOptions();
+            }
+
+            this.setState({
+              selectedIndex: selectedIndex + 1
+            });
+          }
+
+          break;
+
+        case 38:
+          if (selectedIndex === 0) {
+            this.setState({
+              selectedIndex: totalIndex - 1
+            });
+          } else {
+            this.setState({
+              selectedIndex: selectedIndex - 1
+            });
+          }
 
+          break;
+
+        case 13:
+          onClick && onClick(options[selectedIndex].name, e);
+          onTogglePopup && onTogglePopup(isPopupOpen);
+          togglePopup(e, boxPosition);
+          break;
+
+        default:
+          break;
+      }
+    } else {
+      if (keyCode === 13 || keyCode === 40) {
+        togglePopup(e, boxPosition);
+      }
+    }
+  }
 
   searchList(value) {
     let {
@@ -179,7 +219,7 @@ export class StatusDropdown extends React.Component {
     let foptions = this.searchList(value);
     this.setState({
       searchString: value,
-      // selectedIndex: -1,
+      selectedIndex: -1,
       options: foptions
     });
   }
@@ -190,12 +230,13 @@ export class StatusDropdown extends React.Component {
       searchString: '',
       options: foptions
     });
-  } // handleMouseEnter(id, value, index, e) {
-  //   this.setState({
-  //     selectedIndex: index
-  //   });
-  // }
+  }
 
+  handleMouseEnter(id, value, index, e) {
+    this.setState({
+      selectedIndex: index
+    });
+  }
 
   handleScroll(e) {
     const {
@@ -221,7 +262,8 @@ export class StatusDropdown extends React.Component {
 
   render() {
     let {
-      options
+      options,
+      selectedIndex
     } = this.state;
     let {
       value,
@@ -286,11 +328,12 @@ export class StatusDropdown extends React.Component {
       tagName: "button",
       alignBox: "row",
       className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
-      onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
+      onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : null,
       eleRef: getTargetRef,
       align: targetAlign,
       isCover: false,
       dataId: dataId,
+      onClick: removeClose,
       disabled: isDisabled || isReadOnly ? true : false,
       "aria-haspopup": isSearch ? 'listbox' : 'menu',
       "aria-expanded": isPopupReady && isEditable ? true : false,
@@ -298,7 +341,15 @@ export class StatusDropdown extends React.Component {
       "aria-labelledby": ariaLabelledby,
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled || isReadOnly
-    }, children ? children : /*#__PURE__*/React.createElement(Box, {
+    }, isEditable ? /*#__PURE__*/React.createElement("div", {
+      className: style.hiddenInput
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      type: "text",
+      inputRef: this.inputRef,
+      onKeyDown: this.handleKeyDown,
+      needAppearance: false,
+      placeHolder: placeHolderText
+    })) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
       className: `${style.value} toggleDropText`,
       shrink: true,
       tagName: "span",
@@ -332,10 +383,7 @@ export class StatusDropdown extends React.Component {
           customDropBoxWrap: style.dropBoxContainer
         },
         needResponsive: needResponsive,
-        isResponsivePadding: true,
-        tabindex: 0,
-        needFocusScope: true,
-        onClose: this.handleTogglePopup
+        isResponsivePadding: true
       }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
         className: style.search
       }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -344,13 +392,8 @@ export class StatusDropdown extends React.Component {
         value: searchString,
         onClear: this.onSearchClear,
         size: searchBoxSize,
-        inputRef: this.searchInputRef // onKeyDown={this.handleKeyDown}
-        ,
-        customProps: {
-          TextBoxProps: {
-            'data-a11y-autofocus': true
-          }
-        },
+        inputRef: this.searchInputRef,
+        onKeyDown: this.handleKeyDown,
         a11y: {
           ariaHaspopup: isSearch ? 'listbox' : 'menu',
           ariaExpanded: isPopupReady,
@@ -376,9 +419,8 @@ export class StatusDropdown extends React.Component {
         eleRef: this.scrollContentRef,
         onScroll: this.handleScroll,
         role: isSearch ? 'listbox' : 'menu',
-        "aria-labelledby": ariaTitleId // tabindex='-1'
-        ,
-        "data-scroll": "true"
+        "aria-labelledby": ariaTitleId,
+        tabindex: "-1"
       }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
         key: i
       }, /*#__PURE__*/React.createElement(StatusListItem, {
@@ -387,11 +429,11 @@ export class StatusDropdown extends React.Component {
         id: item[idName],
         active: value === item[keyName],
         onClick: this.onSelect.bind(this, item),
-        index: i // highlight={selectedIndex === i}
-        ,
+        index: i,
+        highlight: selectedIndex === i,
         needTick: needTick,
-        needBorder: false // onMouseEnter={this.handleMouseEnter}
-        ,
+        needBorder: false,
+        onMouseEnter: this.handleMouseEnter,
         getRef: this.itemRef,
         bulletColor: item[statusColor],
         title: item[keyName],
@@ -399,9 +441,8 @@ export class StatusDropdown extends React.Component {
         a11y: {
           role: isSearch ? 'option' : 'menuitem',
           ariaSelected: value === item[keyName],
-          'data-a11y-list-active': value === item[keyName]
-        },
-        autoHover: true
+          'data-a11y-list-active': selectedIndex === i
+        }
       })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
         className: style.svgWrapper,
         title: searchErrorText || 'No results',

package/es/list/status/StatusListItem/StatusListItem.js

@@ -1,5 +1,3 @@
-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); }
-
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -84,7 +82,7 @@ export default class StatusListItem extends React.Component {
       options.target = `_${target}`;
     }
 
-    return /*#__PURE__*/React.createElement(Container, _extends({
+    return /*#__PURE__*/React.createElement(Container, {
       role: role,
       "aria-selected": ariaSelected,
       isCover: false,
@@ -97,8 +95,10 @@ export default class StatusListItem extends React.Component {
       eleRef: this.getRef,
       tagName: isLink ? 'a' : 'li',
       "data-title": isDisabled ? disableTitle : null,
-      tabindex: isDisabled ? '-1' : '0'
-    }, options, a11y), /*#__PURE__*/React.createElement(Box, {
+      tabindex: isDisabled ? '-1' : '0',
+      ...options,
+      ...a11y
+    }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.statusType} ${style[bulletColor]}`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,

package/es/lookup/Lookup/Lookup.js

@@ -1,5 +1,3 @@
-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); }
-
 /*** Libraries ***/
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
@@ -78,7 +76,7 @@ export default class Lookup extends Component {
       needFocusLoop = true,
       needEnterAction = true
     } = focusScopeProps;
-    const content = /*#__PURE__*/React.createElement("div", _extends({
+    const content = /*#__PURE__*/React.createElement("div", {
       ref: this.createRef,
       tabIndex: "-1",
       "data-a11y-need-focus-style": "false",
@@ -90,8 +88,9 @@ export default class Lookup extends Component {
       id: htmlId,
       className: `${style.box} ${style[`${size}Size`]} ${lookupClass ? lookupClass : ''}`,
       "data-id": dataId,
-      "data-test-id": dataId
-    }, a11yAttributes), /*#__PURE__*/React.createElement(Container, {
+      "data-test-id": dataId,
+      ...a11yAttributes
+    }, /*#__PURE__*/React.createElement(Container, {
       "data-drag-container": "true",
       isCover: false,
       className: isMinHeight ? `${style.wrapper}` : `${style.coverwrap}`

package/es/lookup/header/Search/Search.js

@@ -1,5 +1,3 @@
-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); }
-
 /* eslint-disable react/forbid-component-props */
 
 /*** Libraries ***/
@@ -100,7 +98,11 @@ export default class Search extends Component {
       selectedId: selectedId,
       onDropDownOpen: this.handleDropDownOpen,
       onDropDownClose: this.handleDropDownClose
-    }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, this.props, searchUIExtraProps));
+    }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
+      ...searchUIExtraProps
+    })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
+      ...searchUIExtraProps
+    });
   }
 
 }

package/es/v1/DotWrapper/DotWrapper.js

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { getAppearance, getTheme, getZoomSize, getFontSize } from './libraryChunks/dynamicImports';
+import '@zohodesk/components/assets/Contrast/lightContrastLightness.module.css';
+import '@zohodesk/components/assets/Contrast/darkContrastLightness.module.css';
+import '@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css';
+import '@zohodesk/variables/assets/colorVariables.module.css';
+import '@zohodesk/variables/assets/dotVariables.module.css';
+import '@zohodesk/components/es/common/basic.module.css';
+import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
+import '@zohodesk/components/lib/common/boxShadow.module.css';
+import '../../common/dot_boxShadow.module.css';
+import { propTypes } from './props/propTypes';
+import { defaultProps } from './props/defaultProps';
+export default function DotWrapper(props) {
+  let {
+    $ui_appearance,
+    $ui_theme,
+    $ui_library,
+    $ui_baseZoomSize,
+    $ui_baseFontSize,
+    $method_wrapperRef
+  } = props;
+  useEffect(() => {
+    getAppearance($ui_appearance, $ui_library);
+  }, [$ui_appearance, $ui_library]);
+  useEffect(() => {
+    getTheme($ui_appearance, $ui_theme, $ui_library);
+  }, [$ui_appearance, $ui_theme, $ui_library]);
+  useEffect(() => {
+    $ui_baseZoomSize && getZoomSize();
+
+    if ($ui_baseZoomSize && $method_wrapperRef()) {
+      $method_wrapperRef().style.setProperty('--zd_baseSize', $ui_baseZoomSize);
+    }
+  }, [$ui_baseZoomSize]);
+  useEffect(() => {
+    $ui_baseFontSize && getFontSize();
+
+    if ($ui_baseFontSize && $method_wrapperRef()) {
+      $method_wrapperRef().style.setProperty('--zd_baseFontSize', $ui_baseFontSize);
+    }
+  }, [$ui_baseFontSize]);
+  return null;
+}
+DotWrapper.propTypes = propTypes;
+DotWrapper.defaultProps = defaultProps;

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

@@ -0,0 +1,24 @@
+import { appearanceImports, appearanceMapping } from "../utils/appearanceProperties";
+import { themeImports, themeMapping } from "../utils/themeProperties";
+import { imports, mapping } from "../utils/sizeProperties";
+import { processFiles } from "../utils/importFiles";
+import { errorMessage } from "../utils/errorMessage";
+const defaultLib = ['component', 'dot', 'svg'];
+const modeArray = ['light', 'dark', 'pureDark'];
+const themeArray = ['blue', 'green', 'orange', 'red', 'yellow'];
+export function getAppearance(mode, library) {
+  const libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+  errorMessage(modeArray, mode, 'appearance');
+  processFiles('appearance', libArray, appearanceMapping, appearanceImports, mode);
+}
+export function getTheme(mode, theme, library) {
+  const libArray = typeof library === 'string' ? [library] : library != undefined ? library : defaultLib;
+  errorMessage(themeArray, theme, 'theme');
+  processFiles('theme', libArray, themeMapping, themeImports, mode, theme);
+}
+export function getZoomSize() {
+  processFiles('zoom', null, mapping, imports);
+}
+export function getFontSize() {
+  processFiles('font', null, mapping, imports);
+}

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css';

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

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/component/red/Red_Light_Component.js

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/component/red/Red_PureDark_Component.js

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/component/yellow/Yellow_Dark_Component.js

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/component/yellow/Yellow_Light_Component.js

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/component/yellow/Yellow_PureDark_Component.js

@@ -0,0 +1,3 @@
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/blue/Blue_Light_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/green/Green_Dark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/green/Green_Light_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/green/Green_PureDark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/orange/Orange_Light_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/red/Red_Dark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/red/Red_Light_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/red/Red_PureDark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css';

package/es/v1/DotWrapper/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js

@@ -0,0 +1 @@
+import './../../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css';