@zohodesk/dot 1.0.0-temp-90 → 1.0.0-temp-95

package/es/NewStar/NewStar.module.css

@@ -1,110 +1,110 @@
-.star {
-  position: absolute;
-
-  height: var(--zd_size20);
-  width: var(--zd_size21);
-}
-.topLeft {
-  top: 0;
-}
-[dir=ltr] .topLeft {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-[dir=rtl] .topLeft {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-.topRight {
-  top: 0;
-}
-[dir=ltr] .topRight {
-  transform: translate(45%, -45%);
-  right: 0;
-}
-[dir=rtl] .topRight {
-  transform: translate(-45%, -45%);
-  left: 0;
-}
-.bottomLeft {
-  bottom: 0;
-}
-[dir=ltr] .bottomLeft {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=rtl] .bottomLeft {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-.bottomRight {
-  bottom: 0;
-}
-[dir=ltr] .bottomRight {
-  transform: translate(45%, 45%);
-  right: 0;
-}
-[dir=rtl] .bottomRight {
-  transform: translate(-45%, 45%);
-  left: 0;
-}
-[dir=ltr] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-[dir=rtl] .stars {
-  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
-}
-.green::before {
-  color: var(--zdt_newstar_green_text);
-}
-.yellow::before {
-  color: var(--zdt_newstar_yellow_text);
-}
-.blue::before {
-  color: var(--zdt_newstar_blue_text);
-}
-.starOne {
-  composes: stars;
-}
-.starTwo {
-  composes: stars;
-}
-[dir=ltr] .starTwo {
-  animation-delay: 0.5s;
-}
-[dir=rtl] .starTwo {
-  animation-delay: 0.5s;
-}
-.starThree {
-  composes: stars;
-}
-[dir=ltr] .starThree {
-  animation-delay: 1s;
-}
-[dir=rtl] .starThree {
-  animation-delay: 1s;
-}
-
-@keyframes twinkle {
-  0% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.6;
-  }
-}
-
-@keyframes star-scale {
-  0% {
-    transform: perspective(1px) scale(0.7);
-  }
-  50% {
-    transform: perspective(1px) scale(1, 1);
-  }
-  100% {
-    transform: perspective(1px) scale(0.7);
-  }
-}
+.star {
+  position: absolute;
+
+  height: var(--zd_size20);
+  width: var(--zd_size21);
+}
+.topLeft {
+  top: 0;
+}
+[dir=ltr] .topLeft {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+[dir=rtl] .topLeft {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+.topRight {
+  top: 0;
+}
+[dir=ltr] .topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+[dir=rtl] .topRight {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
+.bottomLeft {
+  bottom: 0;
+}
+[dir=ltr] .bottomLeft {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=rtl] .bottomLeft {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+.bottomRight {
+  bottom: 0;
+}
+[dir=ltr] .bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+[dir=rtl] .bottomRight {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=ltr] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+[dir=rtl] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+.green::before {
+  color: var(--zdt_newstar_green_text);
+}
+.yellow::before {
+  color: var(--zdt_newstar_yellow_text);
+}
+.blue::before {
+  color: var(--zdt_newstar_blue_text);
+}
+.starOne {
+  composes: stars;
+}
+.starTwo {
+  composes: stars;
+}
+[dir=ltr] .starTwo {
+  animation-delay: 0.5s;
+}
+[dir=rtl] .starTwo {
+  animation-delay: 0.5s;
+}
+.starThree {
+  composes: stars;
+}
+[dir=ltr] .starThree {
+  animation-delay: 1s;
+}
+[dir=rtl] .starThree {
+  animation-delay: 1s;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+@keyframes star-scale {
+  0% {
+    transform: perspective(1px) scale(0.7);
+  }
+  50% {
+    transform: perspective(1px) scale(1, 1);
+  }
+  100% {
+    transform: perspective(1px) scale(0.7);
+  }
+}

package/es/PlusIcon/PlusIcon.module.css

@@ -1,16 +1,16 @@
-.container {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-  border-radius: 50%;
-  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
-  cursor: pointer;
-  background-color: var(--zdt_plusicon_bg);
-}
-.plusIcon {
-  border: 1px solid var(--zdt_plusicon_border);
-}
-.icon {
-  color: var(--zdt_plusicon_text);
-}
-.plusIcon:hover {
-  border-color: var(--zdt_plusicon_hover_border);
-}
+.container {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+  border-radius: 50%;
+  box-shadow: 0 2px 3px 0 var(--zdt_plusicon_box_shadow);
+  cursor: pointer;
+  background-color: var(--zdt_plusicon_bg);
+}
+.plusIcon {
+  border: 1px solid var(--zdt_plusicon_border);
+}
+.icon {
+  color: var(--zdt_plusicon_text);
+}
+.plusIcon:hover {
+  border-color: var(--zdt_plusicon_hover_border);
+}

package/es/Provider.js

@@ -6,95 +6,149 @@ import LibraryContext from '@zohodesk/components/lib/Provider/LibraryContextInit
 import datetime from '@zohodesk/datetimejs';
 import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
 import i18n from './i18n';
-/* component pkg - default mode & themes */
+/* component pkg - default mode, themes & contrast */
 
 import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/default/mode/defaultMode.module.css';
-/* component pkg - dark mode & themes */
+import '@zohodesk/components/assets/Appearance/default/mode/contrast/defaultContrast.module.css';
+/* component pkg - dark mode, themes & contrast */
 
 import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/dark/mode/darkMode.module.css';
-/* component pkg - pure dark mode & themes */
+import '@zohodesk/components/assets/Appearance/dark/mode/contrast/darkContrast.module.css';
+/* component pkg - pure dark mode, themes & contrast */
 
 import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
 import '@zohodesk/components/assets/Appearance/pureDark/mode/pureDarkMode.module.css';
-/* svg pkg - default mode & themes */
+import '@zohodesk/components/assets/Appearance/pureDark/mode/contrast/pureDarkContrast.module.css';
+/* svg pkg - default mode, themes & contrast */
 
 import '@zohodesk/svg/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/blue/contrast/blueDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/green/contrast/greenDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/orange/contrast/orangeDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/red/contrast/redDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/default/themes/yellow/contrast/yellowDefaultCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/default/mode/defaultEmptyStates.module.css';
-/* svg pkg - dark mode & themes */
+import '@zohodesk/svg/assets/Appearance/default/mode/contrast/defaultContrastEmptyStates.module.css';
+/* svg pkg - dark mode, themes & contrast */
 
 import '@zohodesk/svg/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/blue/contrast/blueDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/green/contrast/greenDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/orange/contrast/orangeDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/red/contrast/redDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/dark/themes/yellow/contrast/yellowDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/dark/mode/darkEmptyStates.module.css';
-/* svg pkg - pure dark mode & themes */
+import '@zohodesk/svg/assets/Appearance/dark/mode/contrast/darkContrastEmptyStates.module.css';
+/* svg pkg - pure dark mode, themes & contrast */
 
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/green/contrast/greenPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/red/contrast/redPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkCTAThemeContrast.module.css';
 import '@zohodesk/svg/assets/Appearance/pureDark/mode/pureDarkEmptyStates.module.css';
+import '@zohodesk/svg/assets/Appearance/pureDark/mode/contrast/pureDarkContrastEmptyStates.module.css';
 import { setGlobalIdPrefix } from '@zohodesk/components/lib/Provider/IdProvider';
 import { setInitialZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-/* dot pkg - default mode & themes */
+/* dot pkg - default mode, themes & contrast */
 
 import '../assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/blue/contrast/blueDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/green/contrast/greenDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/orange/contrast/orangeDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/red/redDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/red/contrast/redDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css';
+import '../assets/Appearance/default/themes/yellow/contrast/yellowDefaultDotThemeContrast.module.css';
 import '../assets/Appearance/default/mode/dotDefaultMode.module.css';
-/* dot pkg - dark mode & themes */
+import '../assets/Appearance/default/mode/contrast/dotDefaultContrast.module.css';
+/* dot pkg - dark mode, themes & contrast */
 
 import '../assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/blue/contrast/blueDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/green/contrast/greenDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/orange/contrast/orangeDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/red/redDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/red/contrast/redDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css';
+import '../assets/Appearance/dark/themes/yellow/contrast/yellowDarkDotThemeContrast.module.css';
 import '../assets/Appearance/dark/mode/dotDarkMode.module.css';
-/* dot pkg - pure dark mode & themes */
+import '../assets/Appearance/dark/mode/contrast/dotDarkContrast.module.css';
+/* dot pkg - pure dark mode, themes & contrast */
 
 import '../assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/blue/contrast/bluePureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/green/contrast/greenPureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/orange/contrast/orangePureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/red/contrast/redPureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css';
+import '../assets/Appearance/pureDark/themes/yellow/contrast/yellowPureDarkDotThemeContrast.module.css';
 import '../assets/Appearance/pureDark/mode/dotPureDarkMode.module.css';
+import '../assets/Appearance/pureDark/mode/contrast/dotPureDarkContrast.module.css';
 datetime.tz.set({
   timezone: 'Asia/Kolkata',
   _packed: '-5R.s -5R.k -5l.a -5u -6u|01234343|-4Fg5R.s BKo0.8 1rDcw.a 1r2LP.a 1un0 HB0 7zX0|15e6',
@@ -107,10 +161,12 @@ export default class Provider extends React.Component {
     setInitialZIndex('10');
     this.state = {
       appearanceName: 'default',
-      themeName: 'blue'
+      themeName: 'blue',
+      isContrastChecked: false
     };
     this.setTheme = this.setTheme.bind(this);
     this.setAppearance = this.setAppearance.bind(this);
+    this.setContrast = this.setContrast.bind(this);
   }
 
   setAppearance(mode) {
@@ -125,10 +181,17 @@ export default class Provider extends React.Component {
     });
   }
 
+  setContrast() {
+    this.setState(prevState => ({
+      isContrastChecked: !prevState.isContrastChecked
+    }));
+  }
+
   render() {
     let {
       appearanceName,
-      themeName
+      themeName,
+      isContrastChecked
     } = this.state;
     return /*#__PURE__*/React.createElement(I18NProvider, {
       i18n: i18n,
@@ -148,12 +211,15 @@ export default class Provider extends React.Component {
           'data-mode': appearanceName,
           'data-theme': themeName
         }
-      }
+      },
+      className: isContrastChecked ? 'contrast' : ''
     }, /*#__PURE__*/React.createElement(Container, {
       scroll: "vertical"
     }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
       onThemeChange: this.setTheme,
-      onAppearanceChange: this.setAppearance
+      onAppearanceChange: this.setAppearance,
+      onContrastChange: this.setContrast,
+      isChecked: isContrastChecked
     }))));
   }
 

package/es/ToastMessage/ToastMessage.js

@@ -1,4 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { useState } from 'react';
 import PropTypes from 'prop-types'; //components