@zohodesk/dot 1.9.6 → 1.9.8

package/README.md

@@ -2,6 +2,16 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.9.8
+
+- **DotProvider** - Variables package handled and separated the component & variable import files
+- **Dependency**: @zohodesk/variables@1.3.0 , @zohodesk/components@1.6.6
+
+# 1.9.7
+
+- **Upload** => upload_overlay_bg color contrast fixed
+- **DepartmentDropDown** Added DepartmentTextProps support under customProps
+
 # 1.9.5, # 1.9.6
 
 - **listCommon.module.css**  A css active ignore comment has been added to fix the hover and click pseudo-class collision issue on iOS tablets.

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -427,7 +427,7 @@
 	
 	/* upload */
 	--zdt_upload_default_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.2 + var(--zdc_alpha_high)));
+	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.2);
 	--zdt_upload_loader_default_bg:hsla(223, calc(var(--zd-saturation, 1) * 9.09%), calc(30.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_attachsize_default_text:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_uploadclose_default_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -427,7 +427,7 @@
 	
 	/* upload */
 	--zdt_upload_default_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.2 + var(--zdc_alpha_high)));
+	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.2);
 	--zdt_upload_loader_default_bg:hsla(223, calc(var(--zd-saturation, 1) * 9.09%), calc(30.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_attachsize_default_text:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_uploadclose_default_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -427,7 +427,7 @@
 	
 	/* upload */
 	--zdt_upload_default_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default)), calc( 0.2 + var(--zdc_alpha_high)));
+	--zdt_upload_overlay_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%,  0.2);
 	--zdt_upload_loader_default_bg:hsla(223, calc(var(--zd-saturation, 1) * 9.09%), calc(30.20% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_attachsize_default_text:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_upload_uploadclose_default_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

package/es/DotProvider/hooks/useDotProvider.js

@@ -1,8 +1,8 @@
 import { useLayoutEffect } from 'react';
 import useDownloadAssetsAndSetAttr from "./useDownloadAssetsAndSetAttr";
-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/Contrast/lightContrastLightness.module.css';
+import '@zohodesk/variables/assets/Contrast/darkContrastLightness.module.css';
+import '@zohodesk/variables/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';

package/es/DotProvider/libraryChunks/appearance/variables/Dark_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/dark/mode/globalTokens_DarkMode.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/Light_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/light/mode/globalTokens_LightMode.module.css';

package/es/DotProvider/libraryChunks/appearance/variables/PureDark_Variables.js

@@ -0,0 +1 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/mode/globalTokens_PureDarkMode.module.css';

package/es/DotProvider/libraryChunks/themes/component/blue/Blue_Dark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/blue/Blue_Light_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/blue/Blue_PureDark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/green/Green_Dark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/green/Green_Light_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/green/Green_PureDark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/orange/Orange_Dark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/orange/Orange_Light_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/orange/Orange_PureDark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/red/Red_Dark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/red/Red_Light_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/red/Red_PureDark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/yellow/Yellow_Dark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/yellow/Yellow_Light_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/component/yellow/Yellow_PureDark_Component.js

@@ -1,3 +1 @@
-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/DotProvider/libraryChunks/themes/variables/blue/Blue_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/blue/Blue_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/green/Green_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/orange/Orange_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/red/Red_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Dark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Light_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightModifyCategory.module.css';

package/es/DotProvider/libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables.js

@@ -0,0 +1,2 @@
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkTheme.module.css';
+import '@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkModifyCategory.module.css';

package/es/DotProvider/utils/constants.js

@@ -1,3 +1,4 @@
+export const LIBRARY_VARIABLES = 'variables';
 export const LIBRARY_COMPONENT = 'component';
 export const LIBRARY_DOT = 'dot';
 export const LIBRARY_SVG = 'svg';
@@ -9,6 +10,6 @@ export const THEME_COLOR_GREEN = 'green';
 export const THEME_COLOR_ORANGE = 'orange';
 export const THEME_COLOR_RED = 'red';
 export const THEME_COLOR_YELLOW = 'yellow';
-export const LIBRARIES = [LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
+export const LIBRARIES = [LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
 export const THEME_APPEARANCES = [THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_DARK, THEME_APPEARANCE_PURE_DARK];
 export const THEME_COLORS = [THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW];

package/es/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -1,5 +1,14 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
+import { LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK } from "./constants";
 export const themeAppearanceImports = {
+  Lib_LightMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_LightMode_Variables' */
+  "../libraryChunks/appearance/variables/Light_Variables"),
+  Lib_DarkMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_DarkMode_Variables' */
+  "../libraryChunks/appearance/variables/Dark_Variables"),
+  Lib_PureDarkMode_Variables: () => import(
+  /* webpackChunkName: 'Lib_PureDarkMode_Variables' */
+  "../libraryChunks/appearance/variables/PureDark_Variables"),
   Lib_LightMode_Component: () => import(
   /* webpackChunkName: 'Lib_LightMode_Component' */
   "../libraryChunks/appearance/component/Light_Component"),
@@ -29,6 +38,11 @@ export const themeAppearanceImports = {
   '@zohodesk/svg/assets/Appearance/pureDark/mode/SVG_PureDarkMode.module.css')
 };
 export const themeAppearanceMapping = {
+  [LIBRARY_VARIABLES]: {
+    [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Variables',
+    [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Variables',
+    [THEME_APPEARANCE_PURE_DARK]: 'Lib_PureDarkMode_Variables'
+  },
   [LIBRARY_COMPONENT]: {
     [THEME_APPEARANCE_LIGHT]: 'Lib_LightMode_Component',
     [THEME_APPEARANCE_DARK]: 'Lib_DarkMode_Component',

package/es/DotProvider/utils/themeColorAssetsConfig.js

@@ -1,5 +1,50 @@
-import { LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
+import { LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG, THEME_APPEARANCE_DARK, THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_PURE_DARK, THEME_COLOR_BLUE, THEME_COLOR_GREEN, THEME_COLOR_ORANGE, THEME_COLOR_RED, THEME_COLOR_YELLOW } from "./constants";
 export const themeColorImports = {
+  Lib_Blue_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_Light_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_Light_Variables"),
+  Lib_Blue_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_Dark_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_Dark_Variables"),
+  Lib_Blue_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Blue_PureDark_Variables' */
+  "../libraryChunks/themes/variables/blue/Blue_PureDark_Variables"),
+  Lib_Green_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_Light_Variables' */
+  "../libraryChunks/themes/variables/green/Green_Light_Variables"),
+  Lib_Green_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_Dark_Variables' */
+  "../libraryChunks/themes/variables/green/Green_Dark_Variables"),
+  Lib_Green_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Green_PureDark_Variables' */
+  "../libraryChunks/themes/variables/green/Green_PureDark_Variables"),
+  Lib_Orange_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_Light_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_Light_Variables"),
+  Lib_Orange_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_Dark_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_Dark_Variables"),
+  Lib_Orange_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Orange_PureDark_Variables' */
+  "../libraryChunks/themes/variables/orange/Orange_PureDark_Variables"),
+  Lib_Red_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_Light_Variables' */
+  "../libraryChunks/themes/variables/red/Red_Light_Variables"),
+  Lib_Red_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_Dark_Variables' */
+  "../libraryChunks/themes/variables/red/Red_Dark_Variables"),
+  Lib_Red_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Red_PureDark_Variables' */
+  "../libraryChunks/themes/variables/red/Red_PureDark_Variables"),
+  Lib_Yellow_Light_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Light_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_Light_Variables"),
+  Lib_Yellow_Dark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_Dark_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_Dark_Variables"),
+  Lib_Yellow_PureDark_Variables: () => import(
+  /* webpackChunkName: 'Lib_Yellow_PureDark_Variables' */
+  "../libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables"),
   Lib_Blue_Light_Component: () => import(
   /* webpackChunkName: 'Lib_Blue_Light_Component' */
   "../libraryChunks/themes/component/blue/Blue_Light_Component"),
@@ -137,6 +182,33 @@ export const themeColorImports = {
   "../libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG")
 };
 export const themeColorMapping = {
+  [LIBRARY_VARIABLES]: {
+    [THEME_COLOR_BLUE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Blue_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Blue_PureDark_Variables'
+    },
+    [THEME_COLOR_GREEN]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Green_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Green_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Green_PureDark_Variables'
+    },
+    [THEME_COLOR_ORANGE]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Orange_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Orange_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Orange_PureDark_Variables'
+    },
+    [THEME_COLOR_RED]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Red_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Red_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Red_PureDark_Variables'
+    },
+    [THEME_COLOR_YELLOW]: {
+      [THEME_APPEARANCE_LIGHT]: 'Lib_Yellow_Light_Variables',
+      [THEME_APPEARANCE_DARK]: 'Lib_Yellow_Dark_Variables',
+      [THEME_APPEARANCE_PURE_DARK]: 'Lib_Yellow_PureDark_Variables'
+    }
+  },
   [LIBRARY_COMPONENT]: {
     [THEME_COLOR_BLUE]: {
       [THEME_APPEARANCE_LIGHT]: 'Lib_Blue_Light_Component',

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -54,7 +54,8 @@ class DepartmentDropDown extends Component {
       customProps
     } = this.props;
     const {
-      ToggleDropDownProps = {}
+      ToggleDropDownProps = {},
+      DepartmentTextProps = {}
     } = customProps;
     let {
       title = 'Move Department',
@@ -73,10 +74,10 @@ class DepartmentDropDown extends Component {
     }, ToggleDropDownProps, {
       title: title,
       options: departmentList,
-      value: /*#__PURE__*/React.createElement(DepartmentText, {
+      value: /*#__PURE__*/React.createElement(DepartmentText, _extends({}, DepartmentTextProps, {
         text: departmentName,
         dataTitle: departmentName
-      }),
+      })),
       onClick: this.onMoveDepartment,
       isEditable: isEditable,
       onSelectLabel: onSelectLabel,

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -22,6 +22,7 @@ export const propTypes = {
     placeholder: PropTypes.string
   }),
   customProps: PropTypes.shape({
-    ToggleDropDownProps: PropTypes.object
+    ToggleDropDownProps: PropTypes.object,
+    DepartmentTextProps: PropTypes.object
   })
 };

package/lib/DotProvider/hooks/useDotProvider.js

@@ -9,11 +9,11 @@ var _react = require("react");
 
 var _useDownloadAssetsAndSetAttr = _interopRequireDefault(require("./useDownloadAssetsAndSetAttr"));
 
-require("@zohodesk/components/assets/Contrast/lightContrastLightness.module.css");
+require("@zohodesk/variables/assets/Contrast/lightContrastLightness.module.css");
 
-require("@zohodesk/components/assets/Contrast/darkContrastLightness.module.css");
+require("@zohodesk/variables/assets/Contrast/darkContrastLightness.module.css");
 
-require("@zohodesk/components/assets/Contrast/pureDarkContrastLightness.module.css");
+require("@zohodesk/variables/assets/Contrast/pureDarkContrastLightness.module.css");
 
 require("@zohodesk/variables/assets/colorVariables.module.css");
 

package/lib/DotProvider/libraryChunks/appearance/variables/Dark_Variables.js

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

package/lib/DotProvider/libraryChunks/appearance/variables/Light_Variables.js

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

package/lib/DotProvider/libraryChunks/appearance/variables/PureDark_Variables.js

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

package/lib/DotProvider/libraryChunks/themes/component/blue/Blue_Dark_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/blue/Blue_Light_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/blue/Blue_PureDark_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/green/Green_Dark_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/green/Green_Light_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/green/Green_PureDark_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/orange/Orange_Dark_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/orange/Orange_Light_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/orange/Orange_PureDark_Component.js

@@ -1,7 +1,3 @@
 "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/DotProvider/libraryChunks/themes/component/red/Red_Dark_Component.js

@@ -1,7 +1,3 @@
 "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");

package/lib/DotProvider/libraryChunks/themes/component/red/Red_Light_Component.js

@@ -1,7 +1,3 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css");
-
 require("@zohodesk/components/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/component/red/Red_PureDark_Component.js

@@ -1,7 +1,3 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css");
-
 require("@zohodesk/components/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/component/yellow/Yellow_Dark_Component.js

@@ -1,7 +1,3 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css");
-
 require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/component/yellow/Yellow_Light_Component.js

@@ -1,7 +1,3 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css");
-
 require("@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/component/yellow/Yellow_PureDark_Component.js

@@ -1,7 +1,3 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css");
-
-require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css");
-
 require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/blue/Blue_Dark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/blue/blue_ctaTokens_DarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/blue/Blue_Light_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/light/themes/blue/blue_ctaTokens_LightModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/blue/Blue_PureDark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/blue/blue_ctaTokens_PureDarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/green/Green_Dark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/green/green_ctaTokens_DarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/green/Green_Light_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/light/themes/green/green_ctaTokens_LightModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/green/Green_PureDark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/green/green_ctaTokens_PureDarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/orange/Orange_Dark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/orange/orange_ctaTokens_DarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/orange/Orange_Light_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/light/themes/orange/orange_ctaTokens_LightModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/orange/Orange_PureDark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/orange/orange_ctaTokens_PureDarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/red/Red_Dark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/red/red_ctaTokens_DarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/red/Red_Light_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/light/themes/red/red_ctaTokens_LightModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/red/Red_PureDark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/red/red_ctaTokens_PureDarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Dark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/dark/themes/yellow/yellow_ctaTokens_DarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/yellow/Yellow_Light_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/light/themes/yellow/yellow_ctaTokens_LightModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkTheme.module.css");
+
+require("@zohodesk/variables/assets/Appearance/pureDark/themes/yellow/yellow_ctaTokens_PureDarkModifyCategory.module.css");

package/lib/DotProvider/utils/constants.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.THEME_COLOR_YELLOW = exports.THEME_COLOR_RED = exports.THEME_COLOR_ORANGE = exports.THEME_COLOR_GREEN = exports.THEME_COLOR_BLUE = exports.THEME_COLORS = exports.THEME_APPEARANCE_PURE_DARK = exports.THEME_APPEARANCE_LIGHT = exports.THEME_APPEARANCE_DARK = exports.THEME_APPEARANCES = exports.LIBRARY_SVG = exports.LIBRARY_DOT = exports.LIBRARY_COMPONENT = exports.LIBRARIES = void 0;
+exports.THEME_COLOR_YELLOW = exports.THEME_COLOR_RED = exports.THEME_COLOR_ORANGE = exports.THEME_COLOR_GREEN = exports.THEME_COLOR_BLUE = exports.THEME_COLORS = exports.THEME_APPEARANCE_PURE_DARK = exports.THEME_APPEARANCE_LIGHT = exports.THEME_APPEARANCE_DARK = exports.THEME_APPEARANCES = exports.LIBRARY_VARIABLES = exports.LIBRARY_SVG = exports.LIBRARY_DOT = exports.LIBRARY_COMPONENT = exports.LIBRARIES = void 0;
+var LIBRARY_VARIABLES = 'variables';
+exports.LIBRARY_VARIABLES = LIBRARY_VARIABLES;
 var LIBRARY_COMPONENT = 'component';
 exports.LIBRARY_COMPONENT = LIBRARY_COMPONENT;
 var LIBRARY_DOT = 'dot';
@@ -26,7 +28,7 @@ var THEME_COLOR_RED = 'red';
 exports.THEME_COLOR_RED = THEME_COLOR_RED;
 var THEME_COLOR_YELLOW = 'yellow';
 exports.THEME_COLOR_YELLOW = THEME_COLOR_YELLOW;
-var LIBRARIES = [LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
+var LIBRARIES = [LIBRARY_VARIABLES, LIBRARY_COMPONENT, LIBRARY_DOT, LIBRARY_SVG];
 exports.LIBRARIES = LIBRARIES;
 var THEME_APPEARANCES = [THEME_APPEARANCE_LIGHT, THEME_APPEARANCE_DARK, THEME_APPEARANCE_PURE_DARK];
 exports.THEME_APPEARANCES = THEME_APPEARANCES;

package/lib/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -7,7 +7,7 @@ exports.themeAppearanceMapping = exports.themeAppearanceImports = void 0;
 
 var _constants = require("./constants");
 
-var _LIBRARY_COMPONENT, _LIBRARY_DOT, _LIBRARY_SVG, _themeAppearanceMappi;
+var _LIBRARY_VARIABLES, _LIBRARY_COMPONENT, _LIBRARY_DOT, _LIBRARY_SVG, _themeAppearanceMappi;
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -18,6 +18,21 @@ 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; }
 
 var themeAppearanceImports = {
+  Lib_LightMode_Variables: function Lib_LightMode_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/appearance/variables/Light_Variables"));
+    });
+  },
+  Lib_DarkMode_Variables: function Lib_DarkMode_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/appearance/variables/Dark_Variables"));
+    });
+  },
+  Lib_PureDarkMode_Variables: function Lib_PureDarkMode_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/appearance/variables/PureDark_Variables"));
+    });
+  },
   Lib_LightMode_Component: function Lib_LightMode_Component() {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require("../libraryChunks/appearance/component/Light_Component"));
@@ -65,5 +80,5 @@ var themeAppearanceImports = {
   }
 };
 exports.themeAppearanceImports = themeAppearanceImports;
-var themeAppearanceMapping = (_themeAppearanceMappi = {}, _defineProperty(_themeAppearanceMappi, _constants.LIBRARY_COMPONENT, (_LIBRARY_COMPONENT = {}, _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_APPEARANCE_LIGHT, 'Lib_LightMode_Component'), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_APPEARANCE_DARK, 'Lib_DarkMode_Component'), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_PureDarkMode_Component'), _LIBRARY_COMPONENT)), _defineProperty(_themeAppearanceMappi, _constants.LIBRARY_DOT, (_LIBRARY_DOT = {}, _defineProperty(_LIBRARY_DOT, _constants.THEME_APPEARANCE_LIGHT, 'Lib_LightMode_Dot'), _defineProperty(_LIBRARY_DOT, _constants.THEME_APPEARANCE_DARK, 'Lib_DarkMode_Dot'), _defineProperty(_LIBRARY_DOT, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_PureDarkMode_Dot'), _LIBRARY_DOT)), _defineProperty(_themeAppearanceMappi, _constants.LIBRARY_SVG, (_LIBRARY_SVG = {}, _defineProperty(_LIBRARY_SVG, _constants.THEME_APPEARANCE_LIGHT, 'Lib_LightMode_SVG'), _defineProperty(_LIBRARY_SVG, _constants.THEME_APPEARANCE_DARK, 'Lib_DarkMode_SVG'), _defineProperty(_LIBRARY_SVG, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_PureDarkMode_SVG'), _LIBRARY_SVG)), _themeAppearanceMappi);
+var themeAppearanceMapping = (_themeAppearanceMappi = {}, _defineProperty(_themeAppearanceMappi, _constants.LIBRARY_VARIABLES, (_LIBRARY_VARIABLES = {}, _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_APPEARANCE_LIGHT, 'Lib_LightMode_Variables'), _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_APPEARANCE_DARK, 'Lib_DarkMode_Variables'), _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_PureDarkMode_Variables'), _LIBRARY_VARIABLES)), _defineProperty(_themeAppearanceMappi, _constants.LIBRARY_COMPONENT, (_LIBRARY_COMPONENT = {}, _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_APPEARANCE_LIGHT, 'Lib_LightMode_Component'), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_APPEARANCE_DARK, 'Lib_DarkMode_Component'), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_PureDarkMode_Component'), _LIBRARY_COMPONENT)), _defineProperty(_themeAppearanceMappi, _constants.LIBRARY_DOT, (_LIBRARY_DOT = {}, _defineProperty(_LIBRARY_DOT, _constants.THEME_APPEARANCE_LIGHT, 'Lib_LightMode_Dot'), _defineProperty(_LIBRARY_DOT, _constants.THEME_APPEARANCE_DARK, 'Lib_DarkMode_Dot'), _defineProperty(_LIBRARY_DOT, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_PureDarkMode_Dot'), _LIBRARY_DOT)), _defineProperty(_themeAppearanceMappi, _constants.LIBRARY_SVG, (_LIBRARY_SVG = {}, _defineProperty(_LIBRARY_SVG, _constants.THEME_APPEARANCE_LIGHT, 'Lib_LightMode_SVG'), _defineProperty(_LIBRARY_SVG, _constants.THEME_APPEARANCE_DARK, 'Lib_DarkMode_SVG'), _defineProperty(_LIBRARY_SVG, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_PureDarkMode_SVG'), _LIBRARY_SVG)), _themeAppearanceMappi);
 exports.themeAppearanceMapping = themeAppearanceMapping;

package/lib/DotProvider/utils/themeColorAssetsConfig.js

@@ -7,7 +7,7 @@ exports.themeColorMapping = exports.themeColorImports = void 0;
 
 var _constants = require("./constants");
 
-var _THEME_COLOR_BLUE, _THEME_COLOR_GREEN, _THEME_COLOR_ORANGE, _THEME_COLOR_RED, _THEME_COLOR_YELLOW, _LIBRARY_COMPONENT, _THEME_COLOR_BLUE2, _THEME_COLOR_GREEN2, _THEME_COLOR_ORANGE2, _THEME_COLOR_RED2, _THEME_COLOR_YELLOW2, _LIBRARY_DOT, _THEME_COLOR_BLUE3, _THEME_COLOR_GREEN3, _THEME_COLOR_ORANGE3, _THEME_COLOR_RED3, _THEME_COLOR_YELLOW3, _LIBRARY_SVG, _themeColorMapping;
+var _THEME_COLOR_BLUE, _THEME_COLOR_GREEN, _THEME_COLOR_ORANGE, _THEME_COLOR_RED, _THEME_COLOR_YELLOW, _LIBRARY_VARIABLES, _THEME_COLOR_BLUE2, _THEME_COLOR_GREEN2, _THEME_COLOR_ORANGE2, _THEME_COLOR_RED2, _THEME_COLOR_YELLOW2, _LIBRARY_COMPONENT, _THEME_COLOR_BLUE3, _THEME_COLOR_GREEN3, _THEME_COLOR_ORANGE3, _THEME_COLOR_RED3, _THEME_COLOR_YELLOW3, _LIBRARY_DOT, _THEME_COLOR_BLUE4, _THEME_COLOR_GREEN4, _THEME_COLOR_ORANGE4, _THEME_COLOR_RED4, _THEME_COLOR_YELLOW4, _LIBRARY_SVG, _themeColorMapping;
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -18,6 +18,81 @@ 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; }
 
 var themeColorImports = {
+  Lib_Blue_Light_Variables: function Lib_Blue_Light_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/blue/Blue_Light_Variables"));
+    });
+  },
+  Lib_Blue_Dark_Variables: function Lib_Blue_Dark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/blue/Blue_Dark_Variables"));
+    });
+  },
+  Lib_Blue_PureDark_Variables: function Lib_Blue_PureDark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/blue/Blue_PureDark_Variables"));
+    });
+  },
+  Lib_Green_Light_Variables: function Lib_Green_Light_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/green/Green_Light_Variables"));
+    });
+  },
+  Lib_Green_Dark_Variables: function Lib_Green_Dark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/green/Green_Dark_Variables"));
+    });
+  },
+  Lib_Green_PureDark_Variables: function Lib_Green_PureDark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/green/Green_PureDark_Variables"));
+    });
+  },
+  Lib_Orange_Light_Variables: function Lib_Orange_Light_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/orange/Orange_Light_Variables"));
+    });
+  },
+  Lib_Orange_Dark_Variables: function Lib_Orange_Dark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/orange/Orange_Dark_Variables"));
+    });
+  },
+  Lib_Orange_PureDark_Variables: function Lib_Orange_PureDark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/orange/Orange_PureDark_Variables"));
+    });
+  },
+  Lib_Red_Light_Variables: function Lib_Red_Light_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/red/Red_Light_Variables"));
+    });
+  },
+  Lib_Red_Dark_Variables: function Lib_Red_Dark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/red/Red_Dark_Variables"));
+    });
+  },
+  Lib_Red_PureDark_Variables: function Lib_Red_PureDark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/red/Red_PureDark_Variables"));
+    });
+  },
+  Lib_Yellow_Light_Variables: function Lib_Yellow_Light_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/yellow/Yellow_Light_Variables"));
+    });
+  },
+  Lib_Yellow_Dark_Variables: function Lib_Yellow_Dark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/yellow/Yellow_Dark_Variables"));
+    });
+  },
+  Lib_Yellow_PureDark_Variables: function Lib_Yellow_PureDark_Variables() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require("../libraryChunks/themes/variables/yellow/Yellow_PureDark_Variables"));
+    });
+  },
   Lib_Blue_Light_Component: function Lib_Blue_Light_Component() {
     return Promise.resolve().then(function () {
       return _interopRequireWildcard(require("../libraryChunks/themes/component/blue/Blue_Light_Component"));
@@ -245,5 +320,5 @@ var themeColorImports = {
   }
 };
 exports.themeColorImports = themeColorImports;
-var themeColorMapping = (_themeColorMapping = {}, _defineProperty(_themeColorMapping, _constants.LIBRARY_COMPONENT, (_LIBRARY_COMPONENT = {}, _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_BLUE, (_THEME_COLOR_BLUE = {}, _defineProperty(_THEME_COLOR_BLUE, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Blue_Light_Component'), _defineProperty(_THEME_COLOR_BLUE, _constants.THEME_APPEARANCE_DARK, 'Lib_Blue_Dark_Component'), _defineProperty(_THEME_COLOR_BLUE, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Blue_PureDark_Component'), _THEME_COLOR_BLUE)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_GREEN, (_THEME_COLOR_GREEN = {}, _defineProperty(_THEME_COLOR_GREEN, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Green_Light_Component'), _defineProperty(_THEME_COLOR_GREEN, _constants.THEME_APPEARANCE_DARK, 'Lib_Green_Dark_Component'), _defineProperty(_THEME_COLOR_GREEN, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Green_PureDark_Component'), _THEME_COLOR_GREEN)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_ORANGE, (_THEME_COLOR_ORANGE = {}, _defineProperty(_THEME_COLOR_ORANGE, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Orange_Light_Component'), _defineProperty(_THEME_COLOR_ORANGE, _constants.THEME_APPEARANCE_DARK, 'Lib_Orange_Dark_Component'), _defineProperty(_THEME_COLOR_ORANGE, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Orange_PureDark_Component'), _THEME_COLOR_ORANGE)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_RED, (_THEME_COLOR_RED = {}, _defineProperty(_THEME_COLOR_RED, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Red_Light_Component'), _defineProperty(_THEME_COLOR_RED, _constants.THEME_APPEARANCE_DARK, 'Lib_Red_Dark_Component'), _defineProperty(_THEME_COLOR_RED, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Red_PureDark_Component'), _THEME_COLOR_RED)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_YELLOW, (_THEME_COLOR_YELLOW = {}, _defineProperty(_THEME_COLOR_YELLOW, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Yellow_Light_Component'), _defineProperty(_THEME_COLOR_YELLOW, _constants.THEME_APPEARANCE_DARK, 'Lib_Yellow_Dark_Component'), _defineProperty(_THEME_COLOR_YELLOW, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Yellow_PureDark_Component'), _THEME_COLOR_YELLOW)), _LIBRARY_COMPONENT)), _defineProperty(_themeColorMapping, _constants.LIBRARY_DOT, (_LIBRARY_DOT = {}, _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_BLUE, (_THEME_COLOR_BLUE2 = {}, _defineProperty(_THEME_COLOR_BLUE2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Blue_Light_Dot'), _defineProperty(_THEME_COLOR_BLUE2, _constants.THEME_APPEARANCE_DARK, 'Lib_Blue_Dark_Dot'), _defineProperty(_THEME_COLOR_BLUE2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Blue_PureDark_Dot'), _THEME_COLOR_BLUE2)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_GREEN, (_THEME_COLOR_GREEN2 = {}, _defineProperty(_THEME_COLOR_GREEN2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Green_Light_Dot'), _defineProperty(_THEME_COLOR_GREEN2, _constants.THEME_APPEARANCE_DARK, 'Lib_Green_Dark_Dot'), _defineProperty(_THEME_COLOR_GREEN2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Green_PureDark_Dot'), _THEME_COLOR_GREEN2)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_ORANGE, (_THEME_COLOR_ORANGE2 = {}, _defineProperty(_THEME_COLOR_ORANGE2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Orange_Light_Dot'), _defineProperty(_THEME_COLOR_ORANGE2, _constants.THEME_APPEARANCE_DARK, 'Lib_Orange_Dark_Dot'), _defineProperty(_THEME_COLOR_ORANGE2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Orange_PureDark_Dot'), _THEME_COLOR_ORANGE2)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_RED, (_THEME_COLOR_RED2 = {}, _defineProperty(_THEME_COLOR_RED2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Red_Light_Dot'), _defineProperty(_THEME_COLOR_RED2, _constants.THEME_APPEARANCE_DARK, 'Lib_Red_Dark_Dot'), _defineProperty(_THEME_COLOR_RED2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Red_PureDark_Dot'), _THEME_COLOR_RED2)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_YELLOW, (_THEME_COLOR_YELLOW2 = {}, _defineProperty(_THEME_COLOR_YELLOW2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Yellow_Light_Dot'), _defineProperty(_THEME_COLOR_YELLOW2, _constants.THEME_APPEARANCE_DARK, 'Lib_Yellow_Dark_Dot'), _defineProperty(_THEME_COLOR_YELLOW2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Yellow_PureDark_Dot'), _THEME_COLOR_YELLOW2)), _LIBRARY_DOT)), _defineProperty(_themeColorMapping, _constants.LIBRARY_SVG, (_LIBRARY_SVG = {}, _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_BLUE, (_THEME_COLOR_BLUE3 = {}, _defineProperty(_THEME_COLOR_BLUE3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Blue_Light_SVG'), _defineProperty(_THEME_COLOR_BLUE3, _constants.THEME_APPEARANCE_DARK, 'Lib_Blue_Dark_SVG'), _defineProperty(_THEME_COLOR_BLUE3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Blue_PureDark_SVG'), _THEME_COLOR_BLUE3)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_GREEN, (_THEME_COLOR_GREEN3 = {}, _defineProperty(_THEME_COLOR_GREEN3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Green_Light_SVG'), _defineProperty(_THEME_COLOR_GREEN3, _constants.THEME_APPEARANCE_DARK, 'Lib_Green_Dark_SVG'), _defineProperty(_THEME_COLOR_GREEN3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Green_PureDark_SVG'), _THEME_COLOR_GREEN3)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_ORANGE, (_THEME_COLOR_ORANGE3 = {}, _defineProperty(_THEME_COLOR_ORANGE3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Orange_Light_SVG'), _defineProperty(_THEME_COLOR_ORANGE3, _constants.THEME_APPEARANCE_DARK, 'Lib_Orange_Dark_SVG'), _defineProperty(_THEME_COLOR_ORANGE3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Orange_PureDark_SVG'), _THEME_COLOR_ORANGE3)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_RED, (_THEME_COLOR_RED3 = {}, _defineProperty(_THEME_COLOR_RED3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Red_Light_SVG'), _defineProperty(_THEME_COLOR_RED3, _constants.THEME_APPEARANCE_DARK, 'Lib_Red_Dark_SVG'), _defineProperty(_THEME_COLOR_RED3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Red_PureDark_SVG'), _THEME_COLOR_RED3)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_YELLOW, (_THEME_COLOR_YELLOW3 = {}, _defineProperty(_THEME_COLOR_YELLOW3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Yellow_Light_SVG'), _defineProperty(_THEME_COLOR_YELLOW3, _constants.THEME_APPEARANCE_DARK, 'Lib_Yellow_Dark_SVG'), _defineProperty(_THEME_COLOR_YELLOW3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Yellow_PureDark_SVG'), _THEME_COLOR_YELLOW3)), _LIBRARY_SVG)), _themeColorMapping);
+var themeColorMapping = (_themeColorMapping = {}, _defineProperty(_themeColorMapping, _constants.LIBRARY_VARIABLES, (_LIBRARY_VARIABLES = {}, _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_COLOR_BLUE, (_THEME_COLOR_BLUE = {}, _defineProperty(_THEME_COLOR_BLUE, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Blue_Light_Variables'), _defineProperty(_THEME_COLOR_BLUE, _constants.THEME_APPEARANCE_DARK, 'Lib_Blue_Dark_Variables'), _defineProperty(_THEME_COLOR_BLUE, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Blue_PureDark_Variables'), _THEME_COLOR_BLUE)), _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_COLOR_GREEN, (_THEME_COLOR_GREEN = {}, _defineProperty(_THEME_COLOR_GREEN, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Green_Light_Variables'), _defineProperty(_THEME_COLOR_GREEN, _constants.THEME_APPEARANCE_DARK, 'Lib_Green_Dark_Variables'), _defineProperty(_THEME_COLOR_GREEN, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Green_PureDark_Variables'), _THEME_COLOR_GREEN)), _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_COLOR_ORANGE, (_THEME_COLOR_ORANGE = {}, _defineProperty(_THEME_COLOR_ORANGE, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Orange_Light_Variables'), _defineProperty(_THEME_COLOR_ORANGE, _constants.THEME_APPEARANCE_DARK, 'Lib_Orange_Dark_Variables'), _defineProperty(_THEME_COLOR_ORANGE, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Orange_PureDark_Variables'), _THEME_COLOR_ORANGE)), _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_COLOR_RED, (_THEME_COLOR_RED = {}, _defineProperty(_THEME_COLOR_RED, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Red_Light_Variables'), _defineProperty(_THEME_COLOR_RED, _constants.THEME_APPEARANCE_DARK, 'Lib_Red_Dark_Variables'), _defineProperty(_THEME_COLOR_RED, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Red_PureDark_Variables'), _THEME_COLOR_RED)), _defineProperty(_LIBRARY_VARIABLES, _constants.THEME_COLOR_YELLOW, (_THEME_COLOR_YELLOW = {}, _defineProperty(_THEME_COLOR_YELLOW, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Yellow_Light_Variables'), _defineProperty(_THEME_COLOR_YELLOW, _constants.THEME_APPEARANCE_DARK, 'Lib_Yellow_Dark_Variables'), _defineProperty(_THEME_COLOR_YELLOW, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Yellow_PureDark_Variables'), _THEME_COLOR_YELLOW)), _LIBRARY_VARIABLES)), _defineProperty(_themeColorMapping, _constants.LIBRARY_COMPONENT, (_LIBRARY_COMPONENT = {}, _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_BLUE, (_THEME_COLOR_BLUE2 = {}, _defineProperty(_THEME_COLOR_BLUE2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Blue_Light_Component'), _defineProperty(_THEME_COLOR_BLUE2, _constants.THEME_APPEARANCE_DARK, 'Lib_Blue_Dark_Component'), _defineProperty(_THEME_COLOR_BLUE2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Blue_PureDark_Component'), _THEME_COLOR_BLUE2)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_GREEN, (_THEME_COLOR_GREEN2 = {}, _defineProperty(_THEME_COLOR_GREEN2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Green_Light_Component'), _defineProperty(_THEME_COLOR_GREEN2, _constants.THEME_APPEARANCE_DARK, 'Lib_Green_Dark_Component'), _defineProperty(_THEME_COLOR_GREEN2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Green_PureDark_Component'), _THEME_COLOR_GREEN2)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_ORANGE, (_THEME_COLOR_ORANGE2 = {}, _defineProperty(_THEME_COLOR_ORANGE2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Orange_Light_Component'), _defineProperty(_THEME_COLOR_ORANGE2, _constants.THEME_APPEARANCE_DARK, 'Lib_Orange_Dark_Component'), _defineProperty(_THEME_COLOR_ORANGE2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Orange_PureDark_Component'), _THEME_COLOR_ORANGE2)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_RED, (_THEME_COLOR_RED2 = {}, _defineProperty(_THEME_COLOR_RED2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Red_Light_Component'), _defineProperty(_THEME_COLOR_RED2, _constants.THEME_APPEARANCE_DARK, 'Lib_Red_Dark_Component'), _defineProperty(_THEME_COLOR_RED2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Red_PureDark_Component'), _THEME_COLOR_RED2)), _defineProperty(_LIBRARY_COMPONENT, _constants.THEME_COLOR_YELLOW, (_THEME_COLOR_YELLOW2 = {}, _defineProperty(_THEME_COLOR_YELLOW2, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Yellow_Light_Component'), _defineProperty(_THEME_COLOR_YELLOW2, _constants.THEME_APPEARANCE_DARK, 'Lib_Yellow_Dark_Component'), _defineProperty(_THEME_COLOR_YELLOW2, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Yellow_PureDark_Component'), _THEME_COLOR_YELLOW2)), _LIBRARY_COMPONENT)), _defineProperty(_themeColorMapping, _constants.LIBRARY_DOT, (_LIBRARY_DOT = {}, _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_BLUE, (_THEME_COLOR_BLUE3 = {}, _defineProperty(_THEME_COLOR_BLUE3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Blue_Light_Dot'), _defineProperty(_THEME_COLOR_BLUE3, _constants.THEME_APPEARANCE_DARK, 'Lib_Blue_Dark_Dot'), _defineProperty(_THEME_COLOR_BLUE3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Blue_PureDark_Dot'), _THEME_COLOR_BLUE3)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_GREEN, (_THEME_COLOR_GREEN3 = {}, _defineProperty(_THEME_COLOR_GREEN3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Green_Light_Dot'), _defineProperty(_THEME_COLOR_GREEN3, _constants.THEME_APPEARANCE_DARK, 'Lib_Green_Dark_Dot'), _defineProperty(_THEME_COLOR_GREEN3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Green_PureDark_Dot'), _THEME_COLOR_GREEN3)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_ORANGE, (_THEME_COLOR_ORANGE3 = {}, _defineProperty(_THEME_COLOR_ORANGE3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Orange_Light_Dot'), _defineProperty(_THEME_COLOR_ORANGE3, _constants.THEME_APPEARANCE_DARK, 'Lib_Orange_Dark_Dot'), _defineProperty(_THEME_COLOR_ORANGE3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Orange_PureDark_Dot'), _THEME_COLOR_ORANGE3)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_RED, (_THEME_COLOR_RED3 = {}, _defineProperty(_THEME_COLOR_RED3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Red_Light_Dot'), _defineProperty(_THEME_COLOR_RED3, _constants.THEME_APPEARANCE_DARK, 'Lib_Red_Dark_Dot'), _defineProperty(_THEME_COLOR_RED3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Red_PureDark_Dot'), _THEME_COLOR_RED3)), _defineProperty(_LIBRARY_DOT, _constants.THEME_COLOR_YELLOW, (_THEME_COLOR_YELLOW3 = {}, _defineProperty(_THEME_COLOR_YELLOW3, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Yellow_Light_Dot'), _defineProperty(_THEME_COLOR_YELLOW3, _constants.THEME_APPEARANCE_DARK, 'Lib_Yellow_Dark_Dot'), _defineProperty(_THEME_COLOR_YELLOW3, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Yellow_PureDark_Dot'), _THEME_COLOR_YELLOW3)), _LIBRARY_DOT)), _defineProperty(_themeColorMapping, _constants.LIBRARY_SVG, (_LIBRARY_SVG = {}, _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_BLUE, (_THEME_COLOR_BLUE4 = {}, _defineProperty(_THEME_COLOR_BLUE4, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Blue_Light_SVG'), _defineProperty(_THEME_COLOR_BLUE4, _constants.THEME_APPEARANCE_DARK, 'Lib_Blue_Dark_SVG'), _defineProperty(_THEME_COLOR_BLUE4, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Blue_PureDark_SVG'), _THEME_COLOR_BLUE4)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_GREEN, (_THEME_COLOR_GREEN4 = {}, _defineProperty(_THEME_COLOR_GREEN4, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Green_Light_SVG'), _defineProperty(_THEME_COLOR_GREEN4, _constants.THEME_APPEARANCE_DARK, 'Lib_Green_Dark_SVG'), _defineProperty(_THEME_COLOR_GREEN4, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Green_PureDark_SVG'), _THEME_COLOR_GREEN4)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_ORANGE, (_THEME_COLOR_ORANGE4 = {}, _defineProperty(_THEME_COLOR_ORANGE4, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Orange_Light_SVG'), _defineProperty(_THEME_COLOR_ORANGE4, _constants.THEME_APPEARANCE_DARK, 'Lib_Orange_Dark_SVG'), _defineProperty(_THEME_COLOR_ORANGE4, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Orange_PureDark_SVG'), _THEME_COLOR_ORANGE4)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_RED, (_THEME_COLOR_RED4 = {}, _defineProperty(_THEME_COLOR_RED4, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Red_Light_SVG'), _defineProperty(_THEME_COLOR_RED4, _constants.THEME_APPEARANCE_DARK, 'Lib_Red_Dark_SVG'), _defineProperty(_THEME_COLOR_RED4, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Red_PureDark_SVG'), _THEME_COLOR_RED4)), _defineProperty(_LIBRARY_SVG, _constants.THEME_COLOR_YELLOW, (_THEME_COLOR_YELLOW4 = {}, _defineProperty(_THEME_COLOR_YELLOW4, _constants.THEME_APPEARANCE_LIGHT, 'Lib_Yellow_Light_SVG'), _defineProperty(_THEME_COLOR_YELLOW4, _constants.THEME_APPEARANCE_DARK, 'Lib_Yellow_Dark_SVG'), _defineProperty(_THEME_COLOR_YELLOW4, _constants.THEME_APPEARANCE_PURE_DARK, 'Lib_Yellow_PureDark_SVG'), _THEME_COLOR_YELLOW4)), _LIBRARY_SVG)), _themeColorMapping);
 exports.themeColorMapping = themeColorMapping;

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -105,7 +105,9 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props3.i18nKeys,
           customProps = _this$props3.customProps;
       var _customProps$ToggleDr = customProps.ToggleDropDownProps,
-          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr;
+          ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
+          _customProps$Departme = customProps.DepartmentTextProps,
+          DepartmentTextProps = _customProps$Departme === void 0 ? {} : _customProps$Departme;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -125,10 +127,10 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
       }, ToggleDropDownProps, {
         title: title,
         options: departmentList,
-        value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
+        value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, _extends({}, DepartmentTextProps, {
           text: departmentName,
           dataTitle: departmentName
-        }),
+        })),
         onClick: this.onMoveDepartment,
         isEditable: isEditable,
         onSelectLabel: onSelectLabel,

package/lib/list/DepartmentDropDown/props/propTypes.js

@@ -32,6 +32,7 @@ var propTypes = (_propTypes = {
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
 })), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
-  ToggleDropDownProps: _propTypes2["default"].object
+  ToggleDropDownProps: _propTypes2["default"].object,
+  DepartmentTextProps: _propTypes2["default"].object
 })), _propTypes);
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/dot",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "main": "lib/index",
   "module": "es/index.js",
   "private": false,
@@ -68,26 +68,26 @@
     "@zohodesk-private/node-plugins": "1.1.13",
     "@zohodesk-private/react-prop-validator": "1.2.3",
     "@zohodesk/a11y": "2.3.8",
-    "@zohodesk/components": "1.6.3",
+    "@zohodesk/components": "1.6.6",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.2.4",
-    "@zohodesk/layout": "^3.1.0",
-    "@zohodesk/svg": "1.3.2",
+    "@zohodesk/icons": "1.2.8",
+    "@zohodesk/layout": "3.1.0",
+    "@zohodesk/svg": "1.3.3",
     "@zohodesk/utils": "1.3.16",
-    "@zohodesk/variables": "1.2.0",
+    "@zohodesk/variables": "1.3.0",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "velocity-react": "1.4.3",
-    "@zohodesk/dotkit": "1.0.7",
+    "@zohodesk/dotkit": "1.0.9",
     "@zohodesk/react-cli": "1.1.27",
     "@zohodesk/client_build_tool": "0.0.20"
   },
   "peerDependencies": {
     "velocity-react": "1.4.3",
-    "@zohodesk/variables": "1.2.0",
-    "@zohodesk/components": "1.6.3",
-    "@zohodesk/icons": "1.2.4",
-    "@zohodesk/svg": "1.3.2",
+    "@zohodesk/variables": "1.3.0",
+    "@zohodesk/components": "1.6.6",
+    "@zohodesk/icons": "1.2.8",
+    "@zohodesk/svg": "1.3.3",
     "@zohodesk/virtualizer": "1.0.13",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",