@zohodesk/components 1.0.0-temp-42 → 1.0.0-temp-46

package/es/Responsive/docs/Responsive__default.docs.js

@@ -8,83 +8,80 @@ import { Container, Box } from '../../Layout';
 import style from './style.module.css';
 export default class Responsive__default extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, _ref => {
-      let {
-        breakPoint,
-        deviceUpto,
-        deviceBetween,
-        deviceOnly,
-        isTouchDevice
-      } = _ref;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-        className: style.header
-      }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
-      }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
-      }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
-      }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
-      }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
-      }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
-      }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
-      }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
-      }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
-      }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
-      }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
-      }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
-      }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
-      }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
-      }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
-      }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
-        className: style.subHeading
-      }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
-        isCover: false,
-        alignBox: "row",
-        wrap: "wrap"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
-      }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
-      }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
-      }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
-        className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
-      }, "MOBILE"))));
-    }));
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ResponsiveReceiver, null, ({
+      breakPoint,
+      deviceUpto,
+      deviceBetween,
+      deviceOnly,
+      isTouchDevice
+    }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+      className: style.header
+    }, ` ${breakPoint} ${isTouchDevice} `), /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      scroll: "vertical"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Common Break Points"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE']) ? style.selected : ''} `
+    }, "MOBILE - 480"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET_S']) ? style.selected : ''}  `
+    }, "TABLET_S - 640"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET']) ? style.selected : ''} `
+    }, "TABLET - 768"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP_S']) ? style.selected : ''}  `
+    }, "LAPTOP_S - 1024"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP']) ? style.selected : ''} `
+    }, "LAPTOP - 1440")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Other Break Points"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MONITOR']) ? style.selected : ''} `
+    }, "MONITOR - 1920"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MONITOR_M']) ? style.selected : ''} `
+    }, "MONITOR_M - 1600"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['LAPTOP_M']) ? style.selected : ''}  `
+    }, "LAPTOP_M - 1280"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['TABLET_M']) ? style.selected : ''} `
+    }, "TABLET_M - 720"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_M']) ? style.selected : ''} `
+    }, "MOBILE_M - 375.04"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_S']) ? style.selected : ''}  `
+    }, "MOBILE_S - 360"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceOnly(['MOBILE_XS']) ? style.selected : ''} `
+    }, "MOBILE_XS - 320")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Device Between"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('MOBILE_XS', 'TABLET') ? style.selected : ''} `
+    }, "MOBILE - TABLET"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('TABLET_M', 'LAPTOP') ? style.selected : ''} `
+    }, "TABLET - LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceBetween('LAPTOP_M', 'MONITOR') ? style.selected : ''}  `
+    }, "LAPTOP - MONITOR")), /*#__PURE__*/React.createElement("div", {
+      className: style.subHeading
+    }, "Device Upto"), /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      wrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('MONITOR') ? style.selected : ''} `
+    }, "MONITOR"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('LAPTOP') ? style.selected : ''} `
+    }, "LAPTOP"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('TABLET') ? style.selected : ''}  `
+    }, "TABLET"), /*#__PURE__*/React.createElement(Box, {
+      className: ` ${style.box} ${deviceUpto('MOBILE') ? style.selected : ''}  `
+    }, "MOBILE"))))));
   }
 
 }

package/es/Responsive/docs/style.module.css

@@ -1,21 +1,18 @@
 .header{
+  background-color: #c60000;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
   color: #fff;
   font-size: 24px;
-  background-color: #c60000;
   padding: 10px;
   text-align: center;
   margin: 10px 6px;
-}[dir=ltr] .header{
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-}[dir=rtl] .header{
-  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
 }
 .box{
   height: 80px;
-  line-height: 80px;
-  min-width: 300px;
   background-color: #ffbb11;
   text-align: center;
+  line-height: 80px;
+  min-width: 300px;
   margin:6px;
   padding: 0 100x;
 }
@@ -23,10 +20,10 @@
   background-color: #60de55
 }
 .subHeading{
-  position: sticky;
-  top: 0;
   text-align: center;
   padding: 10px;
+  position: sticky;
+  top: 0;
   background-color: #fff
 }
 
@@ -40,17 +37,11 @@
   position: absolute;
   width: 60%;
   top: 50%;
+  transform: translate(-50%,-50%);
+  left: 50%;
   border: 1px solid #aaa;
   border-radius: 4px
 }
-[dir=ltr] .wrapper{
-  transform: translate(-50%,-50%);
-  left: 50%
-}
-[dir=rtl] .wrapper{
-  transform: translate(50%,-50%);
-  right: 50%
-}
 .avatar{
   margin:20px auto
 }

package/es/Responsive/sizeObservers.js

@@ -68,11 +68,7 @@ export class Subscribale {
     this.subscribers.length && this.disconnect();
   }
 
-  dispatch() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
+  dispatch(...args) {
     this.subscribers.forEach(subscriber => {
       subscriber(...args);
     });

package/es/Ribbon/Ribbon.module.css

@@ -11,35 +11,31 @@
   --ribbon_line_height: normal;
 
   /* flag ribbon default variable */
+  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0/*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/;
 
   /* tag ribbon default variables */
   --ribbon_tag_before_top: var(--zd_size3);
+  --ribbon_tag_before_border_width: 1px 0 0 1px/*rtl: 1px 1px 0 0*/;
   --ribbon_tag_before_border_style: solid;
   --ribbon_tag_before_border_color: var(--zdt_ribbon_default_tag_border);
   --ribbon_tag_before_width: var(--zd_size20);
   --ribbon_tag_before_height: var(--zd_size20);
   --ribbon_tag_before_left: calc(var(--zd_size10) * -1);
   --ribbon_tag_before_border_radius: 3px 0 0 0;
-}[dir=ltr] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) var(--zd_size12) var(--zd_size14) 0/*rtl: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12)*/;
-  --ribbon_tag_before_border_width: 1px 0 0 1px/*rtl: 1px 1px 0 0*/;
-}[dir=rtl] .varClass {
-  --ribbon_flag_border_width: var(--zd_size14) 0 var(--zd_size14) var(--zd_size12);
-  --ribbon_tag_before_border_width: 1px 1px 0 0;
 }
 .basic {
   composes: varClass;
   position: relative;
+  padding: var(--ribbon_padding);
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
-  line-height: var(--ribbon_line_height);
-  padding: var(--ribbon_padding);
   background-color: var(--ribbon_bg_color);
   box-shadow: var(--ribbon_box_shadow);
   border-width: var(--ribbon_border_width);
   border-style: solid;
   border-color: var(--ribbon_border_color);
+  line-height: var(--ribbon_line_height);
 }
 .default,
 .flag,
@@ -53,11 +49,11 @@
 
 .default {
   composes: semibold from '../common/common.module.css';
+  text-align: center;
   display: block;
   --ribbon_padding: var(--zd_size5) var(--zd_size20);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  text-align: center;
 }
 .small {
   --ribbon_font_size: var(--zd_font_size9);
@@ -172,36 +168,23 @@
 .flag {
   composes: dotted from '../common/common.module.css';
   display: block;
+  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)/*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_line_height: var(--zd_size20);
   --ribbon_text_transform: uppercase;
 }
-
-[dir=ltr] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size24) var(--zd_size4) var(--zd_size6)/*rtl: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24)*/;
-}
-
-[dir=rtl] .flag {
-  --ribbon_padding: var(--zd_size4) var(--zd_size6) var(--zd_size4) var(--zd_size24);
-}
 .flag::after {
   position: absolute;
   top: -1px;
+  right: -1px;
   bottom: -1px;
   content: '';
   width: var(--zd_size12);
   border-style: solid;
-  transform: translateZ(0);
-  border-width: var(--ribbon_flag_border_width);
-}
-[dir=ltr] .flag::after {
-  right: -1px;
   border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border)
     var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border);
-}
-[dir=rtl] .flag::after {
-  left: -1px;
-  border-color: var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_mirror_border)    var(--zdt_ribbon_flag_mirror_border) var(--zdt_ribbon_flag_white_border);
+  transform: translateZ(0);
+  border-width: var(--ribbon_flag_border_width);
 }
 .plain {
   display: inline-block;
@@ -210,11 +193,11 @@
 .ribbon {
   composes: semibold from '../common/common.module.css';
   display: block;
+  text-align: center;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
   --ribbon_line_height: var(--zd_size20);
-  text-align: center;
 }
 .ribbon::after,
 .ribbon::before {
@@ -223,81 +206,51 @@
   top: 100%;
   height: var(--zd_size10);
   width: var(--zd_size10);
-}
-.ribbon::after, .ribbon::before {
   border-style: solid;
   border-width: 5px;
-  background-color: inherit;
-}
-[dir=ltr] .ribbon::after, [dir=ltr] .ribbon::before {
   border-color: transparent transparent var(--zdt_ribbon_flag_white_border)
     var(--zdt_ribbon_flag_white_border);
+  background-color: inherit;
 }
-[dir=rtl] .ribbon::after, [dir=rtl] .ribbon::before {
-  border-color: transparent var(--zdt_ribbon_flag_white_border) var(--zdt_ribbon_flag_white_border)    transparent;
-}
-[dir=ltr] .ribbon::after {
+.ribbon::after {
   right: 0;
 }
-[dir=rtl] .ribbon::after {
-  left: 0;
-}
-[dir=ltr] .ribbon::before {
+.ribbon::before {
   left: 0;
   transform: rotateY(180deg);
 }
-[dir=rtl] .ribbon::before {
-  right: 0;
-  transform: rotateY(-180deg);
-}
 
 .tag {
   composes: semibold from '../common/common.module.css';
   display: inline-block;
-  height: var(--zd_size28);
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
-}
-
-[dir=ltr] .tag {
   border-width: 1px 1px 1px 0/*rtl: 1px 0 1px 1px*/;
   border-radius: 0 3px 3px 0/*rtl: 3px 0 0 3px*/;
   margin-left: var(--zd_size13);
+  height: var(--zd_size28);
   padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5)/*rtl: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8)*/;
 }
-
-[dir=rtl] .tag {
-  border-width: 1px 0 1px 1px;
-  border-radius: 3px 0 0 3px;
-  margin-right: var(--zd_size13);
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8);
-}
 .tag::before {
   position: absolute;
   content: '';
-  top: var(--ribbon_tag_before_top);
-  width: var(--ribbon_tag_before_width);
-  height: var(--ribbon_tag_before_height);
+  transform: rotate(-45deg);
   background-color: inherit;
+  top: var(--ribbon_tag_before_top);
   border-style: var(--ribbon_tag_before_border_style);
   border-color: var(--ribbon_tag_before_border_color);
   border-width: var(--ribbon_tag_before_border_width);
-  border-radius: var(--ribbon_tag_before_border_radius);
-}
-[dir=ltr] .tag::before {
-  transform: rotate(-45deg);
+  width: var(--ribbon_tag_before_width);
+  height: var(--ribbon_tag_before_height);
   left: var(--ribbon_tag_before_left);
-}
-[dir=rtl] .tag::before {
-  transform: rotate(45deg);
-  right: var(--ribbon_tag_before_left);
+  border-radius: var(--ribbon_tag_before_border_radius);
 }
 
 .box {
   display: inline-block;
+  border-radius: 3px;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
   --ribbon_padding: var(--zd_size5) var(--zd_size8);
-  border-radius: 3px;
 }
 .stamp {
   display: inline-block;
@@ -306,15 +259,15 @@
 }
 .sticker {
   display: block;
-  height: var(--zd_size18);
-  line-height: var(--zd_size11);
-  --ribbon_text_color: var(--zdt_ribbon_white_text);
-  --ribbon_text_transform: uppercase;
   text-align: center;
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
+  height: var(--zd_size18);
   padding: var(--zd_size3) var(--zd_size10);
+  line-height: 0.6875;
+  --ribbon_text_color: var(--zdt_ribbon_white_text);
+  --ribbon_text_transform: uppercase;
 }
 .after,
 .before {
@@ -323,18 +276,12 @@
   bottom: 0;
   width: var(--zd_size10);
 }
-[dir=ltr] .after {
+.after {
   right: calc(var(--zd_size2) * -1);
 }
-[dir=rtl] .after {
-  left: calc(var(--zd_size2) * -1);
-}
-[dir=ltr] .before {
+.before {
   left: calc(var(--zd_size8) * -1);
 }
-[dir=rtl] .before {
-  right: calc(var(--zd_size8) * -1);
-}
 .after::after,
 .after::before,
 .before::after,
@@ -343,15 +290,8 @@
   height: var(--zd_size7);
   width: var(--zd_size7);
   content: '';
-}
-.after::after, .after::before, .before::after, .before::before {
-  background-color: var(--zdt_ribbon_white_bg);
-}
-[dir=ltr] .after::after, [dir=ltr] .after::before, [dir=ltr] .before::after, [dir=ltr] .before::before {
   transform: rotate(45deg);
-}
-[dir=rtl] .after::after, [dir=rtl] .after::before, [dir=rtl] .before::after, [dir=rtl] .before::before {
-  transform: rotate(-45deg);
+  background-color: var(--zdt_ribbon_white_bg);
 }
 .after::after,
 .before::after {
@@ -363,15 +303,10 @@
 }
 .children {
   display: inline-block;
+  margin-right: var(--zd_size4);
   vertical-align: top;
   line-height: 0;
 }
-[dir=ltr] .children {
-  margin-right: var(--zd_size4);
-}
-[dir=rtl] .children {
-  margin-left: var(--zd_size4);
-}
 .childText {
   position: relative;
 }

package/es/Ribbon/__tests__/Ribbon.spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Ribbon from '../Ribbon';
 import renderer from 'react-test-renderer';

package/es/RippleEffect/RippleEffect.module.css

@@ -8,43 +8,67 @@
 .default.defaultHover {
   border-color: var(--zdt_rippleeffect_hover_border);
 }
-.hoverEffect:hover.primary.defaultHover, .hoverEffect:focus.primary.defaultHover, .hoverEffect:hover.primary.borderHover, .hoverEffect:focus.primary.borderHover {
+.hoverEffect:hover.primary.defaultHover,
+.hoverEffect:focus.primary.defaultHover,
+.hoverEffect:hover.primary.borderHover,
+.hoverEffect:focus.primary.borderHover {
   border-color: var(--zdt_rippleeffect_primary_border);
 }
-.primary.defaultHover, .hoverEffect:hover.primary.active.border, .hoverEffect:focus.primary.active.border {
+.primary.defaultHover,
+.hoverEffect:hover.primary.active.border,
+.hoverEffect:focus.primary.active.border {
   border-color: var(--zdt_rippleeffect_primary_active_border);
 }
-.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover, .hoverEffect:focus.primaryLight.borderHover {
+.primaryLight.defaultHover,
+.hoverEffect:hover.primaryLight.borderHover,
+.hoverEffect:focus.primaryLight.borderHover {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
-.green.defaultHover, .hoverEffect:hover.green.borderHover, .hoverEffect:focus.green.borderHover {
+.green.defaultHover,
+.hoverEffect:hover.green.borderHover,
+.hoverEffect:focus.green.borderHover {
   border-color: var(--zdt_rippleeffect_green_border);
 }
-.hoverEffect:hover.default.defaultHover, .hoverEffect:focus.default.defaultHover {
+.hoverEffect:hover.default.defaultHover,
+.hoverEffect:focus.default.defaultHover {
   border-color: var(--zdt_rippleeffect_slate_border);
 }
-.hoverEffect:hover.default.borderHover, .hoverEffect:focus.default.borderHover {
+.hoverEffect:hover.default.borderHover,
+.hoverEffect:focus.default.borderHover {
   border-color: var(--zdt_rippleeffect_navy_border);
 }
-.hoverEffect:hover.default.bgHover, .hoverEffect:focus.default.bgHover {
+.hoverEffect:hover.default.bgHover,
+.hoverEffect:focus.default.bgHover {
   background-color: var(--zdt_rippleeffect_hover_bg);
 }
-.hoverEffect:hover.primaryLight.bgHover, .hoverEffect:focus.primaryLight.bgHover {
+.hoverEffect:hover.primaryLight.bgHover,
+.hoverEffect:focus.primaryLight.bgHover {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
 .primaryFilled {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
-.hoverEffect:hover.primaryFilled, .hoverEffect:focus.primaryFilled, .primaryFilled.active {
+.hoverEffect:hover.primaryFilled,
+.hoverEffect:focus.primaryFilled,
+.primaryFilled.active {
   background-color: var(--zdt_rippleeffect_primaryfilled_bg);
 }
-.hoverEffect:hover.green.bgHover, .hoverEffect:focus.green.bgHover {
+.hoverEffect:hover.green.bgHover,
+.hoverEffect:focus.green.bgHover {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
-.default.active, .hoverEffect:hover.default.active, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
+.default.active,
+.hoverEffect:hover.default.active,
+.hoverEffect:focus.default.active,
+.primaryLight.active,
+.primaryDark.active {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
-.default.active.border, .hoverEffect:hover.default.active.border, .hoverEffect:focus.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
+.default.active.border,
+.hoverEffect:hover.default.active.border,
+.hoverEffect:focus.default.active.border,
+.primaryLight.active.border,
+.primaryDark.active.border {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
 .green.active {
@@ -56,12 +80,17 @@
 .primary.active {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
-.danger.defaultHover, .hoverEffect:hover.danger.borderHover, .hoverEffect:focus.danger.borderHover {
+.danger.defaultHover,
+.hoverEffect:hover.danger.borderHover,
+.hoverEffect:focus.danger.borderHover {
   border-color: var(--zdt_rippleeffect_danger_border);
 }
-.hoverEffect:hover.danger.bgHover, .hoverEffect:focus.danger.bgHover, .danger.active {
+.hoverEffect:hover.danger.bgHover,
+.hoverEffect:focus.danger.bgHover,
+.danger.active {
   background-color: var(--zdt_rippleeffect_danger_bg);
 }
-.hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
+.hoverEffect:hover.primaryDark.bgHover,
+.hoverEffect:focus.primaryDark.bgHover {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }