@zohodesk/components 1.0.0-temp-217.2 → 1.0.0-temp-218

package/es/Switch/Switch.module.css

@@ -37,7 +37,7 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-.thumb {
+.label:after {
   content: '';
   display: block;
   position: absolute;
@@ -46,21 +46,14 @@
   box-shadow: var(--switch_cricle_box_shadow);
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
-  left: var(--zd_size1) ;
-}
-.onOffIndicationHolder{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100% ;
 }
 
 .checked+.label {
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
-.checked+label .thumb {
-  right: var(--zd_size1) ;
-  left: auto ;
+
+.checked+.label:after {
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 .input {
@@ -72,15 +65,15 @@
   width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size12) ;
+  height: var(--zd_size9) ;
   width: var(--zd_size22) ;
-  bottom: var(--zd_size1) ;
+  top: calc( var(--zd_size2) * -1 ) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel .thumb{
-  width: var(--zd_size10) ;
-  height: var(--zd_size10) ;
-  top: var(--zd_size1) ;
+.switch_smallLabel:after {
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 
 .medium {
@@ -88,21 +81,15 @@
   width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size16) ;
+  height: var(--zd_size13) ;
   width: var(--zd_size31) ;
   top: var(--zd_size2) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel.labelOnTrack{
-  width: var(--zd_size32) ;
-}
-.switch_mediumLabel.labelOnTrack{
-  width: var(--zd_size42) ;
-}
-.switch_mediumLabel .thumb{
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: var(--zd_size2) ;
+.switch_mediumLabel:after {
+  width: var(--zd_size18) ;
+  height: var(--zd_size18) ;
+  top: calc( var(--zd_size3) * -1 ) ;
 }
 
 .input:disabled+.label {
@@ -138,102 +125,4 @@
 
 [dir=rtl] .switch+label {
   margin-right: var(--zd_size12) ;
-}
-.onOffLabel{
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-}
-.onOffIndication{    
-  /* css:theme-validation:ignore */
-  border: 0.5px solid;
-}
-.offIndication{
- /* css:theme-validation:ignore */
- border-color: #868585;
- border-radius: 50%;
-}
-.onIndication{
-  /* css:theme-validation:ignore */
-  border-color: var(--switch_on_bg_color);
-  border-radius: 5px;
-}
-.thumbIndication.onIndication{
-   /* css:theme-validation:ignore */
-  border-color: #fff;
-}
-.switch_small .thumbIndication.onOffLabel{
-  top: calc( var(--zd_size10) * -1 ) ;
-}
-[dir=ltr] .switch_small .thumbIndication.onOffLabel{
-  right: var(--zd_size3) ;
-}
-[dir=rtl] .switch_small .thumbIndication.onOffLabel{
-  left: var(--zd_size3) ;
-}
-.switch_small .offIndication{
-  width: var(--zd_size5) ;
-  height: var(--zd_size5) ;
-}
-.switch_small .thumbIndication.offIndication{
-    margin: 0 var(--zd_size3) ;
-}
-.switch_small .onIndication{
-  width: var(--zd_size1) ;
-  height: var(--zd_size5) ;
-}
-.switch_small .thumbIndication.onIndication{
-  margin: 0 var(--zd_size5) ;
-}
-.switch_medium .thumbIndication.onOffLabel{
-  top: calc( var(--zd_size10) * -1 ) ;
-}
-[dir=ltr] .switch_medium .thumbIndication.onOffLabel{
-  right: var(--zd_size3) ;
-}
-[dir=rtl] .switch_medium .thumbIndication.onOffLabel{
-  left: var(--zd_size3) ;
-}
-.switch_medium .offIndication{
-  width: var(--zd_size7) ;
-  height: var(--zd_size7) ;
-}
-.switch_medium .thumbIndication.offIndication{
-  margin: 0 var(--zd_size5) ;
-}
-.switch_medium .onIndication{
-  width: var(--zd_size1) ;
-  height: var(--zd_size7) ;
-}
-.switch_medium .thumbIndication.onIndication{
-  margin: 0 var(--zd_size7) ;
-}
-.onOffIndicationText{
-    /* css:theme-validation:ignore */
-  color: #fff;
-}
-.switch_small .onOffIndicationText{
-  font-size: var(--zd_font_size7) ;
-  margin: 0 var(--zd_size4) ;
-}
-.switch_medium .onOffIndicationText{
-  font-size: var(--zd_font_size10) ;
-  margin: 0 var(--zd_size6) ;
-}
-.labelText{
-    /* css:theme-validation:ignore */
-  color: #000;
-}
-.smallLabelText{
-  font-size: var(--zd_font_size11) ;
-  margin: var(--zd_size1) 0 0 ;
-}
-.mediumLabelText{
-  font-size: var(--zd_font_size12) ;
-}
-[dir=ltr] .mediumLabelText{
-  margin : var(--zd_size1) 0 0 var(--zd_size2) ;
-}
-[dir=rtl] .mediumLabelText{
-  margin  : var(--zd_size1) var(--zd_size2) 0 0 ;
 }

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

@@ -9,20 +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 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) {

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

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,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import { getLibraryConfig } from "../Provider/Config";
-import ResizeObserver from "../Responsive/ResizeObserver";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { getLibraryConfig } from '../Provider/Config';
+import ResizeObserver from '../Responsive/ResizeObserver';
 import selectn from 'selectn';
-import { whiteSpaceClassMapping } from "../utils/cssUtils";
-import style from "./Tooltip.module.css";
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
+import style from './Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

package/es/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import cssJSLogic from "./css/cssJSLogic";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import cssJSLogic from './css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from "./css/Typography.module.css";
+import defaultStyle from './css/Typography.module.css';
 
 const Typography = props => {
   const {

package/es/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from "../utils";
+import { letterspacingMapping, lineheightMapping } from '../utils';
 export default function cssJSLogic(_ref) {
   let {
     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';