@zohodesk/components 1.0.0-temp-242.1 → 1.0.0-temp-247

package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css

@@ -1,36 +1,36 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* CTA variables */
-	--zdt_cta_primary_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_text: hsla(37, 66.48%, calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_bg: hsla(39, 90.18%, calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
-	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
-	--zdt_cta_primary_light_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_hover_bg: hsla(37, 12.70%, calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_primary_light_border: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_bg: hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_border: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_secondary_light_bg: hsla(38, 30.19%, calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_alpha_text: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_text: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_alpha_bg: hsla(220, 2.75%, calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, 0.00%, calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_10_border: hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, 2.33%, calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_15_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_35_border: hsla(0, 0.00%, calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, 0.00%, calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_cta_grey_40_border: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_text: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, calc(var(--zd-saturation) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_bg: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_bg: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_primary_box_shadow: hsla(46, calc(var(--zd-saturation) * 81.07%), 52.35,  0.2);
+	--zdt_cta_primary_hover_box_shadow: hsla(48, calc(var(--zd-saturation) * 100.00%), 35.49,  0.25);
+	--zdt_cta_primary_light_bg: hsla(35, calc(var(--zd-saturation) * 15.00%), calc(15.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_hover_bg: hsla(37, calc(var(--zd-saturation) * 12.70%), calc(24.71% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_primary_light_border: hsla(37, calc(var(--zd-saturation) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_bg: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_text: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_secondary_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_border: hsla(38, calc(var(--zd-saturation) * 30.19%), calc(20.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_secondary_light_bg: hsla(38, calc(var(--zd-saturation) * 30.19%), calc(20.78% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_alpha_text: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, calc(var(--zd-saturation) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_alpha_bg: hsla(220, calc(var(--zd-saturation) * 2.75%), calc(21.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_beta_border: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(14.90% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_10_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(14.90% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, calc(var(--zd-saturation) * 2.33%), calc(8.43% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_15_border: hsla(0, calc(var(--zd-saturation) * 2.33%), calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, calc(var(--zd-saturation) * 22.81%), calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_text: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_35_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(21.96% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_text: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_cta_grey_40_border: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -1,53 +1,53 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
-	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: var(--zd-gradient-saturation, linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%));
 	
 	/* dropbox */
-	--zdt_dropbox_dark_bg: rgb(33,33,33);
+	--zdt_dropbox_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
 	
 	/* listitem */
-	--zdt_listitem_dark_bg: rgb(33,33,33);
-	--zdt_listitem_dark_text: rgb(226,228,230);
-	--zdt_listitem_dark_effect_bg: rgb(43,43,43);
-	--zdt_listitem_dark_active_bg: rgb(59,77,109);
-	--zdt_listitem_dark_tickicon: rgb(215,152,53);
+	--zdt_listitem_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
+	--zdt_listitem_dark_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
+	--zdt_listitem_dark_effect_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 16.86, 1);
+	--zdt_listitem_dark_active_bg: hsla(218, calc(var(--zd-saturation) * 29.76%), 32.94, 1);
+	--zdt_listitem_dark_tickicon: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55, 1);
 	
 	/* tag */
-	--zdt_tag_dark_text: rgb(208,208,212);
-	--zdt_tag_dark_bg: rgb(38,38,38);
-	--zdt_tag_dark_hover_text: rgb(208,208,212);
-	--zdt_tag_dark_hover_bg: rgb(80,51,72);
-	--zdt_tag_dark_close_bg: rgb(134,70,84);
-	--zdt_tag_dark_close_text: rgb(222,53,53);
+	--zdt_tag_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
+	--zdt_tag_dark_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 14.90, 1);
+	--zdt_tag_dark_hover_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
+	--zdt_tag_dark_hover_bg: hsla(317, calc(var(--zd-saturation) * 22.14%), 25.69, 1);
+	--zdt_tag_dark_close_bg: hsla(347, calc(var(--zd-saturation) * 31.37%), 40.00, 1);
+	--zdt_tag_dark_close_text: hsla(0, calc(var(--zd-saturation) * 71.91%), 53.92, 1);
 	
 	/* multiselect */
-	--zdt_multiselect_dark_border: rgb(88,88,88);
-	--zdt_multiselect_darkmsg_bg: rgb(33,33,33);
-	--zdt_multiselect_darkmsg_text: rgb(208,208,212);
-	--zdt_multiselect_darkdelete_hover_text: rgb(226,228,230);
+	--zdt_multiselect_dark_border: hsla(0, calc(var(--zd-saturation) * 0.00%), 34.51, 1);
+	--zdt_multiselect_darkmsg_bg: hsla(0, calc(var(--zd-saturation) * 0.00%), 12.94, 1);
+	--zdt_multiselect_darkmsg_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
+	--zdt_multiselect_darkdelete_hover_text: hsla(210, calc(var(--zd-saturation) * 7.41%), 89.41, 1);
 	
 	/* avatar */
-	--zdt_avatar_white_border: rgb(153,153,153);
-	--zdt_avatar_white_text: rgb(255,255,255);
+	--zdt_avatar_white_border: hsla(0, calc(var(--zd-saturation) * 0.00%), 60.00, 1);
+	--zdt_avatar_white_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
 	
 	/* label */
-	--zdt_label_dark_text: rgb(208,208,212);
+	--zdt_label_dark_text: hsla(240, calc(var(--zd-saturation) * 4.44%), 82.35, 1);
 	
 	/* textbox */
-	--zdt_textbox_light_text: rgb(255,255,255);
+	--zdt_textbox_light_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 100.00, 1);
 	
 	/* dropdown */
-	--zdt_dropdown_darkheading_text: rgb(153,153,153);
+	--zdt_dropdown_darkheading_text: hsla(0, calc(var(--zd-saturation) * 0.00%), 60.00, 1);
 	
 	/* focusscope */
-	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	--zdt_a11y_focusScope_focus_border: hsla(37, calc(var(--zd-saturation) * 66.94%), 52.55, 1);
 	
 	/* button */
-	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
-	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
-	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	--zdt_button_primary_strike: hsla(37, calc(var(--zd-saturation) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
+	--zdt_button_primaryFilled_strike: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_secondaryFilled_strike: hsla(0, calc(var(--zd-saturation) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
 	
 	/* buttonloading */
-	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: var(--zd-gradient-saturation, linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%);
 }

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import useDropboxPosCalc from "./useDropboxPosCalc";
 import cssJSLogic from "./css/cssJSLogic";
-import { positionMapping } from '@zohodesk/dotkit/es/react/components/Popup/utils/positioning';
+import { positionMapping } from "../DropBoxPositionMapping.js";
 import { DropBoxElementDefaultProps } from "./props/defaultProps";
 import { DropBoxElementPropTypes } from "./props/propTypes";
 import { mergeStyle } from '@zohodesk/utils';

package/es/DropBox/DropBoxPositionMapping.js

@@ -0,0 +1,142 @@
+export const positionMapping = {
+  "bottomCenter": {
+    "direction": "bottom",
+    "arrowPosition": "mid",
+    "positionStyle": "bottomMid"
+  },
+  "bottomLeftToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomCenterToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomRightToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "bottomCenterToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topCenter": {
+    "direction": "top",
+    "arrowPosition": "mid",
+    "positionStyle": "topMid"
+  },
+  "topLeftToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topCenterToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topRightToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "topCenterToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightCenter": {
+    "direction": "right",
+    "arrowPosition": "mid",
+    "positionStyle": "rightMid"
+  },
+  "rightTopToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightCenterToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightBottomToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "rightCenterToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftCenter": {
+    "direction": "left",
+    "arrowPosition": "mid",
+    "positionStyle": "leftMid"
+  },
+  "leftTopToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftCenterToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftBottomToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "leftCenterToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "bottomRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  }
+};

package/es/DropBox/utils/isMobilePopover.js

@@ -1,6 +1,17 @@
 import { getLibraryConfig } from "../../Provider/Config";
-import { isMobilePopover as isMobile } from '@zohodesk/dotkit/es/react/components/Popup/utils';
 export default function isMobilePopover(needResponsive) {
-  const mobileWidth = getLibraryConfig('mobileWidth');
-  return isMobile(needResponsive, mobileWidth);
+  //   let { needResponsive } = props;
+  let windowWidth,
+      mobileWidth = getLibraryConfig('mobileWidth'),
+      isModel = false;
+
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
+    }
+  }
+
+  return isModel ? true : false;
 }