@zohodesk/dot 1.4.7 → 1.4.9

package/es/ChannelIcon/ChannelIcon.module.css

@@ -13,17 +13,17 @@
 .thread {
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
-  top: -4px;
-  height: 15px;
-  width: 15px;
+  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: -1px;
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 [dir=rtl] .thread {
-  left: -1px;
+  left: calc( var(--zd_size1) * -1 ) ;
 }
 .threadBorder {
   /* css:theme-validation:ignore */
@@ -106,22 +106,22 @@
 .email_incoming,
 .email_missed,
 .email_outgoing {
-  bottom: 2px;
+  bottom: var(--zd_size2) ;
 }
 
 /* twitter */
 .twitter_incoming,
 .twitter_outgoing,
 .twitter_missed {
-  bottom: 1px;
+  bottom: var(--zd_size1) ;
 }
 
 /* facebook */
 [dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
-  right: 2px;
+  right: var(--zd_size2) ;
 }
 [dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
-  left: 2px;
+  left: var(--zd_size2) ;
 }
 
 /* chat */
@@ -134,33 +134,33 @@
 .chat_outgoing,
 .offline_chat_outgoing,
 .online_chat_outgoing {
-  bottom: 1px;
+  bottom: var(--zd_size1) ;
 }
 
 /* forums */
 .forums_default {
-  top: 1px;
+  top: var(--zd_size1) ;
 }
 
 /* feedback */
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  top: 1px;
+  top: var(--zd_size1) ;
 }
 [dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
-  right: 1px;
+  right: var(--zd_size1) ;
 }
 [dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
-  left: 1px;
+  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: 1px;
+  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: 1px;
+  right: var(--zd_size1) ;
 }
 
 /* forward */
@@ -176,7 +176,7 @@
 .web_forward,
 .customerportal_forward,
 .feedback_forward {
-  bottom: 1px;
+  bottom: var(--zd_size1) ;
 }
 
 /* forwarddraft */
@@ -191,21 +191,21 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  bottom: 1px;
+  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: 1px;
+  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: 1px;
+  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: 2px;
+  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: 2px;
+  left: var(--zd_size2) ;
 }
 
 /*Topic Icon colors*/

package/es/Drawer/Drawer.js

@@ -1,4 +1,5 @@
 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 from 'react';
 import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from './props/defaultProps';
 import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from './props/propTypes';
@@ -90,6 +91,7 @@ export class Header extends React.Component {
       flexible: true
     }, getChildren())) : null);
   }
+
 }
 Header.propTypes = Header_propTypes;
 Header.defaultProps = Header_defaultProps;
@@ -108,6 +110,7 @@ export class Content extends React.Component {
       eleRef: eleRef
     }, children);
   }
+
 }
 Content.propTypes = Content_propTypes;
 export class Footer extends React.Component {
@@ -124,6 +127,7 @@ export class Footer extends React.Component {
       paddingRightClass: paddingRightClass
     }, children);
   }
+
 }
 Footer.propTypes = Footer_propTypes;
 Footer.defaultProps = Footer_defaultProps;
@@ -135,6 +139,7 @@ export default class Drawer extends React.Component {
     this.getNextIndex = getZIndex(this);
     this.createRef = /*#__PURE__*/React.createRef();
   }
+
   drawers(uptoTablet, styleByResolutions) {
     let {
       children,
@@ -167,6 +172,7 @@ export default class Drawer extends React.Component {
           paddingSize: childPaddingSize ? childPaddingSize : paddingSize
         }) : child;
       }
+
       return child;
     });
     let content = /*#__PURE__*/React.createElement(Box, _extends({
@@ -202,6 +208,7 @@ export default class Drawer extends React.Component {
       needEnterAction: needEnterAction
     }, content) : content);
   }
+
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -212,6 +219,7 @@ export default class Drawer extends React.Component {
       }])
     };
   }
+
   render() {
     let {
       needFreeze,
@@ -271,11 +279,10 @@ export default class Drawer extends React.Component {
       }, this.drawers(uptoTablet, styleByResolutions)));
     });
   }
+
 }
 Drawer.propTypes = Drawer_propTypes;
-Drawer.defaultProps = Drawer_defaultProps;
-
-// if (__DOCS__) {
+Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
 //   Drawer.docs = {
 //     componentGroup: 'Template'
 //   };

package/es/Drawer/Drawer.module.css

@@ -5,18 +5,18 @@
 }
 
 .isOverlay {
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   position: absolute;
   pointer-events: none;
 }
 
 [dir=ltr] .isOverlay {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .isOverlay {
-  left: 0;
+  left: 0 ;
 }
 
 .columns {
@@ -34,158 +34,158 @@
 
 .secondMobDrawer {
   position: absolute;
-  top: 0;
+  top: 0 ;
   z-index: 1;
 }
 
 [dir=ltr] .secondMobDrawer {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .secondMobDrawer {
-  left: 0;
+  left: 0 ;
 }
 
 .mobModal {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
 }
 
 [dir=ltr] .mobModal {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 
 [dir=rtl] .mobModal {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }
 
 .xsmall {
-  width: 360px;
+  width: var(--zd_size360) ;
 }
 
 .small {
-  width: 410px;
+  width: var(--zd_size410) ;
 }
 
 .medium {
-  width: 660px;
+  width: var(--zd_size660) ;
 }
 
 .xmedium {
-  width: 730px;
+  width: var(--zd_size730) ;
 }
 
 .large {
-  width: 936px;
+  width: var(--zd_size936) ;
 }
 
 .xlarge {
-  width: 840px;
+  width: var(--zd_size840) ;
 }
 
 .xxlarge {
-  width: 1142px;
+  width: var(--zd_size1142) ;
 }
 
 .mbleSize,
 .default {
-  width: 100%;
+  width: 100% ;
 }
 
 .header {
-  min-height: 50px;
+  min-height: var(--zd_size50) ;
   background-color: var(--zdt_drawer_header_bg);
   border-bottom: solid 1px var(--zdt_drawer_header_border);
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 .subheader {
-  min-height: 28px;
+  min-height: var(--zd_size28) ;
 }
 
 .title {
   color: var(--zdt_drawer_title_text);
   font-family: var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  font-size: 16px;
+  font-size: var(--zd_font_size16) ;
 }
 
 [dir=ltr] .title {
-  padding: 0 10px 0 0;
+  padding: 0 var(--zd_size10) 0 0 ;
 }
 
 [dir=rtl] .title {
-  padding: 0 0 0 10px;
+  padding: 0 0 0 var(--zd_size10) ;
 }
 
 [dir=ltr] .smallHeaderPadding {
-  padding-right: 11px;
-  padding-left: 30px;
+  padding-right: var(--zd_size11) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=rtl] .smallHeaderPadding {
-  padding-left: 11px;
-  padding-right: 30px;
+  padding-left: var(--zd_size11) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=ltr] .smallContentPadding {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=rtl] .smallContentPadding {
-  padding-right: 30px;
-  padding-left: 30px;
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=ltr] .mediumHeaderPadding {
-  padding-right: 15px;
-  padding-left: 30px;
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=rtl] .mediumHeaderPadding {
-  padding-left: 15px;
-  padding-right: 30px;
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=ltr] .mediumContentPadding {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: var(--zd_size30) ;
+  padding-right: var(--zd_size30) ;
 }
 
 [dir=rtl] .mediumContentPadding {
-  padding-right: 30px;
-  padding-left: 30px;
+  padding-right: var(--zd_size30) ;
+  padding-left: var(--zd_size30) ;
 }
 
 [dir=ltr] .largeHeaderPadding {
-  padding-right: 15px;
-  padding-left: 50px;
+  padding-right: var(--zd_size15) ;
+  padding-left: var(--zd_size50) ;
 }
 
 [dir=rtl] .largeHeaderPadding {
-  padding-left: 15px;
-  padding-right: 50px;
+  padding-left: var(--zd_size15) ;
+  padding-right: var(--zd_size50) ;
 }
 
 [dir=ltr] .largeContentPadding {
-  padding-left: 50px;
-  padding-right: 50px;
+  padding-left: var(--zd_size50) ;
+  padding-right: var(--zd_size50) ;
 }
 
 [dir=rtl] .largeContentPadding {
-  padding-right: 50px;
-  padding-left: 50px;
+  padding-right: var(--zd_size50) ;
+  padding-left: var(--zd_size50) ;
 }
 
 [dir=ltr] .iconWrapper {
-  margin-right: 10px;
+  margin-right: var(--zd_size10) ;
 }
 
 [dir=rtl] .iconWrapper {
-  margin-left: 10px;
+  margin-left: var(--zd_size10) ;
 }

package/es/ExternalLink/ExternalLink.js

@@ -1,19 +1,23 @@
 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); }
+
 /**** Libraries ****/
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-
 /**** CSS ****/
+
 import style from './ExternalLink.module.css';
 export default class ExternalLink extends React.Component {
   addHttp(url) {
     const regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
+
     if (!regEx.test(url)) {
       return `http://${url}`;
     }
+
     return url;
   }
+
   render() {
     const {
       href,
@@ -38,11 +42,10 @@ export default class ExternalLink extends React.Component {
       onClick: onClick
     }, customProps), children);
   }
+
 }
 ExternalLink.defaultProps = defaultProps;
-ExternalLink.propTypes = propTypes;
-
-// if (__DOCS__) {
+ExternalLink.propTypes = propTypes; // if (__DOCS__) {
 //   ExternalLink.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/FlipCard/FlipCard.js

@@ -1,4 +1,5 @@
 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, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -16,14 +17,17 @@ export default class FlipCard extends Component {
     this.onChange = this.onChange.bind(this);
     this.onClick = this.onClick.bind(this);
   }
+
   onClick(e) {
     let {
       noNeedFlip
     } = this.props;
+
     if (!noNeedFlip) {
       stopBubbling(e);
     }
   }
+
   onChange(isChecked, e) {
     let {
       onChange
@@ -34,6 +38,7 @@ export default class FlipCard extends Component {
     } = this.props;
     onChange(id, isChecked, e);
   }
+
   render() {
     let {
       id,
@@ -130,10 +135,10 @@ export default class FlipCard extends Component {
       customTextClass: customTextClass
     }, AvatarUserProps)))));
   }
+
 }
 FlipCard.propTypes = propTypes;
-FlipCard.defaultProps = defaultProps;
-// if (__DOCS__) {
+FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
 //   FlipCard.docs = {
 //     componentGroup: 'Molecule'
 //   };

package/es/FlipCard/FlipCard.module.css

@@ -12,8 +12,8 @@
 .container,
 .front,
 .back {
-  width: inherit;
-  height: inherit;
+  width: inherit ;
+  height: inherit ;
 }
 .front,
 .back {

package/es/FormAction/FormAction.js

@@ -22,8 +22,8 @@ export default class FormAction extends React.Component {
       dataSelectorId
     } = this.props;
     let leftbuttonGroup = [],
-      rightbuttonGroup = [],
-      centerbuttonGroup = [];
+        rightbuttonGroup = [],
+        centerbuttonGroup = [];
     React.Children.map(children, child => {
       if (!child) {
         return child;
@@ -68,11 +68,10 @@ export default class FormAction extends React.Component {
       key: index
     }, item)) : centerbuttonGroup[0]) : null));
   }
+
 }
 FormAction.propTypes = propTypes;
-FormAction.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+FormAction.defaultProps = defaultProps; // if (__DOCS__) {
 //   FormAction.docs = {
 //     componentGroup: 'Atom'
 //   };

package/es/FormAction/FormAction.module.css

@@ -15,70 +15,70 @@
   border-top: solid 1px var(--footerBorder);
 }
 .largeFooter {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-top: var(--zd_size24) ;
+  padding-bottom: var(--zd_size24) ;
 }
 .mediumFooter {
-  padding-top: 20px;
-  padding-bottom: 20px;
+  padding-top: var(--zd_size20) ;
+  padding-bottom: var(--zd_size20) ;
 }
 .smallFooter {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
 }
 
 [dir=ltr] .largePadding {
-  padding-left: 60px;
+  padding-left: var(--zd_size60) ;
 }
 
 [dir=rtl] .largePadding {
-  padding-right: 60px;
+  padding-right: var(--zd_size60) ;
 }
 [dir=ltr] .mediumPadding {
-  padding-left: 50px;
+  padding-left: var(--zd_size50) ;
 }
 [dir=rtl] .mediumPadding {
-  padding-right: 50px;
+  padding-right: var(--zd_size50) ;
 }
 [dir=ltr] .xmediumPadding {
-  padding-left: 30px;
+  padding-left: var(--zd_size30) ;
 }
 [dir=rtl] .xmediumPadding {
-  padding-right: 30px;
+  padding-right: var(--zd_size30) ;
 }
 [dir=ltr] .smallPadding {
-  padding-left: 25px;
+  padding-left: var(--zd_size25) ;
 }
 [dir=rtl] .smallPadding {
-  padding-right: 25px;
+  padding-right: var(--zd_size25) ;
 }
 [dir=ltr] .xsmallPadding {
-  padding-left: 20px;
+  padding-left: var(--zd_size20) ;
 }
 [dir=rtl] .xsmallPadding {
-  padding-right: 20px;
+  padding-right: var(--zd_size20) ;
 }
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
 [dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: 15px;
+  margin-right: var(--zd_size15) ;
 }
 [dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: 15px;
+  margin-left: var(--zd_size15) ;
 }
 [dir=ltr] .smallFooter .marginRight {
-  margin-right: 12px;
+  margin-right: var(--zd_size12) ;
 }
 [dir=rtl] .smallFooter .marginRight {
-  margin-left: 12px;
+  margin-left: var(--zd_size12) ;
 }
 
 [dir=ltr] .marginRight:last-child {
-  margin-right: 0;
+  margin-right: 0 ;
 }
 
 [dir=rtl] .marginRight:last-child {
-  margin-left: 0;
+  margin-left: 0 ;
 }

package/es/FreezeLayer/FreezeLayer.js

@@ -66,9 +66,7 @@ export default function FreezeLayer(props) {
   }, children))));
 }
 FreezeLayer.propTypes = propTypes;
-FreezeLayer.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+FreezeLayer.defaultProps = defaultProps; // if (__DOCS__) {
 //   FreezeLayer.docs = {
 //     componentGroup: 'Atom',
 //     folderName: 'General'

package/es/FreezeLayer/css/FreezeLayer.module.css

@@ -1,14 +1,14 @@
 .container {
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   position: absolute;
   overflow: hidden;
 }[dir=ltr] .container {
-  left: 0;
-  right: 0;
+  left: 0 ;
+  right: 0 ;
 }[dir=rtl] .container {
-  right: 0;
-  left: 0;
+  right: 0 ;
+  left: 0 ;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);