@zohodesk/components 1.2.29 → 1.2.30

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 (112) hide show
  1. package/README.md +4 -0
  2. package/es/AppContainer/AppContainer.js +10 -9
  3. package/es/Avatar/Avatar.js +4 -5
  4. package/es/Avatar/Avatar.module.css +0 -12
  5. package/es/AvatarTeam/AvatarTeam.js +7 -7
  6. package/es/AvatarTeam/AvatarTeam.module.css +0 -4
  7. package/es/Button/Button.js +5 -6
  8. package/es/Button/css/Button.module.css +0 -6
  9. package/es/Buttongroup/Buttongroup.module.css +0 -2
  10. package/es/CheckBox/CheckBox.js +8 -8
  11. package/es/CheckBox/CheckBox.module.css +0 -2
  12. package/es/DateTime/DateTime.module.css +0 -1
  13. package/es/DropBox/DropBox.js +10 -11
  14. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +0 -7
  15. package/es/DropBox/css/DropBox.module.css +0 -1
  16. package/es/DropDown/DropDown.js +2 -1
  17. package/es/DropDown/DropDownHeading.module.css +0 -6
  18. package/es/DropDown/DropDownItem.module.css +0 -3
  19. package/es/Label/Label.module.css +0 -1
  20. package/es/ListItem/ListContainer.js +6 -5
  21. package/es/ListItem/ListItem.js +4 -5
  22. package/es/ListItem/ListItem.module.css +0 -21
  23. package/es/ListItem/ListItemWithAvatar.js +4 -5
  24. package/es/ListItem/ListItemWithCheckBox.js +4 -5
  25. package/es/ListItem/ListItemWithIcon.js +4 -5
  26. package/es/ListItem/ListItemWithRadio.js +4 -5
  27. package/es/Modal/Modal.js +4 -5
  28. package/es/MultiSelect/AdvancedMultiSelect.js +8 -9
  29. package/es/MultiSelect/MultiSelectWithAvatar.js +4 -5
  30. package/es/MultiSelect/SelectedOptions.js +6 -8
  31. package/es/MultiSelect/Suggestions.js +6 -8
  32. package/es/MultiSelect/props/defaultProps.js +4 -2
  33. package/es/PopOver/PopOver.module.css +3 -3
  34. package/es/Popup/Popup.js +3 -4
  35. package/es/Radio/Radio.js +8 -8
  36. package/es/Radio/Radio.module.css +0 -1
  37. package/es/ResponsiveDropBox/ResponsiveDropBox.js +2 -4
  38. package/es/Ribbon/Ribbon.module.css +0 -4
  39. package/es/Select/Select.js +4 -5
  40. package/es/Switch/Switch.js +8 -8
  41. package/es/Switch/Switch.module.css +0 -2
  42. package/es/Tab/Tab.js +4 -5
  43. package/es/Tab/TabContentWrapper.js +4 -5
  44. package/es/Tab/TabWrapper.js +2 -4
  45. package/es/Tab/Tabs.js +16 -16
  46. package/es/Tag/Tag.module.css +0 -6
  47. package/es/TextBox/TextBox.js +5 -5
  48. package/es/TextBox/TextBox.module.css +1 -21
  49. package/es/TextBoxIcon/TextBoxIcon.js +2 -4
  50. package/es/TextBoxIcon/TextBoxIcon.module.css +0 -5
  51. package/es/Textarea/Textarea.js +4 -6
  52. package/es/Textarea/Textarea.module.css +0 -6
  53. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
  54. package/es/common/customscroll.module.css +27 -3
  55. package/es/deprecated/PortalLayer/PortalLayer.js +8 -6
  56. package/es/v1/AppContainer/AppContainer.js +10 -9
  57. package/es/v1/Avatar/Avatar.js +4 -5
  58. package/es/v1/AvatarTeam/AvatarTeam.js +7 -7
  59. package/es/v1/Button/Button.js +5 -6
  60. package/es/v1/CheckBox/CheckBox.js +8 -8
  61. package/es/v1/DropBox/DropBox.js +10 -11
  62. package/es/v1/DropDown/DropDown.js +2 -1
  63. package/es/v1/ListItem/ListContainer.js +6 -5
  64. package/es/v1/ListItem/ListItem.js +4 -5
  65. package/es/v1/ListItem/ListItemWithAvatar.js +4 -5
  66. package/es/v1/ListItem/ListItemWithCheckBox.js +4 -5
  67. package/es/v1/ListItem/ListItemWithIcon.js +4 -5
  68. package/es/v1/ListItem/ListItemWithRadio.js +4 -5
  69. package/es/v1/Modal/Modal.js +4 -5
  70. package/es/v1/MultiSelect/AdvancedMultiSelect.js +8 -9
  71. package/es/v1/MultiSelect/MultiSelectWithAvatar.js +4 -5
  72. package/es/v1/MultiSelect/SelectedOptions.js +6 -8
  73. package/es/v1/MultiSelect/Suggestions.js +6 -8
  74. package/es/v1/MultiSelect/props/defaultProps.js +4 -2
  75. package/es/v1/Popup/Popup.js +3 -4
  76. package/es/v1/Radio/Radio.js +8 -8
  77. package/es/v1/ResponsiveDropBox/ResponsiveDropBox.js +2 -4
  78. package/es/v1/Select/Select.js +4 -5
  79. package/es/v1/Switch/Switch.js +8 -8
  80. package/es/v1/Tab/Tab.js +4 -5
  81. package/es/v1/Tab/TabContentWrapper.js +4 -5
  82. package/es/v1/Tab/TabWrapper.js +2 -4
  83. package/es/v1/Tab/Tabs.js +16 -16
  84. package/es/v1/TextBox/TextBox.js +5 -5
  85. package/es/v1/TextBoxIcon/TextBoxIcon.js +2 -4
  86. package/es/v1/Textarea/Textarea.js +4 -6
  87. package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -5
  88. package/lib/Avatar/Avatar.module.css +0 -12
  89. package/lib/AvatarTeam/AvatarTeam.module.css +0 -4
  90. package/lib/Button/css/Button.module.css +0 -6
  91. package/lib/Buttongroup/Buttongroup.module.css +0 -2
  92. package/lib/CheckBox/CheckBox.module.css +0 -2
  93. package/lib/DateTime/DateTime.module.css +0 -1
  94. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +0 -7
  95. package/lib/DropBox/css/DropBox.module.css +0 -1
  96. package/lib/DropDown/DropDownHeading.module.css +0 -6
  97. package/lib/DropDown/DropDownItem.module.css +0 -3
  98. package/lib/Label/Label.module.css +0 -1
  99. package/lib/ListItem/ListItem.module.css +0 -21
  100. package/lib/MultiSelect/props/defaultProps.js +4 -2
  101. package/lib/PopOver/PopOver.module.css +3 -3
  102. package/lib/Radio/Radio.module.css +0 -1
  103. package/lib/Ribbon/Ribbon.module.css +0 -4
  104. package/lib/Switch/Switch.module.css +0 -2
  105. package/lib/Tag/Tag.module.css +0 -6
  106. package/lib/TextBox/TextBox.module.css +1 -21
  107. package/lib/TextBoxIcon/TextBoxIcon.module.css +0 -5
  108. package/lib/Textarea/Textarea.module.css +0 -6
  109. package/lib/common/customscroll.module.css +27 -3
  110. package/lib/v1/MultiSelect/props/defaultProps.js +4 -2
  111. package/package.json +10 -10
  112. package/result.json +1 -1
package/es/v1/Tab/Tabs.js CHANGED
@@ -1,5 +1,3 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  import React, { useState, useRef, useEffect, useCallback } from 'react';
4
2
  import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
5
3
  import Tab from './Tab';
@@ -394,7 +392,7 @@ const Tabs = props => {
394
392
  classProps.className = itemClass;
395
393
  }
396
394
 
397
- return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, _extends({}, child.props, {
395
+ return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(MainTab, { ...child.props,
398
396
  key: child.props.id,
399
397
  getTabRef: getTabRef,
400
398
  onSelect: onSelect // recalculateDimension={tabElement.current[recalculateDimension]}
@@ -405,22 +403,23 @@ const Tabs = props => {
405
403
  needBorder: needTabBorder,
406
404
  needAppearance: needAppearance,
407
405
  align: align,
408
- isVirtual: isVirtual
409
- }, classProps));
406
+ isVirtual: isVirtual,
407
+ ...classProps
408
+ });
410
409
  }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
411
410
  className: `${tabsStyle.menu} `,
412
411
  dataSelectorId: `${dataSelectorId}_moreIcon`
413
- }, /*#__PURE__*/React.createElement(Container, _extends({
412
+ }, /*#__PURE__*/React.createElement(Container, {
414
413
  className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
415
414
  align: "both",
416
415
  onClick: togglePopupLocal,
417
416
  dataId: "moreTabs",
418
- eleRef: getTargetRef
419
- }, MoreButtonProps, {
417
+ eleRef: getTargetRef,
418
+ ...MoreButtonProps,
420
419
  "aria-label": "MoreTabs",
421
420
  role: "link",
422
421
  tagName: "button"
423
- }), /*#__PURE__*/React.createElement(Icon, {
422
+ }, /*#__PURE__*/React.createElement(Icon, {
424
423
  name: iconName,
425
424
  size: iconSize
426
425
  })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -430,7 +429,7 @@ const Tabs = props => {
430
429
  let {
431
430
  tabletMode
432
431
  } = _ref2;
433
- return /*#__PURE__*/React.createElement(ResponsiveDropBox, _extends({
432
+ return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
434
433
  isActive: isPopupReady,
435
434
  isAnimate: true,
436
435
  size: "medium",
@@ -440,12 +439,12 @@ const Tabs = props => {
440
439
  boxPosition: position,
441
440
  getRef: getContainerRef,
442
441
  isBoxPaddingNeed: true,
443
- isArrow: false
444
- }, DropBoxProps, {
442
+ isArrow: false,
443
+ ...DropBoxProps,
445
444
  isResponsivePadding: true,
446
445
  needFocusScope: true,
447
446
  onClose: togglePopupLocal
448
- }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
447
+ }, getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(props), /*#__PURE__*/React.createElement(Box, {
449
448
  flexible: true,
450
449
  shrink: true,
451
450
  scroll: "vertical",
@@ -466,7 +465,7 @@ const Tabs = props => {
466
465
  dataId
467
466
  } = child.props;
468
467
  const value = text ? text : showTitleInMoreOptions ? title : null;
469
- return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, _extends({
468
+ return /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.createElement(ListItem, {
470
469
  key: id,
471
470
  value: value,
472
471
  onClick: moreTabSelect,
@@ -479,8 +478,9 @@ const Tabs = props => {
479
478
  customListItem: menuItemClass
480
479
  },
481
480
  target: "self",
482
- dataId: `${dataId}_Tab`
483
- }, ListItemProps), !showTitleInMoreOptions ? children : null);
481
+ dataId: `${dataId}_Tab`,
482
+ ...ListItemProps
483
+ }, !showTitleInMoreOptions ? children : null);
484
484
  })));
485
485
  })) : null);
486
486
  }
@@ -1,5 +1,3 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  import React, { memo, useRef, useCallback } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -113,7 +111,7 @@ function TextBox(props) {
113
111
 
114
112
  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.border : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect} ${isFocus ? style.focus : ''}` : `${style.basic}`;
115
113
  value = value === null || value === undefined ? '' : value;
116
- return /*#__PURE__*/React.createElement("input", _extends({
114
+ return /*#__PURE__*/React.createElement("input", {
117
115
  "aria-label": ariaLabel,
118
116
  "aria-invalid": ariaInvalid,
119
117
  "aria-autocomplete": ariaAutocomplete,
@@ -147,8 +145,10 @@ function TextBox(props) {
147
145
  value: value,
148
146
  onScroll: isScrollPrevent ? handlePreventTextBoxScroll : '',
149
147
  onKeyPress: onKeyPress,
150
- onMouseDown: onMouseDown
151
- }, options.current, customProps));
148
+ onMouseDown: onMouseDown,
149
+ ...options.current,
150
+ ...customProps
151
+ });
152
152
  }
153
153
 
154
154
  TextBox.defaultProps = defaultProps;
@@ -1,5 +1,3 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  import React, { useState, useRef, useCallback } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -98,7 +96,7 @@ export default function TextBoxIcon(props) {
98
96
  "data-title": isDisabled ? title : null
99
97
  }, /*#__PURE__*/React.createElement(Box, {
100
98
  flexible: true
101
- }, /*#__PURE__*/React.createElement(TextBox, _extends({}, props, {
99
+ }, /*#__PURE__*/React.createElement(TextBox, { ...props,
102
100
  dataId: dataId,
103
101
  size: size,
104
102
  variant: variant,
@@ -126,7 +124,7 @@ export default function TextBoxIcon(props) {
126
124
  isScrollPrevent: isScrollPrevent,
127
125
  customClass: customTextBox,
128
126
  customProps: TextBoxProps
129
- }))), /*#__PURE__*/React.createElement(Box, {
127
+ })), /*#__PURE__*/React.createElement(Box, {
130
128
  className: `${style.iconContainer} ${customTBoxIcon}`
131
129
  }, /*#__PURE__*/React.createElement(Container, {
132
130
  alignBox: "row"
@@ -1,5 +1,3 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  import React, { useRef } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -72,12 +70,12 @@ export default function Textarea(props) {
72
70
  }
73
71
 
74
72
  let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes.current[resize]] : style[resizes.current.none]} ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
75
- return /*#__PURE__*/React.createElement("textarea", _extends({
73
+ return /*#__PURE__*/React.createElement("textarea", {
76
74
  "aria-label": ariaLabel,
77
75
  "aria-labelledby": ariaLabelledby,
78
76
  className: `${customClass} ${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${classList} ${style[`borderColor_${borderColor}`]}`,
79
- placeholder: placeHolder
80
- }, options.current, {
77
+ placeholder: placeHolder,
78
+ ...options.current,
81
79
  "data-id": dataId,
82
80
  "data-test-id": dataId,
83
81
  maxLength: maxLength,
@@ -89,7 +87,7 @@ export default function Textarea(props) {
89
87
  value: text,
90
88
  id: htmlId,
91
89
  "data-selector-id": dataSelectorId
92
- }));
90
+ });
93
91
  }
94
92
  Textarea.defaultProps = defaultProps;
95
93
  Textarea.propTypes = propTypes; // if (__DOCS__) {
@@ -1,5 +1,3 @@
1
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  import React, { useContext } from 'react';
4
2
  import { defaultProps } from './props/defaultProps';
5
3
  import { propTypes } from './props/propTypes';
@@ -81,14 +79,15 @@ export default function VelocityAnimationGroup(props) {
81
79
  delay: exitDelay ? exitDelay : 0,
82
80
  display: 'none'
83
81
  };
84
- return /*#__PURE__*/React.createElement(VelocityTransitionGroup, _extends({
82
+ return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
85
83
  enter: enterAnimation,
86
84
  leave: exitAnimation,
87
85
  component: component && component,
88
86
  runOnMount: runOnMount,
89
87
  enterHideStyle: enterHideStyle,
90
- enterShowStyle: enterShowStyle
91
- }, childProps), isActive ? children : null);
88
+ enterShowStyle: enterShowStyle,
89
+ ...childProps
90
+ }, isActive ? children : null);
92
91
  }
93
92
  VelocityAnimationGroup.defaultProps = { ...defaultProps,
94
93
  component: React.Fragment
@@ -18,31 +18,19 @@
18
18
  composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
19
19
  vertical-align: middle;
20
20
  font-size: var(--avatar_font_size);
21
- /* css:theme-validation:ignore */
22
21
  color: var(--avatar_text_color);
23
22
  border-width: var(--avatar_border_width);
24
23
  border-style: var(--avatar_border_style);
25
24
  }
26
25
 
27
26
  .border {
28
- /* css:theme-validation:ignore */
29
27
  border-color: var(--avatar_border_color);
30
28
  }
31
29
 
32
- .borderOnHover:hover,
33
- .borderOnActive {
34
- /* css:theme-validation:ignore */
35
- }
36
-
37
30
  .borderOnHover:hover, .borderOnActive {
38
31
  border-color: var(--avatar_border_hoverColor);
39
32
  }
40
33
 
41
- .avatar,
42
- .primary {
43
- /* css:theme-validation:ignore */
44
- }
45
-
46
34
  .avatar, .primary {
47
35
  background-color: var(--avatar_bg_color);
48
36
  }
@@ -25,13 +25,10 @@
25
25
  composes: varClass;
26
26
  composes: posab from '../common/common.module.css';
27
27
  top: var(--avatarteam_top_top);
28
- /* css:theme-validation:ignore */
29
- /* css:theme-validation:ignore */
30
28
  width: var(--avatarteam_width);
31
29
  height: var(--avatarteam_height);
32
30
  outline-width: var(--avatarteam_outline_width);
33
31
  outline-style: var(--avatarteam_outline_style);
34
- /* css:theme-validation:ignore */
35
32
  outline-color: var(--avatarteam_outline_color);
36
33
  border-width: var(--avatarteam_border_width);
37
34
  border-style: var(--avatarteam_border_style);
@@ -76,7 +73,6 @@
76
73
  top: var(--avatarteam_bottom_top);
77
74
  outline-width: var(--avatarteam_outline_width);
78
75
  outline-style: var(--avatarteam_outline_style);
79
- /* css:theme-validation:ignore */
80
76
  outline-color: var( --avatarteam_outline_color);
81
77
  }
82
78
  .team:after, .team:before {
@@ -48,13 +48,10 @@
48
48
  composes: dotted from '../../common/common.module.css';
49
49
  position: relative;
50
50
  font-size: var(--button_font_size);
51
- /* css:theme-validation:ignore */
52
51
  color: var(--button_text_color);
53
52
  font-family: var(--button_font_family);
54
53
  text-transform: var(--button_text_transform);
55
- /* css:theme-validation:ignore */
56
54
  min-width: var(--button_min_width);
57
- /* css:theme-validation:ignore */
58
55
  height: var(--button_height);
59
56
  background-color: var(--button_bg_color);
60
57
  border-radius: var(--button_border_radius);
@@ -298,7 +295,6 @@
298
295
  .loadingelement:after {
299
296
  content: '';
300
297
  position: absolute;
301
- /* css:theme-validation:ignore */
302
298
  }
303
299
 
304
300
  .loadingelement:before, .loadingelement:after {
@@ -472,7 +468,6 @@
472
468
  transform-origin: center;
473
469
  border-width: 2px 2px 0 0;
474
470
  border-style: solid;
475
- /* css:theme-validation:ignore */
476
471
  border-color: var(--button_success_border_color);
477
472
  animation: tick var(--zd_no_transition3) ease 0s forwards;
478
473
  }
@@ -529,6 +524,5 @@
529
524
  }
530
525
 
531
526
  .loader{
532
- /* css:theme-validation:ignore */
533
527
  color:var(--dot_mirror)
534
528
  }
@@ -11,8 +11,6 @@
11
11
  .buttonGroup {
12
12
  composes: varClass;
13
13
  composes: cboth from '../common/common.module.css';
14
- /* css:theme-validation:ignore */
15
- /* css:theme-validation:ignore */
16
14
  background-color: var(--buttongroup_bg_color);
17
15
  box-shadow: var(--buttongroup_box_shadow);
18
16
  padding: var(--buttongroup_padding);
@@ -34,7 +34,6 @@
34
34
  }
35
35
  .boxContainer {
36
36
  composes: offSelection from '../common/common.module.css';
37
- /* css:theme-validation:ignore */
38
37
  border-radius: 2px;
39
38
  background-color: var(--checkbox_bg_color);
40
39
  }
@@ -121,7 +120,6 @@
121
120
 
122
121
  .checkedprimaryLabel,
123
122
  .checkeddangerLabel {
124
- /* css:theme-validation:ignore */
125
123
  color: var(--checkbox_checked_active_color);
126
124
  }
127
125
  .activeprimaryLabel:hover
@@ -36,7 +36,6 @@
36
36
  width: var(--zd_size28) ;
37
37
  height: var(--zd_size28) ;
38
38
  line-height: 1.3846;
39
- /* css:theme-validation:ignore */
40
39
  text-align: center;
41
40
  padding: var(--zd_size4) 0 ;
42
41
  border-radius: 50%;
@@ -18,11 +18,6 @@
18
18
  box-shadow: var(--dropbox_box_shadow);
19
19
  }
20
20
 
21
- .defaultPalette,
22
- .darkPalette {
23
- /* css:theme-validation:ignore */
24
- }
25
-
26
21
  .defaultPalette, .darkPalette {
27
22
  background-color: var(--dropbox_bg_color);
28
23
  }
@@ -212,7 +207,6 @@
212
207
  height: var(--zd_size10) ;
213
208
  width: var(--zd_size10) ;
214
209
  box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
215
- /* css:theme-validation:ignore */
216
210
  background-color: var(--dropbox_bg_color);
217
211
  -webkit-transform: rotateZ(-45deg);
218
212
  transform: rotateZ(-45deg);
@@ -422,7 +416,6 @@
422
416
  .closeBar {
423
417
  /* Variable:Ignore */
424
418
  height: 6px;
425
- /* css:theme-validation:ignore */
426
419
  width: 20% ;
427
420
  border-radius: 5px;
428
421
  background-color: var(--dropbox_mob_close_bg_color);
@@ -49,7 +49,6 @@
49
49
 
50
50
  .freeze {
51
51
  composes: varClass;
52
- /* css:theme-validation:ignore */
53
52
  background: var(--dropbox_mob_bg_color);
54
53
  }
55
54
 
@@ -18,9 +18,7 @@
18
18
  font-size: var(--zd_font_size11) ;
19
19
  letter-spacing: 0.6px;
20
20
  text-transform: var(--dropdownheading_text_transform);
21
- /* css:theme-validation:ignore */
22
21
  color: var(--dropdownheading_text_color);
23
- /* css:theme-validation:ignore */
24
22
  padding: var(--dropdownheading_padding);
25
23
  background-color: var(--dropdownheading_bg_color);
26
24
  }
@@ -35,10 +33,6 @@
35
33
  .light {
36
34
  composes: default;
37
35
  }
38
- .light::after,
39
- .dark::after {
40
- /* css:theme-validation:ignore */
41
- }
42
36
  .light::after, .dark::after {
43
37
  background-color: var(--dropdownheading_underline_bg_color);
44
38
  }
@@ -20,8 +20,6 @@
20
20
  position: relative;
21
21
  color: var(--zdt_dropdown_default_text);
22
22
  font-size: var(--zd_font_size13) ;
23
- /* css:theme-validation:ignore */
24
- /* css:theme-validation:ignore */
25
23
  padding: var(--dropdownitem-padding);
26
24
  border-style: solid;
27
25
  border-color: var(--dropdownitem-border-color);
@@ -76,7 +74,6 @@
76
74
  opacity: 0;
77
75
  visibility: hidden;
78
76
  width: var(--dropdownitem-user-width);
79
- /* css:theme-validation:ignore */
80
77
  border-width: var(--dropdownitem-user-border-width);
81
78
  border-style: var(--dropdownitem-user-border-style);
82
79
  border-color: var(--dropdownitem-user-border-color);
@@ -12,7 +12,6 @@
12
12
  vertical-align: middle;
13
13
  line-height: var(--label_line_height);
14
14
  font-size: var(--label_font_size);
15
- /* css:theme-validation:ignore */
16
15
  color: var(--label_text_color);
17
16
  font-family: var(--label_font_family);
18
17
  cursor: var(--label_cursor);
@@ -23,10 +23,8 @@
23
23
  composes: varClass;
24
24
  position: relative;
25
25
  list-style: none;
26
- /* css:theme-validation:ignore */
27
26
  color: var(--listitem_text_color);
28
27
  font-size: var(--zd_font_size13) ;
29
- /* css:theme-validation:ignore */
30
28
  height: var(--listitem_height);
31
29
  min-height: var(--listitem_min_height);
32
30
  text-decoration: none;
@@ -36,11 +34,6 @@
36
34
  border-color: var(--listitem_border_color);
37
35
  cursor: pointer;
38
36
  }
39
- .list,
40
- .default,
41
- .secondary {
42
- /* css:theme-validation:ignore */
43
- }
44
37
  .list, .default, .secondary {
45
38
  background-color: var(--listitem_bg_color);
46
39
  }
@@ -101,13 +94,6 @@
101
94
  margin: var(--listitem_avatar_margin);
102
95
  }
103
96
 
104
- .defaultHover,
105
- .primaryHover,
106
- .secondaryHover,
107
- .darkHover {
108
- /* css:theme-validation:ignore */
109
- }
110
-
111
97
  .defaultHover, .primaryHover, .secondaryHover, .darkHover {
112
98
  background-color: var(--listitem_highlight_bg_color);
113
99
  }
@@ -149,12 +135,6 @@
149
135
  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
150
136
  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
151
137
  }
152
- .activedefault,
153
- .activeprimary,
154
- .activesecondary,
155
- .activedark {
156
- /* css:theme-validation:ignore */
157
- }
158
138
  .activedefault, .activeprimary, .activesecondary, .activedark {
159
139
  background-color: var(--listitem_active_bg_color);
160
140
  }
@@ -180,7 +160,6 @@
180
160
  .defaultTick,
181
161
  .darkTick {
182
162
  position: absolute;
183
- /* css:theme-validation:ignore */
184
163
  color: var(--listitem_tickicon_color);
185
164
  }
186
165
 
@@ -120,7 +120,8 @@ var MultiSelect_defaultProps = {
120
120
  dataSelectorId: 'multiSelect',
121
121
  keepSelectedOptions: false,
122
122
  selectedOptionsCount: 0,
123
- cardHeaderName: ''
123
+ cardHeaderName: '',
124
+ needResponsive: true
124
125
  };
125
126
  exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
126
127
  var MultiSelectHeader_defaultProps = {
@@ -156,7 +157,8 @@ var MultiSelectWithAvatar_defaultProps = {
156
157
  isLoading: false,
157
158
  dataSelectorId: 'multiSelectWithAvatar',
158
159
  keepSelectedOptions: false,
159
- customProps: {}
160
+ customProps: {},
161
+ needResponsive: true
160
162
  };
161
163
  exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
162
164
  var SelectedOptions_defaultProps = {
@@ -1,9 +1,9 @@
1
1
  .popup {
2
2
  position: relative;
3
- /* css:theme-validation:ignore */
4
- background-color: var(--dot_white);
3
+ background-color: var(--zdt_popover_default_bg);
5
4
  }
5
+
6
6
  .target {
7
7
  composes: offSelection from '../common/common.module.css';
8
8
  cursor: pointer;
9
- }
9
+ }
@@ -28,7 +28,6 @@
28
28
  composes: offSelection from '../common/common.module.css';
29
29
  width: var(--radio_width);
30
30
  height: var(--radio_height);
31
- /* css:theme-validation:ignore */
32
31
  stroke: var(--radio_stroke_color);
33
32
  background: var(--radio_bg_color);
34
33
  border-radius: 50%;
@@ -36,12 +36,9 @@
36
36
  .basic {
37
37
  composes: varClass;
38
38
  position: relative;
39
- /* css:theme-validation:ignore */
40
39
  color: var(--ribbon_text_color);
41
40
  text-transform: var(--ribbon_text_transform);
42
41
  font-size: var(--ribbon_font_size);
43
- /* css:theme-validation:ignore */
44
- /* css:theme-validation:ignore */
45
42
  line-height: var(--ribbon_line_height);
46
43
  padding: var(--ribbon_padding);
47
44
  background-color: var(--ribbon_bg_color);
@@ -368,7 +365,6 @@
368
365
  position: absolute;
369
366
  content: '';
370
367
  top: var(--ribbon_tag_before_top);
371
- /* css:theme-validation:ignore */
372
368
  width: var(--ribbon_tag_before_width);
373
369
  height: var(--ribbon_tag_before_height);
374
370
  background-color: inherit;
@@ -26,7 +26,6 @@
26
26
  display: inline-block;
27
27
  position: relative;
28
28
  transition: box-shadow var(--zd_transition3) ease-in-out;
29
- /* css:theme-validation:ignore */
30
29
  background-color: var(--switch_off_bg_color);
31
30
  border-radius: 20px;
32
31
  cursor: pointer;
@@ -45,7 +44,6 @@
45
44
  right: 50% ;
46
45
  transition: all var(--zd_transition2);
47
46
  box-shadow: var(--switch_cricle_box_shadow);
48
- /* css:theme-validation:ignore */
49
47
  background-color: var(--switch_circle_bg_color);
50
48
  border-radius: var(--switch_circle_border_radius);
51
49
  }
@@ -34,13 +34,10 @@
34
34
  composes: dInflex alignVertical flexrow from '../common/common.module.css';
35
35
  position: relative;
36
36
  vertical-align: middle;
37
- /* css:theme-validation:ignore */
38
37
  color: var(--tag_text_color);
39
- /* css:theme-validation:ignore */
40
38
  font-size: var(--tag_font_size);
41
39
  letter-spacing: var(--tag_letter_spacing);
42
40
  height: var(--tag_height);
43
- /* css:theme-validation:ignore */
44
41
  max-width: 100% ;
45
42
  background-color: var(--tag_bg_color);
46
43
  border-radius: var(--tag_border_radius);
@@ -125,13 +122,11 @@
125
122
  display: block;
126
123
  }
127
124
  .close {
128
- /* css:theme-validation:ignore */
129
125
  color: var(--tag_closeicon_color);
130
126
  display: none;
131
127
  position: absolute;
132
128
  top: 0 ;
133
129
  bottom: 0 ;
134
- /* css:theme-validation:ignore */
135
130
  padding: var(--tag_closeicon_padding);
136
131
  cursor: var(--tag_closeicon_cursor);
137
132
  border-radius: var(--tag_closeicon_border_radius);
@@ -229,7 +224,6 @@
229
224
  }
230
225
 
231
226
  .icon {
232
- /* css:theme-validation:ignore */
233
227
  margin: var(--tag_icon_margin);
234
228
  background-color: var(--tag_icon_bg_color);
235
229
  }
@@ -32,36 +32,30 @@
32
32
  }
33
33
 
34
34
  .basic::placeholder {
35
- /* css:theme-validation:ignore */
36
35
  color: var(--textbox_placeholder_text_color);
37
36
  }
38
37
 
39
38
  .basic::-webkit-placeholder {
40
- /* css:theme-validation:ignore */
41
39
  color: var(--textbox_placeholder_text_color);
42
40
  }
43
41
 
44
42
  .basic::-moz-placeholder {
45
- /* css:theme-validation:ignore */
46
43
  color: var(--textbox_placeholder_text_color);
47
44
  }
48
45
 
49
46
  .basic::-ms-placeholder {
50
- /* css:theme-validation:ignore */
51
47
  color: var(--textbox_placeholder_text_color);
52
48
  }
49
+
53
50
  /* css:lineheight-validation:ignore */
54
51
  .container {
55
52
  composes: basic;
56
- /* css:theme-validation:ignore */
57
53
  transition: border var(--zd_transition2) linear 0s;
58
54
  -moz-transition: border var(--zd_transition2) linear 0s;
59
55
  width: var(--textbox_width);
60
- /* css:theme-validation:ignore */
61
56
  color: var(--textbox_text_color);
62
57
  font-size: var(--textbox_font_size);
63
58
  height: var(--textbox_height);
64
- /* css:theme-validation:ignore */
65
59
  line-height: var(--textbox_line_height);
66
60
  background-color: var(--textbox_bg_color);
67
61
  -webkit-transition: border var(--zd_transition2) linear 0s;
@@ -85,22 +79,18 @@
85
79
  }
86
80
 
87
81
  .container::placeholder {
88
- /* css:theme-validation:ignore */
89
82
  color: var(--textbox_placeholder_text_color);
90
83
  }
91
84
 
92
85
  .container::-webkit-placeholder {
93
- /* css:theme-validation:ignore */
94
86
  color: var(--textbox_placeholder_text_color);
95
87
  }
96
88
 
97
89
  .container::-moz-placeholder {
98
- /* css:theme-validation:ignore */
99
90
  color: var(--textbox_placeholder_text_color);
100
91
  }
101
92
 
102
93
  .container::-ms-placeholder {
103
- /* css:theme-validation:ignore */
104
94
  color: var(--textbox_placeholder_text_color);
105
95
  }
106
96
 
@@ -114,11 +104,6 @@
114
104
  border-style: var(--textbox_border_style);
115
105
  }
116
106
 
117
- .effect:hover,
118
- .effect:focus {
119
- /* css:theme-validation:ignore */
120
- }
121
-
122
107
  .effect:hover, .effect:focus {
123
108
  border-color: var(--textbox_border_color);
124
109
  }
@@ -127,11 +112,6 @@
127
112
  --textbox_border_width: 0 0 1px 0;
128
113
  }
129
114
 
130
- .borderColor_transparent,
131
- .borderColor_default {
132
- /* css:theme-validation:ignore */
133
- }
134
-
135
115
  .borderColor_transparent, .borderColor_default {
136
116
  border-color: var(--textbox_border_color);
137
117
  }