@zohodesk/dot 1.0.0-temp-214 → 1.0.0-temp-216

package/es/AudioPlayer/Timer/Timer.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Timer_propTypes } from "./propTypes/propTypes";
+import { Timer_defaultProps } from "./propTypes/defaultProps";
+import { Container } from '@zohodesk/components/lib/Layout';
+import { addLeadingZeros } from "../utils/utils";
+import style from "./Timer.module.css";
+export default class Timer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.constructTimer = this.constructTimer.bind(this);
+  }
+
+  constructTimer() {
+    let {
+      hour,
+      minute,
+      second,
+      amPm,
+      separator,
+      timerFormat,
+      needCharacter
+    } = this.props;
+    const timeSeparator = separator == 'space' ? ' ' : ':';
+    let timerValue = '';
+    const format = timerFormat.toLowerCase().split(':');
+    hour = addLeadingZeros(hour);
+    minute = addLeadingZeros(minute);
+    second = addLeadingZeros(second);
+
+    if (needCharacter) {
+      hour = `${hour}h`;
+      minute = `${minute}m`;
+      second = `${second}s`;
+    }
+
+    format.map(type => {
+      if (type == 'hh') {
+        timerValue += hour;
+      } else if (type == 'mm') {
+        timerValue += minute;
+      } else if (type == 'ss') {
+        timerValue += second;
+      }
+
+      timerValue += timeSeparator;
+    });
+    timerValue = timerValue.slice(0, -1);
+    amPm && (timerValue = `${timerValue} ${amPm}`);
+    return timerValue;
+  }
+
+  render() {
+    const {
+      dataId
+    } = this.props;
+    const timerValue = this.constructTimer();
+    return /*#__PURE__*/React.createElement(Container, {
+      dataId: dataId,
+      alignBox: "row",
+      className: style.container,
+      flexible: true
+    }, timerValue);
+  }
+
+}
+Timer.defaultProps = Timer_defaultProps;
+Timer.propTypes = Timer_propTypes;

package/es/AudioPlayer/Timer/Timer.module.css

@@ -0,0 +1,5 @@
+.container {
+  font-size: var(--zd_font_size11) ;
+  color: var(--zdt_timer_default_text);
+  text-align: center;
+}

package/es/AudioPlayer/Timer/__tests__/Timer.spec.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Timer from "../Timer";
+const defaultProps = {
+  dataId: 'CBTimer'
+};
+describe('Timer test Cases', () => {
+  // const {props,renderedDOM} = setup(Timer,Object.assign({},defaultProps))
+  // it('Should render Component',()=>{
+  //     const component = TestUtils.scryRenderedComponentsWithTestid(renderedDOM,'CBTimer');
+  //     expect(component.length).toBe(1);
+  // })
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Timer, { ...defaultProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/AudioPlayer/Timer/__tests__/__snapshots__/Timer.spec.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timer test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container flex cover rowdir"
+    data-id="CBTimer"
+    data-selector-id="container"
+    data-test-id="CBTimer"
+  >
+    undefined:undefined
+  </div>
+</DocumentFragment>
+`;

package/es/AudioPlayer/Timer/propTypes/defaultProps.js

@@ -0,0 +1,4 @@
+export const Timer_defaultProps = {
+  separator: 'colon',
+  timerFormat: 'mm:ss'
+};

package/es/AudioPlayer/Timer/propTypes/propTypes.js

@@ -0,0 +1,11 @@
+import PropTypes from 'prop-types';
+export const Timer_propTypes = {
+  dataId: PropTypes.string,
+  amPm: PropTypes.string,
+  hour: PropTypes.string,
+  minute: PropTypes.string,
+  needCharacter: PropTypes.bool,
+  second: PropTypes.string,
+  separator: PropTypes.oneOf(['space', 'colon']),
+  timerFormat: PropTypes.string
+};

package/es/AudioPlayer/__tests__/AudioPlayer.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AudioPlayer from "../AudioPlayer"; // import TestUtils from 'react-dom/test-utils';
+
+const defaultProps = {
+  togglePlayer: jest.fn(),
+  downloadFile: jest.fn(),
+  minute: '02',
+  second: '03',
+  durationInSec: '203',
+  src: "https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+};
+describe('AudioPlayer Test Cases', () => {
+  // const { props,renderedDOM } = setup(
+  //     AudioPlayer,Object.assign({},defaultProps));
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AudioPlayer, { ...defaultProps
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  }); // it('should render component', () => {
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'AudioPlayer');
+  //     expect(component.length).toBe(1);
+  // })
+  // it('should close player onclicking close',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioPlayerClose'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.togglePlayer).toHaveBeenCalled();
+  // })
+  // it('should download audio onclicking download',()=>{
+  //     let component = TestUtils.scryRenderedComponentsWithTestid(
+  //         renderedDOM,
+  //         'audioDownload'
+  //     )[0];
+  //     TestUtils.Simulate.click(component);
+  //     expect(props.downloadFile).toHaveBeenCalled();
+  // })
+});

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

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AudioPlayer Test Cases rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="AudioRange"
+    data-selector-id="container"
+    data-test-id="AudioRange"
+    tabindex="0"
+  >
+    <div
+      class="container flex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <audio
+        class="audioHid"
+        controls=""
+        preload="auto"
+      >
+        <source
+          src="https://ypvnxx00-a.akamaihd.net/downloads/ringtones/files/mp3/yuvanringtone-44640.mp3"
+          type="audio/mpeg"
+        />
+      </audio>
+      <div
+        class="rightBox downloadBox boxLeftRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_playpause"
+          data-selector-id="container"
+          data-test-id="AudioRange_playpause"
+          data-title="Play"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-bcarr  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="timerBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="flex cover rowdir vCenter"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="container flex cover rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
+            00:00:00
+          </div>
+        </div>
+      </div>
+      <div
+        class="dragtag disable grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="audioRangeContainer flex cover coldir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <span
+            class="loading"
+          />
+          <input
+            class="input"
+            data-id="AudioRange"
+            max="0"
+            min="0"
+            step="1"
+            type="range"
+            value="0"
+          />
+        </div>
+      </div>
+      <div
+        class="rightBox downloadBox  shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_download"
+          data-selector-id="container"
+          data-test-id="AudioRange_download"
+          data-title="Download"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-download-new  downloadIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+      <div
+        class="closeBox boxRightRadius shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="disable flex cover coldir both"
+          data-id="AudioRange_close"
+          data-selector-id="container"
+          data-test-id="AudioRange_close"
+          data-title="Close"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-cross  pauseIcon iconColor  "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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/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/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";