@zohodesk/dot 1.0.0-temp-119 → 1.0.0-temp-121

package/es/MessageBanner/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   type: 'primary',
   palette: 'default',
   customClass: '',
-  dataId: 'MessageBanner'
+  dataId: 'MessageBanner',
+  dataSelectorId: 'messageBanner'
 };

package/es/MessageBanner/props/propTypes.js

@@ -8,5 +8,6 @@ export const propTypes = {
   palette: PropTypes.oneOf(['default', 'blue', 'white']),
   type: PropTypes.oneOf(['primary', 'secondary']),
   urlText: PropTypes.string,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/NewStar/NewStar.module.css

@@ -1,175 +1,175 @@
-.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;
-}
-
-.stars {
-  position: absolute;
-}
-
-[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;
-}
-
-.topLeft .starOne{top:0}
-
-[dir=ltr] .topLeft .starOne{
-  left:0}
-
-[dir=rtl] .topLeft .starOne{right:0}
-.topLeft .starTwo{top:0}
-[dir=ltr] .topLeft .starTwo{
-  left:10px}
-[dir=rtl] .topLeft .starTwo{right:10px}
-.topLeft .starThree{top:10px}
-[dir=ltr] .topLeft .starThree{
-  left:0}
-[dir=rtl] .topLeft .starThree{right:0}
-
-.topRight .starOne{top:0}
-
-[dir=ltr] .topRight .starOne{
-  right:0}
-
-[dir=rtl] .topRight .starOne{left:0}
-.topRight .starTwo{top:0}
-[dir=ltr] .topRight .starTwo{
-  right:10px}
-[dir=rtl] .topRight .starTwo{left:10px}
-.topRight .starThree{top:10px}
-[dir=ltr] .topRight .starThree{
-  right:0}
-[dir=rtl] .topRight .starThree{left:0}
-
-.bottomLeft .starOne{bottom:0}
-
-[dir=ltr] .bottomLeft .starOne{
-  left:0}
-
-[dir=rtl] .bottomLeft .starOne{right:0}
-.bottomLeft .starTwo{bottom:0}
-[dir=ltr] .bottomLeft .starTwo{
-  left:10px}
-[dir=rtl] .bottomLeft .starTwo{right:10px}
-.bottomLeft .starThree{bottom:10px}
-[dir=ltr] .bottomLeft .starThree{
-  left:0}
-[dir=rtl] .bottomLeft .starThree{right:0}
-
-.bottomRight .starOne{bottom:0}
-
-[dir=ltr] .bottomRight .starOne{
-  right:0}
-
-[dir=rtl] .bottomRight .starOne{left:0}
-.bottomRight .starTwo{bottom:0}
-[dir=ltr] .bottomRight .starTwo{
-  right:10px}
-[dir=rtl] .bottomRight .starTwo{left:10px}
-.bottomRight .starThree{bottom:10px}
-[dir=ltr] .bottomRight .starThree{
-  right:0}
-[dir=rtl] .bottomRight .starThree{left:0}
-
-@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;
+}
+
+.stars {
+  position: absolute;
+}
+
+[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;
+}
+
+.topLeft .starOne{top:0}
+
+[dir=ltr] .topLeft .starOne{
+  left:0}
+
+[dir=rtl] .topLeft .starOne{right:0}
+.topLeft .starTwo{top:0}
+[dir=ltr] .topLeft .starTwo{
+  left:10px}
+[dir=rtl] .topLeft .starTwo{right:10px}
+.topLeft .starThree{top:10px}
+[dir=ltr] .topLeft .starThree{
+  left:0}
+[dir=rtl] .topLeft .starThree{right:0}
+
+.topRight .starOne{top:0}
+
+[dir=ltr] .topRight .starOne{
+  right:0}
+
+[dir=rtl] .topRight .starOne{left:0}
+.topRight .starTwo{top:0}
+[dir=ltr] .topRight .starTwo{
+  right:10px}
+[dir=rtl] .topRight .starTwo{left:10px}
+.topRight .starThree{top:10px}
+[dir=ltr] .topRight .starThree{
+  right:0}
+[dir=rtl] .topRight .starThree{left:0}
+
+.bottomLeft .starOne{bottom:0}
+
+[dir=ltr] .bottomLeft .starOne{
+  left:0}
+
+[dir=rtl] .bottomLeft .starOne{right:0}
+.bottomLeft .starTwo{bottom:0}
+[dir=ltr] .bottomLeft .starTwo{
+  left:10px}
+[dir=rtl] .bottomLeft .starTwo{right:10px}
+.bottomLeft .starThree{bottom:10px}
+[dir=ltr] .bottomLeft .starThree{
+  left:0}
+[dir=rtl] .bottomLeft .starThree{right:0}
+
+.bottomRight .starOne{bottom:0}
+
+[dir=ltr] .bottomRight .starOne{
+  right:0}
+
+[dir=rtl] .bottomRight .starOne{left:0}
+.bottomRight .starTwo{bottom:0}
+[dir=ltr] .bottomRight .starTwo{
+  right:10px}
+[dir=rtl] .bottomRight .starTwo{left:10px}
+.bottomRight .starThree{bottom:10px}
+[dir=ltr] .bottomRight .starThree{
+  right:0}
+[dir=rtl] .bottomRight .starThree{left:0}
+
+@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,19 @@
-.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: var(--bs_plusicon_container);
+  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/Separator/Separator.module.css

@@ -1,34 +1,34 @@
-.varClass {
-  --separator_fontSize: var(--zd_font_size15);
-}
-.separator {
-  font-size: var(--separator_fontSize);
-  margin: 0 var(--zd_size5);
-}
-.dot {
-  --separator_fontSize: var(--zd_font_size8);
-}
-.slash {
-  --separator_fontSize: var(--zd_font_size10);
-  /* line-height: var(--zd_size10); */
-}
-.arrow {
-  --separator_fontSize: var(--zd_font_size8);
-  /* line-height: var(--zd_size7); */
-}
-.comma {
-  --separator_fontSize: var(--zd_font_size15);
-  /* line-height: var(--zd_size13); */
-}
-.none {
-  display: none;
-}
-.default {
-  color: var(--zdt_separator_default_text);
-}
-.primary {
-  color: var(--zdt_separator_primary_text);
-}
-.secondary {
-  color: var(--zdt_separator_secondary_text);
-}
+.varClass {
+  --separator_fontSize: var(--zd_font_size15);
+}
+.separator {
+  font-size: var(--separator_fontSize);
+  margin: 0 var(--zd_size5);
+}
+.dot {
+  --separator_fontSize: var(--zd_font_size8);
+}
+.slash {
+  --separator_fontSize: var(--zd_font_size10);
+  /* line-height: var(--zd_size10); */
+}
+.arrow {
+  --separator_fontSize: var(--zd_font_size8);
+  /* line-height: var(--zd_size7); */
+}
+.comma {
+  --separator_fontSize: var(--zd_font_size15);
+  /* line-height: var(--zd_size13); */
+}
+.none {
+  display: none;
+}
+.default {
+  color: var(--zdt_separator_default_text);
+}
+.primary {
+  color: var(--zdt_separator_primary_text);
+}
+.secondary {
+  color: var(--zdt_separator_secondary_text);
+}

package/es/ToastMessage/ToastMessage.js

@@ -39,6 +39,7 @@ function ToastMessageUI(props) {
     onSubmit,
     onCancel,
     dataId,
+    dataSelectorId,
     isClose,
     onClose,
     needAutoZindex,
@@ -86,7 +87,8 @@ function ToastMessageUI(props) {
     "aria-live": ariaLive,
     "aria-atomic": ariaAtomic,
     "aria-describedby": ariaDescribedby,
-    "aria-labelledby": ariaLabelledby
+    "aria-labelledby": ariaLabelledby,
+    dataSelectorId: dataSelectorId
   }, type !== 'custom' ? /*#__PURE__*/React.createElement(Box, {
     className: style.alertifychild,
     flexible: true