@sc-360-v2/storefront-cms-library 0.1.7 → 0.1.9

package/dist/product-inventory.scss

@@ -8,173 +8,24 @@
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
     & > .wrapper {
-      // width: 100%;
-      // height: 100%;
+      width: 100%;
     }
 
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
-    &[data-icon-position="left"] {
-      --_sf-fd-bn: row;
-    }
-    &[data-icon-position="right"] {
-      --_sf-fd-bn: row-reverse;
-    }
-    &[data-icon-position="center"] {
-      --_sf-fd-bn: row;
-    }
-
-    &:hover {
-      --_sf-hr-bd-cr: var(--_ctm-dn-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
-      --_sf-hr-br-cr: var(--_ctm-dn-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
-      --_sf-hr-br-st: var(--_ctm-dn-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
-      --_sf-hr-br-wt: var(--_ctm-dn-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
-      --_sf-hr-br-br: var(--_ctm-dn-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
-      --_sf-hr-bx-sw: var(--_ctm-dn-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
-        var(--_ctm-dn-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
-        var(--_ctm-dn-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
-        var(--_ctm-dn-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
-
-      --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
-      --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
-      --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
-      --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
-      --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
-      --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
-      --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
-      --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
-
-      --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
-      --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
-      --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
-      --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-
-      &[data-hover-show-shadow="false"] {
-        --_hover-show-shadow: none;
-      }
-      &[data-hover-show-icon="false"] {
-        --_hover-show-icon: none;
-      }
-    }
-    &[data-show-icon="false"] {
-      --_show-icon: none;
-    }
-    &[data-element-style="Icon"] {
-      &[data-icon-position="left"] {
-        --_sf-jc: start;
-      }
-      &[data-icon-position="right"] {
-        --_sf-jc: end;
-      }
-      &[data-icon-position="center"] {
-        --_sf-jc: center;
-      }
-    }
-
-    .btn__with__text {
-      background-color: var(--_sf-hr-bd-cr, var(--_ctm-dn-dt-se-bd-cr, var(--_tst-dn-dt-se-bd-cr)));
-      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
-      display: flex;
-      flex-direction: var(--_sf-fd-bn);
-      align-items: center;
-      // justify-content: var(--_sf-jc, center);
-      justify-content: var(--_ctm-lt-tt-an, center);
-      gap: var(--_ctm-lt-gp, var(--_tst-lt-gp));
-
+    table {
+      font-family: arial, sans-serif;
+      border-collapse: collapse;
       width: 100%;
       height: 100%;
+    }
 
-      border-radius: var(--_sf-hr-br-br, var(--_ctm-dn-dt-se-br-rs, var(--s_tst-dn-dt-se-br-rs)));
-      box-shadow: var(
-        --_hover-show-shadow,
-        var(
-          --_sf-hr-bx-sw,
-          var(
-            --_show-shadow,
-            var(--_ctm-dn-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
-              var(--_ctm-dn-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
-              var(--_ctm-dn-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
-              var(--_ctm-dn-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
-          )
-        )
-      );
-      &[data-show-border="true"] {
-        border-color: var(--_sf-hr-br-cr, var(--_ctm-dn-dt-se-br-cr, var(--_tst-dn-dt-se-br-cr)));
-        border-style: var(--_sf-hr-br-st, var(--_ctm-dn-dt-se-br-se, var(--_tst-dn-dt-se-br-se)));
-        border-width: var(--_sf-hr-br-wt, var(--_ctm-dn-dt-se-br-wh, var(--_tst-dn-dt-se-br-wh)));
-      }
-      // &.btn__with__text__icon {
-      //   justify-content: center;
-      //   // gap: 10px;
-      // }
-      // & > span {
-      //   align-items: center;
-      //   justify-content: center;
-      //   &.txt {
-      //     display: flex;
-      //     color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
-      //     font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
-      //       sans-serif;
-      //     font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
-      //     font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
-      //     font-style: var(
-      //       --_sf-hr-ft,
-      //       var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic))
-      //     );
-      //     text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
-      //     letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
-      //     line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
-      //     text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
-      //     // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-      //   }
-
-      //   &.icon {
-      //     display: var(--_hover-show-icon, var(--_show-icon, flex));
-      //     svg {
-      //       width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-      //       height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-      //       path {
-      //         stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
-      //       }
-      //     }
-      //   }
-      //   &[data-element-style="Text"] {
-      //     display: inline-block;
-      //     width: 100%;
-      //   }
-      // }
-
-      .txt {
-        display: flex;
-        color: var(--_sf-hr-fc, var(--_ctm-dn-dt-se-cr, var(--_tst-dn-dt-se-cr)));
-        font-family: var(--_sf-hr-ff, var(--_ctm-dn-dt-se-ft-fy, var(--_tst-dn-dt-se-ft-fy))),
-          sans-serif;
-        font-size: var(--_sf-hr-fs, var(--_ctm-dn-dt-se-ft-se, var(--_tst-dn-dt-se-ft-se)));
-        font-weight: var(--_sf-hr-fw, var(--_ctm-dn-dt-se-ft-wt, var(--_tst-dn-dt-se-ft-wt)));
-        font-style: var(--_sf-hr-ft, var(--_ctm-dn-dt-se-ft-se-ic, var(--_tst-dn-dt-se-ft-se-ic)));
-        text-align: var(--_sf-hr-ta, var(--_ctm-dn-dt-se-tt-an, var(--_tst-dn-dt-se-tt-an)));
-        letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-dt-se-lr-sg, var(--_tst-dn-dt-se-lr-sg)));
-        line-height: var(--_sf-hr-lh, var(--_ctm-dn-dt-se-le-ht, var(--_tst-dn-dt-se-le-ht)));
-        text-decoration: var(--_sf-hr-tt-dn, var(--_ctm-dn-dt-se-ue, var(--_tst-dn-dt-se-le-ht)));
-        // --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
-      }
-
-      .icon {
-        display: var(--_hover-show-icon, var(--_show-icon, flex));
-        svg {
-          width: var(--_sf-hr-ic-wt, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-          height: var(--_sf-hr-ic-ht, var(--_ctm-dn-dt-se-in-se, var(--_tst-dn-dt-se-in-se)));
-          path {
-            stroke: var(--_sf-hr-ic-st, var(--_ctm-dn-dt-se-in-c1, var(--_tst-dn-dt-se-in-c1)));
-          }
-        }
-      }
-      [data-element-style="Text"] {
-        display: inline-block;
-        width: 100%;
-      }
+    td,
+    th {
+      border: 1px solid #dddddd;
+      text-align: center;
+      padding: 8px;
     }
   }
 }

package/dist/product-price.scss

@@ -25,14 +25,14 @@
       --_show-shadow: none;
     }
 
-    .text-element {
+    .price-text-element {
       background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
       padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
       display: flex;
       flex-direction: column;
       --_sf-gp: 16px;
       --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
+      // row-gap: var(--_sf-gp);
       width: 100%;
       // height: 100%;
       border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
@@ -53,8 +53,16 @@
       &[data-flip-y="true"] {
         transform: scaleY(-1);
       }
-      .include_all_taxes{
+      .meta_text_element {
         color: green;
+        //styleName: Text md/Medium;
+        font-family: Lato;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
       }
     }
   }

package/dist/product-promotions.scss

@@ -0,0 +1,45 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="productPromotions"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // 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));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    table {
+      font-family: arial, sans-serif;
+      border-collapse: collapse;
+      width: 100%;
+      height: 100%;
+    }
+
+    td,
+    th {
+      border: 1px solid #dddddd;
+      text-align: center;
+      padding: 8px;
+    }
+
+    tr:nth-child(even) {
+      // background-color: #dddddd;
+    }
+  }
+}

package/dist/quantity-selector.scss

@@ -0,0 +1,265 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="quantitySelector"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // 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));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+    // /* Chrome, Safari, Edge, Opera */
+    // input::-webkit-outer-spin-button,
+    // input::-webkit-inner-spin-button {
+    //   -webkit-appearance: none;
+    //   margin: 0;
+    // }
+
+    // /* Firefox */
+    // input[type="number"] {
+    //   -moz-appearance: textfield;
+    // }
+    .quantity_container {
+      .quantity_open_input {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        span {
+          //styleName: Text sm/Medium;
+          font-family: Lato;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          text-align: left;
+          text-underline-position: from-font;
+          text-decoration-skip-ink: none;
+          color: #344054;
+        }
+        input[type="number"] {
+          width: 125px;
+          height: 40px;
+          padding: 8px 12px 8px 12px;
+          gap: 8px;
+          border-radius: 0.5rem;
+          border: 0.5px 0px 0px 0px;
+          opacity: 0px;
+          background: #ffffff;
+          border: 0.5px solid #d0d5dd;
+        }
+      }
+      .quantity_input_dropdown {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 120px;
+        height: 40px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        background-color: #fff;
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+
+        .label {
+          padding: 0 10px;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .input-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 60px;
+          border-left: 1px solid #ccc;
+
+          input {
+            width: 40%;
+            text-align: center;
+            border: none;
+            outline: none;
+            font-size: 14px;
+            color: #333;
+          }
+
+          .buttons {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-between;
+
+            button {
+              width: 20px;
+              height: 20px;
+              background: none;
+              border: none;
+              cursor: pointer;
+              padding: 0;
+              font-size: 14px;
+              color: #333;
+
+              &:hover {
+                color: #000;
+              }
+
+              &:disabled {
+                color: #ccc;
+                cursor: not-allowed;
+              }
+            }
+          }
+        }
+      }
+      .number-dropdown {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 120px; // Adjust as needed
+        height: 40px; // Adjust as needed
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        background-color: #fff;
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+
+        .label {
+          padding: 0 10px;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .input-wrapper {
+          display: flex;
+          align-items: center;
+          position: relative;
+          width: 60px;
+
+          select {
+            width: 100%;
+            border: none;
+            outline: none;
+            background: none;
+            text-align: center;
+            font-size: 14px;
+            color: #333;
+            // appearance: none;
+            padding: 0 10px;
+          }
+
+          .buttons {
+            position: absolute;
+            top: 0;
+            right: -30px; // Adjust spacing for the buttons
+            display: flex;
+            flex-direction: column;
+
+            button {
+              width: 20px;
+              height: 20px;
+              background: none;
+              border: 1px solid #ccc;
+              cursor: pointer;
+              padding: 0;
+              font-size: 14px;
+              color: #333;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+
+              &:hover {
+                background-color: #f0f0f0;
+              }
+
+              &:disabled {
+                color: #ccc;
+                cursor: not-allowed;
+              }
+
+              &:first-child {
+                border-bottom: none; // Remove border between the two buttons
+              }
+            }
+          }
+        }
+      }
+      .quantity-selector {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 150px;
+        height: 40px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        background-color: #fff;
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+
+        .label {
+          padding: 0 10px;
+          font-weight: 500;
+          color: #333;
+        }
+
+        .controls {
+          display: flex;
+          align-items: center;
+          border-left: 1px solid #ccc;
+          flex: 1;
+          justify-content: space-around;
+
+          button {
+            width: 30px;
+            height: 30px;
+            border: none;
+            background-color: transparent;
+            font-size: 18px;
+            font-weight: bold;
+            color: #555;
+            cursor: pointer;
+
+            &:hover {
+              color: #000;
+            }
+
+            &:disabled {
+              color: #ccc;
+              cursor: not-allowed;
+            }
+          }
+
+          .value {
+            font-size: 16px;
+            font-weight: bold;
+            color: #333;
+          }
+        }
+      }
+      .min_order_qty {
+        //styleName: Text md/Medium;
+        font-family: Lato;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        color: #1f1930;
+      }
+    }
+  }
+}

package/dist/range-slider.module.scss

@@ -0,0 +1,85 @@
+div[data-cmsdivtype="cms__react__slider"] {
+  display: var(--_d-flex);
+  align-items: var(--_align-center);
+  justify-content: var(--_justify-center);
+  --_cms-range-circle: 20px;
+  --_cms-range-track-size: 8px;
+
+  &[data-islinear="true"] {
+    position: var(--_p-relative);
+
+    span {
+      &[data-type="cms__linearbg"] {
+        position: var(--_p-absolute);
+        display: var(--_d-flex);
+        // inset: 0 0 0 0;
+        // min-width: calc(var(--_sidebar-small-width) - calc(2 * var(--_pd-24)) - 2px);
+        width: calc(100% - 2px);
+        height: var(--_cms-range-track-size);
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        border-radius: var(--_br-4);
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+          linear-gradient(90deg, rgba(22, 37, 120, 0) 0%, #162578 101.3%);
+      }
+    }
+
+    .horizontal-slider {
+      .example-track {
+        &.example-track-0 {
+          background: transparent;
+        }
+      }
+    }
+  }
+  .horizontal-slider {
+    width: 100%;
+    height: var(--_cms-range-circle);
+  }
+  .example-thumb {
+    background-color: var(--_base-white);
+    color: var(--_base-white);
+    cursor: pointer;
+    box-sizing: border-box;
+    border-radius: 50%;
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      border-radius: 50%;
+    }
+  }
+  .example-track {
+    position: relative;
+    background: var(--_primary-500);
+    cursor: pointer;
+  }
+  .example-track.example-track-1 {
+    background: var(--_gray-200);
+    border-radius: var(--_br-4);
+  }
+  .example-mark {
+    width: var(--_cms-range-track-size);
+    height: var(--_cms-range-track-size);
+    background-color: var(--_base-white);
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+  .horizontal-slider .example-track {
+    transform: translateY(-50%);
+    top: 50%;
+    height: var(--_cms-range-track-size);
+    border-radius: var(--_br-4);
+  }
+  .horizontal-slider .example-thumb {
+    top: 50%;
+    translate: 0 -50%;
+    width: var(--_cms-range-circle);
+    height: var(--_cms-range-circle);
+    // box-shadow: 0px 0px 0px 1px var(--_primary-500);
+    outline: none;
+    font-size: 0;
+    border: 1.5px solid var(--_primary-500);
+  }
+}

package/dist/scroll.scss

@@ -5,7 +5,8 @@ $max-items: 50;
 
 [data-div-type="element"] {
   &[data-element-type="scroll"] {
-    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    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);
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
 

package/dist/shipping-estimator.scss

@@ -0,0 +1,29 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="shippingEstimator"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // 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));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/social.scss

@@ -3,7 +3,8 @@
 
 [data-div-type="element"] {
   &[data-element-type="social"] {
-    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    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);
     aspect-ratio: 1 / var(--_sf-aspect-ratio);
     --_aspect-ratio: calc(