@zohodesk/dot 1.0.0-temp-131 → 1.0.0-temp-133

package/assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='blue'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
+	--zdt_freezelayer_darklight_bg: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_description: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link: hsl(212, 100%, calc(64% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link_hover: hsl(221, 100%, calc(57% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_title: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_description: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link: hsla(212, 100%, calc(64% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(221, 100%, calc(57% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_header_border: hsl(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_attachmentviewer_footer_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_border: hsla(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
 }

package/assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='green'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
+	--zdt_freezelayer_darklight_bg: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_description: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link: hsl(133, 40%, calc(45% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link_hover: hsl(128, 80%, calc(27% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_title: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_description: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link: hsla(133, 40%, calc(45% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(128, 80%, calc(27% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_header_border: hsl(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_attachmentviewer_footer_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_border: hsla(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
 }

package/assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='orange'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
+	--zdt_freezelayer_darklight_bg: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_description: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link: hsl(26, 100%, calc(56% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link_hover: hsl(29, 100%, calc(33% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_title: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_description: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link: hsla(26, 100%, calc(56% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(29, 100%, calc(33% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_header_border: hsl(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_attachmentviewer_footer_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_border: hsla(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
 }

package/assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='red'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
+	--zdt_freezelayer_darklight_bg: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_description: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link: hsl(0, 78%, calc(61% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link_hover: hsl(0, 82%, calc(36% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_title: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_description: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link: hsla(0, 78%, calc(61% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(0, 82%, calc(36% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_header_border: hsl(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_attachmentviewer_footer_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_border: hsla(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css

@@ -1,16 +1,16 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* freezelayer */
-	--zdt_freezelayer_darklight_bg: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
+	--zdt_freezelayer_darklight_bg: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( 0.9 + var(--zd_bg_alpha)));
 	
 	/* common empty state */
-	--zdt_commonEmptyState_dark_title: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_description: hsl(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link: hsl(37, 67%, calc(53% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_commonEmptyState_dark_link_hover: hsl(39, 90%, calc(32% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_title: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_description: hsla(0, 0%, calc(100% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link: hsla(37, 67%, calc(53% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_commonEmptyState_dark_link_hover: hsla(39, 90%, calc(32% + var(--zd_pureDark_text_lValue)), calc(1 + var(--zd_alpha)));
 	
 	/* attachment viewer */
-	--zdt_attachmentviewer_header_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_header_border: hsl(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
-	--zdt_attachmentviewer_footer_bg: hsl(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
-	--zdt_attachmentviewer_arrow_bg_hover: hsl(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_header_border: hsla(0, 0%, calc(13% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_attachmentviewer_footer_bg: hsla(0, 0%, calc(9% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
+	--zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0%, calc(6% + var(--zd_pureDark_bg_lValue)), calc( + var(--zd_bg_alpha)));
 }

package/es/ActionButton/ActionButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Popup from '@zohodesk/components/lib/Popup/Popup';
-import Icon from '@zohodesk/icons/lib/Icon';
+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';

package/es/Attachment/Attachment.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Link from '../Link/Link';
 import style from './Attachment.module.css';

package/es/AttachmentViewer/AttachmentViewer.js

@@ -2,7 +2,7 @@ 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 Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';

package/es/ChannelIcon/ChannelIcon.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
 import { getChannelMappingObj } from '../utils/ChannelIconMapping';

package/es/Drawer/Drawer.js

@@ -9,7 +9,7 @@ import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/V
 import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
 import Heading from '@zohodesk/components/lib/Heading/Heading';
 import IconButton from '../IconButton/IconButton';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
 import style from './Drawer.module.css';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';

package/es/FreezeLayer/FreezeLayer.js

@@ -1,121 +1,68 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { Container } from '@zohodesk/components/lib/Layout';
+import { mergeStyle } from '@zohodesk/components/es/utils/';
 import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import { getDotLibraryConfig } from '../Provider/Config';
-export default class FreezeLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isActive: props.isActive,
-      isChildActive: false
-    };
-    this.getNextIndex = getZIndex(this);
-    this.isFreezeLayerEnabled = false;
-  }
-  enableFreeze() {
-    if (!this.isFreezeLayerEnabled) {
-      this.isFreezeLayerEnabled = true;
-      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
-      freezeLayerEnable && freezeLayerEnable();
-    }
-  }
-  disableFreeze() {
-    if (this.isFreezeLayerEnabled) {
-      this.isFreezeLayerEnabled = false;
-      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
-      freezeLayerDisable && freezeLayerDisable();
-    }
-  }
-  componentDidMount() {
-    let {
-      isActive
-    } = this.props;
-    if (isActive) {
-      this.setState({
-        isChildActive: true
-      });
-      this.enableFreeze();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    let {
-      isActive
-    } = this.props;
-    if (isActive != prevProps.isActive) {
-      if (isActive) {
-        this.enableFreeze();
-        this.setState({
-          isActive: true
-        }, () => {
-          this.setState({
-            isChildActive: true
-          });
-        });
-      } else {
-        this.disableFreeze();
-        this.setState({
-          isChildActive: false
-        }, () => {
-          this.setState({
-            isActive: false
-          });
-        });
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.disableFreeze();
-  }
-  render() {
-    let {
-      children,
-      align,
-      childAnimationName,
-      palette,
-      onClick,
-      animationName,
-      zIndex,
-      runOnMount,
-      forwardRef,
-      isSvgMask,
-      customClass,
-      needAutoZindex
-    } = this.props;
-    let {
-      isActive,
-      isChildActive
-    } = this.state;
-    return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: animationName && animationName,
-      isActive: isActive,
-      runOnMount: runOnMount
-    }, /*#__PURE__*/React.createElement("div", {
-      style: isActive && needAutoZindex ? {
-        zIndex: `${this.getNextIndex()}`
-      } : {},
-      className: `
-              ${style.container} ${customClass} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
-            `,
-      onClick: onClick ? onClick : null,
-      ref: forwardRef
-    }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
-      name: childAnimationName,
-      isActive: isChildActive,
-      enterDelay: palette === 'plain' ? 0 : 300,
-      component: Container,
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: align,
-      dataId: "reactFreezeLayer"
-    }, children))));
-  }
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import cssJSLogic from './css/cssJSLogic';
+import useFreezeLayer from './useFreezeLayer';
+import style from './css/FreezeLayer.module.css';
+export default function FreezeLayer(props) {
+  let {
+    isActive: propsActive,
+    children,
+    align,
+    childAnimationName,
+    palette,
+    onClick,
+    animationName,
+    runOnMount,
+    forwardRef,
+    isSvgMask,
+    needAutoZindex,
+    customStyle
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    freezeClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const getNextIndex = useZIndex();
+  const {
+    isActive,
+    isChildActive,
+    handleClick
+  } = useFreezeLayer({
+    isActive: propsActive,
+    onClick
+  });
+  return /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: animationName && animationName,
+    isActive: isActive,
+    runOnMount: runOnMount
+  }, /*#__PURE__*/React.createElement("div", {
+    style: isActive && needAutoZindex ? {
+      zIndex: `${getNextIndex()}`
+    } : {},
+    className: freezeClass,
+    onClick: handleClick,
+    ref: forwardRef
+  }, children && /*#__PURE__*/React.createElement(React.Fragment, null, childAnimationName ? /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+    name: childAnimationName,
+    isActive: isChildActive,
+    enterDelay: palette === 'plain' ? 0 : 300,
+    component: Container,
+    alignBox: "row",
+    align: align,
+    dataId: "reactFreezeLayer"
+  }, children) : isSvgMask ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: align,
+    dataId: "reactFreezeLayer"
+  }, children))));
 }
 FreezeLayer.propTypes = propTypes;
 FreezeLayer.defaultProps = defaultProps;

package/es/FreezeLayer/css/cssJSLogic.js

@@ -0,0 +1,23 @@
+import { compileClassNames } from '@zohodesk/components/es/utils';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    zIndex,
+    palette,
+    isSvgMask,
+    customClass
+  } = props;
+  let zIndexClass = `index${zIndex}`;
+  let freezeClass = compileClassNames({
+    [style.container]: true,
+    [customClass]: !!customClass,
+    [style[zIndexClass]]: !!zIndex,
+    [style[palette]]: !isSvgMask && !!palette
+  });
+  return {
+    freezeClass
+  };
+}

package/es/FreezeLayer/index.js

@@ -0,0 +1,2 @@
+export { default as FreezeLayer } from './FreezeLayer';
+export { default as FreezeLayerPropTypes } from './props/propTypes';

package/es/FreezeLayer/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   zIndex: '5',
   isSvgMask: false,
   customClass: '',
+  customStyle: {},
   needAutoZindex: true
 };

package/es/FreezeLayer/props/propTypes.js

@@ -13,5 +13,6 @@ export const propTypes = {
   onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
   runOnMount: PropTypes.bool,
+  customStyle: PropTypes.object,
   zIndex: PropTypes.oneOf(['3', '5', '7', '10'])
 };

package/es/FreezeLayer/useFreezeLayer.js

@@ -0,0 +1,50 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { isTextSelected } from '@zohodesk/components/es/utils/Common';
+import { getDotLibraryConfig } from '../Provider/Config';
+export default function useFreezeLayer(_ref) {
+  let {
+    isActive: propsActive,
+    onClick
+  } = _ref;
+  const [isActive, setActive] = useState(propsActive);
+  const [isChildActive, setChildActive] = useState(false);
+  let isFreezeLayerEnabled = useRef(false);
+  function handleClick() {
+    if (onClick && !isTextSelected()) {
+      onClick();
+    }
+  }
+  function enableFreeze() {
+    if (!isFreezeLayerEnabled.current) {
+      isFreezeLayerEnabled.current = true;
+      const freezeLayerEnable = (getDotLibraryConfig('freezeLayer') || {}).enable;
+      freezeLayerEnable && freezeLayerEnable();
+    }
+  }
+  function disableFreeze() {
+    if (isFreezeLayerEnabled.current) {
+      isFreezeLayerEnabled.current = false;
+      const freezeLayerDisable = (getDotLibraryConfig('freezeLayer') || {}).disable;
+      freezeLayerDisable && freezeLayerDisable();
+    }
+  }
+  useEffect(() => {
+    if (propsActive) {
+      enableFreeze();
+      setActive(true);
+      setTimeout(() => setChildActive(true));
+    } else {
+      disableFreeze();
+      setChildActive(false);
+      setTimeout(() => setActive(false));
+    }
+    return () => {
+      disableFreeze();
+    };
+  }, [propsActive]);
+  return {
+    isActive,
+    isChildActive,
+    handleClick
+  };
+}

package/es/IconButton/IconButton.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+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';

package/es/ImportantNotes/ImportantNotes.js

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

package/es/Message/Message.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import AutoClose from '../actions/AutoClose';
 import style from './Message.module.css';
 export default class Message extends React.Component {

package/es/MessageBanner/MessageBanner.js

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

package/es/NewStar/NewStar.js

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

package/es/ToastMessage/ToastMessage.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 //components
-import Icon from '@zohodesk/icons/lib/Icon';
+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';

package/es/Upload/Upload.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Image from '../Image/Image';
 import style from './Upload.module.css';

package/es/alert/AlertHeader/AlertHeader.js

@@ -3,7 +3,7 @@ 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 Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Close from '../../lookup/header/Close/Close';
 import style from './AlertHeader.module.css';
 export default class AlertHeader extends Component {

package/es/avatar/AvatarClose/AvatarClose.js

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

package/es/avatar/AvatarCollision/AvatarCollision.js

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

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '@zohodesk/components/lib/Layout';
 import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
 import style from './AvatarIcon.module.css';

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -27,7 +27,8 @@ export default class AvatarStatus extends React.Component {
       customTextClass,
       statusTitle,
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      needDefaultBorder
     } = this.props;
     let {
       AvatarStatusProps = {},
@@ -52,6 +53,7 @@ export default class AvatarStatus extends React.Component {
       initial: initial,
       shape: shape,
       needTitle: needTitle,
+      needDefaultBorder: needDefaultBorder,
       needBorder: needBorder
     }, AvatarProps)), /*#__PURE__*/React.createElement("span", {
       "data-title": statusTitle,

package/es/avatar/AvatarStatus/props/defaultProps.js

@@ -6,5 +6,7 @@ export const defaultProps = {
   palette: 'info',
   statusTitle: '',
   customProps: {},
-  dataSelectorId: 'avatarStatus'
+  dataSelectorId: 'avatarStatus',
+  needDefaultBorder: false,
+  needBorder: false
 };

package/es/avatar/AvatarStatus/props/propTypes.js

@@ -13,6 +13,8 @@ export const propTypes = {
   size: PropTypes.string,
   src: PropTypes.string,
   state: PropTypes.string,
+  needDefaultBorder: PropTypes.bool,
+  needBorder: PropTypes.bool,
   statusTitle: PropTypes.string,
   textPalette: PropTypes.oneOf(['white', 'black']),
   title: PropTypes.string,

package/es/avatar/AvatarThread/AvatarThread.js

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