@zohodesk/dot 1.0.0-temp-203.4 → 1.0.0-temp-204.1

package/es/PlusIcon/PlusIcon.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from './PlusIcon.module.css';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "./PlusIcon.module.css";
+import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
 export default class PlusIcon extends React.Component {
   constructor(props) {
     super(props);

package/es/PlusIcon/__tests__/PlusIcon.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import PlusIcon from '../PlusIcon';
+import PlusIcon from "../PlusIcon";
 describe('PlusIcon', () => {
   const size = ['small', 'xsmall', 'xxsmall', 'medium', 'xmedium', 'xlarge'];
   test('renders with default props', () => {

package/es/Separator/Separator.js

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

package/es/Separator/Separator.module.css

@@ -1,34 +1,43 @@
 .varClass {
   --separator_fontSize: var(--zd_font_size15);
 }
+
 .separator {
   font-size: var(--separator_fontSize);
   margin: 0 var(--zd_size5) ;
 }
+
 .dot {
   --separator_fontSize: var(--zd_font_size8);
 }
+
 .slash {
   --separator_fontSize: var(--zd_font_size10);
   /* line-height: var(--zd_size10); */
 }
+
 .arrow {
   --separator_fontSize: var(--zd_font_size8);
   /* line-height: var(--zd_size7); */
 }
+
 .comma {
   --separator_fontSize: var(--zd_font_size15);
   /* line-height: var(--zd_size13); */
 }
+
 .none {
   display: none;
 }
+
 .default {
   color: var(--zdt_separator_default_text);
 }
+
 .primary {
   color: var(--zdt_separator_primary_text);
 }
+
 .secondary {
-  color: var(--zdt_separator_secondary_text);
-}
+  color: var(--zdt_base_color);
+}

package/es/Separator/__tests__/Separator.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Separator from '../Separator';
+import Separator from "../Separator";
 describe('Separator', () => {
   const PALETTE = ['default', 'primary', 'secondary'];
   const TYPE = ['dot', 'slash', 'arrow', 'comma', 'none'];

package/es/TagWithIcon/TagWithIcon.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 { Container, Box } from '@zohodesk/components/es/Layout';
 import Icon from '@zohodesk/icons/es/Icon';
-import style from './TagWithIcon.module.css';
+import style from "./TagWithIcon.module.css";
 export default class TagWithIcon extends React.Component {
   render() {
     const {

package/es/TagWithIcon/TagWithIcon.module.css

@@ -1,6 +1,6 @@
 .varClass {
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_text_color: var(--zdt_base_color);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
   --tag_small_fontSize: var(--zd_font_size10);
   --tag_large_fontSize: var(--zd_font_size12);
@@ -56,7 +56,7 @@
 
 .grey {
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_text_color: var(--zdt_base_color);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
 }
 

package/es/TagWithIcon/__tests__/TagWithIcon.spec.js

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

package/es/ToastMessage/ToastMessage.js

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes'; //components
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes"; //components
 
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 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';
-import AutoClose from '../actions/AutoClose';
+import AutoClose from "../actions/AutoClose";
 import a11yStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css'; //style
 
-import style from './ToastMessage.module.css';
+import style from "./ToastMessage.module.css";
 
 function ToastMessageUI(props) {
   let [messageState, setMessageState] = useState(props.messageState);

package/es/ToastMessage/ToastMessage.module.css

@@ -4,7 +4,7 @@
   max-height: 100% ;
   border-radius: 5px;
   box-shadow: var(--zd_bs_toastmessage_container);
-  background-color: var(--zdt_toastmessage_default_bg);
+  background-color: var(--zdt_base_bg);
   margin-bottom: var(--zd_size7) ;
 }[dir=ltr] .container {
   transform-origin: right center;
@@ -116,7 +116,7 @@
 }
 
 .cancelButton:hover {
-  color: var(--zdt_toastmessage_cancel_hover_text);
+  color: var(--zdt_base_color);
 }
 
 .primary:hover,
@@ -249,7 +249,7 @@
 }
 
 .dropdown:hover i {
-  color: var(--zdt_toastmessage_cancel_hover_text);
+  color: var(--zdt_base_color);
 }
 
 .message {

package/es/ToastMessage/__tests__/ToastMessage.spec.js

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

package/es/Upload/Upload.js

@@ -1,10 +1,10 @@
 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 { Icon } from '@zohodesk/icons';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Image from '../Image/Image';
-import style from './Upload.module.css';
+import Image from "../Image/Image";
+import style from "./Upload.module.css";
 export default class Upload extends React.Component {
   render() {
     let {

package/es/Upload/__tests__/Upload.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Upload from '../Upload';
+import Upload from "../Upload";
 describe('Upload', () => {
   const mockOnRemove = jest.fn();
   const mockEleRef = jest.fn();

package/es/actions/AutoClose.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 export default function AutoClose(props) {
   let {
     Element,

package/es/alert/AlertHeader/AlertHeader.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import Title from '../../lookup/header/Title/Title';
+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';
-import Close from '../../lookup/header/Close/Close';
-import style from './AlertHeader.module.css';
+import Close from "../../lookup/header/Close/Close";
+import style from "./AlertHeader.module.css";
 export default class AlertHeader extends Component {
   render() {
     let {

package/es/alert/AlertHeader/AlertHeader.module.css

@@ -55,7 +55,9 @@
 
 /* icon size */
 
-.icon_delete, .icon_alert, .icon_remoteAssist {
+.icon_delete,
+.icon_alert,
+.icon_remoteAssist {
   font-size: var(--zd_font_size20) ;
 }
 
@@ -77,5 +79,5 @@
 }
 
 .text_default {
-  color: var(--zdt_alertheader_default_text);
+  color: var(--zdt_base_color);
 }

package/es/alert/AlertHeader/__tests__/AlertHeader.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AlertHeader from '../AlertHeader';
+import AlertHeader from "../AlertHeader";
 describe('AlertHeader', () => {
   const mockOnClose = jest.fn();
   const iconTypes = ['delete', 'alert', 'remoteAssist', 'splitTicket', 'update'];

package/es/alert/AlertLookup/AlertLookup.js

@@ -1,17 +1,17 @@
 /**** Libraries ****/
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import Lookup from '../../lookup/Lookup/Lookup';
-import AlertHeader from '../AlertHeader/AlertHeader';
+import Lookup from "../../lookup/Lookup/Lookup";
+import AlertHeader from "../AlertHeader/AlertHeader";
 import Button from '@zohodesk/components/lib/Button/Button';
-import Section from '../../lookup/Section/Section';
-import FormAction from '../../FormAction/FormAction';
+import Section from "../../lookup/Section/Section";
+import FormAction from "../../FormAction/FormAction";
 /**** CSS ****/
 
-import style from './AlertLookup.module.css';
+import style from "./AlertLookup.module.css";
 export default class AlertLookup extends Component {
   render() {
     let {

package/es/alert/AlertLookup/__tests__/AlertLookup.spec.js

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

package/es/alert/index.js

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

package/es/avatar/AvatarClose/AvatarClose.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 Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
-import style from './AvatarClose.module.css';
+import style from "./AvatarClose.module.css";
 export default class AvatarClose extends React.Component {
   constructor(props) {
     super(props);

package/es/avatar/AvatarClose/__tests__/AvatarClose.spec.js

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

package/es/avatar/AvatarCollision/AvatarCollision.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 Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
-import style from './AvatarCollision.module.css';
+import style from "./AvatarCollision.module.css";
 export default class AvatarCollision extends React.Component {
   constructor(props) {
     super(props);

package/es/avatar/AvatarCollision/__tests__/AvatarCollision.spec.js

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

package/es/avatar/AvatarIcon/AvatarIcon.js

@@ -1,10 +1,10 @@
 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 { 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';
+import style from "./AvatarIcon.module.css";
 export default class AvatarIcon extends React.Component {
   render() {
     let {

package/es/avatar/AvatarIcon/__tests__/AvatarIcon.spec.js

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

package/es/avatar/AvatarStatus/AvatarStatus.js

@@ -1,8 +1,8 @@
 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 Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import style from './AvatarStatus.module.css';
+import style from "./AvatarStatus.module.css";
 export default class AvatarStatus extends React.Component {
   constructor(props) {
     super(props);

package/es/avatar/AvatarStatus/__tests__/AvatarStatus.spec.js

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

package/es/avatar/AvatarThread/AvatarThread.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 Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { Icon } from '@zohodesk/icons';
-import style from './AvatarThread.module.css';
+import style from "./AvatarThread.module.css";
 export default class AvatarThread extends React.Component {
   render() {
     let {

package/es/avatar/AvatarThread/__tests__/AvatarThread.spec.js

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

package/es/avatar/AvatarUser/AvatarUser.js

@@ -1,13 +1,13 @@
 /**** Libraries ****/
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import AvatarIcon from '../AvatarIcon/AvatarIcon';
+import AvatarIcon from "../AvatarIcon/AvatarIcon";
 import { Icon } from '@zohodesk/icons';
-import style from './AvatarUser.module.css';
+import style from "./AvatarUser.module.css";
 /**** Methods ****/
 
 export default class AvatarUser extends React.Component {

package/es/avatar/AvatarUser/AvatarUser.module.css

@@ -3,11 +3,13 @@
   composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
   vertical-align: middle;
 }
+
 .paid,
 .portal,
 .delete {
   font-size: var(--zd_font_size10) ;
 }
+
 .paid,
 .portal,
 .delete,
@@ -15,22 +17,28 @@
   position: absolute;
   line-height: 0;
 }
+
 .paid {
   composes: middle from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .paid {
   left: 50% ;
 }
+
 [dir=rtl] .paid {
   right: 50% ;
 }
+
 .paid {
   top: calc( var(--zd_size2) * -1 ) ;
 }
+
 .portal, .lock {
-  background-color: var(--zdt_avataruser_default_bg);
+  background-color: var(--zdt_base_bg);
   border-radius: 50%;
 }
+
 .delete {
   top: 0 ;
   width: 100% ;
@@ -38,71 +46,92 @@
   opacity: 0;
   transition: all var(--zd_transition3);
   composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--zdt_avataruser_delete_text);
+  color: var(--zdt_base_color);
   cursor: pointer;
   border-radius: 50%;
   background-color: var(--zdt_avataruser_delete_bg);
 }
+
 [dir=ltr] .delete {
   left: 0 ;
 }
+
 [dir=rtl] .delete {
   right: 0 ;
 }
+
 .container:hover .delete {
   opacity: 1;
 }
+
 .small .portal {
   top: 0 ;
 }
+
 [dir=ltr] .small .portal {
   right: calc( var(--zd_size4) * -1 ) ;
 }
+
 [dir=rtl] .small .portal {
   left: calc( var(--zd_size4) * -1 ) ;
 }
+
 .xsmall .portal {
   top: var(--zd_size1) ;
 }
+
 [dir=ltr] .xsmall .portal {
   right: calc( var(--zd_size2) * -1 ) ;
 }
+
 [dir=rtl] .xsmall .portal {
   left: calc( var(--zd_size2) * -1 ) ;
 }
+
 .medium .portal {
   top: var(--zd_size1) ;
 }
+
 [dir=ltr] .medium .portal {
   right: calc( var(--zd_size1) * -1 ) ;
 }
+
 [dir=rtl] .medium .portal {
   left: calc( var(--zd_size1) * -1 ) ;
 }
+
 .xmedium .portal {
   top: var(--zd_size3) ;
 }
+
 [dir=ltr] .xmedium .portal {
   right: 0 ;
 }
+
 [dir=rtl] .xmedium .portal {
   left: 0 ;
 }
+
 .large .portal {
   top: var(--zd_size8) ;
 }
+
 [dir=ltr] .large .portal {
   right: var(--zd_size1) ;
 }
+
 [dir=rtl] .large .portal {
   left: var(--zd_size1) ;
 }
+
 .xlarge .portal {
   top: var(--zd_size15) ;
 }
+
 [dir=ltr] .xlarge .portal {
   right: var(--zd_size2) ;
 }
+
 [dir=rtl] .xlarge .portal {
   left: var(--zd_size2) ;
 }
@@ -119,53 +148,68 @@
 [dir=rtl] .small .lock {
   left: calc( var(--zd_size5) * -1 ) ;
 }
+
 .xsmall .lock {
   top: var(--zd_size1) ;
   font-size: var(--zd_font_size12) ;
 }
+
 [dir=ltr] .xsmall .lock {
   right: calc( var(--zd_size4) * -1 ) ;
 }
+
 [dir=rtl] .xsmall .lock {
   left: calc( var(--zd_size4) * -1 ) ;
 }
+
 .medium .lock {
   top: var(--zd_size2) ;
   font-size: var(--zd_font_size13) ;
 }
+
 [dir=ltr] .medium .lock {
   right: calc( var(--zd_size5) * -1 ) ;
 }
+
 [dir=rtl] .medium .lock {
   left: calc( var(--zd_size5) * -1 ) ;
 }
+
 .xmedium .lock {
   top: var(--zd_size4) ;
   font-size: var(--zd_font_size14) ;
 }
+
 [dir=ltr] .xmedium .lock {
   right: calc( var(--zd_size6) * -1 ) ;
 }
+
 [dir=rtl] .xmedium .lock {
   left: calc( var(--zd_size6) * -1 ) ;
 }
+
 .large .lock {
   top: var(--zd_size6) ;
   font-size: var(--zd_font_size18) ;
 }
+
 [dir=ltr] .large .lock {
   right: calc( var(--zd_size6) * -1 ) ;
 }
+
 [dir=rtl] .large .lock {
   left: calc( var(--zd_size6) * -1 ) ;
 }
+
 .xlarge .lock {
   top: var(--zd_size12) ;
   font-size: var(--zd_font_size22) ;
 }
+
 [dir=ltr] .xlarge .lock {
   right: calc( var(--zd_size8) * -1 ) ;
 }
+
 [dir=rtl] .xlarge .lock {
   left: calc( var(--zd_size8) * -1 ) ;
-}
+}