@zohodesk/dot 1.7.15 → 1.7.17

package/es/DotProvider/__tests__/__snapshots__/DotProvider.spec.js.snap

@@ -1,180 +1,176 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DotProvider Snapshot rendering the additional ...rest props 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = blue  1`] = `
 <DocumentFragment>
   <div
-    class="testClass"
-    data-id="test-id"
-    data-mode="light"
+    data-mode="dark"
     data-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  >
-    This is a DotProvider component
-  </div>
+  />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseFontUnit props of 1 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = blue with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1;"
+    data-desk-mode="dark"
+    data-desk-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseFontUnit props of 1em 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = green  1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1em;"
+    data-mode="dark"
+    data-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseFontUnit props of 1px 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = green with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1px;"
+    data-desk-mode="dark"
+    data-desk-theme="green"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseFontUnit props of 1rem 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = orange  1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1rem;"
+    data-mode="dark"
+    data-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.5 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = orange with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 0.5px; --zd_baseFontUnit: 16px;"
+    data-desk-mode="dark"
+    data-desk-theme="orange"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.8 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = red  1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 0.8px; --zd_baseFontUnit: 16px;"
+    data-mode="dark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = red with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
+    data-desk-mode="dark"
+    data-desk-theme="red"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1.2 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = yellow  1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 1.2px; --zd_baseFontUnit: 16px;"
+    data-mode="dark"
+    data-theme="yellow"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of blue 1`] = `
+exports[`DotProvider Snapshot Theme appearance: dark should render with themeAppearance = dark and themeColor = yellow with custom attributes 1`] = `
 <DocumentFragment>
   <div
     data-desk-mode="dark"
-    data-desk-theme="blue"
+    data-desk-theme="yellow"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of green 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = blue  1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="dark"
-    data-desk-theme="green"
+    data-mode="light"
+    data-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of orange 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = blue with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="dark"
-    data-desk-theme="orange"
+    data-desk-mode="light"
+    data-desk-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of red 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = green  1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="dark"
-    data-desk-theme="red"
+    data-mode="light"
+    data-theme="green"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of dark along with theme-color of yellow 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = green with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="dark"
-    data-desk-theme="yellow"
+    data-desk-mode="light"
+    data-desk-theme="green"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of blue 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = orange  1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="light"
-    data-desk-theme="blue"
+    data-mode="light"
+    data-theme="orange"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of green 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = orange with custom attributes 1`] = `
 <DocumentFragment>
   <div
     data-desk-mode="light"
-    data-desk-theme="green"
+    data-desk-theme="orange"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of orange 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = red  1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="light"
-    data-desk-theme="orange"
+    data-mode="light"
+    data-theme="red"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of red 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = red with custom attributes 1`] = `
 <DocumentFragment>
   <div
     data-desk-mode="light"
@@ -184,272 +180,276 @@ exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and theme
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of light along with theme-color of yellow 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = yellow  1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="light"
-    data-desk-theme="yellow"
+    data-mode="light"
+    data-theme="yellow"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of blue 1`] = `
+exports[`DotProvider Snapshot Theme appearance: light should render with themeAppearance = light and themeColor = yellow with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="pureDark"
-    data-desk-theme="blue"
+    data-desk-mode="light"
+    data-desk-theme="yellow"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of green 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = blue  1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="pureDark"
-    data-desk-theme="green"
+    data-mode="pureDark"
+    data-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of orange 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = blue with custom attributes 1`] = `
 <DocumentFragment>
   <div
     data-desk-mode="pureDark"
-    data-desk-theme="orange"
+    data-desk-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of red 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = green  1`] = `
 <DocumentFragment>
   <div
-    data-desk-mode="pureDark"
-    data-desk-theme="red"
+    data-mode="pureDark"
+    data-theme="green"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of pureDark along with theme-color of yellow 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = green with custom attributes 1`] = `
 <DocumentFragment>
   <div
     data-desk-mode="pureDark"
-    data-desk-theme="yellow"
+    data-desk-theme="green"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the default attributes, styles and modified the tag props 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = orange  1`] = `
 <DocumentFragment>
-  <span
-    data-mode="light"
-    data-theme="blue"
+  <div
+    data-mode="pureDark"
+    data-theme="orange"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  >
-    This is a DotProvider component
-  </span>
+  />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the default attributes, styles and modifying the tag prop to React.Fragment 1`] = `
-<html
-  data-mode="light"
-  data-theme="blue"
-  style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
->
-  <head />
-  <body>
-    <div>
-      This is a DotProvider component
-    </div>
-  </body>
-</html>
-`;
-
-exports[`DotProvider Snapshot rendering the default props 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = orange with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
+    data-desk-mode="pureDark"
+    data-desk-theme="orange"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  >
-    This is a DotProvider component
-  </div>
+  />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the fontUnitVariable prop along with baseFontUnit props 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = red  1`] = `
 <DocumentFragment>
   <div
-    data-mode="light"
-    data-theme="blue"
-    style="--zd_baseUnit: 1px; --gc_baseFontUnit: 14px;"
-  >
-    This is a DotProvider component
-  </div>
+    data-mode="pureDark"
+    data-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the providerRef props 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = red with custom attributes 1`] = `
 <DocumentFragment>
-  <div>
-    This is a DotProvider component
-  </div>
+  <div
+    data-desk-mode="pureDark"
+    data-desk-theme="red"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+  />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of blue 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = yellow  1`] = `
 <DocumentFragment>
   <div
-    data-mode="dark"
-    data-theme="blue"
+    data-mode="pureDark"
+    data-theme="yellow"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of green 1`] = `
+exports[`DotProvider Snapshot Theme appearance: pureDark should render with themeAppearance = pureDark and themeColor = yellow with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    data-mode="dark"
-    data-theme="green"
+    data-desk-mode="pureDark"
+    data-desk-theme="yellow"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of orange 1`] = `
+exports[`DotProvider Snapshot rendering the additional ...rest props 1`] = `
 <DocumentFragment>
   <div
-    data-mode="dark"
-    data-theme="orange"
+    class="testClass"
+    data-id="test-id"
+    data-mode="light"
+    data-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  />
+  >
+    This is a DotProvider component
+  </div>
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of red 1`] = `
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1 1`] = `
 <DocumentFragment>
   <div
-    data-mode="dark"
-    data-theme="red"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of dark along with theme-color of yellow 1`] = `
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1em 1`] = `
 <DocumentFragment>
   <div
-    data-mode="dark"
-    data-theme="yellow"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1em;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of blue 1`] = `
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1px 1`] = `
 <DocumentFragment>
   <div
     data-mode="light"
     data-theme="blue"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of green 1`] = `
+exports[`DotProvider Snapshot rendering the baseFontUnit props of 1rem 1`] = `
 <DocumentFragment>
   <div
     data-mode="light"
-    data-theme="green"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 1rem;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of orange 1`] = `
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.5 1`] = `
 <DocumentFragment>
   <div
     data-mode="light"
-    data-theme="orange"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.5px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of red 1`] = `
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 0.8 1`] = `
 <DocumentFragment>
   <div
     data-mode="light"
-    data-theme="red"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+    data-theme="blue"
+    style="--zd_baseUnit: 0.8px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of light along with theme-color of yellow 1`] = `
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1 1`] = `
 <DocumentFragment>
   <div
     data-mode="light"
-    data-theme="yellow"
+    data-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of blue 1`] = `
+exports[`DotProvider Snapshot rendering the baseZoomUnit props of 1.2 1`] = `
 <DocumentFragment>
   <div
-    data-mode="pureDark"
+    data-mode="light"
     data-theme="blue"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+    style="--zd_baseUnit: 1.2px; --zd_baseFontUnit: 16px;"
   />
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of green 1`] = `
+exports[`DotProvider Snapshot rendering the default attributes, styles and modified the tag props 1`] = `
 <DocumentFragment>
-  <div
-    data-mode="pureDark"
-    data-theme="green"
+  <span
+    data-mode="light"
+    data-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  />
+  >
+    This is a DotProvider component
+  </span>
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of orange 1`] = `
+exports[`DotProvider Snapshot rendering the default attributes, styles and modifying the tag prop to React.Fragment 1`] = `
+<html
+  data-mode="light"
+  data-theme="blue"
+  style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
+>
+  <head />
+  <body>
+    <div>
+      This is a DotProvider component
+    </div>
+  </body>
+</html>
+`;
+
+exports[`DotProvider Snapshot rendering the default props 1`] = `
 <DocumentFragment>
   <div
-    data-mode="pureDark"
-    data-theme="orange"
+    data-mode="light"
+    data-theme="blue"
     style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  />
+  >
+    This is a DotProvider component
+  </div>
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of red 1`] = `
+exports[`DotProvider Snapshot rendering the fontUnitVariable prop along with baseFontUnit props 1`] = `
 <DocumentFragment>
   <div
-    data-mode="pureDark"
-    data-theme="red"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  />
+    data-mode="light"
+    data-theme="blue"
+    style="--zd_baseUnit: 1px; --gc_baseFontUnit: 14px;"
+  >
+    This is a DotProvider component
+  </div>
 </DocumentFragment>
 `;
 
-exports[`DotProvider Snapshot rendering the theme-appearance of pureDark along with theme-color of yellow 1`] = `
+exports[`DotProvider Snapshot rendering the providerRef props 1`] = `
 <DocumentFragment>
-  <div
-    data-mode="pureDark"
-    data-theme="yellow"
-    style="--zd_baseUnit: 1px; --zd_baseFontUnit: 16px;"
-  />
+  <div>
+    This is a DotProvider component
+  </div>
 </DocumentFragment>
 `;
 

package/es/DotProvider/libraryChunks/appearance/component/Dark_Component.js

@@ -0,0 +1,2 @@
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_DarkMode.module.css';
+import '@zohodesk/components/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css';

package/es/DotProvider/libraryChunks/appearance/component/Light_Component.js

@@ -0,0 +1,2 @@
+import '@zohodesk/components/assets/Appearance/light/mode/Component_LightMode.module.css';
+import '@zohodesk/components/assets/Appearance/light/mode/Component_v1_LightMode.module.css';

package/es/DotProvider/libraryChunks/appearance/component/PureDark_Component.js

@@ -0,0 +1,2 @@
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css';