@zohodesk/dot 1.4.18 → 1.5.1

package/lib/Separator/__tests__/__snapshots__/Separator.spec.js.snap

@@ -1,6 +1,906 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Separator rendering the defult props 1`] = `
+exports[`Separator rendering the aligndirection of - column 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the aligndirection of - column-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex colReverse"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the aligndirection of - row 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the aligndirection of - row-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowReverse"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the all types of children data 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      Desk
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the customClass props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass customWrapperStyle flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="customChildrenStyle shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot customSeparatorStyle  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="customChildrenStyle shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot customSeparatorStyle  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="customChildrenStyle shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the default props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the palette of - default 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the palette of - primary 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator primary dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator primary dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the palette of - secondary 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator secondary dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator secondary dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the shrink props with true 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOn"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the type of - arrow 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default arrow   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      &gt;
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default arrow   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      &gt;
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the type of - comma 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default comma   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      ,
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default comma   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      ,
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the type of - dot 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the type of - none 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default none   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default none   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the type of - slash 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default slash   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      /
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default slash   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      /
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the wrap of - nowrap 1`] = `
 <DocumentFragment>
   <div
     class="varClass  flex rowdir vCenter"
@@ -15,7 +915,141 @@ exports[`Separator rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div>
-         Separator test case 1
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the wrap of - wrap 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir wrap vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering the wrap of - wrap-reverse 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir wrapReverse vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default dot   shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      •
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
       </div>
     </div>
     <div
@@ -33,7 +1067,65 @@ exports[`Separator rendering the defult props 1`] = `
       data-test-id="boxComponent"
     >
       <div>
-          Separator test case 2
+        Creator
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Separator rendering with customSeparatorType props 1`] = `
+<DocumentFragment>
+  <div
+    class="varClass  flex rowdir vCenter"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Desk
+      </div>
+    </div>
+    <div
+      class="separator default    shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      #
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        CRM
+      </div>
+    </div>
+    <div
+      class="separator default    shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      #
+    </div>
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div>
+        Creator
       </div>
     </div>
   </div>