@zohodesk/dot 1.0.0-beta.245 → 1.0.0-beta.246

package/es/ChannelIcon/ChannelIcon.module.css

@@ -14,11 +14,16 @@
   composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
   position: absolute;
   top: calc(var(--zd_size4) * -1);
-  right: calc(var(--zd_size1) * -1);
   height: var(--zd_size15);
   width: var(--zd_size15);
   background-color: var(--topIconBg);
 }
+[dir=ltr] .thread {
+  right: calc(var(--zd_size1) * -1);
+}
+[dir=rtl] .thread {
+  left: calc(var(--zd_size1) * -1);
+}
 .threadBorder {
   border: 1px solid var(--topIconBorderColor);
 }
@@ -109,11 +114,12 @@
 }
 
 /* facebook */
-.facebook_incoming,
-.facebook_missed,
-.facebook_outgoing {
+[dir=ltr] .facebook_incoming, [dir=ltr] .facebook_missed, [dir=ltr] .facebook_outgoing {
   right: var(--zd_size2);
 }
+[dir=rtl] .facebook_incoming, [dir=rtl] .facebook_missed, [dir=rtl] .facebook_outgoing {
+  left: var(--zd_size2);
+}
 
 /* chat */
 .chat_incoming,
@@ -137,24 +143,22 @@
 .feedback_incoming,
 .feedback_missed,
 .feedback_out {
-  right: var(--zd_size1);
   top: var(--zd_size1);
 }
+[dir=ltr] .feedback_incoming, [dir=ltr] .feedback_missed, [dir=ltr] .feedback_out {
+  right: var(--zd_size1);
+}
+[dir=rtl] .feedback_incoming, [dir=rtl] .feedback_missed, [dir=rtl] .feedback_out {
+  left: var(--zd_size1);
+}
 
 /* draft */
-.email_draft,
-.facebook_draft,
-.twitter_draft,
-.forums_draft,
-.chat_draft,
-.offline_chat_draft,
-.online_chat_draft,
-.phone_draft,
-.web_draft,
-.customerportal_draft,
-.feedback_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: 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: var(--zd_size1);
+}
 
 /* forward */
 .email_forward,
@@ -184,17 +188,22 @@
 .web_forwarddraft,
 .customerportal_forwarddraft,
 .feedback_forwarddraft {
-  left: var(--zd_size1);
   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: 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: var(--zd_size1);
+}
 
 /* facebook_dm */
-.facebook_dm_default,
-.facebook_dm_incoming,
-.facebook_dm_outgoing,
-.facebook_dm_missed {
+[dir=ltr] .facebook_dm_default, [dir=ltr] .facebook_dm_incoming, [dir=ltr] .facebook_dm_outgoing, [dir=ltr] .facebook_dm_missed {
   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: var(--zd_size2);
+}
 
 /*Topic Icon colors*/
 .topic_olive {

package/es/Drawer/Drawer.js

@@ -12,7 +12,7 @@ import IconButton from '../IconButton/IconButton';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
-import FocusScope from "@zohodesk/a11y/es/FocusScope/FocusScope";
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class Header extends React.Component {
   render() {
     let {
@@ -261,8 +261,9 @@ export default class Drawer extends React.Component {
 }
 Drawer.propTypes = Drawer_propTypes;
 Drawer.defaultProps = Drawer_defaultProps;
-if (false) {
-  Drawer.docs = {
-    componentGroup: 'Template'
-  };
-}
+
+// if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/Drawer/Drawer.module.css

@@ -1,15 +1,20 @@
 .container {
+  transition: width var(--zd_transition3);
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
   background-color: var(--zdt_drawer_default_bg);
-  transition: width var(--zd_transition3);
 }
 .isOverlay {
-  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
+[dir=ltr] .isOverlay {
+  right: 0;
+}
+[dir=rtl] .isOverlay {
+  left: 0;
+}
 .columns {
   pointer-events: initial;
 }
@@ -21,17 +26,28 @@
   box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
 }
 .secondMobDrawer {
-  right: 0;
   position: absolute;
   top: 0;
   z-index: 1;
 }
+[dir=ltr] .secondMobDrawer {
+  right: 0;
+}
+[dir=rtl] .secondMobDrawer {
+  left: 0;
+}
 .mobModal {
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
+}
+[dir=ltr] .mobModal {
+  right: 0;
+  left: 0;
+}
+[dir=rtl] .mobModal {
   left: 0;
+  right: 0;
 }
 .xsmall {
   width: var(--zd_size360);
@@ -72,32 +88,64 @@
   color: var( --zdt_drawer_title_text);
   font: var(--zd_font_size16) var(--zd_semibold);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+[dir=ltr] .title {
   padding: 0 var(--zd_size10) 0 0;
 }
-.smallHeaderPadding {
+[dir=rtl] .title {
+  padding: 0 0 0 var(--zd_size10);
+}
+[dir=ltr] .smallHeaderPadding {
   padding-right: var(--zd_size11);
   padding-left: var(--zd_size30);
 }
-.smallContentPadding {
+[dir=rtl] .smallHeaderPadding {
+  padding-left: var(--zd_size11);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-.mediumHeaderPadding {
+[dir=rtl] .smallContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .mediumHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size30);
 }
-.mediumContentPadding {
+[dir=rtl] .mediumHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .mediumContentPadding {
   padding-left: var(--zd_size30);
   padding-right: var(--zd_size30);
 }
-.largeHeaderPadding {
+[dir=rtl] .mediumContentPadding {
+  padding-right: var(--zd_size30);
+  padding-left: var(--zd_size30);
+}
+[dir=ltr] .largeHeaderPadding {
   padding-right: var(--zd_size15);
   padding-left: var(--zd_size50);
 }
-.largeContentPadding {
+[dir=rtl] .largeHeaderPadding {
+  padding-left: var(--zd_size15);
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .largeContentPadding {
   padding-left: var(--zd_size50);
   padding-right: var(--zd_size50);
 }
-.iconWrapper {
+[dir=rtl] .largeContentPadding {
+  padding-right: var(--zd_size50);
+  padding-left: var(--zd_size50);
+}
+[dir=ltr] .iconWrapper {
   margin-right: var(--zd_size10);
+}
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size10);
 }

package/es/ExternalLink/ExternalLink.js

@@ -40,8 +40,9 @@ export default class ExternalLink extends React.Component {
 }
 ExternalLink.defaultProps = defaultProps;
 ExternalLink.propTypes = propTypes;
-if (false) {
-  ExternalLink.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   ExternalLink.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/FlipCard/FlipCard.js

@@ -131,8 +131,8 @@ export default class FlipCard extends Component {
 }
 FlipCard.propTypes = propTypes;
 FlipCard.defaultProps = defaultProps;
-if (false) {
-  FlipCard.docs = {
-    componentGroup: 'Molecule'
-  };
-}
+// if (__DOCS__) {
+//   FlipCard.docs = {
+//     componentGroup: 'Molecule'
+//   };
+// }

package/es/FlipCard/FlipCard.module.css

@@ -1,7 +1,8 @@
 .flip,
 .flipNone {
-  background-color: var(--zdt_flipcard_default_bg);
   color: var(--zdt_flipcard_default_text);
+}.flip, .flipNone {
+  background-color: var(--zdt_flipcard_default_bg);
 }
 .container {
   position: relative;
@@ -20,16 +21,24 @@
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
 }
-.front {
+[dir=ltr] .front {
   transform: rotateY(180deg) perspective(1px);
 }
+[dir=rtl] .front {
+  transform: rotateY(-180deg) perspective(1px);
+}
 .back {
   transform: rotateY(0deg) perspective(1px);
 }
-.notFlip .container {
+[dir=ltr] .notFlip .container {
   transform: rotateY(180deg);
 }
-.flip:hover .container,
-.hoverContainer:hover .container {
+[dir=rtl] .notFlip .container {
+  transform: rotateY(-180deg);
+}
+[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
   transform: rotateY(180deg);
 }
+[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
+  transform: rotateY(-180deg);
+}

package/es/FormAction/FormAction.js

@@ -53,12 +53,14 @@ export default class FormAction extends React.Component {
     }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
       flexible: hasRightChild ? true : false,
       shrink: !hasRightChild && hasLeftChild ? true : false
-    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
+    }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
     }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
       shrink: hasRightChild && !hasLeftChild ? true : false
-    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map(item => /*#__PURE__*/React.createElement("div", {
-      className: style.marginRight
+    }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+      className: style.marginRight,
+      key: index
     }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
       className: style.marginRight,
       key: index
@@ -67,8 +69,9 @@ export default class FormAction extends React.Component {
 }
 FormAction.propTypes = propTypes;
 FormAction.defaultProps = defaultProps;
-if (false) {
-  FormAction.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/FormAction/FormAction.module.css

@@ -25,33 +25,58 @@
   padding-bottom: var(--zd_size10);
 }
 
-.largePadding {
+[dir=ltr] .largePadding {
   padding-left: var(--zd_size60);
 }
-.mediumPadding {
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60);
+}
+[dir=ltr] .mediumPadding {
   padding-left: var(--zd_size50);
 }
-.xmediumPadding {
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .xmediumPadding {
   padding-left: var(--zd_size30);
 }
-.smallPadding {
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallPadding {
   padding-left: var(--zd_size25);
 }
-.xsmallPadding {
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25);
+}
+[dir=ltr] .xsmallPadding {
   padding-left: var(--zd_size20);
 }
+[dir=rtl] .xsmallPadding {
+  padding-right: var(--zd_size20);
+}
 
 .marginRight {
   composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
 }
-.largeFooter .marginRight,
-.mediumFooter .marginRight {
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-.smallFooter .marginRight {
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15);
+}
+[dir=ltr] .smallFooter .marginRight {
   margin-right: var(--zd_size12);
 }
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12);
+}
 
-.marginRight:last-child {
+[dir=ltr] .marginRight:last-child {
   margin-right: 0;
 }
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0;
+}

package/es/FreezeLayer/FreezeLayer.js

@@ -119,9 +119,10 @@ export default class FreezeLayer extends Component {
 }
 FreezeLayer.propTypes = propTypes;
 FreezeLayer.defaultProps = defaultProps;
-if (false) {
-  FreezeLayer.docs = {
-    componentGroup: 'Atom',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/FreezeLayer/FreezeLayer.module.css

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

package/es/IconButton/IconButton.js

@@ -133,8 +133,9 @@ export default class IconButton extends React.Component {
 }
 IconButton.propTypes = propTypes;
 IconButton.defaultProps = defaultProps;
-if (false) {
-  IconButton.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   IconButton.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/IconButton/IconButton.module.css

@@ -3,11 +3,11 @@
 }
 .wrapper {
   height: var(--zd_size28);
-  cursor: pointer;
   width: var(--zd_size28);
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
   color: var(--iconColor);
+  cursor: pointer;
 }
 .primary {
   --iconColor: var(--zdt_iconButton_icon_primary);

package/es/Image/Image.js

@@ -31,8 +31,8 @@ export default class Image extends React.Component {
 }
 Image.propTypes = propTypes;
 Image.defaultProps = defaultProps;
-if (false) {
-  Image.docs = {
-    componentGroup: 'Atom'
-  };
-}
+// if (__DOCS__) {
+//   Image.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/ImportantNotes/ImportantNotes.js

@@ -39,9 +39,10 @@ export default class ImportantNotes extends React.Component {
 }
 ImportantNotes.propTypes = propTypes;
 ImportantNotes.defaultProps = defaultProps;
-if (false) {
-  ImportantNotes.docs = {
-    componentGroup: 'Common',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   ImportantNotes.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'General'
+//   };
+// }

package/es/ImportantNotes/ImportantNotes.module.css

@@ -8,8 +8,13 @@
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {
-  margin-top: var(--zd_size1);
-  margin-right: var(--zd_size5);
   color: var(--zdt_importantnotes_icon);
   font-size: 0;
+  margin-top: var(--zd_size1);
+}
+[dir=ltr] .icon {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .icon {
+  margin-left: var(--zd_size5);
 }

package/es/Link/Link.js

@@ -86,8 +86,9 @@ export default class Link extends React.Component {
 Link.contextType = LinkContext;
 Link.defaultProps = defaultProps;
 Link.propTypes = propTypes;
-if (false) {
-  Link.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Link.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Loader/Loader.js

@@ -17,8 +17,9 @@ export default class Loader extends React.Component {
     }));
   }
 }
-if (false) {
-  Loader.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Loader.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Loader/Loader.module.css

@@ -1,21 +1,33 @@
 .ajaxLoader {
   position: absolute;
   top: 0;
+}[dir=ltr] .ajaxLoader {
   left: 0;
   right: 0;
+}[dir=rtl] .ajaxLoader {
+  right: 0;
+  left: 0;
 }
 .loader {
-  background-image: var(--zdt_loader_gradient_bg);
   width: 100%;
+  height: 3px;
+  background-image: var(--zdt_loader_gradient_bg);
   background-size: 200% auto;
+}
+[dir=ltr] .loader {
   background-position: 0 100%;
-  animation: loading 3s infinite;
+  animation:  loading-ltr 3s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+}
+[dir=rtl] .loader {
+  background-position: 100% 100%;
+  animation:  loading-rtl 3s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
-  height: 3px;
 }
 
-@keyframes loading {
+@keyframes loading-ltr {
   0% {
     background-position: 0 0;
   }
@@ -23,3 +35,12 @@
     background-position: -200% 0;
   }
 }
+
+@keyframes loading-rtl {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}

package/es/Message/Message.js

@@ -42,11 +42,13 @@ export default class Message extends React.Component {
 }
 Message.propTypes = propTypes;
 Message.defaultProps = defaultProps;
-if (false) {
-  Message.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Message.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }
+
 export function MessageUI(props) {
   function onClose(e) {
     let {