@zohodesk/dot 1.0.0-temp-187.1 → 1.0.0-temp-199

package/README.md

@@ -2,6 +2,17 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.0
+
+- **DotProvider** - Introduced `DotProvider` component.
+
+# 1.6.2
+- **CurrencyField** 
+  - The focus action triggers only when the readonly property is set to false.
+  
+- **StatusDropdown** 
+ - `renderTargetElement` and `renderFooterElement` props added 
+
 # 1.6.1
 
 - **Image (v0&v1)** 

package/es/DotProvider/DotProvider.js

@@ -0,0 +1,60 @@
+import React, { useRef, useCallback, forwardRef } from "react";
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import useDotProvider from "./hooks/useDotProvider";
+const DotProvider = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    tag: Element = 'div',
+    themeAppearance,
+    themeColor,
+    baseZoomUnit,
+    baseFontUnit,
+    zoomUnitVariable,
+    fontUnitVariable,
+    themeAppearanceAttr,
+    themeColorAttr,
+    providerRef,
+    onAssetsDownloadSuccess,
+    getAssetsPromises,
+    children,
+    ...rest
+  } = props;
+  const wrapperElementRef = useRef(null);
+  const getProviderElement = useCallback(() => {
+    if (typeof providerRef === 'function') {
+      return providerRef();
+    } else if (Element !== React.Fragment) {
+      return wrapperElementRef.current;
+    } else {
+      return document.documentElement;
+    }
+  }, [providerRef, Element]);
+  const getEleRef = useCallback(ele => {
+    wrapperElementRef.current = ele;
+
+    if (ref && typeof ref === 'function') {
+      ref(ele);
+    } else if (ref && typeof ref === 'object') {
+      ref.current = ele;
+    }
+  }, [ref]);
+  useDotProvider({
+    themeAppearance: themeAppearance,
+    themeColor: themeColor,
+    themeAppearanceAttr: themeAppearanceAttr,
+    themeColorAttr: themeColorAttr,
+    baseZoomUnit: baseZoomUnit,
+    baseFontUnit: baseFontUnit,
+    zoomUnitVariable: zoomUnitVariable,
+    fontUnitVariable: fontUnitVariable,
+    getProviderElement,
+    onAssetsDownloadSuccess: onAssetsDownloadSuccess,
+    getAssetsPromises: getAssetsPromises
+  });
+  return /*#__PURE__*/React.createElement(Element, { ...rest,
+    ref: getEleRef
+  }, children);
+});
+DotProvider.propTypes = propTypes;
+DotProvider.defaultProps = defaultProps;
+export default DotProvider;

package/es/DotProvider/hooks/useDotProvider.js

@@ -0,0 +1,55 @@
+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/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";
+
+function useDotProvider(_ref) {
+  let {
+    themeAppearance,
+    themeColor,
+    baseZoomUnit,
+    baseFontUnit,
+    getProviderElement,
+    zoomUnitVariable,
+    fontUnitVariable,
+    themeAppearanceAttr,
+    themeColorAttr,
+    onAssetsDownloadSuccess,
+    getAssetsPromises
+  } = _ref;
+  const assetsPromises = useDownloadAssetsAndSetAttr({
+    themeAppearance,
+    themeColor,
+    baseZoomUnit,
+    baseFontUnit,
+    getProviderElement,
+    zoomUnitVariable,
+    fontUnitVariable,
+    themeAppearanceAttr,
+    themeColorAttr
+  });
+  const {
+    themeAppearancePromise,
+    themeColorPromise,
+    zoomSizePromise,
+    fontSizePromise
+  } = assetsPromises;
+  const allPromises = [...themeAppearancePromise, ...themeColorPromise, zoomSizePromise, fontSizePromise];
+  useLayoutEffect(() => {
+    Promise.all(allPromises).then(() => {
+      typeof onAssetsDownloadSuccess === 'function' && onAssetsDownloadSuccess();
+    }).catch(error => {
+      console.error('Error loading assets:', error);
+    });
+    typeof getAssetsPromises === 'function' && getAssetsPromises(assetsPromises);
+  }, [...allPromises]);
+}
+
+export default useDotProvider;

package/es/DotProvider/hooks/useDownloadAssetsAndSetAttr.js

@@ -0,0 +1,97 @@
+import { useMemo, useLayoutEffect } from 'react';
+import { getThemeAppearanceAssetPromise } from "../utils/assetPromiseHandlers/themeAppearanceAssetPromise.js";
+import { getThemeColorAssetPromise } from "../utils/assetPromiseHandlers/themeColorAssetPromise.js";
+import { getFontSizeAssetPromise } from "../utils/assetPromiseHandlers/fontSizeAssetPromise.js";
+import { getZoomSizeAssetPromise } from "../utils/assetPromiseHandlers/zoomSizeAssetPromise.js";
+export default function useDownloadAssetsAndSetAttr(_ref) {
+  let {
+    themeAppearance,
+    themeColor,
+    baseZoomUnit,
+    baseFontUnit,
+    getProviderElement,
+    zoomUnitVariable,
+    fontUnitVariable,
+    themeAppearanceAttr,
+    themeColorAttr
+  } = _ref;
+  const themeAppearancePromise = useMemo(() => {
+    const themeAppearanceAssetPromise = getThemeAppearanceAssetPromise({
+      themeAppearance
+    });
+    return themeAppearanceAssetPromise;
+  }, [themeAppearance]);
+  const themeColorPromise = useMemo(() => {
+    const themeColorAssetPromise = getThemeColorAssetPromise({
+      themeAppearance,
+      themeColor
+    });
+    return themeColorAssetPromise;
+  }, [themeAppearance, themeColor]);
+  const modifiedZoomUnitWithSuffix = useMemo(() => {
+    return !isNaN(Number(baseZoomUnit)) ? `${Number(baseZoomUnit)}px` : baseZoomUnit;
+  }, [baseZoomUnit]);
+  const zoomSizePromise = useMemo(() => {
+    const assetPromise = getZoomSizeAssetPromise();
+    return assetPromise;
+  }, []);
+  const fontSizePromise = useMemo(() => {
+    const assetPromise = getFontSizeAssetPromise();
+    return assetPromise;
+  }, []);
+  const combinedPromise = {
+    themeAppearancePromise,
+    themeColorPromise,
+    zoomSizePromise,
+    fontSizePromise
+  };
+
+  function setThemeAttribute() {
+    const themePromise = [...themeAppearancePromise, ...themeColorPromise];
+    Promise.all(themePromise).then(() => {
+      const providerElement = getProviderElement();
+
+      if (providerElement) {
+        providerElement.setAttribute(themeAppearanceAttr, themeAppearance);
+        providerElement.setAttribute(themeColorAttr, themeColor);
+      }
+    }).catch(error => {
+      console.error('Error on setting theme appearance and color attributes:', error);
+    });
+  }
+
+  function setZoomSizeAttribute() {
+    zoomSizePromise.then(() => {
+      const providerElement = getProviderElement();
+
+      if (providerElement) {
+        providerElement.style.setProperty(zoomUnitVariable, modifiedZoomUnitWithSuffix);
+      }
+    }).catch(error => {
+      console.error('Error on setting zoom-size property', error);
+    });
+  }
+
+  function setFontSizeAttribute() {
+    fontSizePromise.then(() => {
+      const providerElement = getProviderElement();
+
+      if (providerElement) {
+        providerElement.style.setProperty(fontUnitVariable, baseFontUnit);
+      }
+    }).catch(error => {
+      console.error('Error on setting font-size property', error);
+    });
+  }
+
+  useLayoutEffect(() => {
+    setThemeAttribute();
+  }, [themeAppearanceAttr, themeColorAttr, themeAppearance, themeColor, getProviderElement]);
+  useLayoutEffect(() => {
+    setZoomSizeAttribute();
+  }, [zoomUnitVariable, modifiedZoomUnitWithSuffix, getProviderElement]);
+  useLayoutEffect(() => {
+    setFontSizeAttribute();
+  }, [fontUnitVariable, baseFontUnit, getProviderElement]);
+  return combinedPromise;
+}

package/es/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/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/DotProvider/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_Light_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Dark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/green/Green_Light_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/green/Green_PureDark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_Light_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Dark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/red/Red_Light_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/red/Red_PureDark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js

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

package/es/DotProvider/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js

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

package/es/DotProvider/libraryChunks/themes/svg/blue/Blue_Dark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/blue/Blue_Light_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/blue/Blue_PureDark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/green/Green_Dark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/green/Green_Light_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/green/Green_PureDark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/orange/Orange_Dark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/orange/Orange_Light_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/orange/Orange_PureDark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/red/Red_Dark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/red/Red_Light_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/red/Red_PureDark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/yellow/Yellow_Dark_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/yellow/Yellow_Light_SVG.js

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

package/es/DotProvider/libraryChunks/themes/svg/yellow/Yellow_PureDark_SVG.js

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

package/es/DotProvider/props/defaultProps.js

@@ -0,0 +1,11 @@
+import { THEME_APPEARANCE_LIGHT, THEME_COLOR_BLUE } from "../utils/constants";
+export const defaultProps = {
+  themeAppearance: THEME_APPEARANCE_LIGHT,
+  themeColor: THEME_COLOR_BLUE,
+  baseZoomUnit: '1px',
+  baseFontUnit: '16px',
+  zoomUnitVariable: '--zd_baseUnit',
+  fontUnitVariable: '--zd_baseFontUnit',
+  themeAppearanceAttr: 'data-mode',
+  themeColorAttr: 'data-theme'
+};

package/es/DotProvider/props/propTypes.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import { THEME_APPEARANCES, THEME_COLORS } from "../utils/constants";
+export const propTypes = {
+  themeAppearance: PropTypes.oneOf(THEME_APPEARANCES),
+  themeColor: PropTypes.oneOf(THEME_COLORS),
+  baseZoomUnit: PropTypes.string,
+  baseFontUnit: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  zoomUnitVariable: PropTypes.string,
+  fontUnitVariable: PropTypes.string,
+  themeAppearanceAttr: PropTypes.string,
+  themeColorAttr: PropTypes.string,
+  providerRef: PropTypes.func,
+  onAssetsDownloadSuccess: PropTypes.func,
+  getAssetsPromises: PropTypes.func,
+  children: PropTypes.node
+};

package/es/DotProvider/utils/assetPromiseHandlers/fontSizeAssetPromise.js

@@ -0,0 +1,4 @@
+import { sizeImports, sizeMapping } from "../sizeAssetsConfig";
+export function getFontSizeAssetPromise() {
+  return sizeImports[sizeMapping.fontSize]();
+}

package/es/DotProvider/utils/assetPromiseHandlers/themeAppearanceAssetPromise.js

@@ -0,0 +1,28 @@
+import { getAssetsImportPromises } from "../getAssetsImportPromises";
+import { themeAppearanceImports, themeAppearanceMapping } from "../themeAppearanceAssetsConfig";
+import { validateAndLogError } from "../errorValidation";
+import { LIBRARIES, THEME_APPEARANCES } from "../constants";
+export function getThemeAppearanceAssetPromise(_ref) {
+  let {
+    themeAppearance
+  } = _ref;
+  const isError = validateAndLogError({
+    options: THEME_APPEARANCES,
+    value: themeAppearance,
+    type: 'themeAppearance'
+  });
+
+  if (!isError) {
+    const assetImportKeys = [];
+    LIBRARIES.map(library => {
+      const assetImportKey = themeAppearanceMapping[library][themeAppearance];
+      assetImportKeys.push(assetImportKey);
+    });
+    return getAssetsImportPromises({
+      assetImportKeys: assetImportKeys,
+      assetImports: themeAppearanceImports
+    });
+  }
+
+  return [];
+}

package/es/DotProvider/utils/assetPromiseHandlers/themeColorAssetPromise.js

@@ -0,0 +1,29 @@
+import { getAssetsImportPromises } from "../getAssetsImportPromises";
+import { themeColorImports, themeColorMapping } from "../themeColorAssetsConfig";
+import { validateAndLogError } from "../errorValidation";
+import { LIBRARIES, THEME_COLORS } from "../constants";
+export function getThemeColorAssetPromise(_ref) {
+  let {
+    themeAppearance,
+    themeColor
+  } = _ref;
+  const isError = validateAndLogError({
+    options: THEME_COLORS,
+    value: themeColor,
+    type: 'themeColor'
+  });
+
+  if (!isError) {
+    const assetImportKeys = [];
+    LIBRARIES.map(library => {
+      const assetImportKey = themeColorMapping[library][themeColor][themeAppearance];
+      assetImportKeys.push(assetImportKey);
+    });
+    return getAssetsImportPromises({
+      assetImportKeys: assetImportKeys,
+      assetImports: themeColorImports
+    });
+  }
+
+  return [];
+}

package/es/DotProvider/utils/assetPromiseHandlers/zoomSizeAssetPromise.js

@@ -0,0 +1,4 @@
+import { sizeImports, sizeMapping } from "../sizeAssetsConfig";
+export function getZoomSizeAssetPromise() {
+  return sizeImports[sizeMapping.zoomSize]();
+}

package/es/DotProvider/utils/constants.js

@@ -0,0 +1,14 @@
+export const LIBRARY_COMPONENT = 'component';
+export const LIBRARY_DOT = 'dot';
+export const LIBRARY_SVG = 'svg';
+export const THEME_APPEARANCE_LIGHT = 'light';
+export const THEME_APPEARANCE_DARK = 'dark';
+export const THEME_APPEARANCE_PURE_DARK = 'pureDark';
+export const THEME_COLOR_BLUE = 'blue';
+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 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/errorValidation.js

@@ -0,0 +1,17 @@
+import { THEME_APPEARANCES, THEME_COLORS } from "./constants";
+export function validateAndLogError(_ref) {
+  let {
+    options,
+    value,
+    type
+  } = _ref;
+  let isError = !options.includes(value);
+
+  if (isError) {
+    const themeAppearances = THEME_APPEARANCES.toString();
+    const themeColors = THEME_COLORS.toString();
+    console.error(`We do not support the '${value} ${type}'. Please provide valid '${type}' values or check spelling. DotProvider supports ${themeAppearances} appearance & ${themeColors} theme.`);
+  }
+
+  return isError;
+}

package/es/DotProvider/utils/getAssetsImportPromises.js

@@ -0,0 +1,17 @@
+export function getAssetsImportPromises(_ref) {
+  let {
+    assetImportKeys,
+    assetImports
+  } = _ref;
+  const promises = [];
+  assetImportKeys.forEach(importKey => {
+    const assetURL = assetImports[importKey];
+
+    if (assetURL) {
+      promises.push(assetURL());
+    } else {
+      console.error(`Import not found for ${importKey} from ${assetImports}`);
+    }
+  });
+  return promises;
+}

package/es/DotProvider/utils/sizeAssetsConfig.js

@@ -0,0 +1,12 @@
+export const sizeImports = {
+  Lib_ZoomSize: () => import(
+  /* webpackChunkName: 'Lib_ZoomSize' */
+  '@zohodesk/variables/assets/sizeVariables.module.css'),
+  Lib_FontSize: () => import(
+  /* webpackChunkName: 'Lib_FontSize' */
+  '@zohodesk/variables/assets/fontsizeVariables.module.css')
+};
+export const sizeMapping = {
+  zoomSize: 'Lib_ZoomSize',
+  fontSize: 'Lib_FontSize'
+};