@zohodesk/dot 1.9.18 → 1.9.19

package/es/version2/lookup/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`AlertHeader snapshot -  Render with breakChildren=true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -84,19 +84,19 @@ exports[`AlertHeader snapshot -  Render with breakChildren=true 1`] = `
       </div>
     </div>
     <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 fullSize row wrap"
+        class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap"
         data-id="containerComponent"
         data-selector-id="container"
         data-test-id="containerComponent"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -112,7 +112,7 @@ exports[`AlertHeader snapshot -  Render with breakChildren=true 1`] = `
 exports[`AlertHeader snapshot -  Render with children 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -193,19 +193,19 @@ exports[`AlertHeader snapshot -  Render with children 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -213,7 +213,7 @@ exports[`AlertHeader snapshot -  Render with children 1`] = `
           Alert Title
         </div>
         <div
-          class="flexible basis_auto noShrink"
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-auto d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -231,7 +231,7 @@ exports[`AlertHeader snapshot -  Render with children 1`] = `
 exports[`AlertHeader snapshot -  Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger custom-container-class"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger custom-container-class"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -312,19 +312,19 @@ exports[`AlertHeader snapshot -  Render with customClass 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title custom-title-class"
+          class="d-min-w-0 d-flex-shrink title custom-title-class"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -334,27 +334,27 @@ exports[`AlertHeader snapshot -  Render with customClass 1`] = `
       </div>
     </div>
     <div
-      class="noShrink close custom-close-class"
+      class="d-flex-shrink-0 close custom-close-class"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="inlineFlex row alignItems_center justifyContent_center close light"
+        class="d-inline-flex d-flex-row d-items-center d-justify-center close light"
         data-id="alertHeader_close"
         data-selector-id="container"
         data-test-id="alertHeader_close"
         tabindex="0"
       >
         <div
-          class="noShrink"
+          class="d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-Cross fbold closeIcon"
+            class="zd_font_icons ff icon-Cross basic d-inline-block d-align-middle d-font-bold closeIcon"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -370,7 +370,7 @@ exports[`AlertHeader snapshot -  Render with customClass 1`] = `
 exports[`AlertHeader snapshot -  Render with dataId and htmlId 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -451,19 +451,19 @@ exports[`AlertHeader snapshot -  Render with dataId and htmlId 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -474,27 +474,27 @@ exports[`AlertHeader snapshot -  Render with dataId and htmlId 1`] = `
       </div>
     </div>
     <div
-      class="noShrink close"
+      class="d-flex-shrink-0 close"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="inlineFlex row alignItems_center justifyContent_center close light"
+        class="d-inline-flex d-flex-row d-items-center d-justify-center close light"
         data-id="alert-header_close"
         data-selector-id="container"
         data-test-id="alert-header_close"
         tabindex="0"
       >
         <div
-          class="noShrink"
+          class="d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-Cross fbold closeIcon"
+            class="zd_font_icons ff icon-Cross basic d-inline-block d-align-middle d-font-bold closeIcon"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -510,7 +510,7 @@ exports[`AlertHeader snapshot -  Render with dataId and htmlId 1`] = `
 exports[`AlertHeader snapshot -  Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -597,7 +597,7 @@ exports[`AlertHeader snapshot -  Render with default props 1`] = `
 exports[`AlertHeader snapshot -  Render with isDraggable=false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="false"
     data-id="containerComponent"
     data-selector-id="container"
@@ -678,19 +678,19 @@ exports[`AlertHeader snapshot -  Render with isDraggable=false 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -706,26 +706,26 @@ exports[`AlertHeader snapshot -  Render with isDraggable=false 1`] = `
 exports[`AlertHeader snapshot -  Render with needIcon=false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -741,7 +741,7 @@ exports[`AlertHeader snapshot -  Render with needIcon=false 1`] = `
 exports[`AlertHeader snapshot -  Render with onClose 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -822,19 +822,19 @@ exports[`AlertHeader snapshot -  Render with onClose 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -844,27 +844,27 @@ exports[`AlertHeader snapshot -  Render with onClose 1`] = `
       </div>
     </div>
     <div
-      class="noShrink close"
+      class="d-flex-shrink-0 close"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="inlineFlex row alignItems_center justifyContent_center close light"
+        class="d-inline-flex d-flex-row d-items-center d-justify-center close light"
         data-id="alertHeader_close"
         data-selector-id="container"
         data-test-id="alertHeader_close"
         tabindex="0"
       >
         <div
-          class="noShrink"
+          class="d-flex-shrink-0"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <i
             aria-hidden="true"
-            class="zd_font_icons basic icon-Cross fbold closeIcon"
+            class="zd_font_icons ff icon-Cross basic d-inline-block d-align-middle d-font-bold closeIcon"
             data-id="fontIcon"
             data-selector-id="fontIcon"
             data-test-id="fontIcon"
@@ -880,7 +880,7 @@ exports[`AlertHeader snapshot -  Render with onClose 1`] = `
 exports[`AlertHeader snapshot -  Render with renderRightActions 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -961,19 +961,19 @@ exports[`AlertHeader snapshot -  Render with renderRightActions 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -994,7 +994,7 @@ exports[`AlertHeader snapshot -  Render with renderRightActions 1`] = `
 exports[`AlertHeader snapshot -  Render with renderSecondaryContent 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1075,19 +1075,19 @@ exports[`AlertHeader snapshot -  Render with renderSecondaryContent 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -1106,7 +1106,7 @@ exports[`AlertHeader snapshot -  Render with renderSecondaryContent 1`] = `
 exports[`AlertHeader snapshot -  Render with title 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1187,19 +1187,19 @@ exports[`AlertHeader snapshot -  Render with title 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -1215,7 +1215,7 @@ exports[`AlertHeader snapshot -  Render with title 1`] = `
 exports[`AlertHeader snapshot -  Render with type=error 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout error"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout error"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1296,19 +1296,19 @@ exports[`AlertHeader snapshot -  Render with type=error 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -1324,7 +1324,7 @@ exports[`AlertHeader snapshot -  Render with type=error 1`] = `
 exports[`AlertHeader snapshot -  Render with type=info 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout info"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout info"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1416,19 +1416,19 @@ exports[`AlertHeader snapshot -  Render with type=info 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -1444,7 +1444,7 @@ exports[`AlertHeader snapshot -  Render with type=info 1`] = `
 exports[`AlertHeader snapshot -  Render with type=notification 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout notification"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout notification"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1531,19 +1531,19 @@ exports[`AlertHeader snapshot -  Render with type=notification 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -1559,7 +1559,7 @@ exports[`AlertHeader snapshot -  Render with type=notification 1`] = `
 exports[`AlertHeader snapshot -  Render with type=success 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout success"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout success"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1640,19 +1640,19 @@ exports[`AlertHeader snapshot -  Render with type=success 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -1668,7 +1668,7 @@ exports[`AlertHeader snapshot -  Render with type=success 1`] = `
 exports[`AlertHeader snapshot -  Render with type=warning 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container headerLayout warning"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container headerLayout warning"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1749,19 +1749,19 @@ exports[`AlertHeader snapshot -  Render with type=warning 1`] = `
       </div>
     </div>
     <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 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"
       >
         <div
-          class="shrink title"
+          class="d-min-w-0 d-flex-shrink title"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -1777,7 +1777,7 @@ exports[`AlertHeader snapshot -  Render with type=warning 1`] = `
 exports[`AlertHeader snapshot -  does not render custom renderAlertIcon when needIcon is false 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"
@@ -1789,7 +1789,7 @@ exports[`AlertHeader snapshot -  does not render custom renderAlertIcon when nee
 exports[`AlertHeader snapshot -  renders custom renderAlertIcon when needIcon is true 1`] = `
 <DocumentFragment>
   <div
-    class="flex row wrap alignItems_center container danger"
+    class="d-flex d-flex-row d-flex-wrap d-items-center container danger"
     data-drag-hook="true"
     data-id="containerComponent"
     data-selector-id="container"

package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css

@@ -4,9 +4,8 @@
 
 .container {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-border-solid from global;
   background-color: var(--zdt_alertlookup_bg);
-  border-style: solid;
   border-color: var(--commonalert_border_color);
   border-width: 2px 0 0 0;
 }
@@ -53,16 +52,15 @@
   line-height: 1.2222;
   font-weight: var(--zd-fw-bold);
   composes: ftsmooth wbreak from '~@zohodesk/components/es/common/common.module.css';
-  vertical-align: middle;
-  cursor: default;
+  composes: d-align-middle d-cursor-default from global;
 }
 
 .iconStyle {
-  display: block;
+  composes: d-block from global;
 }
 
 .close {
-  position: absolute;
+  composes: d-absolute from global;
   top: var(--zd_size12) ;
 }