@zohodesk/dot 1.0.0-temp-195.3 → 1.0.0-temp-198.2

package/es/ChannelIcon/ChannelIcon.module.css

@@ -1,226 +1,226 @@
-.varClass {
-  --iconColor: var(--zdt_channelIcon_icon);
-  --topIconBg: var(--zdt_channelIcon_topIcon_bg);
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
-  --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
-}
-
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-  composes: varClass;
-}
-
-.thread {
-  composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
-  position: absolute;
-  top: calc( var(--zd_size4) * -1 ) ;
-  height: var(--zd_size15) ;
-  width: var(--zd_size15) ;
-  /* css:theme-validation:ignore */
-  background-color: var(--topIconBg);
-}
-
-[dir=ltr] .thread {
-  right: calc( var(--zd_size1) * -1 ) ;
-}
-
-[dir=rtl] .thread {
-  left: calc( var(--zd_size1) * -1 ) ;
-}
-
-.threadBorder {
-  border: 1px solid var(--topIconBorderColor);
-}
-
-.iconStyle {
-  position: relative;
-  color: var(--iconColor);
-}
-
-/* Channel Icon Style */
-/* path */
-.email_incoming span:first-child:before,
-.email_outgoing span:first-child:before,
-.email_missed span:first-child:before,
-.email_forward span:first-child:before,
-.email_forwarddraft span:first-child:before,
-.facebook_incoming span:first-child:before,
-.facebook_outgoing span:first-child:before,
-.facebook_missed span:first-child:before,
-.facebook_forward span:first-child:before,
-.facebook_forwarddraft span:first-child:before,
-.facebook_dm_default span:first-child:before,
-.facebook_dm_incoming span:first-child:before,
-.facebook_dm_outgoing span:first-child:before,
-.facebook_dm_draft span:first-child:before,
-.facebook_dm_forward span:first-child:before,
-.facebook_dm_forwarddraft span:first-child:before,
-.twitter_incoming span:first-child:before,
-.twitter_outgoing span:first-child:before,
-.twitter_missed span:first-child:before,
-.twitter_forward span:first-child:before,
-.twitter_forwarddraft span:first-child:before,
-.forums_incoming span:first-child:before,
-.forums_outgoing span:first-child:before,
-.forums_missed span:first-child:before,
-.forums_forward span:first-child:before,
-.forums_forwarddraft span:first-child:before,
-.chat_incoming span:first-child:before,
-.chat_outgoing span:first-child:before,
-.chat_missed span:first-child:before,
-.chat_forward span:first-child:before,
-.chat_forwarddraft span:first-child:before,
-.offline_chat_incoming span:first-child:before,
-.offline_chat_outgoing span:first-child:before,
-.offline_chat_missed span:first-child:before,
-.offline_chat_forward span:first-child:before,
-.offline_chat_forwarddraft span:first-child:before,
-.online_chat_incoming span:first-child:before,
-.online_chat_outgoing span:first-child:before,
-.online_chat_missed span:first-child:before,
-.online_chat_forward span:first-child:before,
-.online_chat_forwarddraft span:first-child:before,
-.phone_incoming span:first-child:before,
-.phone_outgoing span:first-child:before,
-.phone_missed span:first-child:before,
-.phone_forward span:first-child:before,
-.phone_forwarddraft span:first-child:before,
-.web_incoming span:first-child:before,
-.web_out span:first-child:before,
-.web_missed span:first-child:before,
-.web_forward span:first-child:before,
-.web_forwarddraft span:first-child:before,
-.customerportal_incoming span:first-child:before,
-.customerportal_out span:first-child:before,
-.customerportal_missed span:first-child:before,
-.customerportal_forward span:first-child:before,
-.customerportal_forwarddraft span:first-child:before,
-.feedback_default span:first-child:before,
-.feedback_incoming span:first-child:before,
-.feedback_out span:first-child:before,
-.feedback_missed span:first-child:before,
-.feedback_forward span:first-child:before,
-.feedback_forwarddraft span:first-child:before {
-  color: inherit;
-}
-
-/* Email */
-.email_incoming,
-.email_missed,
-.email_outgoing {
-  bottom: var(--zd_size2) ;
-}
-
-/* twitter */
-.twitter_incoming,
-.twitter_outgoing,
-.twitter_missed {
-  bottom: var(--zd_size1) ;
-}
-
-/* facebook */
-[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
-  right: var(--zd_size2) ;
-}
-[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: var(--zd_size2) ;
-}
-
-/* chat */
-.chat_incoming,
-.offline_chat_incoming,
-.online_chat_incoming,
-.chat_missed,
-.offline_chat_missed,
-.online_chat_missed,
-.chat_outgoing,
-.offline_chat_outgoing,
-.online_chat_outgoing {
-  bottom: var(--zd_size1) ;
-}
-
-/* forums */
-.forums_default {
-  top: var(--zd_size1) ;
-}
-
-/* feedback */
-.feedback_incoming,
-.feedback_missed,
-.feedback_out {
-  top: var(--zd_size1) ;
-}
-[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
-  right: var(--zd_size1) ;
-}
-[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: var(--zd_size1) ;
-}
-
-/* draft */
-[dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
-  left: var(--zd_size1) ;
-}
-[dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
-  right: var(--zd_size1) ;
-}
-
-/* forward */
-.email_forward,
-.facebook_forward,
-.facebook_dm_forward,
-.twitter_forward,
-.forums_forward,
-.chat_forward,
-.offline_chat_forward,
-.online_chat_forward,
-.phone_forward,
-.web_forward,
-.customerportal_forward,
-.feedback_forward {
-  bottom: var(--zd_size1) ;
-}
-
-/* forwarddraft */
-.email_forwarddraft,
-.facebook_forwarddraft,
-.twitter_forwarddraft,
-.forums_forwarddraft,
-.chat_forwarddraft,
-.offline_chat_forwarddraft,
-.online_chat_forwarddraft,
-.phone_forwarddraft,
-.web_forwarddraft,
-.customerportal_forwarddraft,
-.feedback_forwarddraft {
-  bottom: var(--zd_size1) ;
-}
-[dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
-  left: var(--zd_size1) ;
-}
-[dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
-  right: var(--zd_size1) ;
-}
-
-/* facebook_dm */
-[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
-  right: var(--zd_size2) ;
-}
-[dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
-  left: var(--zd_size2) ;
-}
-
-/*Topic Icon colors*/
-.topic_olive {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
-}
-
-.topic_yellow3 {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
-}
-
-.topicIcon {
-  color: var(--topIconColor);
+.varClass {
+  --iconColor: var(--zdt_channelIcon_icon);
+  --topIconBg: var(--zdt_channelIcon_topIcon_bg);
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
+  --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
+}
+
+.container {
+  position: relative;
+  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  vertical-align: middle;
+  composes: varClass;
+}
+
+.thread {
+  composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
+  position: absolute;
+  top: calc( var(--zd_size4) * -1 ) ;
+  height: var(--zd_size15) ;
+  width: var(--zd_size15) ;
+  /* css:theme-validation:ignore */
+  background-color: var(--topIconBg);
+}
+
+[dir=ltr] .thread {
+  right: calc( var(--zd_size1) * -1 ) ;
+}
+
+[dir=rtl] .thread {
+  left: calc( var(--zd_size1) * -1 ) ;
+}
+
+.threadBorder {
+  border: 1px solid var(--topIconBorderColor);
+}
+
+.iconStyle {
+  position: relative;
+  color: var(--iconColor);
+}
+
+/* Channel Icon Style */
+/* path */
+.email_incoming span:first-child:before,
+.email_outgoing span:first-child:before,
+.email_missed span:first-child:before,
+.email_forward span:first-child:before,
+.email_forwarddraft span:first-child:before,
+.facebook_incoming span:first-child:before,
+.facebook_outgoing span:first-child:before,
+.facebook_missed span:first-child:before,
+.facebook_forward span:first-child:before,
+.facebook_forwarddraft span:first-child:before,
+.facebook_dm_default span:first-child:before,
+.facebook_dm_incoming span:first-child:before,
+.facebook_dm_outgoing span:first-child:before,
+.facebook_dm_draft span:first-child:before,
+.facebook_dm_forward span:first-child:before,
+.facebook_dm_forwarddraft span:first-child:before,
+.twitter_incoming span:first-child:before,
+.twitter_outgoing span:first-child:before,
+.twitter_missed span:first-child:before,
+.twitter_forward span:first-child:before,
+.twitter_forwarddraft span:first-child:before,
+.forums_incoming span:first-child:before,
+.forums_outgoing span:first-child:before,
+.forums_missed span:first-child:before,
+.forums_forward span:first-child:before,
+.forums_forwarddraft span:first-child:before,
+.chat_incoming span:first-child:before,
+.chat_outgoing span:first-child:before,
+.chat_missed span:first-child:before,
+.chat_forward span:first-child:before,
+.chat_forwarddraft span:first-child:before,
+.offline_chat_incoming span:first-child:before,
+.offline_chat_outgoing span:first-child:before,
+.offline_chat_missed span:first-child:before,
+.offline_chat_forward span:first-child:before,
+.offline_chat_forwarddraft span:first-child:before,
+.online_chat_incoming span:first-child:before,
+.online_chat_outgoing span:first-child:before,
+.online_chat_missed span:first-child:before,
+.online_chat_forward span:first-child:before,
+.online_chat_forwarddraft span:first-child:before,
+.phone_incoming span:first-child:before,
+.phone_outgoing span:first-child:before,
+.phone_missed span:first-child:before,
+.phone_forward span:first-child:before,
+.phone_forwarddraft span:first-child:before,
+.web_incoming span:first-child:before,
+.web_out span:first-child:before,
+.web_missed span:first-child:before,
+.web_forward span:first-child:before,
+.web_forwarddraft span:first-child:before,
+.customerportal_incoming span:first-child:before,
+.customerportal_out span:first-child:before,
+.customerportal_missed span:first-child:before,
+.customerportal_forward span:first-child:before,
+.customerportal_forwarddraft span:first-child:before,
+.feedback_default span:first-child:before,
+.feedback_incoming span:first-child:before,
+.feedback_out span:first-child:before,
+.feedback_missed span:first-child:before,
+.feedback_forward span:first-child:before,
+.feedback_forwarddraft span:first-child:before {
+  color: inherit;
+}
+
+/* Email */
+.email_incoming,
+.email_missed,
+.email_outgoing {
+  bottom: var(--zd_size2) ;
+}
+
+/* twitter */
+.twitter_incoming,
+.twitter_outgoing,
+.twitter_missed {
+  bottom: var(--zd_size1) ;
+}
+
+/* facebook */
+[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
+  right: var(--zd_size2) ;
+}
+[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
+  left: var(--zd_size2) ;
+}
+
+/* chat */
+.chat_incoming,
+.offline_chat_incoming,
+.online_chat_incoming,
+.chat_missed,
+.offline_chat_missed,
+.online_chat_missed,
+.chat_outgoing,
+.offline_chat_outgoing,
+.online_chat_outgoing {
+  bottom: var(--zd_size1) ;
+}
+
+/* forums */
+.forums_default {
+  top: var(--zd_size1) ;
+}
+
+/* feedback */
+.feedback_incoming,
+.feedback_missed,
+.feedback_out {
+  top: var(--zd_size1) ;
+}
+[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
+  right: var(--zd_size1) ;
+}
+[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
+  left: var(--zd_size1) ;
+}
+
+/* draft */
+[dir=ltr] .email_draft, [dir=ltr] .facebook_draft, [dir=ltr] .twitter_draft, [dir=ltr] .forums_draft, [dir=ltr] .chat_draft, [dir=ltr] .offline_chat_draft, [dir=ltr] .online_chat_draft, [dir=ltr] .phone_draft, [dir=ltr] .web_draft, [dir=ltr] .customerportal_draft, [dir=ltr] .feedback_draft {
+  left: var(--zd_size1) ;
+}
+[dir=rtl] .email_draft, [dir=rtl] .facebook_draft, [dir=rtl] .twitter_draft, [dir=rtl] .forums_draft, [dir=rtl] .chat_draft, [dir=rtl] .offline_chat_draft, [dir=rtl] .online_chat_draft, [dir=rtl] .phone_draft, [dir=rtl] .web_draft, [dir=rtl] .customerportal_draft, [dir=rtl] .feedback_draft {
+  right: var(--zd_size1) ;
+}
+
+/* forward */
+.email_forward,
+.facebook_forward,
+.facebook_dm_forward,
+.twitter_forward,
+.forums_forward,
+.chat_forward,
+.offline_chat_forward,
+.online_chat_forward,
+.phone_forward,
+.web_forward,
+.customerportal_forward,
+.feedback_forward {
+  bottom: var(--zd_size1) ;
+}
+
+/* forwarddraft */
+.email_forwarddraft,
+.facebook_forwarddraft,
+.twitter_forwarddraft,
+.forums_forwarddraft,
+.chat_forwarddraft,
+.offline_chat_forwarddraft,
+.online_chat_forwarddraft,
+.phone_forwarddraft,
+.web_forwarddraft,
+.customerportal_forwarddraft,
+.feedback_forwarddraft {
+  bottom: var(--zd_size1) ;
+}
+[dir=ltr] .email_forwarddraft, [dir=ltr] .facebook_forwarddraft, [dir=ltr] .twitter_forwarddraft, [dir=ltr] .forums_forwarddraft, [dir=ltr] .chat_forwarddraft, [dir=ltr] .offline_chat_forwarddraft, [dir=ltr] .online_chat_forwarddraft, [dir=ltr] .phone_forwarddraft, [dir=ltr] .web_forwarddraft, [dir=ltr] .customerportal_forwarddraft, [dir=ltr] .feedback_forwarddraft {
+  left: var(--zd_size1) ;
+}
+[dir=rtl] .email_forwarddraft, [dir=rtl] .facebook_forwarddraft, [dir=rtl] .twitter_forwarddraft, [dir=rtl] .forums_forwarddraft, [dir=rtl] .chat_forwarddraft, [dir=rtl] .offline_chat_forwarddraft, [dir=rtl] .online_chat_forwarddraft, [dir=rtl] .phone_forwarddraft, [dir=rtl] .web_forwarddraft, [dir=rtl] .customerportal_forwarddraft, [dir=rtl] .feedback_forwarddraft {
+  right: var(--zd_size1) ;
+}
+
+/* facebook_dm */
+[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
+  right: var(--zd_size2) ;
+}
+[dir=rtl] .facebook_dm_default, [dir=rtl] .facebook_dm_incoming, [dir=rtl] .facebook_dm_outgoing, [dir=rtl] .facebook_dm_missed {
+  left: var(--zd_size2) ;
+}
+
+/*Topic Icon colors*/
+.topic_olive {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
+}
+
+.topic_yellow3 {
+  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
+}
+
+.topicIcon {
+  color: var(--topIconColor);
 }

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';