@zohodesk/dot 1.9.17 → 1.9.19

package/es/lookup/header/ModuleHeader/__tests__/__snapshots__/ModuleHeader.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ModuleHeader snapshot -  Render with childNearTitle 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -13,13 +13,13 @@ exports[`ModuleHeader snapshot -  Render with childNearTitle 1`] = `
       Near title
     </span>
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -39,20 +39,20 @@ exports[`ModuleHeader snapshot -  Render with childNearTitle 1`] = `
 exports[`ModuleHeader snapshot -  Render with children 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -75,20 +75,20 @@ exports[`ModuleHeader snapshot -  Render with children 1`] = `
 exports[`ModuleHeader snapshot -  Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default custom-container"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default custom-container"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title custom-title"
+        class="d-flex d-flex-row d-items-center title custom-title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -106,7 +106,7 @@ exports[`ModuleHeader snapshot -  Render with customClass 1`] = `
     >
       <button
         aria-pressed="false"
-        class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+        class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
         data-id="close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -114,7 +114,7 @@ exports[`ModuleHeader snapshot -  Render with customClass 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross icon_button_center"
+          class="zd_font_icons ff icon-cross basic d-inline-block d-align-middle icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -129,20 +129,20 @@ exports[`ModuleHeader snapshot -  Render with customClass 1`] = `
 exports[`ModuleHeader snapshot -  Render with customProps for sub-components 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center container default"
+    class="d-flex d-flex-row d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="custom-titleWrapper"
         data-selector-id="container"
         data-test-id="custom-titleWrapper"
@@ -159,37 +159,37 @@ exports[`ModuleHeader snapshot -  Render with customProps for sub-components 1`]
       </div>
     </div>
     <div
-      class="noShrink searchContainer searchContainer"
+      class="d-flex-shrink-0 searchContainer searchContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center wrapper boxType"
+        class="d-flex d-flex-row d-items-center wrapper boxType"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-search searchIcon searchIconBox"
+          class="zd_font_icons ff icon-search basic d-inline-block d-align-middle searchIcon searchIconBox"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
           style="--zd-iconfont-size: var(--zd_font_size11);"
         />
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row varClass customContainer effect container"
+            class="d-flex d-flex-row varClass customContainer effect container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -206,13 +206,13 @@ exports[`ModuleHeader snapshot -  Render with customProps for sub-components 1`]
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -227,7 +227,7 @@ exports[`ModuleHeader snapshot -  Render with customProps for sub-components 1`]
     >
       <button
         aria-pressed="false"
-        class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+        class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
         data-id="custom-close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -235,7 +235,7 @@ exports[`ModuleHeader snapshot -  Render with customProps for sub-components 1`]
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross icon_button_center"
+          class="zd_font_icons ff icon-cross basic d-inline-block d-align-middle icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -250,20 +250,20 @@ exports[`ModuleHeader snapshot -  Render with customProps for sub-components 1`]
 exports[`ModuleHeader snapshot -  Render with dataId 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="module-header-dataId"
     data-selector-id="container"
     data-test-id="module-header-dataId"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -283,20 +283,20 @@ exports[`ModuleHeader snapshot -  Render with dataId 1`] = `
 exports[`ModuleHeader snapshot -  Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -314,20 +314,20 @@ exports[`ModuleHeader snapshot -  Render with default props 1`] = `
 exports[`ModuleHeader snapshot -  Render with htmlId 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -348,20 +348,20 @@ exports[`ModuleHeader snapshot -  Render with htmlId 1`] = `
 exports[`ModuleHeader snapshot -  Render with isDraggable=false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="false"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -379,20 +379,20 @@ exports[`ModuleHeader snapshot -  Render with isDraggable=false 1`] = `
 exports[`ModuleHeader snapshot -  Render with miniDescription 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -415,20 +415,20 @@ exports[`ModuleHeader snapshot -  Render with miniDescription 1`] = `
 exports[`ModuleHeader snapshot -  Render with needSearch=true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -440,29 +440,29 @@ exports[`ModuleHeader snapshot -  Render with needSearch=true 1`] = `
       </div>
     </div>
     <div
-      class="noShrink searchContainer searchContainer"
+      class="d-flex-shrink-0 searchContainer searchContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center wrapper borderType"
+        class="d-flex d-flex-row d-items-center wrapper borderType"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="flexible basis_zero noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex row varClass customContainer effect container"
+            class="d-flex d-flex-row varClass customContainer effect container"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="flexible basis_zero noShrink"
+              class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -479,13 +479,13 @@ exports[`ModuleHeader snapshot -  Render with needSearch=true 1`] = `
               />
             </div>
             <div
-              class="noShrink iconContainer"
+              class="d-flex-shrink-0 iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex fullSize row"
+                class="d-flex d-h-full d-w-full d-flex-row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
@@ -502,20 +502,20 @@ exports[`ModuleHeader snapshot -  Render with needSearch=true 1`] = `
 exports[`ModuleHeader snapshot -  Render with onLookupClose 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -531,7 +531,7 @@ exports[`ModuleHeader snapshot -  Render with onLookupClose 1`] = `
     >
       <button
         aria-pressed="false"
-        class="inlineFlex column alignItems_center justifyContent_center buttonReset large wrapper effect default border defaultHover hoverEffect"
+        class="d-inline-flex d-flex-col d-items-center d-justify-center effect default border defaultHover hoverEffect buttonReset large wrapper"
         data-id="close"
         data-ishtml="false"
         data-selector-id="iconButton"
@@ -539,7 +539,7 @@ exports[`ModuleHeader snapshot -  Render with onLookupClose 1`] = `
       >
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-cross icon_button_center"
+          class="zd_font_icons ff icon-cross basic d-inline-block d-align-middle icon_button_center"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -554,20 +554,20 @@ exports[`ModuleHeader snapshot -  Render with onLookupClose 1`] = `
 exports[`ModuleHeader snapshot -  Render with palette=default 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -585,20 +585,20 @@ exports[`ModuleHeader snapshot -  Render with palette=default 1`] = `
 exports[`ModuleHeader snapshot -  Render with palette=white 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container white"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container white"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -616,20 +616,20 @@ exports[`ModuleHeader snapshot -  Render with palette=white 1`] = `
 exports[`ModuleHeader snapshot -  Render with renderSecondaryContent as element 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -652,20 +652,20 @@ exports[`ModuleHeader snapshot -  Render with renderSecondaryContent as element
 exports[`ModuleHeader snapshot -  Render with renderSecondaryContent as function 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -688,20 +688,20 @@ exports[`ModuleHeader snapshot -  Render with renderSecondaryContent as function
 exports[`ModuleHeader snapshot -  Render with renderSecondaryContent should not override miniDescription 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -729,20 +729,20 @@ exports[`ModuleHeader snapshot -  Render with renderSecondaryContent should not
 exports[`ModuleHeader snapshot -  Render with renderTitleChildren as element 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
@@ -765,20 +765,20 @@ exports[`ModuleHeader snapshot -  Render with renderTitleChildren as element 1`]
 exports[`ModuleHeader snapshot -  Render with renderTitleChildren as function 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container default"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container default"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="flexible basis_zero noShrink"
+      class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex row alignItems_center title"
+        class="d-flex d-flex-row d-items-center title"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"

package/es/lookup/header/Search/LookupSearch.module.css

@@ -1,8 +1,8 @@
 .wrapper {
+  composes: d-relative from global;
   transition: var(--zd_transition1);
   width: var(--zd_size160) ;
   height: var(--zd_size28) ;
-  position: relative;
 }
 .boxType {
   border: 1px solid transparent;
@@ -24,10 +24,9 @@
   width: var(--zd_size220) ;
 }
 .drpSearchBox {
-  position: relative;
+  composes: d-relative d-cursor-pointer from global;
   height: var(--zd_size28) ;
   padding-inline-start: var(--zd_size12) ;
-  cursor: pointer;
 }
 .searchIcon {
   padding-inline-end: var(--zd_size8) ;

package/es/lookup/header/Search/Search.js

@@ -19,6 +19,7 @@ import { debounce } from '@zohodesk/components/es/utils/debounce';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 /** * CSS ** */
 
+import { cn } from "@dot-system/css-utility";
 import defaultStyle from "./LookupSearch.module.css";
 export default class Search extends Component {
   constructor(props) {
@@ -211,7 +212,7 @@ class SearchUI extends Component {
       size: "11",
       iconClass: `${style.searchIcon} ${isBoxed ? style.searchIconBox : ''}`
     }) : null, hasSeparator ? /*#__PURE__*/React.createElement("div", {
-      className: style.separator
+      className: cn(style.separator)
     }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       onClick: cancelBubblingEffect
@@ -240,8 +241,4 @@ class SearchUI extends Component {
 }
 
 SearchUI.defaultProps = SearchUI_defaultProps;
-SearchUI.propTypes = SearchUI_propTypes; // if (__DOCS__) {
-//   Search.docs = {
-//     componentGroup: 'Lookup'
-//   };
-// }
+SearchUI.propTypes = SearchUI_propTypes;