@zohodesk/components 1.0.0-temp-254 → 1.0.0-temp-252.1

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 (28) hide show
  1. package/README.md +7 -2
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +4 -4
  3. package/assets/Appearance/light/mode/Component_LightMode.module.css +6 -6
  4. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +3 -3
  5. package/es/Select/Select.js +88 -75
  6. package/es/Select/Select.module.css +37 -10
  7. package/es/Select/props/defaultProps.js +2 -1
  8. package/es/Select/props/propTypes.js +4 -2
  9. package/lib/Select/Select.js +89 -75
  10. package/lib/Select/Select.module.css +37 -10
  11. package/lib/Select/props/defaultProps.js +2 -1
  12. package/lib/Select/props/propTypes.js +4 -2
  13. package/package.json +23 -21
  14. package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css +0 -14
  15. package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css +0 -14
  16. package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css +0 -14
  17. package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css +0 -14
  18. package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css +0 -14
  19. package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css +0 -14
  20. package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css +0 -14
  21. package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css +0 -14
  22. package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css +0 -14
  23. package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css +0 -14
  24. package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  25. package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  26. package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  27. package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css +0 -14
  28. package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css +0 -14
package/README.md CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
  Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
4
4
 
5
- # 1.6.x
5
+ # 1.6.13
6
6
 
7
- - Updated `@zohodesk-private/color-variable-preprocessor` package version - CTA category overridden variables are now generated only for the necessary CTA variables using the `buildOverriddenCTACategories` function.
7
+ - **Select**
8
+ - Added `renderCustomDropBoxHeader` prop to render a custom node at the top of the dropdown, above the suggestions list.
9
+ - Added `customDropBoxHeader` key under the `customClass` prop to style the custom header wrapper.
8
10
 
9
11
  # 1.6.12
10
12
 
@@ -25,6 +27,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
25
27
  - Prefixless prop fallbacks are supported
26
28
  - `tagName` config in **highlightText** has been renamed to `as`. (fallback supported)
27
29
 
30
+
28
31
  # 1.6.7
29
32
 
30
33
  - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed.
@@ -50,6 +53,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
50
53
  ### 🔒 Compatibility
51
54
  - Requires `@zohodesk/dotkit` version `1.0.8` or above.
52
55
 
56
+
53
57
  # 1.6.3
54
58
 
55
59
  - Added customProps support to **AdvancedMultiSelect**.
@@ -143,6 +147,7 @@ Dot UI is a customizable React component library built to deliver a clean, acces
143
147
 
144
148
  - Font Family Migrated to Font-weight across all css (Impacted)
145
149
 
150
+
146
151
  # 1.4.23
147
152
 
148
153
  - **Typography**
package/assets/Appearance/dark/mode/Component_DarkMode.module.css CHANGED
@@ -111,7 +111,7 @@
111
111
  --zdt_tag_default_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
112
112
  --zdt_tag_default_bg:var(--zdt_cta_grey_20_bg);
113
113
  --zdt_tag_default_border:var(--dot_mirror);
114
- --zdt_tag_default_hover_bg:var(--zdt_cta_grey_35_bg);
114
+ --zdt_tag_default_hover_bg:var(--zdtm_cta_grey_35_bg_darker_lowest);
115
115
  --zdt_tag_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
116
116
  --zdt_tag_secondary_bg:hsla(217, calc(var(--zd-saturation, 1) * 12.16%), calc(29.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
117
117
  --zdt_tag_secondary_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 9.93%), calc(29.61% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -122,7 +122,7 @@
122
122
  --zdt_tag_danger_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
123
123
  --zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
124
124
  --zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
125
- --zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
125
+ --zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
126
126
  --zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
127
127
  --zdt_tag_default_danger_bg:var(--zdtm_cta_grey_15_bg_default_inverse_low);
128
128
  --zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -311,7 +311,7 @@
311
311
  --zdt_datetime_invalid_text:hsla(216, calc(var(--zd-saturation, 1) * 22.98%), calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
312
312
  --zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
313
313
  --zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
314
- --zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
314
+ --zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
315
315
  --zdt_datetime_today_border:var(--zdt_cta_primary_border);
316
316
  --zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
317
317
  --zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
345
345
 
346
346
  /* tabs */
347
347
  --zdt_tabs_alpha_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
348
- --zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
348
+ --zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
349
349
  --zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.3);
350
350
  --zdt_tabs_delta_border:var(--zdt_cta_primary_border);
351
351
  --zdt_tabs_highlight_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/light/mode/Component_LightMode.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  [data-mode='light']{
2
2
  /* list common */
3
- --dot_inputPlaceholder:var(--zdt_cta_grey_40_text);
3
+ --dot_inputPlaceholder:var(--zdtm_cta_grey_40_text_default_inverse);
4
4
  --dot_inputDisable:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
5
5
  --dot_inputLine:var(--zdt_cta_grey_35_border);
6
6
  --dot_inputLineHover:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
@@ -111,7 +111,7 @@
111
111
  --zdt_tag_default_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
112
112
  --zdt_tag_default_bg:var(--zdt_cta_grey_20_bg);
113
113
  --zdt_tag_default_border:var(--dot_mirror);
114
- --zdt_tag_default_hover_bg:var(--zdt_cta_grey_35_bg);
114
+ --zdt_tag_default_hover_bg:var(--zdtm_cta_grey_35_bg_darker_lowest);
115
115
  --zdt_tag_secondary_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
116
116
  --zdt_tag_secondary_bg:hsla(217, calc(var(--zd-saturation, 1) * 12.16%), calc(29.02% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
117
117
  --zdt_tag_secondary_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 9.93%), calc(29.61% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -122,7 +122,7 @@
122
122
  --zdt_tag_danger_hover_bg:hsla(7, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
123
123
  --zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
124
124
  --zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
125
- --zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
125
+ --zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
126
126
  --zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
127
127
  --zdt_tag_default_danger_bg:var(--zdtm_cta_grey_15_bg_default_inverse_low);
128
128
  --zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -152,7 +152,7 @@
152
152
  --zdt_dropdown_darkheading_bg:hsla(226, calc(var(--zd-saturation, 1) * 21.68%), calc(28.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
153
153
  --zdt_dropdown_darkheading_underline_bg:hsla(223, calc(var(--zd-saturation, 1) * 14.00%), calc(39.22% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
154
154
  --zdt_dropdown_mirror_bg:var(--dot_mirror);
155
- --zdt_dropdown_user_default_border:var(--zdt_cta_grey_35_border);
155
+ --zdt_dropdown_user_default_border:var(--zdtm_cta_grey_35_border_default_inverse_medium);
156
156
  --zdt_dropdown_listactive_border:var(--zdt_cta_primary_border);
157
157
  --zdt_dropdown_listactive_bg:hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
158
158
  --zdt_dropdown_listhover_bg:var(--zdt_cta_grey_10_bg);
@@ -311,7 +311,7 @@
311
311
  --zdt_datetime_invalid_text:hsla(231, calc(var(--zd-saturation, 1) * 22.22%), calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
312
312
  --zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
313
313
  --zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
314
- --zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
314
+ --zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
315
315
  --zdt_datetime_today_border:var(--zdt_cta_primary_border);
316
316
  --zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
317
317
  --zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
345
345
 
346
346
  /* tabs */
347
347
  --zdt_tabs_alpha_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
348
- --zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
348
+ --zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
349
349
  --zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.3);
350
350
  --zdt_tabs_delta_border:var(--zdt_cta_primary_border);
351
351
  --zdt_tabs_highlight_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css CHANGED
@@ -122,7 +122,7 @@
122
122
  --zdt_tag_danger_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
123
123
  --zdt_tag_primary_bg:var(--zdtm_cta_primary_bg_default_inverse);
124
124
  --zdt_tag_primary_hover_bg:var(--zdtm_cta_primary_hover_bg_default_inverse);
125
- --zdt_tag_primary_border:var(--zdt_cta_primary_light_border);
125
+ --zdt_tag_primary_border:var(--zdtm_cta_primary_light_border_default_inverse_medium);
126
126
  --zdt_tag_closeprimary_bg:var(--zdtm_cta_primary_bg_default_inverse);
127
127
  --zdt_tag_default_danger_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(18.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
128
128
  --zdt_tag_active_default_bg:var(--zdt_cta_primary_light_bg);
@@ -311,7 +311,7 @@
311
311
  --zdt_datetime_invalid_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
312
312
  --zdt_datetime_invalid_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
313
313
  --zdt_datetime_invaliddate_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_lower)), calc( 0.3 + var(--zdc_alpha_low)));
314
- --zdt_datetime_selected_bg:var(--zdt_cta_primary_bg);
314
+ --zdt_datetime_selected_bg:var(--zdtm_cta_primary_bg_darker_low);
315
315
  --zdt_datetime_today_border:var(--zdt_cta_primary_border);
316
316
  --zdt_datetime_today_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
317
317
  --zdt_datetime_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
@@ -345,7 +345,7 @@
345
345
 
346
346
  /* tabs */
347
347
  --zdt_tabs_alpha_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
348
- --zdt_tabs_alpha_border:var(--zdt_cta_grey_15_border);
348
+ --zdt_tabs_alpha_border:var(--zdtm_cta_grey_15_border_default_inverse_medium);
349
349
  --zdt_tabs_alpha_box_shadow:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 0.3);
350
350
  --zdt_tabs_delta_border:var(--zdt_cta_primary_border);
351
351
  --zdt_tabs_highlight_border:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
package/es/Select/Select.js CHANGED
@@ -813,7 +813,8 @@ export class SelectComponent extends Component {
813
813
  renderCustomSearchClearComponent,
814
814
  renderCustomSelectedValue,
815
815
  inputFieldLineA11y,
816
- customClass
816
+ customClass,
817
+ renderCustomDropBoxHeader
817
818
  } = this.props;
818
819
  let {
819
820
  TextBoxIcon_i18n,
@@ -844,7 +845,8 @@ export class SelectComponent extends Component {
844
845
  } = customProps;
845
846
  const {
846
847
  dropBox: dropBoxClass = '',
847
- cardContent: cardContentClass = ''
848
+ cardContent: cardContentClass = '',
849
+ customDropBoxHeader: customDropBoxHeaderClass = ''
848
850
  } = customClass;
849
851
  const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
850
852
  setAriaId,
@@ -1021,81 +1023,92 @@ export class SelectComponent extends Component {
1021
1023
  isRestrictScroll: isRestrictScroll,
1022
1024
  portalId: dropBoxPortalId,
1023
1025
  customClass: {
1024
- customDropBox: dropBoxClass
1026
+ customDropBox: `${dropBoxClass} ${renderCustomDropBoxHeader ? style.dropBoxWithCustomHeader : ''}`
1025
1027
  }
1026
- }, isLoading ? /*#__PURE__*/React.createElement(Container, {
1027
- align: "both",
1028
- className: style.loader
1029
- }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
1030
- flexible: true
1031
- }, /*#__PURE__*/React.createElement(Card, {
1032
- onScroll: this.handleScroll
1033
- }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
1034
- className: `${style.search} ${style[size]}`
1035
- }, /*#__PURE__*/React.createElement(TextBoxIcon, {
1036
- a11y: {
1037
- ariaControls: setAriaId,
1038
- ariaAutocomplete: 'list',
1039
- ariaDescribedby: ariaErrorId
1040
- },
1041
- inputRef: this.searchInputRef,
1042
- maxLength: maxLength,
1043
- onChange: this.handleSearch,
1044
- onKeyDown: this.handleKeyDown,
1045
- placeHolder: searchBoxPlaceHolder,
1046
- size: searchBoxSize,
1047
- value: searchStr,
1048
- onClear: this.handleClearSearch,
1049
- dataId: `${dataId}_search`,
1050
- i18nKeys: TextBoxIcon_i18n,
1051
- autoComplete: autoComplete,
1052
- customProps: {
1053
- TextBoxProps: DropdownSearchTextBoxProps
1054
- },
1055
- renderCustomClearComponent: renderCustomSearchClearComponent
1056
- }))) : null, /*#__PURE__*/React.createElement(CardContent, {
1057
- shrink: true,
1058
- customClass: `
1028
+ }, (() => {
1029
+ const dropdownContent = isLoading ? /*#__PURE__*/React.createElement(Container, {
1030
+ align: "both",
1031
+ className: style.loader
1032
+ }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
1033
+ flexible: true
1034
+ }, /*#__PURE__*/React.createElement(Card, {
1035
+ onScroll: this.handleScroll
1036
+ }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
1037
+ className: `${style.search} ${style[size]}`
1038
+ }, /*#__PURE__*/React.createElement(TextBoxIcon, {
1039
+ a11y: {
1040
+ ariaControls: setAriaId,
1041
+ ariaAutocomplete: 'list',
1042
+ ariaDescribedby: ariaErrorId
1043
+ },
1044
+ inputRef: this.searchInputRef,
1045
+ maxLength: maxLength,
1046
+ onChange: this.handleSearch,
1047
+ onKeyDown: this.handleKeyDown,
1048
+ placeHolder: searchBoxPlaceHolder,
1049
+ size: searchBoxSize,
1050
+ value: searchStr,
1051
+ onClear: this.handleClearSearch,
1052
+ dataId: `${dataId}_search`,
1053
+ i18nKeys: TextBoxIcon_i18n,
1054
+ autoComplete: autoComplete,
1055
+ customProps: {
1056
+ TextBoxProps: DropdownSearchTextBoxProps
1057
+ },
1058
+ renderCustomClearComponent: renderCustomSearchClearComponent
1059
+ }))) : null, /*#__PURE__*/React.createElement(CardContent, {
1060
+ shrink: true,
1061
+ customClass: `
1059
1062
  ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
1060
- eleRef: this.suggestionContainerRef
1061
- }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
1062
- key: searchStr.trim(),
1063
- activeId: selectedId,
1064
- isVirtualizerEnabled: isVirtualizerEnabled,
1065
- getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
1066
- setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
1067
- suggestions: suggestions,
1068
- getRef: this.suggestionItemRef,
1069
- hoverOption: hoverIndex,
1070
- onClick: this.handleChange,
1071
- onMouseEnter: this.handleMouseEnter,
1072
- dataId: `${dataId}_Options`,
1073
- needTick: needTick,
1074
- needBorder: needListBorder,
1075
- selectedOptions: [selectedId],
1076
- className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
1077
- listItemSize: listItemSize,
1078
- htmlId: setAriaId,
1079
- a11y: {
1080
- ariaParentRole: 'listbox',
1081
- role: 'option'
1082
- }
1083
- }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
1084
- isLoading: isFetchingOptions,
1085
- options: options,
1086
- searchString: searchStr,
1087
- suggestions: suggestions,
1088
- dataId: dataId,
1089
- renderCustomEmptyState: renderCustomEmptyState,
1090
- getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
1091
- i18nKeys: i18nKeys,
1092
- htmlId: ariaErrorId
1093
- }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
1094
- isCover: false,
1095
- align: "both"
1096
- }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
1097
- flexible: true
1098
- }, getChildren())));
1063
+ eleRef: this.suggestionContainerRef
1064
+ }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
1065
+ key: searchStr.trim(),
1066
+ activeId: selectedId,
1067
+ isVirtualizerEnabled: isVirtualizerEnabled,
1068
+ getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
1069
+ setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
1070
+ suggestions: suggestions,
1071
+ getRef: this.suggestionItemRef,
1072
+ hoverOption: hoverIndex,
1073
+ onClick: this.handleChange,
1074
+ onMouseEnter: this.handleMouseEnter,
1075
+ dataId: `${dataId}_Options`,
1076
+ needTick: needTick,
1077
+ needBorder: needListBorder,
1078
+ selectedOptions: [selectedId],
1079
+ className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
1080
+ listItemSize: listItemSize,
1081
+ htmlId: setAriaId,
1082
+ a11y: {
1083
+ ariaParentRole: 'listbox',
1084
+ role: 'option'
1085
+ }
1086
+ }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
1087
+ isLoading: isFetchingOptions,
1088
+ options: options,
1089
+ searchString: searchStr,
1090
+ suggestions: suggestions,
1091
+ dataId: dataId,
1092
+ renderCustomEmptyState: renderCustomEmptyState,
1093
+ getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
1094
+ i18nKeys: i18nKeys,
1095
+ htmlId: ariaErrorId
1096
+ }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
1097
+ isCover: false,
1098
+ align: "both"
1099
+ }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
1100
+ flexible: true
1101
+ }, getChildren()));
1102
+ return renderCustomDropBoxHeader ? /*#__PURE__*/React.createElement("div", {
1103
+ className: style.dropBoxListContainer
1104
+ }, /*#__PURE__*/React.createElement("div", {
1105
+ className: `${customDropBoxHeaderClass} ${style.customDropBoxHeaderContainer}`
1106
+ }, renderNode(renderCustomDropBoxHeader, {
1107
+ closePopup: this.handlePopupClose
1108
+ })), /*#__PURE__*/React.createElement("div", {
1109
+ className: style.dropdownOptions
1110
+ }, dropdownContent)) : dropdownContent;
1111
+ })());
1099
1112
  }) : null);
1100
1113
  }
1101
1114
 
package/es/Select/Select.module.css CHANGED
@@ -22,12 +22,12 @@
22
22
 
23
23
  .box_small .emptyState {
24
24
  padding-block: var(--zd_size12) ;
25
- padding-inline:var(--zd_size6) ;
25
+ padding-inline: var(--zd_size6) ;
26
26
  }
27
27
 
28
28
  .box_medium .emptyState {
29
29
  padding-block: var(--zd_size12) ;
30
- padding-inline:var(--zd_size15) ;
30
+ padding-inline: var(--zd_size15) ;
31
31
  }
32
32
 
33
33
  .hide {
@@ -45,12 +45,12 @@
45
45
 
46
46
  .small.search {
47
47
  padding-block: 0 ;
48
- padding-inline:var(--zd_size5) ;
48
+ padding-inline: var(--zd_size5) ;
49
49
  }
50
50
 
51
51
  .medium.search {
52
52
  padding-block: var(--zd_size3) 0 ;
53
- padding-inline:var(--zd_size20) ;
53
+ padding-inline: var(--zd_size20) ;
54
54
  }
55
55
 
56
56
  .title {
@@ -59,17 +59,17 @@
59
59
 
60
60
  .groupTitle {
61
61
  margin-block: var(--zd_size6) ;
62
- margin-inline:0 ;
62
+ margin-inline: 0 ;
63
63
  }
64
64
 
65
65
  .listItemContainer {
66
66
  padding-block: var(--zd_size10) ;
67
- padding-inline:0 ;
67
+ padding-inline: 0 ;
68
68
  }
69
69
 
70
70
  .responsivelistItemContainer {
71
71
  padding-block: var(--zd_size10) 0 ;
72
- padding-inline:0 ;
72
+ padding-inline: 0 ;
73
73
  }
74
74
 
75
75
  .readonly {
@@ -111,18 +111,19 @@
111
111
 
112
112
  .dropBoxList {
113
113
  padding-block: var(--zd_size10) ;
114
- padding-inline:0 ;
114
+ padding-inline: 0 ;
115
115
  }
116
116
 
117
117
  .responsivedropBoxList {
118
118
  padding-block: var(--zd_size10) 0 ;
119
- padding-inline:0 ;
119
+ padding-inline: 0 ;
120
120
  }
121
121
 
122
122
  .rotate {
123
123
  transform: rotateX(180deg);
124
124
  }
125
- .rightPlaceholder{
125
+
126
+ .rightPlaceholder {
126
127
  height: 100% ;
127
128
  }
128
129
 
@@ -141,3 +142,29 @@
141
142
  .loader {
142
143
  padding: var(--zd_size10) ;
143
144
  }
145
+
146
+ .dropBoxWithCustomHeader {
147
+ border-radius: 7px;
148
+ }
149
+
150
+ .dropBoxListContainer {
151
+ width: 100% ;
152
+ border-radius: 7px;
153
+ padding: var(--zd_size10) ;
154
+ border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
155
+ background: var(--zdt_statusdropdown_wrapper_container_bg);
156
+ box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
157
+ }
158
+
159
+ .dropdownOptions {
160
+ padding-inline: var(--zd_size1) ;
161
+ padding-block: var(--zd_size1) ;
162
+ background-color: var(--zdt_statusdropdown_wrapper_dropdown_bg);
163
+ border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
164
+ border-radius: 7px;
165
+ }
166
+
167
+ .customDropBoxHeaderContainer {
168
+ margin-block-end: var(--zd_size6) ;
169
+ margin-inline: var(--zd_size1) ;
170
+ }
package/es/Select/props/defaultProps.js CHANGED
@@ -38,7 +38,8 @@ export const Select_defaultProps = {
38
38
  isAbsolutePositioningNeeded: true,
39
39
  allowValueFallback: true,
40
40
  inputFieldLineA11y: {},
41
- customClass: {}
41
+ customClass: {},
42
+ renderCustomDropBoxHeader: null
42
43
  };
43
44
  export const GroupSelect_defaultProps = {
44
45
  animationStyle: 'bounce',
package/es/Select/props/propTypes.js CHANGED
@@ -107,8 +107,10 @@ export const Select_propTypes = {
107
107
  inputFieldLineA11y: PropTypes.object,
108
108
  customClass: PropTypes.shape({
109
109
  dropBox: PropTypes.string,
110
- cardContent: PropTypes.string
111
- })
110
+ cardContent: PropTypes.string,
111
+ customDropBoxHeader: PropTypes.string
112
+ }),
113
+ renderCustomDropBoxHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
112
114
  };
113
115
  export const GroupSelect_propTypes = {
114
116
  groupedOptions: PropTypes.arrayOf(PropTypes.shape({
package/lib/Select/Select.js CHANGED
@@ -860,7 +860,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
860
860
  renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
861
861
  renderCustomSelectedValue = _this$props11.renderCustomSelectedValue,
862
862
  inputFieldLineA11y = _this$props11.inputFieldLineA11y,
863
- customClass = _this$props11.customClass;
863
+ customClass = _this$props11.customClass,
864
+ renderCustomDropBoxHeader = _this$props11.renderCustomDropBoxHeader;
864
865
  var _i18nKeys = i18nKeys,
865
866
  TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
866
867
  _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -893,7 +894,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
893
894
  var _customClass$dropBox = customClass.dropBox,
894
895
  dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
895
896
  _customClass$cardCont = customClass.cardContent,
896
- cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
897
+ cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont,
898
+ _customClass$customDr = customClass.customDropBoxHeader,
899
+ customDropBoxHeaderClass = _customClass$customDr === void 0 ? '' : _customClass$customDr;
897
900
  var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
898
901
  setAriaId: setAriaId,
899
902
  isReadOnly: isReadOnly,
@@ -1065,80 +1068,91 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
1065
1068
  isRestrictScroll: isRestrictScroll,
1066
1069
  portalId: dropBoxPortalId,
1067
1070
  customClass: {
1068
- customDropBox: dropBoxClass
1071
+ customDropBox: "".concat(dropBoxClass, " ").concat(renderCustomDropBoxHeader ? _SelectModule["default"].dropBoxWithCustomHeader : '')
1069
1072
  }
1070
- }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
1071
- align: "both",
1072
- className: _SelectModule["default"].loader
1073
- }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
1074
- flexible: true
1075
- }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
1076
- onScroll: _this7.handleScroll
1077
- }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
1078
- className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
1079
- }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
1080
- a11y: {
1081
- ariaControls: setAriaId,
1082
- ariaAutocomplete: 'list',
1083
- ariaDescribedby: ariaErrorId
1084
- },
1085
- inputRef: _this7.searchInputRef,
1086
- maxLength: maxLength,
1087
- onChange: _this7.handleSearch,
1088
- onKeyDown: _this7.handleKeyDown,
1089
- placeHolder: searchBoxPlaceHolder,
1090
- size: searchBoxSize,
1091
- value: searchStr,
1092
- onClear: _this7.handleClearSearch,
1093
- dataId: "".concat(dataId, "_search"),
1094
- i18nKeys: TextBoxIcon_i18n,
1095
- autoComplete: autoComplete,
1096
- customProps: {
1097
- TextBoxProps: DropdownSearchTextBoxProps
1098
- },
1099
- renderCustomClearComponent: renderCustomSearchClearComponent
1100
- }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
1101
- shrink: true,
1102
- customClass: "\n ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
1103
- eleRef: _this7.suggestionContainerRef
1104
- }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
1105
- key: searchStr.trim(),
1106
- activeId: selectedId,
1107
- isVirtualizerEnabled: isVirtualizerEnabled,
1108
- getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
1109
- setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
1110
- suggestions: suggestions,
1111
- getRef: _this7.suggestionItemRef,
1112
- hoverOption: hoverIndex,
1113
- onClick: _this7.handleChange,
1114
- onMouseEnter: _this7.handleMouseEnter,
1115
- dataId: "".concat(dataId, "_Options"),
1116
- needTick: needTick,
1117
- needBorder: needListBorder,
1118
- selectedOptions: [selectedId],
1119
- className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
1120
- listItemSize: listItemSize,
1121
- htmlId: setAriaId,
1122
- a11y: {
1123
- ariaParentRole: 'listbox',
1124
- role: 'option'
1125
- }
1126
- }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1127
- isLoading: isFetchingOptions,
1128
- options: options,
1129
- searchString: searchStr,
1130
- suggestions: suggestions,
1131
- dataId: dataId,
1132
- renderCustomEmptyState: renderCustomEmptyState,
1133
- getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
1134
- i18nKeys: i18nKeys,
1135
- htmlId: ariaErrorId
1136
- }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
1137
- isCover: false,
1138
- align: "both"
1139
- }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
1140
- flexible: true
1141
- }, getChildren())));
1073
+ }, function () {
1074
+ var dropdownContent = isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
1075
+ align: "both",
1076
+ className: _SelectModule["default"].loader
1077
+ }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
1078
+ flexible: true
1079
+ }, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
1080
+ onScroll: _this7.handleScroll
1081
+ }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
1082
+ className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
1083
+ }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
1084
+ a11y: {
1085
+ ariaControls: setAriaId,
1086
+ ariaAutocomplete: 'list',
1087
+ ariaDescribedby: ariaErrorId
1088
+ },
1089
+ inputRef: _this7.searchInputRef,
1090
+ maxLength: maxLength,
1091
+ onChange: _this7.handleSearch,
1092
+ onKeyDown: _this7.handleKeyDown,
1093
+ placeHolder: searchBoxPlaceHolder,
1094
+ size: searchBoxSize,
1095
+ value: searchStr,
1096
+ onClear: _this7.handleClearSearch,
1097
+ dataId: "".concat(dataId, "_search"),
1098
+ i18nKeys: TextBoxIcon_i18n,
1099
+ autoComplete: autoComplete,
1100
+ customProps: {
1101
+ TextBoxProps: DropdownSearchTextBoxProps
1102
+ },
1103
+ renderCustomClearComponent: renderCustomSearchClearComponent
1104
+ }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
1105
+ shrink: true,
1106
+ customClass: "\n ".concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '', " ").concat(cardContentClass),
1107
+ eleRef: _this7.suggestionContainerRef
1108
+ }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
1109
+ key: searchStr.trim(),
1110
+ activeId: selectedId,
1111
+ isVirtualizerEnabled: isVirtualizerEnabled,
1112
+ getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
1113
+ setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
1114
+ suggestions: suggestions,
1115
+ getRef: _this7.suggestionItemRef,
1116
+ hoverOption: hoverIndex,
1117
+ onClick: _this7.handleChange,
1118
+ onMouseEnter: _this7.handleMouseEnter,
1119
+ dataId: "".concat(dataId, "_Options"),
1120
+ needTick: needTick,
1121
+ needBorder: needListBorder,
1122
+ selectedOptions: [selectedId],
1123
+ className: "".concat(tabletMode ? _SelectModule["default"].responsivelistItemContainer : _SelectModule["default"].listItemContainer),
1124
+ listItemSize: listItemSize,
1125
+ htmlId: setAriaId,
1126
+ a11y: {
1127
+ ariaParentRole: 'listbox',
1128
+ role: 'option'
1129
+ }
1130
+ }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
1131
+ isLoading: isFetchingOptions,
1132
+ options: options,
1133
+ searchString: searchStr,
1134
+ suggestions: suggestions,
1135
+ dataId: dataId,
1136
+ renderCustomEmptyState: renderCustomEmptyState,
1137
+ getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
1138
+ i18nKeys: i18nKeys,
1139
+ htmlId: ariaErrorId
1140
+ }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
1141
+ isCover: false,
1142
+ align: "both"
1143
+ }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
1144
+ flexible: true
1145
+ }, getChildren()));
1146
+ return renderCustomDropBoxHeader ? /*#__PURE__*/_react["default"].createElement("div", {
1147
+ className: _SelectModule["default"].dropBoxListContainer
1148
+ }, /*#__PURE__*/_react["default"].createElement("div", {
1149
+ className: "".concat(customDropBoxHeaderClass, " ").concat(_SelectModule["default"].customDropBoxHeaderContainer)
1150
+ }, (0, _utils.renderNode)(renderCustomDropBoxHeader, {
1151
+ closePopup: _this7.handlePopupClose
1152
+ })), /*#__PURE__*/_react["default"].createElement("div", {
1153
+ className: _SelectModule["default"].dropdownOptions
1154
+ }, dropdownContent)) : dropdownContent;
1155
+ }());
1142
1156
  }) : null);
1143
1157
  }
1144
1158
  }]);
package/lib/Select/Select.module.css CHANGED
@@ -22,12 +22,12 @@
22
22
 
23
23
  .box_small .emptyState {
24
24
  padding-block: var(--zd_size12) ;
25
- padding-inline:var(--zd_size6) ;
25
+ padding-inline: var(--zd_size6) ;
26
26
  }
27
27
 
28
28
  .box_medium .emptyState {
29
29
  padding-block: var(--zd_size12) ;
30
- padding-inline:var(--zd_size15) ;
30
+ padding-inline: var(--zd_size15) ;
31
31
  }
32
32
 
33
33
  .hide {
@@ -45,12 +45,12 @@
45
45
 
46
46
  .small.search {
47
47
  padding-block: 0 ;
48
- padding-inline:var(--zd_size5) ;
48
+ padding-inline: var(--zd_size5) ;
49
49
  }
50
50
 
51
51
  .medium.search {
52
52
  padding-block: var(--zd_size3) 0 ;
53
- padding-inline:var(--zd_size20) ;
53
+ padding-inline: var(--zd_size20) ;
54
54
  }
55
55
 
56
56
  .title {
@@ -59,17 +59,17 @@
59
59
 
60
60
  .groupTitle {
61
61
  margin-block: var(--zd_size6) ;
62
- margin-inline:0 ;
62
+ margin-inline: 0 ;
63
63
  }
64
64
 
65
65
  .listItemContainer {
66
66
  padding-block: var(--zd_size10) ;
67
- padding-inline:0 ;
67
+ padding-inline: 0 ;
68
68
  }
69
69
 
70
70
  .responsivelistItemContainer {
71
71
  padding-block: var(--zd_size10) 0 ;
72
- padding-inline:0 ;
72
+ padding-inline: 0 ;
73
73
  }
74
74
 
75
75
  .readonly {
@@ -111,18 +111,19 @@
111
111
 
112
112
  .dropBoxList {
113
113
  padding-block: var(--zd_size10) ;
114
- padding-inline:0 ;
114
+ padding-inline: 0 ;
115
115
  }
116
116
 
117
117
  .responsivedropBoxList {
118
118
  padding-block: var(--zd_size10) 0 ;
119
- padding-inline:0 ;
119
+ padding-inline: 0 ;
120
120
  }
121
121
 
122
122
  .rotate {
123
123
  transform: rotateX(180deg);
124
124
  }
125
- .rightPlaceholder{
125
+
126
+ .rightPlaceholder {
126
127
  height: 100% ;
127
128
  }
128
129
 
@@ -141,3 +142,29 @@
141
142
  .loader {
142
143
  padding: var(--zd_size10) ;
143
144
  }
145
+
146
+ .dropBoxWithCustomHeader {
147
+ border-radius: 7px;
148
+ }
149
+
150
+ .dropBoxListContainer {
151
+ width: 100% ;
152
+ border-radius: 7px;
153
+ padding: var(--zd_size10) ;
154
+ border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
155
+ background: var(--zdt_statusdropdown_wrapper_container_bg);
156
+ box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
157
+ }
158
+
159
+ .dropdownOptions {
160
+ padding-inline: var(--zd_size1) ;
161
+ padding-block: var(--zd_size1) ;
162
+ background-color: var(--zdt_statusdropdown_wrapper_dropdown_bg);
163
+ border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
164
+ border-radius: 7px;
165
+ }
166
+
167
+ .customDropBoxHeaderContainer {
168
+ margin-block-end: var(--zd_size6) ;
169
+ margin-inline: var(--zd_size1) ;
170
+ }
package/lib/Select/props/defaultProps.js CHANGED
@@ -50,7 +50,8 @@ var Select_defaultProps = {
50
50
  isAbsolutePositioningNeeded: true,
51
51
  allowValueFallback: true,
52
52
  inputFieldLineA11y: {},
53
- customClass: {}
53
+ customClass: {},
54
+ renderCustomDropBoxHeader: null
54
55
  };
55
56
  exports.Select_defaultProps = Select_defaultProps;
56
57
  var GroupSelect_defaultProps = {
package/lib/Select/props/propTypes.js CHANGED
@@ -123,8 +123,10 @@ var Select_propTypes = {
123
123
  inputFieldLineA11y: _propTypes["default"].object,
124
124
  customClass: _propTypes["default"].shape({
125
125
  dropBox: _propTypes["default"].string,
126
- cardContent: _propTypes["default"].string
127
- })
126
+ cardContent: _propTypes["default"].string,
127
+ customDropBoxHeader: _propTypes["default"].string
128
+ }),
129
+ renderCustomDropBoxHeader: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
128
130
  };
129
131
  exports.Select_propTypes = Select_propTypes;
130
132
  var GroupSelect_propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-temp-254",
3
+ "version": "1.0.0-temp-252.1",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -22,7 +22,7 @@
22
22
  "lintAllFix": "npm run lintAll --eslint:fix=true",
23
23
  "lint": "npx eslint ./src",
24
24
  "clean": "react-cli clean build unittest coverage es lib assets && mkdir assets",
25
- "dubCheck": "node ./node_modules/@zohodesk-private/node-plugins/es/dublication_css_file_finder node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
25
+ "dubCheck": "npx z-node-plugins dub:check node_modules/@zohodesk/icons/es node_modules/@zohodesk/variables/es ../dot/src ../internal/desk-components/src",
26
26
  "init": "npm run clean && cd ../assets && npm run componentsassets && cd ../components",
27
27
  "common_package_build": "cd ../common && npm run build && cd ../components",
28
28
  "build:lib": "cbt build:lib src,assets lib,assets",
@@ -33,7 +33,7 @@
33
33
  "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
34
34
  "coverage": "react-cli coverage",
35
35
  "prepare": "npm run init && npm run css:build ",
36
- "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
36
+ "prepublishOnly": "node ../prePublish.js && npm run css:review",
37
37
  "postpublish": "node ../postPublish.js",
38
38
  "report": "react-cli publish:report",
39
39
  "test": "react-cli test",
@@ -45,22 +45,22 @@
45
45
  "download": "npm run download_only && cd ../ && npm run download",
46
46
  "download_only": "react-cli clean ./node_modules ./package-lock.json && npm install --legacy-peer-deps",
47
47
  "expublish": "node ../publish.js -- exp",
48
- "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
48
+ "css:lineheight:validate": "npx z-node-plugins lineheight:errorcheck ./src/",
49
49
  "variable:addignore": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableIgnore.js ./src",
50
50
  "variable:convert": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/pxParserPostcss.js ./src",
51
51
  "variable:check": "node ./node_modules/@zohodesk-private/css-variable-migrator/es/variableErrorCheck.js ./src ./node_modules/@zohodesk-private/css-variable-migrator/es/config/cssVariableReplacementOptions.json",
52
52
  "css:review": " npm run dubCheck && npm run css:lineheight:validate && npm run theme:validate ",
53
- "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli ./.cli/themeValidate/stringContains.js",
54
- "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli ./.cli/themeValidate/stringContains.js",
55
- "theme:removeignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation removeignore ./src ./.cli",
53
+ "theme:validate": "npx z-node-plugins theme:validate ./src ./.cli ./.cli/themeValidate/stringContains.js",
54
+ "theme:addignore": "npx z-node-plugins theme:addignore ./src ./.cli ./.cli/themeValidate/stringContains.js",
55
+ "theme:removeignore": "npx z-node-plugins theme:removeignore ./src ./.cli",
56
56
  "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json ",
57
- "css:layer_config_generate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/scan_css_generate_json.js ./src ./assets css_layer_config.json",
58
- "css:layer_wrap_es": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
59
- "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib --rewrite=assets=assets --skip-existing-layer",
60
- "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js css_layer_config.json ./src/components_layer.module.css",
61
- "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js css_layer_config.json ./src/ ./assets",
57
+ "css:layer_config_generate": "npx z-node-plugins css:scan ./src ./assets css_layer_config.json",
58
+ "css:layer_wrap_es": "npx z-node-plugins css:layer_wrap ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
59
+ "css:layer_wrap_lib": "npx z-node-plugins css:layer_wrap ./lib ./assets css_layer_config.json --rewrite=src=lib --rewrite=assets=assets --skip-existing-layer",
60
+ "css:layer_generate_order": "npx z-node-plugins css:layer_order css_layer_config.json ./src/components_layer.module.css",
61
+ "css:layer_config_validate": "npx z-node-plugins css:layer_validate css_layer_config.json ./src/ ./assets",
62
62
  "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build",
63
- "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets",
63
+ "css:layer_remove": "npx z-node-plugins css:layer_remove ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets",
64
64
  "css:audit": "npx css-audit --common-css=common/common.module.css --dir src --port 8085 --report ",
65
65
  "cssVariableConvert": "react-cli variableConverter ./lib ./lib && react-cli variableConverter ./es ./es",
66
66
  "publish": "node ../publish.js",
@@ -73,25 +73,26 @@
73
73
  "@testing-library/react-hooks": "^7.0.2",
74
74
  "@testing-library/user-event": "^13.0.10",
75
75
  "@zohodesk-private/css-audit-tool": "0.0.2",
76
- "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-20",
76
+ "@zohodesk-private/color-variable-preprocessor": "1.3.1",
77
77
  "@zohodesk-private/css-variable-migrator": "1.0.9",
78
- "@zohodesk-private/node-plugins": "1.1.13",
78
+ "@zohodesk-private/node-plugins": "1.1.14",
79
79
  "@zohodesk-private/react-prop-validator": "1.2.3",
80
80
  "@zohodesk/a11y": "2.3.9",
81
81
  "@zohodesk/docstool": "1.0.0-alpha-2",
82
82
  "@zohodesk/dotkit": "1.0.9",
83
83
  "@zohodesk/hooks": "2.0.8",
84
- "@zohodesk/icons": "1.3.0",
84
+ "@zohodesk/icons": "1.3.1",
85
85
  "@zohodesk/layout": "3.1.0",
86
86
  "@zohodesk/svg": "1.3.5",
87
87
  "@zohodesk/utils": "1.3.16",
88
- "@zohodesk/variables": "1.1.1-exp.6",
88
+ "@zohodesk/variables": "1.3.1",
89
89
  "@zohodesk/virtualizer": "1.0.13",
90
90
  "react-sortable-hoc": "^0.8.3",
91
91
  "velocity-react": "1.4.3",
92
92
  "@zohodesk/react-cli": "1.1.27",
93
93
  "@zohodesk/client_build_tool": "0.0.20",
94
- "color": "4.2.3"
94
+ "color": "4.2.3",
95
+ "@dot-system/css-utility": "0.1.1"
95
96
  },
96
97
  "dependencies": {
97
98
  "hoist-non-react-statics": "3.0.1",
@@ -100,8 +101,8 @@
100
101
  "selectn": "1.1.2"
101
102
  },
102
103
  "peerDependencies": {
103
- "@zohodesk/icons": "1.3.0",
104
- "@zohodesk/variables": "1.1.1-exp.6",
104
+ "@zohodesk/icons": "1.3.1",
105
+ "@zohodesk/variables": "1.3.1",
105
106
  "@zohodesk/svg": "1.3.5",
106
107
  "@zohodesk/virtualizer": "1.0.13",
107
108
  "velocity-react": "1.4.3",
@@ -111,6 +112,7 @@
111
112
  "@zohodesk/a11y": "2.3.9",
112
113
  "@zohodesk/layout": "3.1.0",
113
114
  "@zohodesk/dotkit": "1.0.9",
114
- "color": "4.2.3"
115
+ "color": "4.2.3",
116
+ "@dot-system/css-utility": "0.1.1"
115
117
  }
116
118
  }
package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='blue'], :global(.zd-blueDarkTheme) [data-theme="blue"]{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(213, 27.27%, calc(23.73% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(215, 28.16%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='green']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(191, 21.65%, calc(19.02% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(170, 22.94%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='orange']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(252, 4.85%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(340, 5.56%, calc(21.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='red']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(258, 12.62%, calc(20.20% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(284, 10.48%, calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='dark'][data-theme='yellow']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(218, 7.69%, calc(20.39% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(216, 22.98%, calc(31.57% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(220, 2.75%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='blue'], :global(.zd-blueLightTheme) [data-theme="blue"]{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(212, 86.67%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(231, 22.22%, calc(82.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(216, 38.46%, calc(97.45% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 100.00%, calc(36.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(213, 84.62%, calc(94.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(212, 91.84%, calc(48.04% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(213, 100.00%, calc(36.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='green']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(165, 28.57%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(143, 44.44%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(135, 7.41%, calc(78.82% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(165, 28.57%, calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(135, 13.33%, calc(94.12% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(132, 43.33%, calc(88.24% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(133, 63.29%, calc(40.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(135, 7.41%, calc(78.82% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(134, 78.63%, calc(25.69% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='orange']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(20, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(26, 77.78%, calc(96.47% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(27, 10.68%, calc(79.80% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(20, 20.00%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(30, 100.00%, calc(34.90% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(24, 27.78%, calc(92.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(28, 80.39%, calc(90.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(28, 81.75%, calc(49.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(27, 10.68%, calc(79.80% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(30, 100.00%, calc(34.90% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='red']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(340, 20.00%, calc(97.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(0, 71.43%, calc(97.25% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(343, 4.76%, calc(71.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(340, 20.00%, calc(97.06% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(1, 75.38%, calc(38.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 12.20%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(0, 70.21%, calc(90.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(0, 71.91%, calc(53.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(343, 4.76%, calc(71.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(1, 75.38%, calc(38.24% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='light'][data-theme='yellow']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(60, 12.50%, calc(96.86% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(45, 83.33%, calc(95.29% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(45, 28.17%, calc(72.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(60, 12.50%, calc(96.86% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(48, 100.00%, calc(35.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(60, 21.74%, calc(90.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(46, 80.82%, calc(85.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(46, 81.07%, calc(52.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(46, 81.07%, calc(52.35% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(45, 28.17%, calc(72.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(48, 100.00%, calc(35.49% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='blue'], :global(.zd-bluePureDarkTheme) [data-theme="blue"]{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(213, 19.57%, calc(18.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(213, 85.45%, calc(43.14% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(215, 28.16%, calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(212, 100.00%, calc(63.92% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(213, 85.45%, calc(43.14% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='green']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(133, 10.84%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(128, 79.71%, calc(27.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(170, 22.94%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(133, 40.00%, calc(45.10% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(128, 79.71%, calc(27.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='orange']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(26, 19.51%, calc(16.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(29, 100.00%, calc(32.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(340, 5.56%, calc(21.18% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(26, 100.00%, calc(56.08% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(29, 100.00%, calc(32.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='red']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(0, 13.25%, calc(16.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(284, 10.48%, calc(20.59% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(0, 81.62%, calc(36.27% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }
package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css DELETED
@@ -1,14 +0,0 @@
1
- [data-mode='pureDark'][data-theme='yellow']{
2
- --zdtm_cta_grey_10_bg_default_inverse_low:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
3
- --zdtm_cta_primary_light_bg_default_inverse_low:hsla(35, 15.00%, calc(15.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
4
- --zdtm_cta_grey_40_bg_default:hsla(0, 0.00%, calc(34.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
5
- --zdtm_cta_grey_10_bg_default_inverse_lower:hsla(0, 0.00%, calc(14.90% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
6
- --zdtm_cta_primary_bg_default_inverse:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
7
- --zdtm_cta_primary_hover_bg_default_inverse:hsla(39, 90.18%, calc(31.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
8
- --zdtm_cta_grey_15_bg_default_inverse_low:hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
9
- --zdtm_cta_alpha_bg_default_inverse_lower:hsla(220, 2.75%, calc(21.37% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
10
- --zdtm_cta_primary_bg_default_inverse_low:hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
11
- --zdtm_cta_primary_bg_default:hsla(37, 66.94%, calc(52.55% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
12
- --zdtm_cta_grey_40_bg_default_inverse_low:hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
13
- --zdtm_cta_primary_hover_bg_default:hsla(39, 90.18%, calc(31.96% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
14
- }