@zohodesk/dot 1.0.0-temp-187.21 → 1.0.0-temp-223.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/README.md +11 -0
  2. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +315 -315
  3. package/assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css +15 -15
  4. package/assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css +15 -15
  5. package/assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css +15 -15
  6. package/assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css +15 -15
  7. package/assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css +15 -15
  8. package/assets/Appearance/light/mode/Dot_LightMode.module.css +307 -307
  9. package/assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css +15 -15
  10. package/assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css +15 -15
  11. package/assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css +15 -15
  12. package/assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css +15 -15
  13. package/assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css +15 -15
  14. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +317 -317
  15. package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css +15 -15
  16. package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css +15 -15
  17. package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css +15 -15
  18. package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css +15 -15
  19. package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css +15 -15
  20. package/es/common/dot_boxShadow.module.css +1 -2
  21. package/es/dropdown/ToggleDropDown/ToggleDropDown.js +6 -4
  22. package/es/form/fields/Fields.module.css +1 -4
  23. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +6 -10
  24. package/es/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
  25. package/es/form/fields/TextEditor/TextEditor.js +6 -2
  26. package/es/form/fields/TextEditor/props/defaultProps.js +2 -1
  27. package/es/form/fields/TextEditor/props/propTypes.js +2 -1
  28. package/es/list/DepartmentDropDown/DepartmentDropDown.js +2 -6
  29. package/es/list/DepartmentDropDown/props/defaultProps.js +1 -2
  30. package/es/list/DepartmentDropDown/props/propTypes.js +0 -3
  31. package/es/list/status/StatusDropdown/StatusDropdown.js +2 -7
  32. package/es/list/status/StatusDropdown/props/defaultProps.js +1 -2
  33. package/es/list/status/StatusDropdown/props/propTypes.js +1 -4
  34. package/es/list/status/StatusListItem/StatusListItem.js +2 -4
  35. package/es/list/status/StatusListItem/StatusListItem.module.css +17 -40
  36. package/lib/common/dot_boxShadow.module.css +1 -2
  37. package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +6 -4
  38. package/lib/form/fields/Fields.module.css +1 -4
  39. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +7 -12
  40. package/lib/form/fields/TagsMultiSelect/props/propTypes.js +1 -2
  41. package/lib/form/fields/TextEditor/TextEditor.js +5 -2
  42. package/lib/form/fields/TextEditor/props/defaultProps.js +2 -1
  43. package/lib/form/fields/TextEditor/props/propTypes.js +2 -1
  44. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +3 -8
  45. package/lib/list/DepartmentDropDown/props/defaultProps.js +1 -2
  46. package/lib/list/DepartmentDropDown/props/propTypes.js +0 -2
  47. package/lib/list/status/StatusDropdown/StatusDropdown.js +2 -6
  48. package/lib/list/status/StatusDropdown/props/defaultProps.js +1 -2
  49. package/lib/list/status/StatusDropdown/props/propTypes.js +1 -3
  50. package/lib/list/status/StatusListItem/StatusListItem.js +2 -4
  51. package/lib/list/status/StatusListItem/StatusListItem.module.css +17 -40
  52. package/package.json +7 -7
package/assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='blue'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(221, 100.00%, calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(221, calc(var(--zd-saturation, 1) * 100.00%), calc(57.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(220, 72.24%, calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(10, 115, 235, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(220, calc(var(--zd-saturation, 1) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(220, calc(var(--zd-saturation, 1) * 72.24%), calc(51.96% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(212, calc(var(--zd-saturation, 1) * 91.84%), 48.04%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(213, calc(var(--zd-saturation, 1) * 19.57%), calc(18.04% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(71,157,255);
25
+ --zdt_loader_bg: hsla(212, calc(var(--zd-saturation, 1) * 100.00%), 63.92%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='green'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(133, 62.68%, calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(39, 170, 67, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), calc(40.98% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(133, calc(var(--zd-saturation, 1) * 62.68%), 40.98%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(133, calc(var(--zd-saturation, 1) * 10.84%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(69,161,89);
25
+ --zdt_loader_bg: hsla(133, calc(var(--zd-saturation, 1) * 40.00%), 45.10%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='orange'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(229, 119, 23, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(28, calc(var(--zd-saturation, 1) * 81.75%), 49.41%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(26, calc(var(--zd-saturation, 1) * 19.51%), calc(16.08% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(255,128,31);
25
+ --zdt_loader_bg: hsla(26, calc(var(--zd-saturation, 1) * 100.00%), 56.08%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='red'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(0, 73.81%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(219, 33, 33, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), calc(49.41% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(0, calc(var(--zd-saturation, 1) * 73.81%), 49.41%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(0, calc(var(--zd-saturation, 1) * 13.25%), calc(16.27% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(233,79,79);
25
+ --zdt_loader_bg: hsla(0, calc(var(--zd-saturation, 1) * 77.78%), 61.18%, 1);
26
26
  }
package/assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css CHANGED
@@ -1,26 +1,26 @@
1
1
  [data-mode='pureDark'][data-theme='yellow'] {
2
2
  /* freezelayer */
3
- --zdt_freezelayer_darklight_bg: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
3
+ --zdt_freezelayer_darklight_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.9 + var(--zdc_alpha_high)));
4
4
 
5
5
  /* common empty state */
6
- --zdt_commonEmptyState_dark_title: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdt_commonEmptyState_dark_description: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdt_commonEmptyState_dark_link: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdt_commonEmptyState_dark_link_hover: hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
6
+ --zdt_commonEmptyState_dark_title: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
+ --zdt_commonEmptyState_dark_description: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
+ --zdt_commonEmptyState_dark_link: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
+ --zdt_commonEmptyState_dark_link_hover: hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
10
10
 
11
11
  /* onboarding */
12
- --zdt_onboarding_primary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
- --zdt_onboarding_secondary_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
- --zdt_onboarding_gradient_border: hsla(43, 90.39%, calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
- --zdt_onboarding_primary_button_shadow: rgba(218, 160, 11, 0.25);
16
- --zdt_onboarding_gradient_bg: hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
12
+ --zdt_onboarding_primary_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.3 + var(--zdc_alpha_low)));
13
+ --zdt_onboarding_secondary_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0.51 + var(--zdc_alpha_low)));
14
+ --zdt_onboarding_gradient_border: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), calc(44.90% + var(--zdc_default_inverse_low)), calc( 0 + var(--zdc_alpha_low)));
15
+ --zdt_onboarding_primary_button_shadow: hsla(43, calc(var(--zd-saturation, 1) * 90.39%), 44.90%, 0.25);
16
+ --zdt_onboarding_gradient_bg: hsla(35, calc(var(--zd-saturation, 1) * 15.00%), calc(15.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
17
17
 
18
18
  /* attachment viewer */
19
- --zdt_attachmentviewer_header_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
- --zdt_attachmentviewer_header_border: hsla(0, 0.00%, calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
- --zdt_attachmentviewer_footer_bg: hsla(0, 0.00%, calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
- --zdt_attachmentviewer_arrow_bg_hover: hsla(0, 0.00%, calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
19
+ --zdt_attachmentviewer_header_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
20
+ --zdt_attachmentviewer_header_border: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(13.33% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
21
+ --zdt_attachmentviewer_footer_bg: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(9.02% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
22
+ --zdt_attachmentviewer_arrow_bg_hover: hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(6.27% + var(--zdc_default)), calc( 0.4 + var(--zdc_alpha_high)));
23
23
 
24
24
  /* loader */
25
- --zdt_loader_bg: rgb(215,152,53);
25
+ --zdt_loader_bg: hsla(37, calc(var(--zd-saturation, 1) * 66.94%), 52.55%, 1);
26
26
  }
package/es/common/dot_boxShadow.module.css CHANGED
@@ -37,8 +37,7 @@
37
37
  --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
38
 
39
39
  /* onboarding */
40
- --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
40
+ --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
41
41
  --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
42
42
  --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
43
-
44
43
  }
package/es/dropdown/ToggleDropDown/ToggleDropDown.js CHANGED
@@ -733,6 +733,7 @@ export class ToggleDropDown extends Component {
733
733
  iconSize,
734
734
  iconClass,
735
735
  title,
736
+ palette: _palette,
736
737
  disableTitle = '',
737
738
  isDisabled = false,
738
739
  secondaryValue
@@ -757,7 +758,7 @@ export class ToggleDropDown extends Component {
757
758
  ,
758
759
  getRef: this.itemRef,
759
760
  title: title ? title : item[keyName],
760
- palette: palette,
761
+ palette: _palette || palette,
761
762
  needMultiLineText: needMultiLineText,
762
763
  autoHover: true,
763
764
  a11y: {
@@ -783,7 +784,7 @@ export class ToggleDropDown extends Component {
783
784
  ,
784
785
  getRef: this.itemRef,
785
786
  title: title ? title : item[keyName],
786
- palette: palette,
787
+ palette: _palette || palette,
787
788
  needMultiLineText: needMultiLineText,
788
789
  autoHover: true,
789
790
  a11y: {
@@ -804,6 +805,7 @@ export class ToggleDropDown extends Component {
804
805
  iconSize,
805
806
  iconClass,
806
807
  title,
808
+ palette: _palette,
807
809
  needDivider,
808
810
  isDisabled = false,
809
811
  disableTitle = '',
@@ -837,7 +839,7 @@ export class ToggleDropDown extends Component {
837
839
  getRef: this.itemRef,
838
840
  title: title ? title : item[keyName],
839
841
  key: listIndex,
840
- palette: palette,
842
+ palette: _palette || palette,
841
843
  needMultiLineText: needMultiLineText,
842
844
  autoHover: true,
843
845
  a11y: {
@@ -863,7 +865,7 @@ export class ToggleDropDown extends Component {
863
865
  ,
864
866
  getRef: this.itemRef,
865
867
  title: title ? title : item[keyName],
866
- palette: palette,
868
+ palette: _palette || palette,
867
869
  needMultiLineText: needMultiLineText,
868
870
  autoHover: true,
869
871
  a11y: {
package/es/form/fields/Fields.module.css CHANGED
@@ -226,10 +226,7 @@ position: relative;
226
226
  [dir=rtl] .rightPlaceholder{
227
227
  left:var(--zd_size15)
228
228
  }
229
+
229
230
  .phoneField{
230
231
  composes: ltr-zone from '~@zohodesk/components/es/common/common.module.css';
231
- }
232
-
233
- .lineClampPickListItem{
234
- --line-clamp: var(--picklist-field-line-clamp,3);
235
232
  }
package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js CHANGED
@@ -160,14 +160,12 @@ export default class TagsMultiSelect extends React.Component {
160
160
  let {
161
161
  tagCustomClass = '',
162
162
  listItemClass = '',
163
- textBoxIconWrapperClass = '',
164
- dropBoxClass = ''
163
+ textBoxIconWrapperClass = ''
165
164
  } = customClass;
166
165
  const {
167
166
  TextBoxIconProps = {},
168
167
  TagWrapperProps = {},
169
- TagProps = {},
170
- ListItemProps = {}
168
+ TagProps = {}
171
169
  } = customProps;
172
170
  const isEditable = !isReadOnly;
173
171
  return /*#__PURE__*/React.createElement("div", {
@@ -256,8 +254,7 @@ export default class TagsMultiSelect extends React.Component {
256
254
  boxPosition: boxPosition,
257
255
  isPadding: false,
258
256
  customClass: {
259
- customDropBoxWrap: style.dropdown,
260
- customDropBox: dropBoxClass
257
+ customDropBoxWrap: style.dropdown
261
258
  },
262
259
  dataId: `${dataId}_dropbox`,
263
260
  isResponsivePadding: true,
@@ -289,7 +286,7 @@ export default class TagsMultiSelect extends React.Component {
289
286
  let {
290
287
  name,
291
288
  isNew,
292
- listProps
289
+ listItemProps
293
290
  } = item;
294
291
  return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
295
292
  key: index,
@@ -302,9 +299,8 @@ export default class TagsMultiSelect extends React.Component {
302
299
  highlight: selectSearchIndex === index,
303
300
  getRef: this.getSelectedItemRef,
304
301
  isDisabled: listDisabled,
305
- customProps: listProps,
306
- customClass: listItemClass,
307
- ...ListItemProps
302
+ customProps: listItemProps,
303
+ customClass: listItemClass
308
304
  }, isNew ? /*#__PURE__*/React.createElement(Container, {
309
305
  alignBox: "row",
310
306
  align: "vertical"
package/es/form/fields/TagsMultiSelect/props/propTypes.js CHANGED
@@ -52,8 +52,7 @@ export const propTypes = {
52
52
  customProps: PropTypes.shape({
53
53
  TextBoxIconProps: PropTypes.object,
54
54
  TagWrapperProps: PropTypes.object,
55
- TagProps: PropTypes.object,
56
- ListItemProps: PropTypes.object
55
+ TagProps: PropTypes.object
57
56
  }),
58
57
  isFocus: PropTypes.bool
59
58
  };
package/es/form/fields/TextEditor/TextEditor.js CHANGED
@@ -384,8 +384,12 @@ export default class TextEditor extends Component {
384
384
  isNightMode,
385
385
  isReadOnly,
386
386
  dataSelectorId,
387
- isDisabled
387
+ isDisabled,
388
+ customClass
388
389
  } = this.props;
390
+ const {
391
+ wrapper: wrapperClass = ''
392
+ } = customClass;
389
393
  let {
390
394
  isEditorLoad,
391
395
  isEditorShow
@@ -393,7 +397,7 @@ export default class TextEditor extends Component {
393
397
  let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
394
398
  return /*#__PURE__*/React.createElement(Container, {
395
399
  className: `${styles.textEditor} ${styles[type]} ${styles[border]}
396
- ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''}`,
400
+ ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${isDisabled ? styles.disable : ''} ${!isEditorShow ? styles.editorHide : ''} ${wrapperClass}`,
397
401
  dataId: dataId,
398
402
  "data-isEditor": true,
399
403
  dataSelectorId: dataSelectorId
package/es/form/fields/TextEditor/props/defaultProps.js CHANGED
@@ -12,5 +12,6 @@ export const defaultProps = {
12
12
  dataSelectorId: 'textEditor',
13
13
  customCSS: '',
14
14
  isDisabled: false,
15
- inlineImageProps: {}
15
+ inlineImageProps: {},
16
+ customClass: {}
16
17
  };
package/es/form/fields/TextEditor/props/propTypes.js CHANGED
@@ -49,5 +49,6 @@ export const propTypes = {
49
49
  allowedFileExtensions: PropTypes.array,
50
50
  fileNameMaxCharacters: PropTypes.number,
51
51
  fileSizeMaxBytes: PropTypes.number
52
- })
52
+ }),
53
+ customClass: PropTypes.object
53
54
  };
package/es/list/DepartmentDropDown/DepartmentDropDown.js CHANGED
@@ -48,19 +48,15 @@ class DepartmentDropDown extends Component {
48
48
  onSearch,
49
49
  needSearchFetching,
50
50
  searchStr,
51
- i18nKeys,
52
- customProps
51
+ i18nKeys
53
52
  } = this.props;
54
- const {
55
- ToggleDropDownProps = {}
56
- } = customProps;
57
53
  let {
58
54
  title = 'Move Department',
59
55
  searchEmptyText = 'No results found',
60
56
  searchErrorText = 'No results',
61
57
  placeholder = 'Search Department'
62
58
  } = i18nKeys;
63
- return /*#__PURE__*/React.createElement(ToggleDropDown, { ...ToggleDropDownProps,
59
+ return /*#__PURE__*/React.createElement(ToggleDropDown, {
64
60
  title: title,
65
61
  options: departmentList,
66
62
  value: /*#__PURE__*/React.createElement(DepartmentText, {
package/es/list/DepartmentDropDown/props/defaultProps.js CHANGED
@@ -3,6 +3,5 @@ export const defaultProps = {
3
3
  isPopupActive: true,
4
4
  isNextOptions: false,
5
5
  searchStr: '',
6
- i18nKeys: {},
7
- customProps: {}
6
+ i18nKeys: {}
8
7
  };
package/es/list/DepartmentDropDown/props/propTypes.js CHANGED
@@ -20,8 +20,5 @@ export const propTypes = {
20
20
  searchEmptyText: PropTypes.string,
21
21
  searchErrorText: PropTypes.string,
22
22
  placeholder: PropTypes.string
23
- }),
24
- customProps: PropTypes.shape({
25
- ToggleDropDownProps: PropTypes.object
26
23
  })
27
24
  };
package/es/list/status/StatusDropdown/StatusDropdown.js CHANGED
@@ -178,12 +178,8 @@ export class StatusDropdown extends React.Component {
178
178
  targetOffset,
179
179
  renderTargetElement,
180
180
  renderFooterElement,
181
- a11y = {},
182
- customClass
181
+ a11y = {}
183
182
  } = this.props;
184
- const {
185
- dropBoxClass = ''
186
- } = customClass;
187
183
  const {
188
184
  tabIndex = 0,
189
185
  ariaLabelledby,
@@ -251,8 +247,7 @@ export class StatusDropdown extends React.Component {
251
247
  isAnimate: true,
252
248
  getRef: getContainerRef,
253
249
  customClass: {
254
- customDropBoxWrap: style.dropBoxContainer,
255
- customDropBox: dropBoxClass
250
+ customDropBoxWrap: style.dropBoxContainer
256
251
  },
257
252
  needResponsive: needResponsive,
258
253
  isResponsivePadding: true,
package/es/list/status/StatusDropdown/props/defaultProps.js CHANGED
@@ -18,6 +18,5 @@ export const defaultProps = {
18
18
  needMultiLineText: false,
19
19
  isFetchingOptions: false,
20
20
  isAbsolutePositioningNeeded: true,
21
- isRestrictScroll: false,
22
- customClass: {}
21
+ isRestrictScroll: false
23
22
  };
package/es/list/status/StatusDropdown/props/propTypes.js CHANGED
@@ -56,8 +56,5 @@ export const propTypes = {
56
56
  positionsOffset: PropTypes.object,
57
57
  renderTargetElement: PropTypes.func,
58
58
  renderFooterElement: PropTypes.node,
59
- targetOffset: PropTypes.object,
60
- customClass: PropTypes.shape({
61
- dropBoxClass: PropTypes.string
62
- })
59
+ targetOffset: PropTypes.object
63
60
  };
package/es/list/status/StatusListItem/StatusListItem.js CHANGED
@@ -90,7 +90,7 @@ export default class StatusListItem extends React.Component {
90
90
  "aria-label": ariaLabel,
91
91
  "data-a11y-inset-focus": insetFocus,
92
92
  isCover: false,
93
- align: "vertical",
93
+ align: "baseline",
94
94
  alignBox: "row",
95
95
  className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''} ${customClass}`,
96
96
  dataId: String(value).replace("'", '_'),
@@ -102,8 +102,6 @@ export default class StatusListItem extends React.Component {
102
102
  tabindex: isDisabled ? '-1' : '0',
103
103
  ...options,
104
104
  ...a11y
105
- }, /*#__PURE__*/React.createElement(Box, {
106
- className: style.contentWrapper
107
105
  }, /*#__PURE__*/React.createElement(Box, {
108
106
  className: `${style.statusType} ${style[bulletColor]}`
109
107
  }), /*#__PURE__*/React.createElement(Box, {
@@ -122,7 +120,7 @@ export default class StatusListItem extends React.Component {
122
120
  }, /*#__PURE__*/React.createElement(Icon, {
123
121
  name: "ZD-ticknew",
124
122
  size: "8"
125
- })) : null));
123
+ })) : null);
126
124
  }
127
125
 
128
126
  }
package/es/list/status/StatusListItem/StatusListItem.module.css CHANGED
@@ -1,16 +1,9 @@
1
- .varClass {
2
- --statuslistitem_multiline_lineheight: 1.5385;
3
- --statuslistitem_font_size: var(--zd_font_size13);
4
- --statuslistitem_min_height: var(--zd_size35);
5
- }
6
-
7
1
  .list {
8
- composes: varClass;
9
2
  color: var(--zdt_statuslistitem_list_text);
10
- font-size: var(--statuslistitem_font_size);
3
+ font-size: var(--zd_font_size13) ;
11
4
  position: relative;
12
5
  list-style: none;
13
- min-height: var(--statuslistitem_min_height);
6
+ min-height: var(--zd_size35) ;
14
7
  cursor: pointer;
15
8
  }
16
9
  [dir=ltr] .withBorder {
@@ -29,7 +22,7 @@
29
22
  padding: var(--zd_size7) var(--zd_size20) ;
30
23
  }
31
24
  .large {
32
- --statuslistitem_min_height: var(--zd_size48);
25
+ height: var(--zd_size48) ;
33
26
  }
34
27
  [dir=ltr] .large {
35
28
  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
@@ -43,8 +36,9 @@
43
36
  .value {
44
37
  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
45
38
  }
46
- .multiLineValue {
47
- composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
39
+ .multiLineValue{
40
+ word-break: break-word;
41
+ composes: clamp from '~@zohodesk/components/es/common/common.module.css';
48
42
  }
49
43
  [dir=ltr] .withBorder.active {
50
44
  border-left-color: var(--zdt_statuslistitem_default_active_border);
@@ -94,41 +88,24 @@
94
88
  [dir=rtl] .active.withTick {
95
89
  padding-left: var(--zd_size39) ;
96
90
  }
97
- .contentWrapper {
98
- composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
99
- width: 100% ;
100
- }
101
91
  /* Status Type */
102
- .statusType{
103
- position: relative;
104
- composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
105
- align-self: flex-start;
106
- min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
107
- min-width: var(--zd_size20) ;
108
- }
109
- .statusType::after{
110
- content: '';
111
- --status_listitem_bullet_min_height: var(--zd_size8);
112
- --status_listitem_bullet_min_width: var(--zd_size8);
113
- height: var(--status_listitem_bullet_min_height);
114
- width: var(--status_listitem_bullet_min_width);
115
- /* css:theme-validation:ignore */
92
+ .statusType {
93
+ width: var(--zd_size8) ;
94
+ height: var(--zd_size8) ;
116
95
  border-radius: 50%;
117
- background-color: var(--zdt_statuslistitem_black_bg);
118
96
  }
119
- [dir=ltr] .statusType::after{
120
- margin-right: var(--zd_size12) ;
97
+ [dir=ltr] .statusType {
98
+ margin-right: var(--zd_size13) ;
121
99
  }
122
- [dir=rtl] .statusType::after{
123
- margin-left: var(--zd_size12) ;
100
+ [dir=rtl] .statusType {
101
+ margin-left: var(--zd_size13) ;
124
102
  }
125
-
126
- .black.statusType::after {
103
+ .black {
127
104
  background-color: var(--zdt_statuslistitem_black_bg);
128
105
  }
129
- .orange.statusType::after {
106
+ .orange {
130
107
  background-color: var(--zdt_statuslistitem_orange_bg);
131
108
  }
132
- .green.statusType::after {
109
+ .green {
133
110
  background-color: var(--zdt_statuslistitem_green_bg);
134
- }
111
+ }
package/lib/common/dot_boxShadow.module.css CHANGED
@@ -37,8 +37,7 @@
37
37
  --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
38
 
39
39
  /* onboarding */
40
- --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px rgba(0, 0, 0, 0.09));
40
+ --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
41
41
  --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
42
42
  --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
43
-
44
43
  }