@zohodesk/dot 1.2.4 → 1.3.0-temp-158

package/es/v1/alert/AlertHeader/AlertHeader.js

@@ -1,70 +1,79 @@
-import React from 'react';
-import { defaultProps } from '../../../alert/AlertHeader/props/defaultProps';
-import { propTypes } from '../../../alert/AlertHeader/props/propTypes';
-import { Icon } from '@zohodesk/icons';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Title from '../../../lookup/header/Title/Title';
-import Close from '../../../lookup/header/Close/Close';
-import style from '../../../alert/AlertHeader/AlertHeader.module.css';
+import React, { useRef } from 'react'; //AlertDependencies
+
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import AlertClose from '../AlertClose/AlertClose';
+import AlertIcons from '../alertIcons/AlertIcons'; //CSS
+
+import style from '../../../version2/lookup/AlertHeader/css/AlertHeaderNew.module.css';
+import cssJSLogic from '../../../version2/lookup/AlertHeader/css/cssJSLogic';
+import { mergeStyle } from '@zohodesk/utils'; //customHooks
+
+import useDragger from '../../../Hooks/Dragger/useDragger'; //Props
+
+import defaultProps from '../../../version2/lookup/AlertHeader/props/defaultProps';
+import propTypes from '../../../version2/lookup/AlertHeader/props/propTypes';
 export default function AlertHeader(props) {
-  let {
+  const {
     title,
-    palette,
     needIcon,
-    iconType,
     onClose,
-    iconName,
-    iconSize,
     closeTitle,
     children,
     breakChildren,
     dataId,
-    iconClass
+    type,
+    htmlId,
+    customStyle,
+    dragBoundaryLimit
   } = props;
-  let iconObj = {
-    delete: 'ZD-socialDelete',
-    alert: 'ZD-exclamationThincircle',
-    remoteAssist: 'ZD-taskDemo',
-    splitTicket: 'ZD-splitNew',
-    update: 'ZD-update'
-  };
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    alertHeaderContainerClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const dragRef = useRef(null); //dragRef
+
+  useDragger({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
   return /*#__PURE__*/React.createElement(Container, {
     align: "vertical",
     alignBox: "row",
-    className: `${style.container} ${style[palette]}`,
+    className: `${alertHeaderContainerClass}`,
     isCover: false,
-    wrap: "wrap"
-  }, needIcon ? /*#__PURE__*/React.createElement("div", {
-    className: style.iconContainer
-  }, /*#__PURE__*/React.createElement(Icon, {
-    size: iconSize,
-    name: iconName ? iconName : iconObj[iconType] ? iconObj[iconType] : iconName,
-    iconClass: `${style.iconStyle} ${iconObj[iconType] && !iconSize ? style[`icon_${iconType}`] : ''} ${style[`text_${palette}`]} ${iconClass}`
-  })) : null, /*#__PURE__*/React.createElement(Box, {
+    wrap: "wrap",
+    "data-drag-hook": "true",
+    eleRef: dragRef
+  }, needIcon && /*#__PURE__*/React.createElement("div", {
+    className: finalStyle.iconContainer
+  }, /*#__PURE__*/React.createElement(AlertIcons, {
+    type: type
+  })), (title || children) && /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
-    align: "vertical",
     wrap: breakChildren ? 'wrap' : null
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: style.title,
-    shrink: true
-  }, /*#__PURE__*/React.createElement(Title, {
-    text: title,
-    palette: palette
-  })), children ? /*#__PURE__*/React.createElement(Box, {
+  }, title && /*#__PURE__*/React.createElement(Box, {
+    className: finalStyle.title,
+    shrink: true,
+    id: htmlId
+  }, title), children && /*#__PURE__*/React.createElement(Box, {
     adjust: true,
     flexible: true
-  }, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Close, {
+  }, children))), onClose && /*#__PURE__*/React.createElement(Box, {
+    className: style.close
+  }, /*#__PURE__*/React.createElement(AlertClose, {
     onClose: onClose,
-    title: closeTitle,
-    dataId: `${dataId}_close`
-  })) : null);
-}
+    dataTitle: closeTitle,
+    dataId: `${dataId}_close`,
+    type: "light"
+  })));
+} //Props
+
 AlertHeader.propTypes = propTypes;
-AlertHeader.defaultProps = defaultProps; // if (__DOCS__) {
-//   AlertHeader.docs = {
-//     componentGroup: 'AlertHeader',
-//     folderName: 'Alert'
-//   };
-// }
+AlertHeader.defaultProps = defaultProps;

package/es/v1/alert/AlertLookup/AlertLookup.js

@@ -2,24 +2,46 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /**** Libraries ****/
 import React from 'react';
-import { defaultProps } from '../../../alert/AlertLookup/props/defaultProps';
-import { propTypes } from '../../../alert/AlertLookup/props/propTypes';
+import { defaultProps } from '../../../version2/lookup/AlertLookup/props/defaultProps';
+import { propTypes } from '../../../version2/lookup/AlertLookup/props/propTypes';
 /**** Components ****/
 
-import Button from '@zohodesk/components/lib/Button/Button';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import Lookup from '../../lookup/Lookup/Lookup';
 import AlertHeader from '../AlertHeader/AlertHeader';
-import Lookup from '../../../lookup/Lookup/Lookup';
-import Section from '../../../lookup/Section/Section';
-import FormAction from '../../../FormAction/FormAction';
+import Section from '../../lookup/Section/Section';
+import FormAction from '../../FormAction/FormAction';
 /**** CSS ****/
 
-import style from '../../../alert/AlertLookup/AlertLookup.module.css';
+import style from '../../../version2/lookup/AlertLookup/AlertLookupNew.module.css';
+let buttonPaletteObject = {
+  success: {
+    buttonPalette: 'successFilled'
+  },
+  error: {
+    buttonPalette: 'dangerFilled'
+  },
+  danger: {
+    buttonPalette: 'dangerFilled'
+  },
+  warning: {
+    buttonPalette: 'dangerFilled'
+  },
+  info: {
+    buttonPalette: 'primaryFilled'
+  },
+  notification: {
+    buttonPalette: 'primaryFilled'
+  }
+};
 export default function AlertLookup(props) {
+  const getAriaId = useUniqueId();
   let {
     isActive,
-    palette,
     size,
-    type,
+    type = 'danger',
     title,
     message,
     confirmationMessage,
@@ -32,16 +54,17 @@ export default function AlertLookup(props) {
     onClose,
     headerChildren,
     wrapHeader,
-    sectionClassName,
     dataId,
     onLookupClick,
-    customClass,
+    customClass = {},
     needIcon,
-    iconName,
-    iconClass,
-    iconSize,
+    a11y,
     customProps,
+    align,
+    childAnimationName,
     isHtmlContent,
+    scroll,
+    isDefaultFocus,
     onEsc
   } = props;
   const {
@@ -50,55 +73,92 @@ export default function AlertLookup(props) {
     PrimaryButtonProps = {},
     SecondaryButtonProps = {}
   } = customProps;
+  let {
+    containerClass = '',
+    sectionClass = ''
+  } = customClass;
+  let {
+    buttonPalette = 'dangerFilled'
+  } = buttonPaletteObject[type] || {};
+  let ariaMessageId = getAriaId();
+  let ariaConfirmMsgId = getAriaId();
+  let ariaTitleId = getAriaId();
+  let ariaLeaveButtonId = getAriaId();
+  let ariaStayButtonId = getAriaId();
+  a11y = {
+    ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
+    ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
+  };
   return /*#__PURE__*/React.createElement(Lookup, _extends({
-    needFocusScope: true,
     onClose: onEsc == 'close' ? onClose : onCancelClick,
+    needFocusScope: true,
     isActive: isActive,
     size: size,
     dataId: dataId,
     forwardRef: forwardRef,
     onClick: onLookupClick,
-    customClass: customClass
-  }, LookupProps), /*#__PURE__*/React.createElement(AlertHeader, _extends({
-    title: title,
-    palette: palette,
-    iconType: type,
-    needIcon: Boolean(type) || needIcon,
-    onClose: onClose,
-    breakChildren: wrapHeader,
-    iconName: iconName,
-    iconClass: iconClass,
-    iconSize: iconSize
-  }, AlertHeaderProps), headerChildren ? headerChildren() : null), /*#__PURE__*/React.createElement(Section, {
+    customClass: containerClass,
+    a11y: a11y,
+    childAnimationName: childAnimationName
+  }, LookupProps), /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: align,
+    wrap: "wrap"
+  }, /*#__PURE__*/React.createElement(Section, {
     alignBox: "row",
     className: style.section
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column"
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(AlertHeader, _extends({
+    htmlId: ariaTitleId,
+    title: title,
+    type: type,
+    needIcon: needIcon,
+    onClose: onClose,
+    breakChildren: wrapHeader
+  }, AlertHeaderProps), headerChildren ? headerChildren() : null)), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
   }, /*#__PURE__*/React.createElement("div", {
-    className: `${style.innerSection} ${sectionClassName}`
+    className: `${style.innerSection} ${style[`${scroll}Scroll`] ? style[`${scroll}Scroll`] : ''} ${sectionClass}`
   }, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, isHtmlContent && message ? /*#__PURE__*/React.createElement("div", {
+    id: ariaMessageId,
     dangerouslySetInnerHTML: {
       __html: message
     }
-  }) : /*#__PURE__*/React.createElement("div", null, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
-    className: style.text
-  }, confirmationMessage))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(FormAction, {
+  }) : /*#__PURE__*/React.createElement("div", {
+    id: ariaMessageId
+  }, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
+    id: ariaConfirmMsgId,
+    className: `${message ? style.confirmMsgText : ''}`
+  }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+    className: style.footer
+  }, /*#__PURE__*/React.createElement(FormAction, {
     size: "small",
-    paddingLeftSize: "xsmall"
+    paddingLeftSize: "xmedium"
   }, /*#__PURE__*/React.createElement(Button, _extends({
     text: submitText,
     dataId: dataId === 'alertPopup' ? 'alertConfirmButton' : `${dataId}_confirmButton`,
     onClick: onSubmitClick,
-    palette: palette === 'primary' ? 'primaryFilled' : 'dangerFilled'
-  }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+    palette: buttonPalette,
+    customProps: {
+      'data-a11y-autofocus': isDefaultFocus
+    }
+  }, PrimaryButtonProps, {
+    a11y: {
+      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
+    },
+    id: ariaLeaveButtonId
+  })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
     dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
     text: cancelText,
     onClick: onCancelClick,
     palette: "secondary"
-  }, SecondaryButtonProps))) : null));
+  }, SecondaryButtonProps, {
+    a11y: {
+      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
+    },
+    id: ariaStayButtonId
+  }))))) : null))));
 }
 AlertLookup.propTypes = propTypes;
-AlertLookup.defaultProps = defaultProps; // if (__DOCS__) {
-//   AlertLookup.docs = {
-//     componentGroup: 'AlertLookup',
-//     folderName: 'Alert'
-//   };
-// }
+AlertLookup.defaultProps = defaultProps;

package/es/v1/avatar/AvatarClose/AvatarClose.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from '../../../avatar/AvatarClose/props/defaultProps';
 import { propTypes } from '../../../avatar/AvatarClose/props/propTypes';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
 import style from '../../../avatar/AvatarClose/AvatarClose.module.css';
 export default class AvatarClose extends React.Component {

package/es/v1/avatar/AvatarCollision/AvatarCollision.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from '../../../avatar/AvatarCollision/props/defaultProps';
 import { propTypes } from '../../../avatar/AvatarCollision/props/propTypes';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
 import style from '../../../avatar/AvatarCollision/AvatarCollision.module.css';
 export default class AvatarCollision extends React.Component {

package/es/v1/avatar/AvatarIcon/AvatarIcon.js

@@ -4,8 +4,8 @@ import React from 'react';
 import { defaultProps } from '../../../avatar/AvatarIcon/props/defaultProps';
 import { propTypes } from '../../../avatar/AvatarIcon/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/v1/Layout';
+import AvatarSize from '@zohodesk/components/es/v1/Provider/AvatarSize';
 import style from '../../../avatar/AvatarIcon/AvatarIcon.module.css';
 export default class AvatarIcon extends React.Component {
   render() {

package/es/v1/avatar/AvatarStatus/AvatarStatus.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from '../../../avatar/AvatarStatus/props/defaultProps';
 import { propTypes } from '../../../avatar/AvatarStatus/props/propTypes';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
 import style from '../../../avatar/AvatarStatus/AvatarStatus.module.css';
 export default class AvatarStatus extends React.Component {
   constructor(props) {

package/es/v1/avatar/AvatarThread/AvatarThread.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from '../../../avatar/AvatarThread/props/defaultProps';
 import { propTypes } from '../../../avatar/AvatarThread/props/propTypes';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
 import style from '../../../avatar/AvatarThread/AvatarThread.module.css';
 export default class AvatarThread extends React.Component {

package/es/v1/avatar/AvatarUser/AvatarUser.js

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

package/es/v1/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -3,8 +3,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from '../../../avatar/AvatarWithTeam/props/defaultProps';
 import { propTypes } from '../../../avatar/AvatarWithTeam/props/propTypes';
-import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import AvatarTeam from '@zohodesk/components/lib/AvatarTeam/AvatarTeam';
+import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
+import AvatarTeam from '@zohodesk/components/es/v1/AvatarTeam/AvatarTeam';
 import style from '../../../avatar/AvatarWithTeam/AvatarWithTeam.module.css';
 export default class AvatarWithTeam extends React.Component {
   render() {

package/es/v1/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -4,22 +4,22 @@ import React, { Component, Fragment } from 'react';
 import { defaultProps } from '../../../dropdown/ToggleDropDown/props/defaultProps';
 import { propTypes } from '../../../dropdown/ToggleDropDown/props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import { Box, Container } from '@zohodesk/components/lib/Layout';
-import ListItem from '@zohodesk/components/lib/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 Popup from '@zohodesk/components/es/v1/Popup/Popup';
+import { Box, Container } from '@zohodesk/components/es/v1/Layout';
+import ListItem from '@zohodesk/components/es/v1/ListItem/ListItem';
+import ListItemWithIcon from '@zohodesk/components/es/v1/ListItem/ListItemWithIcon';
+import DropDownHeading from '@zohodesk/components/es/v1/DropDown/DropDownHeading';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
 import Loader from '@zohodesk/svg/lib/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 CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
+import { scrollTo, findScrollEnd } from '@zohodesk/components/es/utils/Common';
+import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/es/v1/RippleEffect/RippleEffect';
+import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
 import style from '../../../dropdown/ToggleDropDown/ToggleDropDown.module.css';
 export class ToggleDropDown extends Component {
   constructor(props) {
@@ -852,10 +852,13 @@ export class ToggleDropDown extends Component {
 
 }
 ToggleDropDown.defaultProps = defaultProps;
-ToggleDropDown.propTypes = propTypes; // if (__DOCS__) {
+ToggleDropDown.propTypes = propTypes;
+const ToggleDropDown_Component = Popup(ToggleDropDown);
+ToggleDropDown_Component.defaultProps = ToggleDropDown.defaultProps;
+ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes; // if (__DOCS__) {
 //   ToggleDropDown.docs = {
 //     componentGroup: 'Molecule'
 //   };
 // }
 
-export default Popup(ToggleDropDown);
+export default ToggleDropDown_Component;

package/es/v1/errorstate/Inconvenience/Inconvenience.js

@@ -1,86 +1,59 @@
 import React from 'react';
-import { defaultProps } from '../../../errorstate/Inconvenience/props/defaultProps';
-import { propTypes } from '../../../errorstate/Inconvenience/props/propTypes';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import LinkText from '../LinkText/LinkText';
-import InconvenienceSVG from '@zohodesk/svg/lib/errorstate/version1/EmptyInconvenience';
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import commonStyle from '../../../errorstate/EmptyStates.module.css';
-import style from '../../../errorstate/Inconvenience/Inconvenience.module.css';
-export default class Inconvenience extends React.Component {
-  constructor(props) {
-    super(props);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
-  }
-
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tablet: mediaQueryOR([{
-        minWidth: 481,
-        maxWidth: 768
-      }]),
-      uptoMobile: mediaQueryOR([{
-        maxWidth: 480
-      }])
-    };
-  }
-
-  render() {
-    let {
-      title,
-      subtitle,
-      description,
-      urlText,
-      url,
-      onClick,
-      dataId,
-      customClass
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc
-    }, _ref2 => {
-      let {
-        tablet,
-        uptoMobile
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(Container, {
-        className: `${uptoMobile || tablet ? commonStyle.tabletContainer : commonStyle.container} ${customClass}`,
-        dataId: dataId,
-        scroll: "vertical"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: commonStyle.top
-      }, title ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileTitle : tablet ? commonStyle.tabletTitle : commonStyle.title
-      }, title) : null, subtitle ? /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile ? commonStyle.mobileSubTitle : tablet ? commonStyle.tabletSubTitle : commonStyle.subtitle
-      }, subtitle) : null), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.imageContainer} ${uptoMobile ? commonStyle.mobileImageContainer : tablet ? commonStyle.tabletImageContainer : commonStyle.imageContainer}`
-      }, /*#__PURE__*/React.createElement(InconvenienceSVG, {
-        isFluid: true,
-        dataId: `${dataId}_svg`
-      })), /*#__PURE__*/React.createElement(Box, {
-        className: `${uptoMobile || tablet ? '' : commonStyle.footerWidth} ${commonStyle.footer}`
-      }, /*#__PURE__*/React.createElement("div", {
-        className: uptoMobile || tablet ? commonStyle.tabletBtmText : commonStyle.btmText
-      }, description), /*#__PURE__*/React.createElement(LinkText, {
-        text: urlText,
-        href: url,
-        onClick: onClick,
-        dataId: `${dataId}_link`,
-        customClass: uptoMobile || tablet ? commonStyle.tabletBtmText : ''
-      })));
+import { defaultProps } from '../../../version2/errorstate/Inconvenience/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/Inconvenience/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import ErrorInconvenience from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorInconvenience';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
+export default function Inconvenience(props) {
+  function errorInconvenience() {
+    return /*#__PURE__*/React.createElement(ErrorInconvenience, {
+      className: style.errorSvg
     });
   }
 
+  let {
+    title,
+    description,
+    isButtonNeeded,
+    className,
+    isFluid,
+    dataId,
+    buttonText,
+    onButtonClick,
+    urlText,
+    url,
+    onClick,
+    urlTarget,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    scroll: "vertical",
+    className: `${style.container} ${style[size]}`
+  }, /*#__PURE__*/React.createElement(CommonEmptyState, {
+    title: title,
+    description: description,
+    getEmptyState: errorInconvenience,
+    className: `${style.errorState} ${className}`,
+    isFluid: isFluid,
+    dataId: dataId,
+    linkUrl: url,
+    linkText: urlText,
+    onUrlClick: onClick,
+    linkTarget: urlTarget,
+    customClass: {
+      titleClass: style.title,
+      descriptionClass: style.desc
+    }
+  }, isButtonNeeded ? /*#__PURE__*/React.createElement(Button, {
+    palette: "primaryFilled",
+    text: buttonText,
+    customClass: {
+      customButton: style.errorBtn
+    },
+    onClick: onButtonClick
+  }) : null));
 }
 Inconvenience.propTypes = propTypes;
-Inconvenience.defaultProps = defaultProps;
-
-if (false) {
-  Inconvenience.docs = {
-    componentGroup: 'errorStates'
-  };
-}
+Inconvenience.defaultProps = defaultProps;

package/es/v1/{version2/errorstate → errorstate}/OopsSomethingMiss/OopsSomethingMiss.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/OopsSomethingMiss/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/OopsSomethingMiss/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/OopsSomethingMiss/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/OopsSomethingMiss/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorOopsSomethingMiss from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorOopsSomethingMiss';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function OopsSomethingMiss(props) {
   function errorOopsSomethingMiss() {
     return /*#__PURE__*/React.createElement(ErrorOopsSomethingMiss, {

package/es/v1/{version2/errorstate → errorstate}/UnableToProcessRequest/UnableToProcessRequest.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from '../../../../version2/errorstate/UnableToProcessRequest/props/defaultProps';
-import { propTypes } from '../../../../version2/errorstate/UnableToProcessRequest/props/propTypes';
-import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../../version2/errorstate/UnableToProcessRequest/props/defaultProps';
+import { propTypes } from '../../../version2/errorstate/UnableToProcessRequest/props/propTypes';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 import ErrorUnableToProcessRequest from '@zohodesk/svg/lib/v1/errorstate/version3/ErrorUnableToProcessRequest';
-import Button from '@zohodesk/components/lib/Button/Button';
-import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
-import style from '../../../../version2/errorstate/V2_ErrorStates.module.css';
+import Button from '@zohodesk/components/es/v1/Button/Button';
+import CommonEmptyState from '../../emptystate/CommonEmptyState/CommonEmptyState';
+import style from '../../../version2/errorstate/V2_ErrorStates.module.css';
 export default function UnableToProcessRequest(props) {
   function errorUnableToProcess() {
     return /*#__PURE__*/React.createElement(ErrorUnableToProcessRequest, {