@sc-360-v2/storefront-cms-library 0.1.95 → 0.1.97

package/dist/product-price.scss

@@ -8,7 +8,9 @@
     // margin: var(--_lt-mn);
     // padding: var(--_lt-pg);
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
-    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // width: var(--_ctm-ele-nw-wh-vl);
+    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
     margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // height: ;
@@ -24,7 +26,12 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .price-text-element {
       // background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
       padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -70,12 +77,9 @@
         gap: 5px;
         .element-container {
           display: flex;
-          align-items: center;
+          align-items: flex-start;
           gap: 10px;
-          &.tootip-extend {
-            flex-direction: column;
-            align-items: flex-start;
-          }
+          flex-direction: column;
           .product-price {
             .price-span {
               background-color: var(--_ctm-dn-pt-pe-bd-cr);
@@ -87,7 +91,7 @@
               text-align: var(--_ctm-dn-pt-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-pt-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-pt-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-pt-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-pt-pe-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(--_show-border, var(--_ctm-dn-pt-pe-br-cr, var(--_tst-dn-br-cr)));
               border-style: var(--_show-border, var(--_ctm-dn-pt-pe-br-se, var(--_tst-dn-br-se)));
               border-width: var(--_show-border, var(--_ctm-dn-pt-pe-br-wh, var(--_tst-dn-br-wh)));
@@ -110,7 +114,7 @@
               text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-cy-ce-se-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(
                 --_show-border,
                 var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
@@ -142,7 +146,7 @@
               text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-um-se-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
               border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
               border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
@@ -168,7 +172,7 @@
                 text-align: var(--_ctm-dn-dt-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-dt-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-dt-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-dt-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-dt-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(--_show-border, var(--_ctm-dn-dt-br-cr, var(--_tst-dn-br-cr)));
                 border-style: var(--_show-border, var(--_ctm-dn-dt-br-se, var(--_tst-dn-br-se)));
                 border-width: var(--_show-border, var(--_ctm-dn-dt-br-wh, var(--_tst-dn-br-wh)));
@@ -191,7 +195,7 @@
                 text-align: var(--_ctm-dn-dt-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-dt-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-dt-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-dt-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-dt-ve-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(--_show-border, var(--_ctm-dn-dt-ve-br-cr, var(--_tst-dn-br-cr)));
                 border-style: var(--_show-border, var(--_ctm-dn-dt-ve-br-se, var(--_tst-dn-br-se)));
                 border-width: var(--_show-border, var(--_ctm-dn-dt-ve-br-wh, var(--_tst-dn-br-wh)));
@@ -216,7 +220,7 @@
                 text-align: var(--_ctm-dn-al-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-al-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-al-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-al-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-al-pe-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(--_show-border, var(--_ctm-dn-al-pe-br-cr, var(--_tst-dn-br-cr)));
                 border-style: var(--_show-border, var(--_ctm-dn-al-pe-br-se, var(--_tst-dn-br-se)));
                 border-width: var(--_show-border, var(--_ctm-dn-al-pe-br-wh, var(--_tst-dn-br-wh)));
@@ -239,7 +243,7 @@
                 text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-cy-ce-se-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(
                   --_show-border,
                   var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
@@ -271,7 +275,7 @@
                 text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-um-se-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
                 border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
                 border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
@@ -298,7 +302,7 @@
                 text-align: var(--_ctm-dn-ss-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-ss-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-ss-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-ss-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-ss-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(--_show-border, var(--_ctm-dn-ss-br-cr, var(--_tst-dn-br-cr)));
                 border-style: var(--_show-border, var(--_ctm-dn-ss-br-se, var(--_tst-dn-br-se)));
                 border-width: var(--_show-border, var(--_ctm-dn-ss-br-wh, var(--_tst-dn-br-wh)));
@@ -321,7 +325,7 @@
                 text-align: var(--_ctm-dn-ss-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-ss-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-ss-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-ss-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-ss-ve-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(--_show-border, var(--_ctm-dn-ss-ve-br-cr, var(--_tst-dn-br-cr)));
                 border-style: var(--_show-border, var(--_ctm-dn-ss-ve-br-se, var(--_tst-dn-br-se)));
                 border-width: var(--_show-border, var(--_ctm-dn-ss-ve-br-wh, var(--_tst-dn-br-wh)));
@@ -344,7 +348,7 @@
                 text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
                 letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
                 line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
-                text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
+                text-decoration: var(--_ctm-dn-cy-ce-se-ue, var(--_tst-dn-dt-se-tt-de));
                 border-color: var(
                   --_show-border,
                   var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
@@ -383,7 +387,7 @@
               text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-pt-tx-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
               border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
               border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
@@ -410,7 +414,7 @@
               text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-pt-sg-pe-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(
                 --_show-border,
                 var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr))
@@ -446,7 +450,7 @@
               text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-et-pe-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
               border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
               border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));
@@ -619,7 +623,7 @@
               text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-pt-tx-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
               border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
               border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
@@ -646,7 +650,7 @@
               text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-pt-sg-pe-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(
                 --_show-border,
                 var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr))
@@ -682,7 +686,7 @@
               text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
               letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
               line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
-              text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
+              text-decoration: var(--_ctm-dn-et-pe-ue, var(--_tst-dn-dt-se-tt-de));
               border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
               border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
               border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));

package/dist/product-promotions.scss

@@ -43,6 +43,12 @@
         max-height: 30%;
       }
     }
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .promotions__container {
       display: flex;
       flex-direction: column;

package/dist/product.scss

@@ -6,13 +6,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 [data-div-type="element"] {
   &[data-element-type="product"] {
     // width: var(--_sf-con-nw-wh);
-    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    width: calc(1% * var(--_ctm-pro-ele-nw-wh-vl, auto));
+    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-pro-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // width: calc(1% * var(--_ctm-pro-ele-nw-wh-vl, auto));
     // width: 100%;
     // height: var(--_ctm-pro-lt-ht) !important;
     height: auto;
     margin: var(--_ctm-pro-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
-    background: var(--_ctm-pro-dn-bd-cr);
+
+    background-color: var(--_ctm-pro-dn-bd-cr, var(--_tst-dn-bd-cr));
+    padding: var(--_ctm-pro-lt-pg, var(--_tst-lt-pg));
+
+    // height: 100%;
+    border-color: var(--_ctm-pro-dn-br-cr, var(--_tst-dn-br-cr));
+    border-style: var(--_ctm-pro-dn-br-se, var(--_tst-dn-br-se));
+    border-width: var(--_ctm-pro-dn-br-wh, var(--_tst-dn-br-wh));
+    border-radius: var(--_ctm-pro-dn-br-rs, var(--_tst-dn-br-rs));
+    box-shadow: var(
+      --_show-shadow,
+      var(--_ctm-pro-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-pro-dn-sw-br, var(--_tst-dn-sw-br))
+        var(--_ctm-pro-dn-sw-sd, var(--_tst-dn-sw-sd))
+        var(--_ctm-pro-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
+    );
 
     // &:not(:has(#{$resizerId}#{$resizeActive})) {
     //   min-height: 100px !important;

package/dist/productDetails.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:list";
+
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+[data-div-type="element"] {
+  &[data-element-type="productDetails"] {
+    // width: var(--_sf-con-nw-wh);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    width: calc(1% * var(--_ctm-prod-ele-nw-wh-vl, auto));
+    // width: 100%;
+    // height: var(--_ctm-pro-lt-ht) !important;
+    height: auto;
+    margin: var(--_ctm-prod-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
+    background: var(--_ctm-prod-dn-bd-cr);
+
+    // &:not(:has(#{$resizerId}#{$resizeActive})) {
+    //   min-height: 100px !important;
+    // }
+
+    & > div {
+      &.wrapper {
+        width: 100%;
+        // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
+      }
+    }
+  }
+}

package/dist/quantity-selector.scss

@@ -35,6 +35,12 @@
     // input[type="number"] {
     //   -moz-appearance: textfield;
     // }
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .quantity_container {
       .quantity_open_input {
         display: flex;

package/dist/repeater-item.scss

@@ -15,6 +15,7 @@
     & > div {
       &.wrapper {
         width: 100%;
+        height: 100%;
       }
     }
   }

package/dist/repeater.scss

@@ -95,12 +95,19 @@ $childItemSelector: '[data-element-type="repeater-item"]';
       }
     }
 
-    &[data-view-state="full"] {
-      width: auto;
-      margin: 0;
-      justify-self: stretch !important;
-      align-self: stretch !important;
-      cursor: auto;
-    }
+    // &[data-view-state="full"] {
+    //   width: auto;
+    //   margin: 0;
+    //   justify-self: stretch !important;
+    //   align-self: stretch !important;
+    //   cursor: auto;
+
+    //   & > div {
+    //     &[data-div-type="wrapper__layer"] {
+    //       --_sf-vt-zz: visible;
+    //       --_sf-op-zz: 1;
+    //     }
+    //   }
+    // }
   }
 }

package/dist/section.scss

@@ -1,3 +1,4 @@
+$activeElementSelector: "[data-has-clicked='true']";
 section {
   &[data-div-type="section"] {
     position: var(--_p-relative);
@@ -61,6 +62,21 @@ section {
       & > .wrapper {
         grid-area: 1/1/2/2 !important;
       }
+      &[data-view-state="full"] {
+        width: auto;
+        margin: 0;
+        justify-self: stretch !important;
+        align-self: stretch !important;
+        cursor: auto;
+        &:is(#{$activeElementSelector}) {
+          & > div {
+            &[data-div-type="wrapper__layer"] {
+              --_sf-vt-zz: visible;
+              --_sf-op-zz: 1;
+            }
+          }
+        }
+      }
       &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
         &:is([data-element-type="stack"]) {
           width: max(

package/dist/shipping-estimator.scss

@@ -24,6 +24,12 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .shipping__estimator {
       padding: var(--_ctm-lt-pg);
     }

package/dist/stack.scss

@@ -33,6 +33,7 @@
       width: max-content;
       // min-width: var(--_sf-sta-nw-wh) !important;
       // min-width: 100px !important;
+      width: max-content;
       &.hsc {
         min-height: 10px;
       }

package/dist/store-locations.scss

@@ -35,6 +35,12 @@
         max-height: 30%;
       }
     }
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .store__container {
       display: flex;
       flex-direction: column;

package/dist/types/builder/tools/element-edit/volumePricing.d.ts

@@ -12,6 +12,8 @@ interface selfLayoutInterface {
     controlPosition: CMSIBCommonInterface;
     loopImages: CMSIBCommonInterface;
     autoplay: CMSIBCommonInterface;
+    sliderDisplayScrollBar: CMSIBCommonInterface;
+    header: CMSIBCommonInterface;
     headerDivider: CMSIBCommonInterface;
     rowDivider: CMSIBCommonInterface;
     columnDivider: CMSIBCommonInterface;
@@ -30,26 +32,176 @@ interface selfLayoutInterface {
     groupDisplayStyle: CMSIBCommonInterface;
     headerHeight: CMSIBCommonInterface;
     rowHeight: CMSIBCommonInterface;
+    optionTitleValueSpacing: CMSIBCommonInterface;
+    dividerBetweenItems: CMSIBCommonInterface;
+    optionsDisplayStyle: {
+        selectorKey: string;
+        displayValues: CMSIBCommonInterface;
+        itemPadding: CMSIBCommonInterface;
+        itemSpacing: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        swatchImageType: CMSIBCommonInterface;
+    };
+    groupedOptionsDisplayStyle: {
+        selectorKey: string;
+        groupsDisplayStyle: CMSIBCommonInterface;
+        groupSpacing: CMSIBCommonInterface;
+        groupPadding: CMSIBCommonInterface;
+        groupHeaderAndOptionSpacing: CMSIBCommonInterface;
+        tabDirection: CMSIBCommonInterface;
+        tabLayout: CMSIBCommonInterface;
+        tabAlignment: CMSIBCommonInterface;
+        tabSpacing: CMSIBCommonInterface;
+        tabAndContainerSpacing: CMSIBCommonInterface;
+        tabHorizontalPadding: CMSIBCommonInterface;
+        tabVerticalPadding: CMSIBCommonInterface;
+        containerPadding: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        tabRowSpacing: CMSIBCommonInterface;
+        expandIconPosition: CMSIBCommonInterface;
+        expandFirstItemByDefault: CMSIBCommonInterface;
+        allowMultipleOpenItems: CMSIBCommonInterface;
+        itemDividers: CMSIBCommonInterface;
+        accordionSpacing: CMSIBCommonInterface;
+        accordionAndContainerSpacing: CMSIBCommonInterface;
+        accordionHorizontalPadding: CMSIBCommonInterface;
+        accordionVerticalPadding: CMSIBCommonInterface;
+        groupAndContainerSpacing: CMSIBCommonInterface;
+        groupHorizontalPadding: CMSIBCommonInterface;
+        groupVerticalPadding: CMSIBCommonInterface;
+        canCollapseGroups: CMSIBCommonInterface;
+        collapseIconPosition: CMSIBCommonInterface;
+    };
 }
-export interface selfDesignInterface {
+interface selfDesignInterface {
     selectorKey: string;
-    productPrice: object;
-    uomStyle: object;
-    currencyCodeStyle: object;
-    actualPrice: object;
-    discountPercentage: object;
-    discountValue: object;
-    savingsPercentage: object;
-    savingsValue: object;
-    emblishmentPrice: object;
-    productTax: object;
-    productShippingPrice: object;
+    itemStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    uomTitleStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    uomConversionStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    productPrice: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    uomStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    currencyCodeStyle: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    actualPrice: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    discount: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    discountValue: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    savings: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    savingsValue: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    pricePerUnit: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    arrows: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationDots: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    paginationLine: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    table: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableHeader: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    headerText: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    tableRow: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    scroll: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    rowDividers: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    pagination: {
+        selectorKey: string;
+        [key: string]: any;
+    };
+    showMoreItemsButton: {
+        selectorKey: string;
+        [key: string]: any;
+    };
 }
-export declare enum textSelectorKeysEnum {
+export declare enum VolumePricingSelectorKeysEnum {
     LAYOUT = "layout",
     CONTENT = "content",
     DESIGN = "design",
-    DATA_CONNECTOR = "dataConnector"
+    DATA_CONNECTOR = "dataConnector",
+    GROUPED_OPTION_DISPLAY_STYLE = "groupedOptionsDisplayStyle",
+    OPTION_DISPLAY_STYLE = "optionsDisplayStyle",
+    ITEM_STYLE = "itemStyle",
+    UOM_TITLE_STYLE = "uomTitleStyle",
+    UOM_CONVERSION_STYLE = "uomConversionStyle",
+    PRODUCT_PRICE = "productPrice",
+    UOM_STYLE = "uomStyle",
+    CURRENCY_CODE_STYLE = "currencyCodeStyle",
+    ACTUAL_PRICE = "actualPrice",
+    DISCOUNT = "discount",
+    DISCOUNT_VALUE = "discountValue",
+    SAVINGS = "savings",
+    SAVINGS_VALUE = "savingsValue",
+    PRICE_PER_UNIT = "pricePerUnit",
+    ARROWS = "arrows",
+    PAGINATION_DOTS = "paginationDots",
+    PAGINATION_LINE = "paginationLine",
+    TABLE = "table",
+    TABLE_HEADER = "tableHeader",
+    HEADER_TEXT = "headerText",
+    TABLE_ROW = "tableRow",
+    SCROLL = "scroll",
+    ROW_DIVIDERS = "rowDividers",
+    PAGINATION = "pagination",
+    SHOW_MORE_ITEMS_BUTTON = "showMoreItemsButton",
+    HOVER_STATE = "hover",
+    DEFAULT_STATE = "default",
+    SELECTED_STATE = "selectedState"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/helper/helper-functions.d.ts

@@ -1 +1,2 @@
 export declare const dateTimeFormat: (dateString: string | number, isTime?: boolean, formatStr?: string, timeZone?: string, locale?: string) => string | null;
+export declare function createQueryStringForCollection(queryObject: any): string;

package/dist/uom-selector.scss

@@ -43,6 +43,12 @@
         max-height: 30%;
       }
     }
+    .text-element {
+      background: #6d96e4;
+      padding: 10px;
+      font-weight: 600;
+      color: rgba(75, 69, 70, 1);
+    }
     .uom__container {
       padding: var(--_ctm-lt-pg);
       .stack {

package/dist/variable.scss

@@ -57,7 +57,7 @@ body {
   --_cs-cms-root-zIndex: 5;
   --_add-element-zIndex: 3;
   --_cs-et-zIndex: 2;
-  --_it-gl-zIndex: 1;
+  --_it-gl-zIndex: 2;
   --_cms-et-pe-zIndex: 1;
 
   --_inline-toolbar-zIndex: 9999;
@@ -85,6 +85,10 @@ body {
   --_red-500: #f04438;
 
   --_accent-color-2-500: #583fff;
+  --_accent-Color-2-200: #c7bfff;
+  --_accent-Color-2-100: #d5cfff;
+  --_accent-Color-2-50: #e3dfff;
+
   --_success-800: #05603a;
 
   --_primary-25: #f5f6fd;
@@ -114,8 +118,12 @@ body {
   --_error-700: #b42318;
   --_error-500: #f04438;
   --_error-200: #fecdca;
+  --_error-100: #fee4e2;
   --_error-50: #fef3f2;
 
+  --_cms-ruler-color: #9b27d5b7;
+  --_cms-ruler-color-v2: #9b27d53a;
+
   --_transition-duration: 0.45s;
   --_transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);