@zohodesk/components 1.0.0-temp-195.1 → 1.0.0-temp-197

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import useDropboxPosCalc from "./useDropboxPosCalc";
-import cssJSLogic from "./css/cssJSLogic";
-import { positionMapping } from "../DropBoxPositionMapping.json";
-import { DropBoxElementDefaultProps } from "./props/defaultProps";
-import { DropBoxElementPropTypes } from "./props/propTypes";
+import useDropboxPosCalc from './useDropboxPosCalc';
+import cssJSLogic from './css/cssJSLogic';
+import { positionMapping } from '../DropBoxPositionMapping.json';
+import { DropBoxElementDefaultProps } from './props/defaultProps';
+import { DropBoxElementPropTypes } from './props/propTypes';
 import { mergeStyle } from '@zohodesk/utils';
-import style from "./css/DropBoxElement.module.css";
+import style from './css/DropBoxElement.module.css';
 export default function DropBoxElement(props) {
   let {
     children,

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -74,23 +74,23 @@
 
 /* shadow */
 .top_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
+    --dropbox_box_shadow: var(--zd_bs_contrast_outline, 0 -3px 30px var(--zdt_dropbox_default_box_shadow));
 }
 
 .left_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
+    --dropbox_box_shadow: var(--zd_bs_contrast_outline, -4px 0 30px var(--zdt_dropbox_default_box_shadow));
 }
 
 .right_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
+    --dropbox_box_shadow: var(--zd_bs_contrast_outline, 4px 0 30px var(--zdt_dropbox_default_box_shadow));
 }
 
 .bottom_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+    --dropbox_box_shadow: var(--zd_bs_contrast_outline, 0 3px 30px var(--zdt_dropbox_default_box_shadow));
 }
 
 .defaultShadow {
-    box-shadow: var(--zd_bs_dropbox_default);
+    box-shadow: var(--zd_bs_contrast_outline, 4px 3px 30px var(--zdt_dropbox_default_box_shadow));
 }
 
 /* box direction styles */
@@ -206,7 +206,7 @@
 .arrowShape {
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
-    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    box-shadow: var(--zd_bs_contrast_outline, 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color));
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -342,17 +342,21 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
+
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
+
 .bounce {
     composes: animationBasic;
 }
+
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
+
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -414,7 +418,7 @@
 }
 
 .closeBar {
-  /*  Variable:Ignore  */
+    /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import LibraryContext from "../../../Provider/LibraryContextInit";
+import LibraryContext from '../../../Provider/LibraryContextInit';
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(_ref) {
   let {

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -1,4 +1,4 @@
-import { remConvert } from "../../utils/Common";
+import { remConvert } from '../../utils/Common';
 export default function useDropboxPosCalc(props) {
   let {
     right,

package/es/DropBox/css/DropBox.module.css

@@ -3,7 +3,7 @@
   --dropbox_bg_color: var(--zdt_dropbox_default_bg);
   --dropbox_border_radius: 0;
   --dropbox_padding: 0;
-  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+  --dropbox_box_shadow: var(--zd_bs_contrast_outline, 0 3px 30px var(--zdt_dropbox_default_box_shadow));
 
   /* dropbox arrow default variables */
   --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);

package/es/DropBox/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { useZIndex } from "../../Provider/ZindexProvider";
+import { useZIndex } from '../../Provider/ZindexProvider';
 export default function cssJSLogic(props) {
   const {
     isActive,

package/es/DropBox/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { DropBoxElementDefaultProps } from "../DropBoxElement/props/defaultProps";
+import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
 export const defaultProps = {
   needResponsive: true,
   portalId: 'portal1',

package/es/DropBox/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { DropBoxElementPropTypes } from "../DropBoxElement/props/propTypes";
+import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
 export const propTypes = {
   needResponsive: PropTypes.bool,
   portalId: PropTypes.string,

package/es/DropBox/utils/isMobilePopover.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from "../../Provider/Config";
+import { getLibraryConfig } from '../../Provider/Config';
 export default function isMobilePopover(needResponsive) {
   //   let { needResponsive } = props;
   let windowWidth,

package/es/DropDown/DropDown.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from "./props/propTypes";
-import { DropDownItemContainer_defaultProps } from "./props/defaultProps";
-import style from "./DropDown.module.css";
-import PopOver, { PopOverTarget, PopOverContainer } from "../PopOver/PopOver";
+import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTypes, DropDownItemContainer_propTypes } from './props/propTypes';
+import { DropDownItemContainer_defaultProps } from './props/defaultProps';
+import style from './DropDown.module.css';
+import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
 
 export default class DropDown extends React.Component {

package/es/DropDown/DropDownHeading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownHeading_propTypes } from "./props/propTypes";
-import { DropDownHeading_defaultProps } from "./props/defaultProps";
-import style from "./DropDownHeading.module.css";
+import { DropDownHeading_propTypes } from './props/propTypes';
+import { DropDownHeading_defaultProps } from './props/defaultProps';
+import style from './DropDownHeading.module.css';
 export default class DropDownHeading extends React.Component {
   render() {
     let {

package/es/DropDown/DropDownItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { DropDownItem_propTypes } from "./props/propTypes";
-import { DropDownItem_defaultProps } from "./props/defaultProps";
-import style from "./DropDownItem.module.css";
+import { DropDownItem_propTypes } from './props/propTypes';
+import { DropDownItem_defaultProps } from './props/defaultProps';
+import style from './DropDownItem.module.css';
 export default class DropDownItem extends React.Component {
   constructor(props) {
     super(props);

package/es/DropDown/DropDownSearch.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DropDownSearch_propTypes } from "./props/propTypes";
-import { DropDownSearch_defaultProps } from "./props/defaultProps";
-import TextBox from "../TextBox/TextBox";
-import style from "./DropDownSearch.module.css";
+import { DropDownSearch_propTypes } from './props/propTypes';
+import { DropDownSearch_defaultProps } from './props/defaultProps';
+import TextBox from '../TextBox/TextBox';
+import style from './DropDownSearch.module.css';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'menu', 'shadow', 'target', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', separator, 'small', 'search', 'medium', 'heading', 'listGroup'] }] */
 
 export default class DropDownSearch extends React.Component {

package/es/DropDown/DropDownSeparator.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DropDownSeparator_propTypes } from "./props/propTypes";
-import style from "./DropDownSeparator.module.css";
+import { DropDownSeparator_propTypes } from './props/propTypes';
+import style from './DropDownSeparator.module.css';
 export default class DropDownSeparator extends React.Component {
   render() {
     let {

package/es/DropDown/index.js

@@ -1,7 +1,7 @@
-export { default as DropDown } from "./DropDown";
-export { DropDownTarget } from "./DropDown";
-export { DropDownItemContainer } from "./DropDown";
-export { default as DropDownHeading } from "./DropDownHeading";
-export { default as DropDownItem } from "./DropDownItem";
-export { default as DropDownSearch } from "./DropDownSearch";
-export { default as DropDownSeparator } from "./DropDownSeparator";
+export { default as DropDown } from './DropDown';
+export { DropDownTarget } from './DropDown';
+export { DropDownItemContainer } from './DropDown';
+export { default as DropDownHeading } from './DropDownHeading';
+export { default as DropDownItem } from './DropDownItem';
+export { default as DropDownSearch } from './DropDownSearch';
+export { default as DropDownSeparator } from './DropDownSeparator';

package/es/DropDown/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { PopOver_propTypes } from "./../../PopOver/props/propTypes";
+import { PopOver_propTypes } from './../../PopOver/props/propTypes';
 export const DropDown_propTypes = { ...PopOver_propTypes
 };
 export const DropDownTarget_propTypes = {

package/es/Heading/Heading.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Heading.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Heading.module.css';
 export default class Heading extends React.Component {
   render() {
     let {

package/es/Label/Label.js

@@ -2,10 +2,10 @@
   'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
 ]}] */
 import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "./Label.module.css";
-import colors from "./LabelColors.module.css";
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from './Label.module.css';
+import colors from './LabelColors.module.css';
 export default class Label extends React.Component {
   render() {
     let {

package/es/Label/__tests__/Label.spec.js

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