@zohodesk/dot 1.7.20-exp.1 → 1.7.20

package/README.md

@@ -2,6 +2,14 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.7.20
+
+- **PhoneField**
+  - RTL unicode-bidi issue fixed
+- **Attachment**  
+  - dataId added for fileName and fileSize element
+- lib imports migrated to es  
+
 
 # 1.7.19
 

package/es/ActionButton/ActionButton.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import Popup from '@zohodesk/components/lib/Popup/Popup';
+import Popup from '@zohodesk/components/es/Popup/Popup';
 import { Icon } from '@zohodesk/icons';
-import Button from '@zohodesk/components/lib/Button/Button';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
-import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import Button from '@zohodesk/components/es/Button/Button';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
+import CssProvider from '@zohodesk/components/es/Provider/CssProvider';
 import style from "./ActionButton.module.css";
-import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {
     super(props);

package/es/ActionButton/ActionButton.module.css

@@ -98,7 +98,7 @@
 
 .txt {
   font-size: var(--zd_font_size13) ;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
   text-transform: capitalize;
 }
 

package/es/AlphabeticList/AlphabeticList.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from "./props/defaultProps";
 import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Container, Box } from '@zohodesk/components/es/Layout';
 /*** CSS ***/
 
 import style from "./AlphabeticList.module.css";

package/es/AlphabeticList/AlphabeticList.module.css

@@ -53,5 +53,5 @@
 }
 .title {
   font-size: var(--zd_font_size11) ;
-  font-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_semibold);
 }

package/es/Attachment/Attachment.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 Link from "../Link/Link";
 import style from "./Attachment.module.css";
 export default class Attachment extends React.Component {
@@ -49,7 +49,8 @@ export default class Attachment extends React.Component {
       align: "horizontal"
     }, fileName ? /*#__PURE__*/React.createElement(Box, {
       className: style.atatchName,
-      "data-title": fileName
+      "data-title": fileName,
+      dataId: `${dataId}_filename`
     }, fileName) : null, /*#__PURE__*/React.createElement(Box, {
       className: style.footer
     }, /*#__PURE__*/React.createElement(Container, {
@@ -60,14 +61,16 @@ export default class Attachment extends React.Component {
       className: style.attachSize,
       adjust: true,
       shrink: true,
-      "data-title": fileSize
+      "data-title": fileSize,
+      dataId: `${dataId}_filesize`
     }, fileSize) : null, fileInfo ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
       className: style.dot
     }), /*#__PURE__*/React.createElement(Box, {
       className: style.attachSize,
       adjust: true,
       shrink: true,
-      "data-title": fileInfo
+      "data-title": fileInfo,
+      dataId: `${dataId}_fileinfo`
     }, fileInfo)) : null)))), downloadLink && !isDisabled ? /*#__PURE__*/React.createElement(Link, {
       target: "_self",
       href: downloadLink,

package/es/Attachment/__tests__/Attachment.spec.js

@@ -8,4 +8,28 @@ describe('Attachment', () => {
     } = render( /*#__PURE__*/React.createElement(Attachment, null));
     expect(asFragment()).toMatchSnapshot();
   });
+});
+describe('Attachment with props', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Attachment, {
+      onClick: jest.fn(),
+      dataId: "test_id",
+      size: "medium",
+      iconName: "test_icon",
+      fileName: "test_file",
+      fileSize: "10MB",
+      downloadLink: "http://example.com",
+      palette: "default",
+      tooltip: "test_tooltip",
+      fileInfo: "test_info",
+      i18nKeys: {
+        downloadTitle: 'Download'
+      },
+      dataSelectorId: "test_selector",
+      isDisabled: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/Attachment/__tests__/__snapshots__/Attachment.spec.js.snap

@@ -39,3 +39,108 @@ exports[`Attachment rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Attachment with props rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="attachment  attachmentHover palette_default medium inflex rowdir"
+    data-id="test_id"
+    data-selector-id="test_selector"
+    data-test-id="test_id"
+    data-title="test_tooltip"
+    tabindex="0"
+  >
+    <div
+      class="attachleft shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir both"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      />
+    </div>
+    <div
+      class="attachright grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="flex cover coldir hCenter"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="atatchName shrinkOff"
+          data-id="test_id_filename"
+          data-selector-id="box"
+          data-test-id="test_id_filename"
+          data-title="test_file"
+        >
+          test_file
+        </div>
+        <div
+          class="footer shrinkOff"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="flex rowdir baseline"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_filesize"
+              data-selector-id="box"
+              data-test-id="test_id_filesize"
+              data-title="10MB"
+            >
+              10MB
+            </div>
+            <div
+              class="dot shrinkOff"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            />
+            <div
+              class="attachSize basisAuto shrinkOn"
+              data-id="test_id_fileinfo"
+              data-selector-id="box"
+              data-test-id="test_id_fileinfo"
+              data-title="test_info"
+            >
+              test_info
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <a
+      class="container  attachDownload"
+      data-id="test_id_download"
+      data-test-id="test_id_download"
+      data-title="Download"
+      href="http://example.com"
+      rel="noopener noreferrer"
+      target="_self"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-download-new  downIcon  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+      />
+    </a>
+  </div>
+</DocumentFragment>
+`;

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from "./props/defaultProps";
 import { AttachmentViewer_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 Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import Typography from '@zohodesk/components/lib/Typography/Typography';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import Avatar from '@zohodesk/components/es/Avatar/Avatar';
+import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/es/Typography/Typography';
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import Button from '@zohodesk/components/es/Button/Button';
 import AttachmentImage from "./AttachmentImage";
 import Link from "../Link/Link";

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -378,7 +378,7 @@
 
 .previewIconDiv {
     width: var(--zd_size60) ;
-    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+    composes: dflex from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .prevFooterIcon {

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,7 +7,6 @@ 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-weight: var(--zd-fw-semibold);
+  font-family: var(--zd_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/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 {