@zohodesk/components 1.0.0-temp-227 → 1.0.0-temp-228

package/es/Select/index.js

@@ -1,4 +1,4 @@
-export { default as Select } from "./Select";
-export { default as GroupSelect } from "./GroupSelect";
-export { default as SelectWithAvatar } from "./SelectWithAvatar";
-export { default as SelectWithIcon } from "./SelectWithIcon";
+export { default as Select } from './Select';
+export { default as GroupSelect } from './GroupSelect';
+export { default as SelectWithAvatar } from './SelectWithAvatar';
+export { default as SelectWithIcon } from './SelectWithIcon';

package/es/Select/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from "../../Provider/Config";
+import { getLibraryConfig } from '../../Provider/Config';
 export const Select_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: getLibraryConfig('autoComplete'),

package/es/Select/props/propTypes.js

@@ -94,9 +94,7 @@ export const Select_propTypes = {
   targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string,
-  allowValueFallback: PropTypes.bool,
-  renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  renderCustomSearchClearComponent: PropTypes.func
+  allowValueFallback: PropTypes.bool
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

package/es/Stencils/Stencils.js

@@ -1,24 +1,31 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
 
-import style from "./Stencils.module.css";
+import style from './Stencils.module.css';
 export default class Stencils extends React.PureComponent {
   render() {
     let {
       shape,
       size,
       palette,
-      customClass,
-      isAnimated
+      customClass
     } = this.props;
-    size = shape === 'rect' ? style[size] : style[`size_${size}`];
+    size = shape === 'rect' ? style[size] : style[`c${size}`];
+    shape = shape === 'rect' ? style.rectangular : style.circle;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isAnimated ? style.animate : ''} ${style[shape]} ${size} ${style[palette]} ${customClass}`
+      className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
     });
   }
 
 }
 Stencils.propTypes = propTypes;
-Stencils.defaultProps = defaultProps;
+Stencils.defaultProps = defaultProps; // if (__DOCS__) {
+//   Stencils.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     description: ' ',
+//     external: true
+//   };
+// }

package/es/Stencils/Stencils.module.css

@@ -13,14 +13,14 @@
 .stencil {
   background-size: 800px 1px;
 }
-[dir=ltr] .animate{
+[dir=ltr] .stencil {
   animation-name:  placeHolderShimmer-ltr ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
 }
-[dir=rtl] .animate{
+[dir=rtl] .stencil {
   animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
@@ -46,7 +46,7 @@
   }
 }
 
-.rect {
+.rectangular {
   composes: stencil;
   --stencil_height: var(--zd_size9);
   --stencil_border_radius: 5px;
@@ -81,20 +81,16 @@
   composes: stencil;
   --stencil_border_radius: 50%;
 }
-.square {
-  composes: stencil;
-  --stencil_border_radius: 4px;
-}
-.size_large {
+.clarge {
   --stencil_width: var(--zd_size42);
   --stencil_height: var(--zd_size42);
 }
-.size_medium,
-.size_default {
+.cmedium,
+.cdefault {
   --stencil_width: var(--zd_size30);
   --stencil_height: var(--zd_size30);
 }
-.size_small {
+.csmall {
   --stencil_width: var(--zd_size20);
   --stencil_height: var(--zd_size20);
 }

package/es/Stencils/__tests__/Stencils.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Stencils from "../Stencils.js";
+import Stencils from '../Stencils.js';
 describe('Stencils', () => {
   test('rendering the defult props', () => {
     const {
@@ -17,7 +17,7 @@ describe('Stencils', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const shape = ['rect', 'circle', 'square'];
+  const shape = ['rect', 'circle'];
   test.each(shape)('rendering the shape of- %s', shape => {
     const {
       asFragment
@@ -35,14 +35,6 @@ describe('Stencils', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering without animation', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Stencils, {
-      isAnimated: false
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
   test('rendering the customClass', () => {
     const {
       asFragment

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

@@ -3,7 +3,7 @@
 exports[`Stencils rendering the customClass 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary StencilsCustomClass"
+    class="container rectangular medium primary StencilsCustomClass"
   />
 </DocumentFragment>
 `;
@@ -11,7 +11,7 @@ exports[`Stencils rendering the customClass 1`] = `
 exports[`Stencils rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container rectangular medium primary "
   />
 </DocumentFragment>
 `;
@@ -19,7 +19,7 @@ exports[`Stencils rendering the defult props 1`] = `
 exports[`Stencils rendering the palette of- dark 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium dark "
+    class="container rectangular medium dark "
   />
 </DocumentFragment>
 `;
@@ -27,7 +27,7 @@ exports[`Stencils rendering the palette of- dark 1`] = `
 exports[`Stencils rendering the palette of- primary 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container rectangular medium primary "
   />
 </DocumentFragment>
 `;
@@ -35,7 +35,7 @@ exports[`Stencils rendering the palette of- primary 1`] = `
 exports[`Stencils rendering the palette of- secondary 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium secondary "
+    class="container rectangular medium secondary "
   />
 </DocumentFragment>
 `;
@@ -43,7 +43,7 @@ exports[`Stencils rendering the palette of- secondary 1`] = `
 exports[`Stencils rendering the shape of- circle 1`] = `
 <DocumentFragment>
   <div
-    class="container animate circle size_medium primary "
+    class="container circle cmedium primary "
   />
 </DocumentFragment>
 `;
@@ -51,15 +51,7 @@ exports[`Stencils rendering the shape of- circle 1`] = `
 exports[`Stencils rendering the shape of- rect 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the shape of- square 1`] = `
-<DocumentFragment>
-  <div
-    class="container animate square size_medium primary "
+    class="container rectangular medium primary "
   />
 </DocumentFragment>
 `;
@@ -67,7 +59,7 @@ exports[`Stencils rendering the shape of- square 1`] = `
 exports[`Stencils rendering the size of- default 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect default primary "
+    class="container rectangular default primary "
   />
 </DocumentFragment>
 `;
@@ -75,7 +67,7 @@ exports[`Stencils rendering the size of- default 1`] = `
 exports[`Stencils rendering the size of- large 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect large primary "
+    class="container rectangular large primary "
   />
 </DocumentFragment>
 `;
@@ -83,7 +75,7 @@ exports[`Stencils rendering the size of- large 1`] = `
 exports[`Stencils rendering the size of- medium 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect medium primary "
+    class="container rectangular medium primary "
   />
 </DocumentFragment>
 `;
@@ -91,15 +83,7 @@ exports[`Stencils rendering the size of- medium 1`] = `
 exports[`Stencils rendering the size of- small 1`] = `
 <DocumentFragment>
   <div
-    class="container animate rect small primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering without animation 1`] = `
-<DocumentFragment>
-  <div
-    class="container  rect medium primary "
+    class="container rectangular small primary "
   />
 </DocumentFragment>
 `;

package/es/Stencils/props/defaultProps.js

@@ -2,6 +2,5 @@ export const defaultProps = {
   palette: 'primary',
   shape: 'rect',
   size: 'medium',
-  customClass: '',
-  isAnimated: true
+  customClass: ''
 };

package/es/Stencils/props/propTypes.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   palette: PropTypes.oneOf(['primary', 'secondary', 'dark']),
-  shape: PropTypes.oneOf(['rect', 'circle', 'square']),
+  shape: PropTypes.oneOf(['rect', 'circle']),
   size: PropTypes.oneOf(['small', 'medium', 'large', 'default']),
-  customClass: PropTypes.string,
-  isAnimated: PropTypes.bool
+  customClass: PropTypes.string
 };

package/es/Switch/Switch.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { Container, Box } from "../Layout";
-import Label from "../Label/Label";
-import style from "./Switch.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Label from '../Label/Label';
+import style from './Switch.module.css';
 export default class Switch extends React.Component {
   constructor(props) {
     super(props);

package/es/Switch/__tests__/Switch.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Switch from "../Switch";
+import Switch from '../Switch';
 describe('Switch', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/Tab.js

@@ -2,12 +2,11 @@
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
 import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from "./props/defaultProps";
-import { Tab_propTypes } from "./props/propTypes";
-import { Box, Container } from "../Layout";
-import { cs } from "../utils/Common";
-import { TAB_DIRECTION_MAPPING } from "./utils/tabConfigs";
-import styles from "./Tab.module.css";
+import { Tab_defaultProps } from './props/defaultProps';
+import { Tab_propTypes } from './props/propTypes';
+import { Box, Container } from '../Layout';
+import { cs } from '../utils/Common';
+import styles from './Tab.module.css';
 const tabTypes = {
   alpha: {
     active: 'alphaActive',
@@ -68,7 +67,7 @@ export default function Tab(_ref) {
   let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
   let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
   let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
-  let tabClass = cs([styles.tab, TAB_DIRECTION_MAPPING[align] === 'column' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
+  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
   return /*#__PURE__*/React.createElement(Box, {
     tourId: tourId,
     tagName: isLink ? 'a' : 'div',

package/es/Tab/TabContent.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TabContent_defaultProps } from "./props/defaultProps";
-import { TabContent_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-import style from "./TabContent.module.css";
+import { TabContent_defaultProps } from './props/defaultProps';
+import { TabContent_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
+import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
 const TabContent = _ref => {

package/es/Tab/TabContentWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TabContentWrapper_defaultProps } from "./props/defaultProps";
-import { TabContentWrapper_propTypes } from "./props/propTypes";
-import { Box } from "../Layout";
+import { TabContentWrapper_defaultProps } from './props/defaultProps';
+import { TabContentWrapper_propTypes } from './props/propTypes';
+import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
 const TabContentWrapper = _ref => {

package/es/Tab/TabWrapper.js

@@ -1,8 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from "./props/defaultProps";
-import { TabWrapper_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-import { TAB_ALIGN_MAPPING } from "./utils/tabConfigs";
+import { TabWrapper_defaultProps } from './props/defaultProps';
+import { TabWrapper_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
 
 function TabWrapper(_ref) {
   let {
@@ -29,7 +28,7 @@ function TabWrapper(_ref) {
     onSelect && onSelect(id);
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/React.createElement(Container, {
-    alignBox: TAB_ALIGN_MAPPING[align],
+    alignBox: align === 'vertical' ? 'column' : 'row',
     dataId: dataId,
     dataSelectorId: dataSelectorId
   }, React.Children.map(children, child => {

package/es/Tab/Tabs.js

@@ -9,21 +9,20 @@
 */
 import React from 'react';
 import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
-import Tab from "./Tab";
-import { Tabs_defaultProps } from "./props/defaultProps";
-import { Tabs_propTypes } from "./props/propTypes";
-import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from "../utils/Common";
-import { Box, Container } from "../Layout";
-import ResizeObserver from "../Responsive/ResizeObserver";
-import ListItem from "../ListItem/ListItem";
+import Tab from './Tab';
+import { Tabs_defaultProps } from './props/defaultProps';
+import { Tabs_propTypes } from './props/propTypes';
+import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from '../utils/Common';
+import { Box, Container } from '../Layout';
+import ResizeObserver from '../Responsive/ResizeObserver';
+import ListItem from '../ListItem/ListItem';
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from "./Tabs.module.css";
-import Popup from "../Popup/Popup";
-import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
-import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
-import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
-import { TAB_DIRECTION_MAPPING, TAB_POPUP_POSITION_MAPPING } from "./utils/tabConfigs";
-import btnstyle from "../semantic/Button/semanticButton.module.css";
+import tabsStyle from './Tabs.module.css';
+import Popup from '../Popup/Popup';
+import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import btnstyle from '../semantic/Button/semanticButton.module.css';
 
 class Tabs extends React.Component {
   constructor(props) {
@@ -119,7 +118,7 @@ class Tabs extends React.Component {
         align
       } = this.props;
       let newDim = `${remConvert(totalDimension)}rem`;
-      TAB_DIRECTION_MAPPING[align] === 'column' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
+      align === 'vertical' ? this[selectedTab].style.maxWidth = newDim : this[selectedTab].style.maxHeight = newDim;
     }
   }
 
@@ -127,7 +126,7 @@ class Tabs extends React.Component {
     let {
       align
     } = this.props;
-    return TAB_DIRECTION_MAPPING[align] === 'column' ? this.highlight.offsetLeft : this.highlight.offsetTop;
+    return align === 'vertical' ? this.highlight.offsetLeft : this.highlight.offsetTop;
   }
 
   componentDidUpdate(prevProps) {
@@ -200,12 +199,12 @@ class Tabs extends React.Component {
       if (tabActive) {
         let position, dimension;
 
-        if (TAB_DIRECTION_MAPPING[align] === 'column') {
+        if (align === 'vertical') {
           position = tabActive.offsetLeft;
           dimension = tabActive.offsetWidth;
           node.style.transform = `translateX(${remConvert(position - highlightInitialDimension)}rem)`;
           node.style.width = `${remConvert(dimension)}rem`;
-        } else if (TAB_DIRECTION_MAPPING[align] === 'row') {
+        } else if (align === 'horizontal') {
           position = tabActive.offsetTop;
           dimension = tabActive.offsetHeight;
           node.style.transform = `translateY(${remConvert(position - highlightInitialDimension)}rem)`;
@@ -403,7 +402,8 @@ class Tabs extends React.Component {
       removeClose
     } = this.props;
     removeClose && removeClose(e);
-    boxPosition = boxPosition ? boxPosition : TAB_POPUP_POSITION_MAPPING[align];
+    let popupPosition = align === 'vertical' ? 'bottomLeft' : 'rightTop';
+    boxPosition = boxPosition ? boxPosition : popupPosition;
     togglePopup(e, boxPosition);
   }
 
@@ -527,7 +527,7 @@ class Tabs extends React.Component {
       MoreButtonProps = {},
       TextBoxIconProps = {}
     } = customProps;
-    let popupClass = TAB_DIRECTION_MAPPING[align] === 'column' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
+    let popupClass = align === 'vertical' ? tabsStyle[position] ? tabsStyle[position] : '' : '';
     const moreTabsListItems = this.handleFilterSuggestions({
       moreTabs
     });
@@ -695,17 +695,17 @@ class Tabs extends React.Component {
       className: containerClass,
       dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
+      alignBox: align === 'vertical' ? 'row' : 'column',
       className: tabsClass,
       style: style
     }, /*#__PURE__*/React.createElement(Box, {
       eleRef: this.getTabsRef,
       flexible: true
     }, renderVirtualTabs && /*#__PURE__*/React.createElement(Container, {
-      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column',
+      alignBox: align === 'vertical' ? 'row' : 'column',
       className: tabsStyle.hidden
     }, this.renderTabs(children, [], true)), /*#__PURE__*/React.createElement(Container, {
-      alignBox: TAB_DIRECTION_MAPPING[align] === 'column' ? 'row' : 'column'
+      alignBox: align === 'vertical' ? 'row' : 'column'
     }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: hlClass,
       ref: this.getHighlightRef,

package/es/Tab/__tests__/Tab.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Tab from "../Tab";
+import Tab from '../Tab';
 describe('Tab', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/__tests__/TabContent.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import TabContent from "../TabContent";
+import TabContent from '../TabContent';
 describe('TabContent', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/__tests__/TabContentWrapper.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import TabContentWrapper from "../TabContentWrapper";
+import TabContentWrapper from '../TabContentWrapper';
 describe('TabContentWrapper', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/__tests__/TabWrapper.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import TabWrapper from "../TabWrapper";
+import TabWrapper from '../TabWrapper';
 describe('TabWrapper', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/__tests__/Tabs.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Tabs from "../Tabs";
+import Tabs from '../Tabs';
 describe('Tabs', () => {
   test('rendering the defult props', () => {
     const {

package/es/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from "./TabWrapper";
-export { default as TabContentWrapper } from "./TabContentWrapper";
-export { default as TabContent } from "./TabContent";
-export { default as Tabs } from "./Tabs";
-export { default as Tab } from "./Tab";
+export { default as TabWrapper } from './TabWrapper';
+export { default as TabContentWrapper } from './TabContentWrapper';
+export { default as TabContent } from './TabContent';
+export { default as Tabs } from './Tabs';
+export { default as Tab } from './Tab';

package/es/Tab/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 export const Tab_propTypes = {
   activeClass: PropTypes.string,
-  align: PropTypes.oneOf(['vertical', 'horizontal']),
+  align: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
@@ -101,7 +101,7 @@ export const Tabs_propTypes = {
   targetOffset: PropTypes.object
 };
 export const TabWrapper_propTypes = {
-  align: PropTypes.oneOf(['vertical', 'horizontal', 'vertical-reverse', 'horizontal-reverse']),
+  align: PropTypes.oneOf(['vertical', 'horizontal']),
   children: PropTypes.node,
   dataId: PropTypes.string,
   defaultTab: PropTypes.string,

package/es/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { PureComponent } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Icon } from '@zohodesk/icons';
-import Avatar from "../Avatar/Avatar";
-import { Container } from "../Layout";
-import Button from "../semantic/Button/Button";
-import { getUniqueId } from "../Provider/IdProvider";
-import style from "./Tag.module.css";
+import Avatar from '../Avatar/Avatar';
+import { Container } from '../Layout';
+import Button from '../semantic/Button/Button';
+import { getUniqueId } from '../Provider/IdProvider';
+import style from './Tag.module.css';
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/Tag/__tests__/Tag.spec.js

@@ -1,13 +1,6 @@
 import React from 'react';
-import { render, cleanup } from "@testing-library/react";
-import { setGlobalId } from "../../Provider/IdProvider";
-import Tag from "../Tag";
-beforeEach(() => {
-  setGlobalId(0);
-});
-afterEach(() => {
-  cleanup();
-});
+import Tag from '../Tag';
+import { render } from "@testing-library/react";
 describe('Tag component', () => {
   const size = ['small', 'medium'];
   const palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];

package/es/Tag/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as AvatarPropTypes } from "../../Avatar/props/propTypes.js";
+import { propTypes as AvatarPropTypes } from '../../Avatar/props/propTypes.js';
 import { IconProps as IconPropTypes } from '@zohodesk/icons/es/Icon/props/propTypes';
 export const propTypes = {
   active: PropTypes.bool,

package/es/TextBox/TextBox.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
-import style from "./TextBox.module.css";
+import style from './TextBox.module.css';
 export default class TextBox extends React.PureComponent {
   constructor(props) {
     super(props);

package/es/TextBox/__tests__/TextBox.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textbox from "../Textbox";
+import Textbox from '../Textbox';
 import { render } from "@testing-library/react";
 describe('Textbox component', () => {
   const type = ['text', 'password', 'number'];