@zohodesk/dot 1.7.19 → 1.7.20-exp.2

package/es/AudioPlayer/propTypes/defaultProps.js

@@ -0,0 +1,14 @@
+export const AudioPlayer_defaultProps = {
+  isPlay: false,
+  timerFormat: 'mm:ss',
+  forwardStepInSec: 5,
+  backwardStepInSec: 5,
+  needClose: true,
+  needDownload: true,
+  needMuteIcon: false,
+  i18nKeys: {},
+  dataId: 'AudioPlayer',
+  customClass: '',
+  range: 0,
+  dataId: 'AudioRange'
+};

package/es/AudioPlayer/propTypes/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+export const AudioPlayer_propTypes = {
+  backwardStepInSec: PropTypes.string,
+  forwardStepInSec: PropTypes.string,
+  getAudioDuration: PropTypes.func,
+  duration: PropTypes.string,
+  id: PropTypes.string,
+  isPlay: PropTypes.bool,
+  needClose: PropTypes.bool,
+  needDownload: PropTypes.bool,
+  needMuteIcon: PropTypes.bool,
+  onAudioLoading: PropTypes.func,
+  onAudioSeeking: PropTypes.func,
+  onClose: PropTypes.func,
+  onDownloading: PropTypes.func,
+  onError: PropTypes.func,
+  onMuteUnmute: PropTypes.func,
+  onPause: PropTypes.func,
+  onPlay: PropTypes.func,
+  src: PropTypes.string,
+  timerFormat: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    playTitle: PropTypes.string,
+    pauseTitle: PropTypes.string,
+    downloadTitle: PropTypes.string,
+    closeTitle: PropTypes.string,
+    muteTitle: PropTypes.string,
+    unmuteTitle: PropTypes.string
+  }),
+  dataId: PropTypes.string,
+  customClass: PropTypes.string,
+  range: PropTypes.number
+};

package/es/AudioPlayer/utils/utils.js

@@ -0,0 +1,24 @@
+export function openInNewTabWithNoopener(url) {
+  let targetnName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_blank';
+  const aTag = document.createElement('a');
+  aTag.rel = 'noopener noreferrer';
+  aTag.target = targetnName;
+  aTag.href = url;
+  aTag.click();
+}
+export function addLeadingZeros(number) {
+  let desiredLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '2';
+
+  if (typeof number !== 'undefined') {
+    number = `${number}`;
+    desiredLength = Number(desiredLength);
+
+    if (number.length < desiredLength) {
+      for (let i = desiredLength - number.length; i > 0; i--) {
+        number = `0${number}`;
+      }
+    }
+
+    return number;
+  }
+}

package/es/ChannelIcon/ChannelIcon.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
 import { getChannelMappingObj } from "../utils/ChannelIconMapping";
 import style from "./ChannelIcon.module.css";

package/es/DotProvider/hooks/useDotProvider.js

@@ -7,6 +7,7 @@ import '@zohodesk/variables/assets/colorVariables.module.css';
 import '@zohodesk/variables/assets/dotVariables.module.css';
 import '@zohodesk/components/es/common/basic.module.css';
 import '@zohodesk/variables/es/fontFamilyVariables.module.css';
+import '@zohodesk/variables/es/fontWeightVariables.module.css';
 import '@zohodesk/components/es/common/boxShadow.module.css';
 import "../../common/dot_boxShadow.module.css";
 

package/es/Drawer/Drawer.js

@@ -2,15 +2,15 @@ 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";
 import FreezeLayer from "../FreezeLayer/FreezeLayer";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/es/Card';
 import FormAction from "../FormAction/FormAction";
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import Heading from '@zohodesk/components/lib/Heading/Heading';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import Heading from '@zohodesk/components/es/Heading/Heading';
 import IconButton from "../IconButton/IconButton";
 import { Icon } from '@zohodesk/icons';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import style from "./Drawer.module.css";
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 export class Header extends React.Component {

package/es/Drawer/Drawer.module.css

@@ -109,7 +109,7 @@
 
 .title {
   color: var(--zdt_drawer_title_text);
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }

package/es/FlipCard/FlipCard.js

@@ -3,10 +3,10 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import AvatarUser from "../avatar/AvatarUser/AvatarUser";
 import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
-import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
-import { Container } from '@zohodesk/components/lib/Layout';
+import CheckBox from '@zohodesk/components/es/CheckBox/CheckBox';
+import { Container } from '@zohodesk/components/es/Layout';
 import ChannelIcon from "../ChannelIcon/ChannelIcon";
-import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import AvatarSize from '@zohodesk/components/es/Provider/AvatarSize';
 import style from "./FlipCard.module.css";
 import { stopBubbling } from "../utils/General";
 export default class FlipCard extends Component {

package/es/FormAction/FormAction.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import style from "./FormAction.module.css";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 export const LeftSide = props => {
   props.children;
 };

package/es/FreezeLayer/FreezeLayer.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import { mergeStyle } from '@zohodesk/utils';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import cssJSLogic from "./css/cssJSLogic";
 import useFreezeLayer from "../Hooks/useFreezeLayer";
 import style from "./css/FreezeLayer.module.css";

package/es/Hooks/Dragger/useDragger.js

@@ -22,6 +22,12 @@ export default function useDragger(_ref) {
     y: 0
   });
   const draggable = useRef(false);
+  const dragStarted = useRef(false);
+  const initialMouse = useRef({
+    x: 0,
+    y: 0
+  });
+  const DRAG_DISTANCE_THRESHOLD = 4;
   useEffect(() => {
     if (isActive) {
       parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
@@ -48,49 +54,62 @@ export default function useDragger(_ref) {
     e = e || window.event;
     e.preventDefault();
 
-    if (draggable.current) {
-      const left = offset.current.x + e.clientX;
-      const top = offset.current.y + e.clientY;
-      const {
-        x,
-        y
-      } = calculateDragPosition(left, top);
-      draggableEle.current.style.left = x + 'px';
-      draggableEle.current.style.top = y + 'px';
+    if (!draggable.current) {
+      return;
+    }
+
+    if (!dragStarted.current) {
+      const dx = Math.abs(e.clientX - initialMouse.current.x);
+      const dy = Math.abs(e.clientY - initialMouse.current.y);
+
+      if (dx < DRAG_DISTANCE_THRESHOLD && dy < DRAG_DISTANCE_THRESHOLD) {
+        return;
+      }
+
+      const draggableEleRect = draggableEle.current.getBoundingClientRect();
+      const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
+        left: 0,
+        top: 0
+      };
+      offset.current.x = draggableEleRect.left - e.clientX;
+      offset.current.y = draggableEleRect.top - e.clientY;
+      const relativeRect = {
+        left: draggableEleRect.left - parentEleRect.left,
+        top: draggableEleRect.top - parentEleRect.top
+      };
+      const styleRef = draggableEle.current.style;
+      styleRef.top = `${relativeRect.top}px`;
+      styleRef.left = `${relativeRect.left}px`;
+      styleRef.width = `${draggableEleRect.width}px`;
+      styleRef.position = "fixed";
+      styleRef.bottom = "initial";
+      styleRef.right = "initial";
+      dragStarted.current = true;
     }
+
+    const left = offset.current.x + e.clientX;
+    const top = offset.current.y + e.clientY;
+    const {
+      x,
+      y
+    } = calculateDragPosition(left, top);
+    draggableEle.current.style.left = `${x}px`;
+    draggableEle.current.style.top = `${y}px`;
   }, [calculateDragPosition]);
   const closeDragElement = useCallback(() => {
     document.removeEventListener('mouseup', closeDragElement);
     document.removeEventListener('mousemove', elementDrag);
+    dragStarted.current = false;
+    draggable.current = false;
   }, []);
   const dragMouseDown = useCallback(e => {
     e = e || window.event; // e.preventDefault();
 
-    const draggableEleRect = draggableEle.current.getBoundingClientRect();
-    const style = draggableEle.current.style;
-    const {
-      width
-    } = draggableEleRect;
-    const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
-      left: 0,
-      top: 0
+    initialMouse.current = {
+      x: e.clientX,
+      y: e.clientY
     };
-    const relativeRect = {
-      left: draggableEleRect.left - parentEleRect.left,
-      top: draggableEleRect.top - parentEleRect.top
-    };
-    const {
-      top,
-      left
-    } = relativeRect;
-    style.top = `${top}px`;
-    style.left = `${left}px`;
-    style.width = `${width}px`;
-    style.bottom = 'initial';
-    style.right = 'initial';
-    style.position = 'fixed';
-    offset.current.x = draggableEle.current.offsetLeft - e.clientX;
-    offset.current.y = draggableEle.current.offsetTop - e.clientY;
+    dragStarted.current = false;
     draggable.current = true;
     document.addEventListener('mouseup', closeDragElement);
     document.addEventListener('mousemove', elementDrag);

package/es/IconButton/IconButton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container } from '@zohodesk/components/lib/Layout';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import { Container } from '@zohodesk/components/es/Layout';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/es/RippleEffect/RippleEffect';
 import style from "./IconButton.module.css";
 export default class IconButton extends React.Component {
   constructor(props) {

package/es/ImportantNotes/ImportantNotes.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
 import style from "./ImportantNotes.module.css";
 export default class ImportantNotes extends React.Component {

package/es/Loader/Loader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import style from "./Loader.module.css";
 export default class Loader extends React.Component {
   constructor(props) {

package/es/MessageBanner/MessageBanner.js

@@ -3,7 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Link from "../Link/Link";
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import style from "./MessageBanner.module.css";
 export default class MessageBanner extends React.Component {
   render() {

package/es/NewStar/NewStar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import style from "./NewStar.module.css";
 export default class NewStar extends React.Component {
   render() {

package/es/Onboarding/Onboarding.js

@@ -5,10 +5,10 @@ import { propTypes } from "./props/propTypes";
 import { defaultProps } from "./props/defaultProps";
 /**components**/
 
-import Icon from '@zohodesk/icons/lib/Icon';
+import Icon from '@zohodesk/icons/es/Icon';
 import Flex from '@zohodesk/layout/es/Flex/Flex';
-import Button from '@zohodesk/components/lib/Button/Button';
-import Modal from '@zohodesk/components/lib/Modal/Modal';
+import Button from '@zohodesk/components/es/Button/Button';
+import Modal from '@zohodesk/components/es/Modal/Modal';
 import Ribbon from '@zohodesk/components/es/Ribbon/Ribbon';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';

package/es/Separator/Separator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import style from "./Separator.module.css";

package/es/ToastMessage/ToastMessage.js

@@ -4,11 +4,11 @@ import { propTypes } from "./props/propTypes"; //components
 
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
+import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import AutoClose from "../actions/AutoClose";
-import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
+import a11yStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css'; //style
 
 import style from "./ToastMessage.module.css";
 

package/es/Upload/Upload.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import Image from "../Image/Image";
 import style from "./Upload.module.css";
 export default class Upload extends React.Component {

package/es/VideoLookup/VideoLookup.js

@@ -1,6 +1,6 @@
 /**** Libraries ****/
 import React, { useCallback, useEffect } from 'react';
-import Icon from '@zohodesk/icons/lib/Icon';
+import Icon from '@zohodesk/icons/es/Icon';
 import Button from '@zohodesk/components/es/Button/Button';
 import Typography from '@zohodesk/components/es/Typography/Typography';
 import { mergeStyle } from '@zohodesk/utils';

package/es/alert/AlertHeader/AlertHeader.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Title from "../../lookup/header/Title/Title";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 import { Icon } from '@zohodesk/icons';
 import Close from "../../lookup/header/Close/Close";
 import style from "./AlertHeader.module.css";

package/es/alert/AlertLookup/AlertLookup.js

@@ -6,7 +6,7 @@ import { propTypes } from "./props/propTypes";
 
 import Lookup from "../../lookup/Lookup/Lookup";
 import AlertHeader from "../AlertHeader/AlertHeader";
-import Button from '@zohodesk/components/lib/Button/Button';
+import Button from '@zohodesk/components/es/Button/Button';
 import Section from "../../lookup/Section/Section";
 import FormAction from "../../FormAction/FormAction";
 /**** CSS ****/

package/es/avatar/AvatarClose/AvatarClose.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
 import style from "./AvatarClose.module.css";
 export default class AvatarClose extends React.Component {

package/es/avatar/AvatarCollision/AvatarCollision.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
 import style from "./AvatarCollision.module.css";
 export default class AvatarCollision extends React.Component {

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import { Container } from '@zohodesk/components/lib/Layout';
-import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import { Container } from '@zohodesk/components/es/Layout';
+import AvatarSize from '@zohodesk/components/es/Provider/AvatarSize';
 import style from "./AvatarIcon.module.css";
 export default class AvatarIcon extends React.Component {
   render() {

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import style from "./AvatarStatus.module.css";
 export default class AvatarStatus extends React.Component {
   constructor(props) {

package/es/avatar/AvatarThread/AvatarThread.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
 import style from "./AvatarThread.module.css";
 export default class AvatarThread extends React.Component {

package/es/avatar/AvatarUser/AvatarUser.js

@@ -4,7 +4,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import AvatarIcon from "../AvatarIcon/AvatarIcon";
 import { Icon } from '@zohodesk/icons';
 import style from "./AvatarUser.module.css";

package/es/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import AvatarTeam from '@zohodesk/components/lib/AvatarTeam/AvatarTeam';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import AvatarTeam from '@zohodesk/components/es/AvatarTeam/AvatarTeam';
 import style from "./AvatarWithTeam.module.css";
 export default class AvatarWithTeam extends React.Component {
   render() {

package/es/deprecated/FreezeLayer/FreezeLayer.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { Container } from '@zohodesk/components/lib/Layout';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { Container } from '@zohodesk/components/es/Layout';
+import VelocityAnimationGroup from '@zohodesk/components/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
 import style from "./_FreezeLayer.module.css";
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import { getZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
 import { getDotLibraryConfig } from "../Provider/Config";
 export default class FreezeLayer extends Component {
   constructor(props) {

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
-import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
-import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import ListItem from '@zohodesk/components/es/ListItem/ListItem';
+import TextBox from '@zohodesk/components/es/TextBox/TextBox';
+import DropDownHeading from '@zohodesk/components/es/DropDown/DropDownHeading';
 import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from "./SelectDropdown.module.css";
 
 class SelectDropdown extends React.Component {

package/es/dot_layer.module.css

@@ -0,0 +1 @@
+@layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -2,22 +2,22 @@ import React, { Component, Fragment } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import { Box, Container } from '@zohodesk/components/lib/Layout';
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import { Box, Container } from '@zohodesk/components/es/Layout';
 import ListItem from '@zohodesk/components/es/ListItem/ListItem';
-import ListItemWithIcon from '@zohodesk/components/lib/ListItem/ListItemWithIcon';
-import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import ListItemWithIcon from '@zohodesk/components/es/ListItem/ListItemWithIcon';
+import DropDownHeading from '@zohodesk/components/es/DropDown/DropDownHeading';
+import TextBoxIcon from '@zohodesk/components/es/TextBoxIcon/TextBoxIcon';
+import Loader from '@zohodesk/svg/es/Loader/Loader';
 import CommonEmptyState from "../../emptystate/CommonEmptyState/CommonEmptyState";
-import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-import { scrollTo, findScrollEnd } from '@zohodesk/components/lib/utils/Common';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
-import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import EmptySearch from '@zohodesk/svg/es/emptystate/version3/EmptySearch';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
+import { findScrollEnd } from '@zohodesk/components/es/utils/Common';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/es/RippleEffect/RippleEffect';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import style from "./ToggleDropDown.module.css";
 export class ToggleDropDown extends Component {
   constructor(props) {

package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -20,7 +20,7 @@
   max-width: var(--zd_size430) ;
 }
 .title {
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   color: var(--titleColor);
   word-wrap: break-word;
 }

package/es/emptystate/EditionPage/EditionPage.css

@@ -6,12 +6,12 @@
 }
 .header {
   font-size: var(--zd_font_size20) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin-top: var(--zd_size16) ;
 }
 .description {
   font-size: var(--zd_font_size15) ;
-  font-family: var(--zd_semibold);
+  font-weight: var(--zd-fw-semibold);
   margin: var(--zd_size20) 0 ;
 }
 .content {

package/es/emptystate/EditionPage/EditionPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import EmptyCrmPotential from '@zohodesk/svg/lib/emptystate/version3/EmptyCrmPotential';
+import EmptyCrmPotential from '@zohodesk/svg/es/emptystate/version3/EmptyCrmPotential';
 import style from "./EditionPage.css";
 export default class EditionPage extends Component {
   constructor(props) {