@zohodesk/components 1.2.35 → 1.2.37

package/es/Select/SelectWithIcon.js

@@ -1,25 +1,25 @@
 import React, { Component } from 'react';
-import { SelectWithIcon_defaultProps } from './props/defaultProps';
-import { SelectWithIcon_propTypes } from './props/propTypes';
+import { SelectWithIcon_defaultProps } from "./props/defaultProps";
+import { SelectWithIcon_propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Popup from '../Popup/Popup';
-import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
+import Popup from "../Popup/Popup";
+import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
 import { Icon } from '@zohodesk/icons';
-import ListItemWithIcon from '../ListItem/ListItemWithIcon';
-import Card, { CardHeader, CardContent } from '../Card/Card';
-import EmptyState from '../MultiSelect/EmptyState';
-import { Container, Box } from '../Layout';
-import { getUniqueId } from '../Provider/IdProvider';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import ListItemWithIcon from "../ListItem/ListItemWithIcon";
+import Card, { CardHeader, CardContent } from "../Card/Card";
+import EmptyState from "../MultiSelect/EmptyState";
+import { Container, Box } from "../Layout";
+import { getUniqueId } from "../Provider/IdProvider";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
 
-import { scrollTo, findScrollEnd } from '../utils/Common.js';
+import { scrollTo, findScrollEnd } from "../utils/Common.js";
 /**** CSS ****/
 
-import style from './Select.module.css';
+import style from "./Select.module.css";
 
 class SelectWithIcon extends Component {
   constructor(props) {
@@ -377,7 +377,8 @@ class SelectWithIcon extends Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize,
-      iconClass: iconClass
+      iconClass: iconClass,
+      dataId: `${dataId}_icon`
     })) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
@@ -470,7 +471,8 @@ class SelectWithIcon extends Component {
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         customClass: `${tabletMode ? style.responsivedropBoxList : style.dropBoxList} ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''}`,
         shrink: true,
-        eleRef: this.scrollContentRef
+        eleRef: this.scrollContentRef,
+        dataId: `${dataId}_Options`
       }, options.length ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((options, i) => {
         let {
           iconName,

package/es/Select/__tests__/GroupSelect.spec.js

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

package/es/Select/__tests__/Select.spec.js

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

package/es/Select/__tests__/SelectWithAvatar.spec.js

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

package/es/Select/__tests__/SelectWithIcon.spec.js

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

package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap

@@ -16,9 +16,9 @@ exports[`SelectWithAvatar rendering the defult props 1`] = `
     >
       <div
         class="grow basis shrinkOff"
-        data-id="boxComponent"
+        data-id="selectWithAvatar_textBox"
         data-selector-id="box"
-        data-test-id="boxComponent"
+        data-test-id="selectWithAvatar_textBox"
       >
         <input
           aria-activedescendant=""

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/Stencils/Stencils.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: [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 {

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 {

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,11 +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 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',

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,7 +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 { TabWrapper_defaultProps } from "./props/defaultProps";
+import { TabWrapper_propTypes } from "./props/propTypes";
+import { Container } from "../Layout";
 
 function TabWrapper(_ref) {
   let {

package/es/Tab/Tabs.js

@@ -8,19 +8,19 @@
     }]
 */
 import React from 'react';
-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 ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
-import btnstyle from '../semantic/Button/semanticButton.module.css';
+import tabsStyle from "./Tabs.module.css";
+import Popup from "../Popup/Popup";
+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) {
@@ -433,7 +433,8 @@ class Tabs extends React.Component {
       position,
       customProps,
       getCustomDropBoxHeaderPlaceHolder,
-      dataSelectorId
+      dataSelectorId,
+      dataId
     } = this.props;
     let {
       DropBoxProps = {},
@@ -508,13 +509,15 @@ class Tabs extends React.Component {
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
-        onClose: this.togglePopup
+        onClose: this.togglePopup,
+        dataId: `${dataId}_dropbox`
       }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,
         scroll: "vertical",
         className: `${tabletMode ? '' : tabsStyle.menuBox} ${moreBoxClass}`,
-        onScroll: this.onScroll
+        onScroll: this.onScroll,
+        dataId: `${dataId}_Tabs`
       }, React.Children.map(moreTabs, child => {
         if (!child) {
           return null;

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/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,5 +1,5 @@
 import React from 'react';
-import Tag from '../Tag';
+import Tag from "../Tag";
 import { render } from "@testing-library/react";
 describe('Tag component', () => {
   const size = ['small', 'medium'];

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'];

package/es/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import TextBox from '../TextBox/TextBox';
-import { Container, Box } from '../Layout';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import TextBox from "../TextBox/TextBox";
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import btnStyle from '../semantic/Button/semanticButton.module.css';
-import style from './TextBoxIcon.module.css';
+import btnStyle from "../semantic/Button/semanticButton.module.css";
+import style from "./TextBoxIcon.module.css";
 /* eslint-disable react/forbid-component-props */
 
 export default class TextBoxIcon extends React.Component {

package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js

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

package/es/TextBoxIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
+import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/Textarea/Textarea.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: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
 
-import style from './Textarea.module.css';
+import style from "./Textarea.module.css";
 export default class Textarea extends React.Component {
   constructor(props) {
     super(props);

package/es/Textarea/__tests__/Textarea.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textarea from '../Textarea';
+import Textarea from "../Textarea";
 import { render } from "@testing-library/react";
 describe('Textarea component', () => {
   const size = ['xsmall', 'small', 'xmedium', 'medium', 'large'];

package/es/Tooltip/Tooltip.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { getLibraryConfig } from '../Provider/Config';
-import style from './Tooltip.module.css';
-import ResizeObserver from '../Responsive/ResizeObserver';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { getLibraryConfig } from "../Provider/Config";
+import style from "./Tooltip.module.css";
+import ResizeObserver from "../Responsive/ResizeObserver";
 import selectn from 'selectn';
 export default class Tooltip extends React.Component {
   constructor(props) {

package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.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";
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../Provider/LibraryContextInit';
+import LibraryContext from "../../Provider/LibraryContextInit";
 export default class VelocityAnimation extends React.Component {
   constructor(props) {
     super(props);

package/es/VelocityAnimation/VelocityAnimation/__tests__/VelocityAnimation.spec.js

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

package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.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";
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../Provider/LibraryContextInit';
+import LibraryContext from "../../Provider/LibraryContextInit";
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/VelocityAnimation/VelocityAnimationGroup/__tests__/VelocityAnimationGroup.spec.js

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

package/es/VelocityAnimation/index.js

@@ -1,2 +1,2 @@
-export { default as VelocityAnimation } from './VelocityAnimation/VelocityAnimation';
-export { default as VelocityAnimationGroup } from './VelocityAnimationGroup/VelocityAnimationGroup';
+export { default as VelocityAnimation } from "./VelocityAnimation/VelocityAnimation";
+export { default as VelocityAnimationGroup } from "./VelocityAnimationGroup/VelocityAnimationGroup";

package/es/css.js

@@ -1,41 +1,41 @@
-import './common/reset.module.css';
-import './common/basic.module.css';
+import "./common/reset.module.css";
+import "./common/basic.module.css";
 import '@zohodesk/variables/lib/colorVariables.module.css';
 import '@zohodesk/variables/lib/sizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/icons/lib/Icon/Icon.module.css';
-import './common/animation.module.css';
-import './common/transition.module.css';
-import './common/common.module.css';
-import './Layout/Layout.module.css';
-import './Avatar/Avatar.module.css';
-import './AvatarTeam/AvatarTeam.module.css';
-import './Button/Button.module.css';
-import './Switch/Switch.module.css';
-import './TextBox/TextBox.module.css';
-import './Radio/Radio.module.css';
-import './Label/Label.module.css';
-import './Label/LabelColors.module.css';
-import './CheckBox/CheckBox.module.css';
-import './Textarea/Textarea.module.css';
-import './Tooltip/Tooltip.module.css';
-import './Tab/Tab.module.css';
-import './Tab/Tabs.module.css';
-import './Tab/TabContent.module.css';
-import './TextBoxIcon/TextBoxIcon.module.css';
-import './Ribbon/Ribbon.module.css';
-import './MultiSelect/MultiSelect.module.css';
-import './Select/Select.module.css';
-import './ListItem/ListItem.module.css';
-import './Tag/Tag.module.css';
-import './Stencils/Stencils.module.css';
-import './PopOver/PopOver.module.css';
-import './DropDown/DropDown.module.css';
-import './DropBox/css/DropBox.module.css';
-import './DropBox/DropBoxElement/css/DropBoxElement.module.css';
-import './DateTime/DateTime.module.css';
-import './DateTime/DateWidget.module.css';
-import './Card/Card.module.css';
-import './Buttongroup/Buttongroup.module.css';
-import './AppContainer/AppContainer.module.css';
-import './RippleEffect/RippleEffect.module.css';
+import "./common/animation.module.css";
+import "./common/transition.module.css";
+import "./common/common.module.css";
+import "./Layout/Layout.module.css";
+import "./Avatar/Avatar.module.css";
+import "./AvatarTeam/AvatarTeam.module.css";
+import "./Button/Button.module.css";
+import "./Switch/Switch.module.css";
+import "./TextBox/TextBox.module.css";
+import "./Radio/Radio.module.css";
+import "./Label/Label.module.css";
+import "./Label/LabelColors.module.css";
+import "./CheckBox/CheckBox.module.css";
+import "./Textarea/Textarea.module.css";
+import "./Tooltip/Tooltip.module.css";
+import "./Tab/Tab.module.css";
+import "./Tab/Tabs.module.css";
+import "./Tab/TabContent.module.css";
+import "./TextBoxIcon/TextBoxIcon.module.css";
+import "./Ribbon/Ribbon.module.css";
+import "./MultiSelect/MultiSelect.module.css";
+import "./Select/Select.module.css";
+import "./ListItem/ListItem.module.css";
+import "./Tag/Tag.module.css";
+import "./Stencils/Stencils.module.css";
+import "./PopOver/PopOver.module.css";
+import "./DropDown/DropDown.module.css";
+import "./DropBox/css/DropBox.module.css";
+import "./DropBox/DropBoxElement/css/DropBoxElement.module.css";
+import "./DateTime/DateTime.module.css";
+import "./DateTime/DateWidget.module.css";
+import "./Card/Card.module.css";
+import "./Buttongroup/Buttongroup.module.css";
+import "./AppContainer/AppContainer.module.css";
+import "./RippleEffect/RippleEffect.module.css";