@zohodesk/dot 1.4.0 → 1.4.2

package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

@@ -5,32 +5,29 @@
     composes: varClass;
     min-height: var(--zd_size54) ;
     position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
     color: var(--zdt_desktopnotification_text);
     background-color: var(--alert_lookup_bg_color);
     border-style: solid;
     border-color: var(--commonalert_border_color);
     border-width: 2px 0 0 0;
   }
-  
+
   .title {
-    font-size: var(--zd_font_size18) ;
-    line-height: var(--zd_size22);
-    font-family: var(--zd_bold);
-    composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
+    composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
   }
-  
+
   [dir=ltr] .title {
   margin: 0 var(--zd_size5) 0 var(--zd_size10) ;
   }
-  
+
   [dir=rtl] .title {
     margin: 0 var(--zd_size10) 0 var(--zd_size5) ;
   }
 
   .infoText {
-    font-size: var(--zd_font_size14) ;
     max-width: 100% ;
-    composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
   }
 
   /* Palette */
@@ -38,19 +35,19 @@
   .success {
     --commonalert_border_color: var(--zdt_commonalert_success_border);
   }
-  
+
   .info,.notification,.alarm {
     --commonalert_border_color: var(--zdt_commonalert_info_border);
   }
-  
+
   .danger {
     --commonalert_border_color: var(--zdt_commonalert_danger_border);
   }
-  
+
   .error {
     --commonalert_border_color: var(--zdt_commonalert_error_border);
   }
-  
+
   .warning {
     --commonalert_border_color: var(--zdt_commonalert_warning_border);
   }
@@ -72,16 +69,16 @@
 .primary .infoText {
     line-height: var(--zd_size18);
   }
-  
+
   .primary .close {
     position: absolute;
     top: var(--zd_size12) ;
   }
-  
+
   [dir=ltr] .primary .close {
   right: var(--zd_size12) ;
   }
-  
+
   [dir=rtl] .primary .close {
     left: var(--zd_size12) ;
   }
@@ -134,4 +131,4 @@
   [dir=rtl] .secondary .close {
     left: var(--zd_size12) ;
     margin: auto var(--zd_size25) auto 0 ;
-  }
+  }

package/es/version2/notification/DesktopNotificationHeader/props/defaultProps.js

@@ -1,5 +1,7 @@
+import { getDotLibraryConfig } from '../../../../Provider/Config';
 export const defaultProps = {
   needIcon: true,
   variant: 'primary',
-  needClose: true
+  needClose: true,
+  responsiveId: getDotLibraryConfig('desktopNotificationResponsiveId')
 };

package/es/version2/notification/DesktopNotificationHeader/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   onClose: PropTypes.func,
   title: PropTypes.string,
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary'])
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  responsiveId: PropTypes.string
 };

package/lib/ActionButton/ActionButton.js

@@ -63,48 +63,57 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
+    _this.handlePopupOpen = _this.handlePopupOpen.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(ActionButton, [{
-    key: "handleTogglePopup",
-    value: function handleTogglePopup(e) {
+    key: "handlePopupOpen",
+    value: function handlePopupOpen(e) {
       var _this$props = this.props,
-          togglePopup = _this$props.togglePopup,
+          openPopupOnly = _this$props.openPopupOnly,
           defaultPosition = _this$props.defaultPosition;
+      openPopupOnly(e, defaultPosition);
+    }
+  }, {
+    key: "handleTogglePopup",
+    value: function handleTogglePopup(e) {
+      var _this$props2 = this.props,
+          togglePopup = _this$props2.togglePopup,
+          defaultPosition = _this$props2.defaultPosition;
       togglePopup(e, defaultPosition);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          isLoading = _this$props2.isLoading,
-          onClick = _this$props2.onClick,
-          size = _this$props2.size,
-          dataId = _this$props2.dataId,
-          dataSelectorId = _this$props2.dataSelectorId,
-          isArrow = _this$props2.isArrow,
-          text = _this$props2.text,
-          subText = _this$props2.subText,
-          arrowBoxSize = _this$props2.arrowBoxSize,
-          palette = _this$props2.palette,
-          onHover = _this$props2.onHover,
-          position = _this$props2.position,
-          className = _this$props2.className,
-          iconName = _this$props2.iconName,
-          iconSize = _this$props2.iconSize,
-          dataTitle = _this$props2.dataTitle,
-          isDisabled = _this$props2.isDisabled,
-          isPopupOpen = _this$props2.isPopupOpen,
-          removeClose = _this$props2.removeClose,
-          children = _this$props2.children,
-          dropBoxClass = _this$props2.dropBoxClass,
-          isBoxPaddingNeed = _this$props2.isBoxPaddingNeed,
-          getContainerRef = _this$props2.getContainerRef,
-          getTargetRef = _this$props2.getTargetRef,
-          removeChildrenTooltip = _this$props2.removeChildrenTooltip,
-          innerClassName = _this$props2.innerClassName,
-          popupGroup = _this$props2.popupGroup;
+      var _this$props3 = this.props,
+          isLoading = _this$props3.isLoading,
+          onClick = _this$props3.onClick,
+          size = _this$props3.size,
+          dataId = _this$props3.dataId,
+          dataSelectorId = _this$props3.dataSelectorId,
+          isArrow = _this$props3.isArrow,
+          text = _this$props3.text,
+          subText = _this$props3.subText,
+          arrowBoxSize = _this$props3.arrowBoxSize,
+          palette = _this$props3.palette,
+          onHover = _this$props3.onHover,
+          position = _this$props3.position,
+          className = _this$props3.className,
+          iconName = _this$props3.iconName,
+          iconSize = _this$props3.iconSize,
+          dataTitle = _this$props3.dataTitle,
+          isDisabled = _this$props3.isDisabled,
+          isPopupOpen = _this$props3.isPopupOpen,
+          removeClose = _this$props3.removeClose,
+          children = _this$props3.children,
+          dropBoxClass = _this$props3.dropBoxClass,
+          isBoxPaddingNeed = _this$props3.isBoxPaddingNeed,
+          getContainerRef = _this$props3.getContainerRef,
+          getTargetRef = _this$props3.getTargetRef,
+          removeChildrenTooltip = _this$props3.removeChildrenTooltip,
+          innerClassName = _this$props3.innerClassName,
+          popupGroup = _this$props3.popupGroup;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
@@ -152,7 +161,7 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         "data-title": removeChildrenTooltip ? null : subText,
         className: _ActionButtonModule["default"].subTxt
       }, subText) : null)), children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        onClick: onClick ? !onHover && this.handleTogglePopup : undefined,
+        onClick: onClick && !onHover ? this.handleTogglePopup : this.handlePopupOpen,
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),

package/lib/ActionButton/ActionButton.module.css

@@ -13,12 +13,14 @@
   --buttonText: var(--zdt_actionButton_primaryFilled_text);
 }
 .primaryFilledBtn, .primaryFilledArw {
+  /* css:theme-validation:ignore */
   background-color: var(--buttonBg);
 }
 .primaryBox {
   --buttonText: var(--zdt_actionButton_primary_text);
 }
 .primaryBtn, .primaryArw {
+  /* css:theme-validation:ignore */
   border: 1px solid var(--buttonBorder);
 }
 [dir=ltr] .primaryBtn {
@@ -81,6 +83,7 @@
 .txt,
 .subTxt {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
 .arrowWrapper {
@@ -94,6 +97,9 @@
 [dir=rtl] .arrowWrapper {
   border-radius: var(--zd_size4) 0 0 var(--zd_size4);
 }
+.primaryFilledArw {
+  /* css:theme-validation:ignore */
+}
 [dir=ltr] .primaryFilledArw {
   border-left: 1px solid var(--buttonSeparatorBorder);
 }
@@ -129,6 +135,7 @@
 }
 .arrow,
 .iconClr {
+  /* css:theme-validation:ignore */
   color: var(--buttonText);
 }
 [dir=ltr] .iconMrgn {

package/lib/ActionButton/props/propTypes.js

@@ -38,6 +38,7 @@ var propTypes = {
   removeChildrenTooltip: _propTypes["default"].bool,
   innerClassName: _propTypes["default"].string,
   popupGroup: _propTypes["default"].string,
-  togglePopup: _propTypes["default"].func
+  togglePopup: _propTypes["default"].func,
+  openPopupOnly: _propTypes["default"].func
 };
 exports.propTypes = propTypes;

package/lib/AlphabeticList/AlphabeticList.module.css

@@ -33,6 +33,7 @@
 .list {
   font-size: var(--zd_font_size11) ;
   flex-basis: var(--zd_size12) ;
+  /* css:theme-validation:ignore */
   color: var(--textColor);
   text-align: center;
   cursor: pointer;
@@ -49,6 +50,7 @@
 }
 .list :hover,
 .selected {
+  /* css:theme-validation:ignore */
   color: var(--textHoverColor);
 }
 .title {

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -154,6 +154,7 @@
 .imgItem {
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
+  /* css:theme-validation:ignore */
     position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
@@ -345,6 +346,7 @@
 }
 
 .btn {
+  /* css:theme-validation:ignore */
     height: 100% ;
     width: 100% ;
     background-color: var(--dot_mirror);

package/lib/ChannelIcon/ChannelIcon.module.css

@@ -16,6 +16,7 @@
   top: calc( var(--zd_size4) * -1 ) ;
   height: var(--zd_size15) ;
   width: var(--zd_size15) ;
+  /* css:theme-validation:ignore */
   background-color: var(--topIconBg);
 }
 [dir=ltr] .thread {
@@ -25,10 +26,12 @@
   left: calc( var(--zd_size1) * -1 ) ;
 }
 .threadBorder {
+  /* css:theme-validation:ignore */
   border: 1px solid var(--topIconBorderColor);
 }
 .iconStyle {
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--iconColor);
 }
 
@@ -213,5 +216,6 @@
   --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
 }
 .topicIcon {
+  /* css:theme-validation:ignore */
   color: var(--topIconColor);
 }

package/lib/Drawer/Drawer.js

@@ -130,10 +130,7 @@ var Header = /*#__PURE__*/function (_React$Component) {
         shrink: true
       }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
         title: title,
-        className: _DrawerModule["default"].title,
-        a11y: {
-          tabindex: '0'
-        }
+        className: _DrawerModule["default"].title
       })) : null, getTitleChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children) : null)), onClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         onClick: onClose,
         dataId: "closeButton",
@@ -268,7 +265,7 @@ var Drawer = /*#__PURE__*/function (_React$Component4) {
           _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
           needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-          needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
+          needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
       var childrenWithProps = _react["default"].Children.map(children, function (child) {
         if (child.type === Header || child.type === Footer || child.type === Content) {

package/lib/FormAction/FormAction.module.css

@@ -9,6 +9,8 @@
 }
 .footerParent {
   position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   background-color: var(--footerBg);
   border-top: solid 1px var(--footerBorder);
 }

package/lib/IconButton/IconButton.module.css

@@ -6,6 +6,7 @@
   width: var(--zd_size28) ;
   composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--iconColor);
   cursor: pointer;
 }

package/lib/Link/Link.js

@@ -141,8 +141,7 @@ var Link = /*#__PURE__*/function (_React$Component) {
       }, others, {
         onClick: this.onCallBack.bind(this, urlOutput, href)
       }, customProps, {
-        "aria-label": ariaLabel,
-        tabIndex: "0"
+        "aria-label": ariaLabel
       }), children);
     }
   }]);

package/lib/Provider/Config.js

@@ -16,7 +16,8 @@ var config = {
     left: 0,
     right: 0,
     bottom: 0
-  }
+  },
+  desktopNotificationResponsiveId: 'Helmet'
 };
 
 function getDotLibraryConfig(key) {

package/lib/TagWithIcon/TagWithIcon.module.css

@@ -5,52 +5,66 @@
   --tag_small_fontSize: var(--zd_font_size10);
   --tag_large_fontSize: var(--zd_font_size12);
 }
+
 .wrapper {
   composes: varClass;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
   color: var(--tag_text_color);
   background-color: var(--tag_bg_color);
 }
+
 .small,
 .large {
+  /* css:theme-validation:ignore */
   max-width: 100% ;
   height: var(--zd_size18) ;
 }
+
 .small, .large {
-  border: 1px solid;
-  border-color: var(--tag_border_color);
+  border: 1px solid var(--tag_border_color);
   border-radius: var(--zd_size4);
   padding: 0 var(--zd_size6) ;
 }
+
 .bold {
   composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 .small_text {
   font-size: var(--tag_small_fontSize);
 }
+
 .large_text {
   font-size: var(--tag_large_fontSize);
 }
+
 .text {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-[dir=ltr] .iconSpace{
+
+[dir=ltr] .iconSpace {
   margin-right: var(--zd_size4) ;
 }
-[dir=rtl] .iconSpace{
+
+[dir=rtl] .iconSpace {
   margin-left: var(--zd_size4) ;
 }
+
 .yellow {
   --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
   --tag_text_color: var(--zdt_tagWithIconYellow_text);
   --tag_border_color: var(--zdt_tagWithIconYellow_border);
 }
+
 .grey {
   --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
   --tag_text_color: var(--zdt_tagWithIconGrey_text);
   --tag_border_color: var(--zdt_tagWithIconGrey_border);
 }
+
 .blue {
   --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
   --tag_text_color: var(--zdt_tagWithIconBlue_text);
   --tag_border_color: var(--zdt_tagWithIconBlue_border);
-}
+}

package/lib/avatar/AvatarIcon/AvatarIcon.module.css

@@ -6,11 +6,16 @@
 .container {
   vertical-align: middle;
   composes: varClass;
+  /* css:theme-validation:ignore */
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
   border-color: var(--border_color)
 }
+.borderOnHover:hover,
+.borderOnActive {
+  /* css:theme-validation:ignore */
+}
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--border_hoverColor)
 }
@@ -35,6 +40,7 @@
   --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
 }
 .iconColor {
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
 }
 .icon_danger {

package/lib/avatar/AvatarStatus/AvatarStatus.js

@@ -82,7 +82,6 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_AvatarStatusModule["default"].container, " ").concat(className, " ")
       }, AvatarStatusProps, {
-        tabIndex: "0",
         "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle),
         "data-selector-id": dataSelectorId
       }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({

package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -21,6 +21,7 @@
 }
 .title {
   font-family: var(--zd_semibold);
+  /* css:theme-validation:ignore */
   color: var(--titleColor);
 }
 .small .title {
@@ -31,6 +32,7 @@
 }
 .linkWrapper,
 .linkDescWrapper {
+  /* css:theme-validation:ignore */
   color: var(--descriptionColor);
 }
 .small .linkWrapper,
@@ -60,11 +62,13 @@
   line-height: var(--zd_size19);
 }
 .link {
+  /* css:theme-validation:ignore */
   color: var(--linkColor);
   display: inline-block;
   cursor: pointer;
 }
 .link:hover {
+  /* css:theme-validation:ignore */
   color: var(--linkHoverColor);
 }
 .children {

package/lib/form/fields/ValidationMessage/ValidationMessage.module.css

@@ -5,6 +5,7 @@
   display: inline;
 }
 .icon{
+  /* css:theme-validation:ignore */
   color:var(--label_text_color);
   display: inline-block;
   margin: 0 var(--zd_size5) ;

package/lib/layout/SubtabLayout/SubtabLayout.module.css

@@ -48,6 +48,7 @@
 }
 
 .tertiary_borderStyle {
+  /* css:theme-validation:ignore */
   border-bottom: 1px solid var(--borderColor);
 }
 
@@ -149,6 +150,7 @@
 
 .footer {
   composes: varClass;
+  /* css:theme-validation:ignore */
   border-top: 1px solid var(--borderColor);
 }
 

package/lib/list/Comment/Comment.module.css

@@ -5,6 +5,7 @@
   composes: varClass;
   composes: inlineBlockMiddle from '../listCommon.module.css';
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   padding: 0 var(--zd_size2) ;
   cursor: pointer;

package/lib/list/Dot/Dot.module.css

@@ -4,6 +4,7 @@
 .dot {
   composes: varClass;
   font-size: var(--zd_font_size16) ;
+  /* css:theme-validation:ignore */
   color: var(--dotColor);
   transform: perspective(1px);
 }

package/lib/list/ListLayout/ListLayout.js

@@ -89,7 +89,7 @@ var ListLayout = /*#__PURE__*/function (_Component) {
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,
-        tabIndex: "0",
+        tabIndex: onClick ? '0' : null,
         role: role,
         "data-a11y-inset-focus": true,
         "aria-label": ariaLabel,

package/lib/list/ListLayout/ListLayout.module.css

@@ -35,10 +35,22 @@
   padding: var(--zd_size2) 0 ;
 }
 
+.compact .innerContainer,
+.classic .innerContainer,
+.superCompact .innerContainer {
+  /* css:theme-validation:ignore */
+}
+
 .compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
   border-bottom: 1px dotted var(--listBorder);
 }
 
+.compact,
+.classic,
+.superCompact {
+  /* css:theme-validation:ignore */
+}
+
 [dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
   border-left: var(--zd_size2) solid transparent;
 }

package/lib/list/Subject/Subject.module.css

@@ -3,6 +3,7 @@
 }
 .subject {
   composes: varClass;
+  /* css:theme-validation:ignore */
   color: var(--subject_text);
   display: block;
 }

package/lib/list/Thread/Thread.module.css

@@ -4,6 +4,7 @@
 .container {
   composes: varClass;
   position: relative;
+  /* css:theme-validation:ignore */
   color: var(--icon_color);
   cursor: pointer;
 }

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -404,8 +404,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         onClick: removeClose,
         disabled: isDisabled || isReadOnly ? true : false,
-        "aria-haspopup": true,
-        "aria-expanded": isPopupOpen && isEditable ? true : false,
+        "aria-haspopup": isSearch ? 'listbox' : 'menu',
+        "aria-expanded": isPopupReady && isEditable ? true : false,
         tabIndex: tabIndex,
         "aria-labelledby": ariaLabelledby,
         "aria-label": ariaLabel,
@@ -462,10 +462,10 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           inputRef: _this3.searchInputRef,
           onKeyDown: _this3.handleKeyDown,
           a11y: {
-            ariaHaspopup: true,
-            ariaExpanded: true,
+            ariaHaspopup: isSearch ? 'listbox' : 'menu',
+            ariaExpanded: isPopupReady,
             role: 'combobox',
-            ariaActivedescendant: value,
+            ariaActivedescendant: isPopupReady ? value : '',
             ariaOwns: ariaTitleId
           }
         })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -487,7 +487,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           onScroll: _this3.handleScroll,
           role: isSearch ? 'listbox' : 'menu',
           "aria-labelledby": ariaTitleId,
-          tabindex: "0"
+          tabindex: "-1"
         }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: i

package/lib/lookup/Lookup/Lookup.js

@@ -119,7 +119,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
           _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
           needFocusLoop = _focusScopeProps$need4 === void 0 ? true : _focusScopeProps$need4,
           _focusScopeProps$need5 = focusScopeProps.needEnterAction,
-          needEnterAction = _focusScopeProps$need5 === void 0 ? false : _focusScopeProps$need5;
+          needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
 
       var content = /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.createRef,

package/lib/setup/header/Search/Search.module.css

@@ -35,6 +35,7 @@
   font-size: var(--zd_font_size13) ;
   width: 100% ;
   letter-spacing: 0.2px;
+  /* css:theme-validation:ignore */
   transition: all var(--zd_transition3) ease;
   color: var(--zdt_search_input_text);
   font-family: var(--zd_regular);