@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.60

package/dist/text-temp-v2.scss

@@ -15,12 +15,8 @@ $overflowSelector: ".flex__overflow";
     // 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-el-wh-st-mx,
-      calc(
-        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
-      )
-    );
+    width: var(--_sf-el-wh-st-mx,
+        calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
     // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
@@ -58,7 +54,7 @@ $overflowSelector: ".flex__overflow";
       cursor: pointer;
     }
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
       // min-height: 50px;
@@ -66,19 +62,12 @@ $overflowSelector: ".flex__overflow";
       padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
       border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
       border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
-      border-width: var(
-        --_show-border,
-        var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)))
-      );
+      border-width: var(--_show-border,
+          var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh))));
       border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
 
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
-          var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
-          var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
-          var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
-      );
+      box-shadow: var(--_show-shadow,
+          var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae))) var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br))) var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd))) var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr))));
       // height: 100%;
 
       #{$ie} {
@@ -130,16 +119,15 @@ $overflowSelector: ".flex__overflow";
 
       *,
       .et-tt {
+
         &,
         * {
           color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
           font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
           font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
           font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
-          font-style: var(
-            --_ctm-mob-dn-ft-se-ic,
-            var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
-          );
+          font-style: var(--_ctm-mob-dn-ft-se-ic,
+              var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
           text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
           letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
           line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
@@ -148,6 +136,7 @@ $overflowSelector: ".flex__overflow";
           word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
           word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
         }
+
       }
 
       &#{$overflowSelector} {
@@ -155,4 +144,4 @@ $overflowSelector: ".flex__overflow";
       }
     }
   }
-}
+}

package/dist/text-temp.scss

@@ -1,109 +1,110 @@
-@use "sass:map";
-@use "sass:list";
-
-$ie: '[contenteditable="true"]';
-$re: '[data-cms-tool="cms-element-resizer"]';
-$dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
-
-@use "./functions.scss" as *;
-
-[data-div-type="element"] {
-  &[data-element-type="text"] {
-    // 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));
-    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);
-    // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-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)))
-    // );
-
-    [data-div-type="wrapper__layer"] {
-      position: var(--_p-absolute);
-      inset: 0 0 0 0;
-      border: 1px solid var(--_accent-color-2-500);
-      z-index: 2;
-      pointer-events: none;
-      visibility: var(--_sf-vt-bm-zz, hidden);
-      opacity: var(--_sf-op-bm-zz, 0);
-    }
-
-    &#{$dblclk} {
-      --_sf-op-bm-zz: 1;
-      --_sf-vt-bm-zz: visible;
-      #{$re} {
-        display: none !important;
-      }
-    }
-
-    [contentEditable="true"] {
-      white-space: normal;
-      unicode-bidi: plaintext;
-    }
-
-    & > .wrapper {
-      width: 100%;
-      // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
-      min-height: prepareMediaVariable(--_ctm-lt-ht);
-      // min-height: 50px;
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
-      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
-      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
-      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
-          var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
-      );
-      // height: 100%;
-
-      #{$ie} {
-        &:focus {
-          outline: none;
-          border: none;
-        }
-      }
-    }
-    &[data-show-shadow="false"] {
-      --_show-shadow: none;
-    }
-
-    .text-element {
-      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      // border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
-      // border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
-      // border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
-      // border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
-      // box-shadow: var(
-      //   --_show-shadow,
-      //   var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
-      //     var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
-      // );
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // height: 100%;
-
-      // transform: scale(var(--_ctm-dn-zm-ie));
-      scale: var(--_ctm-dn-zm-ie);
-      &[data-flip-x="true"] {
-        transform: scaleX(-1);
-      }
-      &[data-flip-y="true"] {
-        transform: scaleY(-1);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+
+$ie: '[contenteditable="true"]';
+$re: '[data-cms-tool="cms-element-resizer"]';
+$dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';
+
+@use "./functions.scss" as *;
+
+[data-div-type="element"] {
+  &[data-element-type="text"] {
+    // 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));
+    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);
+    // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-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)))
+    // );
+
+    [data-div-type="wrapper__layer"] {
+      position: var(--_p-absolute);
+      inset: 0 0 0 0;
+      border: 1px solid var(--_accent-color-2-500);
+      z-index: 2;
+      pointer-events: none;
+      visibility: var(--_sf-vt-bm-zz, hidden);
+      opacity: var(--_sf-op-bm-zz, 0);
+    }
+
+    &#{$dblclk} {
+      --_sf-op-bm-zz: 1;
+      --_sf-vt-bm-zz: visible;
+
+      #{$re} {
+        display: none !important;
+      }
+    }
+
+    [contentEditable="true"] {
+      white-space: normal;
+      unicode-bidi: plaintext;
+    }
+
+    &>.wrapper {
+      width: 100%;
+      // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
+      min-height: prepareMediaVariable(--_ctm-lt-ht);
+      // min-height: 50px;
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
+      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
+      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
+      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      box-shadow: var(--_show-shadow,
+          var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br)) var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr)));
+      // height: 100%;
+
+      #{$ie} {
+        &:focus {
+          outline: none;
+          border: none;
+        }
+      }
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    .text-element {
+      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
+      // border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
+      // border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
+      // border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
+      // border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
+      // box-shadow: var(
+      //   --_show-shadow,
+      //   var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
+      //     var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
+      // );
+      display: flex;
+      flex-direction: column;
+      --_sf-gp: 16px;
+      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
+      row-gap: var(--_sf-gp);
+      width: 100%;
+      // height: 100%;
+
+      // transform: scale(var(--_ctm-dn-zm-ie));
+      scale: var(--_ctm-dn-zm-ie);
+
+      &[data-flip-x="true"] {
+        transform: scaleX(-1);
+      }
+
+      &[data-flip-y="true"] {
+        transform: scaleY(-1);
+      }
+    }
+  }
+}

package/dist/theme-classes.scss

@@ -35,6 +35,7 @@
   line-height: var(--_thm-ty-h2-le-ht);
   text-decoration: var(--_thm-ty-h2-ue);
 }
+
 .flx-thm-typ-h3 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h3-tt-cr);
@@ -50,6 +51,7 @@
   line-height: var(--_thm-ty-h3-le-ht);
   text-decoration: var(--_thm-ty-h3-ue);
 }
+
 .flx-thm-typ-h4 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h4-tt-cr);
@@ -65,6 +67,7 @@
   line-height: var(--_thm-ty-h4-le-ht);
   text-decoration: var(--_thm-ty-h4-ue);
 }
+
 .flx-thm-typ-h6 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-h6-tt-cr);
@@ -112,6 +115,7 @@
   line-height: var(--_thm-ty-p1-le-ht);
   text-decoration: var(--_thm-ty-p1-ue);
 }
+
 .flx-thm-typ-p2 {
   // padding-inline: var(--_sf-cd-gp);
   color: var(--_thm-ty-p2-tt-cr);
@@ -182,10 +186,7 @@
 
   border-radius: var(--_sf-hr-br-rs, var(--_thm-py-bs-dt-se-br-rs));
 
-  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-py-bs-dt-se-sw-ae))
-    var(--_sf-hr-sw-br, var(--_thm-py-bs-dt-se-sw-br))
-    var(--_sf-hr-sw-sd, var(--_thm-py-bs-dt-se-sw-sd))
-    var(--_sf-hr-sw-cr, var(--_thm-py-bs-dt-se-sw-cr));
+  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-py-bs-dt-se-sw-ae)) var(--_sf-hr-sw-br, var(--_thm-py-bs-dt-se-sw-br)) var(--_sf-hr-sw-sd, var(--_thm-py-bs-dt-se-sw-sd)) var(--_sf-hr-sw-cr, var(--_thm-py-bs-dt-se-sw-cr));
 
   &[data-show-border="true"] {
     border-color: var(--_sf-hr-br-cr, var(--_thm-py-bs-dt-se-br-cr));
@@ -211,10 +212,12 @@
   text-transform: var(--_sf-hr-tt-tm, var(--_thm-py-bs-dt-se-ft));
   word-wrap: var(--_sf-hr-wd-wp, var(--_thm-py-bs-dt-se-ft));
   word-break: var(--_sf-hr-wd-bk, var(--_thm-py-bs-dt-se-ft));
+
   &.flex__overflow {
     white-space: normal;
     @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
   }
+
   font-size: var(--_sf-hr-ft-se, var(--_thm-py-bs-dt-se-ft-se));
   font-weight: var(--_sf-hr-ft-wt, var(--_thm-py-bs-dt-se-bd));
   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-py-bs-dt-se-ic));
@@ -225,6 +228,7 @@
 
   .icon {
     display: var(--_hover-show-icon, var(--_show-icon, flex));
+
     svg {
       width: var(--_sf-hr-in-se, var(--_thm-py-bs-dt-se-in-se));
       height: var(--_sf-hr-in-se, var(--_thm-py-bs-dt-se-in-se));
@@ -278,10 +282,7 @@
   gap: var(--_thm-sy-bs-in-ad-tt-sg);
   border-radius: var(--_sf-hr-br-rs, var(--_thm-sy-bs-dt-se-br-rs));
 
-  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-sy-bs-dt-se-sw-ae))
-    var(--_sf-hr-sw-br, var(--_thm-sy-bs-dt-se-sw-br))
-    var(--_sf-hr-sw-sd, var(--_thm-sy-bs-dt-se-sw-sd))
-    var(--_sf-hr-sw-cr, var(--_thm-sy-bs-dt-se-sw-cr));
+  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-sy-bs-dt-se-sw-ae)) var(--_sf-hr-sw-br, var(--_thm-sy-bs-dt-se-sw-br)) var(--_sf-hr-sw-sd, var(--_thm-sy-bs-dt-se-sw-sd)) var(--_sf-hr-sw-cr, var(--_thm-sy-bs-dt-se-sw-cr));
 
   &[data-show-border="true"] {
     border-color: var(--_sf-hr-br-cr, var(--_thm-sy-bs-dt-se-br-cr));
@@ -307,10 +308,12 @@
   text-transform: var(--_sf-hr-tt-tm, var(--_thm-sy-bs-dt-se-ft));
   word-wrap: var(--_sf-hr-wd-wp, var(--_thm-sy-bs-dt-se-ft));
   word-break: var(--_sf-hr-wd-bk, var(--_thm-sy-bs-dt-se-ft));
+
   &.flex__overflow {
     white-space: normal;
     @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
   }
+
   font-size: var(--_sf-hr-ft-se, var(--_thm-sy-bs-dt-se-ft-se));
   font-weight: var(--_sf-hr-ft-wt, var(--_thm-sy-bs-dt-se-bd));
   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-sy-bs-dt-se-ic));
@@ -321,6 +324,7 @@
 
   .icon {
     display: var(--_hover-show-icon, var(--_show-icon, flex));
+
     svg {
       width: var(--_sf-hr-in-se, var(--_thm-sy-bs-dt-se-in-se));
       height: var(--_sf-hr-in-se, var(--_thm-sy-bs-dt-se-in-se));
@@ -374,10 +378,7 @@
   gap: var(--_thm-ty-bs-in-ad-tt-sg);
   border-radius: var(--_sf-hr-br-rs, var(--_thm-ty-bs-dt-se-br-rs));
 
-  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-ty-bs-dt-se-sw-ae))
-    var(--_sf-hr-sw-br, var(--_thm-ty-bs-dt-se-sw-br))
-    var(--_sf-hr-sw-sd, var(--_thm-ty-bs-dt-se-sw-sd))
-    var(--_sf-hr-sw-cr, var(--_thm-ty-bs-dt-se-sw-cr));
+  box-shadow: var(--_sf-hr-sw-ae, var(--_thm-ty-bs-dt-se-sw-ae)) var(--_sf-hr-sw-br, var(--_thm-ty-bs-dt-se-sw-br)) var(--_sf-hr-sw-sd, var(--_thm-ty-bs-dt-se-sw-sd)) var(--_sf-hr-sw-cr, var(--_thm-ty-bs-dt-se-sw-cr));
 
   &[data-show-border="true"] {
     border-color: var(--_sf-hr-br-cr, var(--_thm-ty-bs-dt-se-br-cr));
@@ -390,10 +391,12 @@
   text-transform: var(--_sf-hr-tt-tm, var(--_thm-ty-bs-dt-se-ft));
   word-wrap: var(--_sf-hr-wd-wp, var(--_thm-ty-bs-dt-se-ft));
   word-break: var(--_sf-hr-wd-bk, var(--_thm-ty-bs-dt-se-ft));
+
   &.flex__overflow {
     white-space: normal;
     @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
   }
+
   font-size: var(--_sf-hr-ft-se, var(--_thm-ty-bs-dt-se-ft-se));
   font-weight: var(--_sf-hr-ft-wt, var(--_thm-ty-bs-dt-se-bd));
   font-style: var(--_sf-hr-ft-se-ic, var(--_thm-ty-bs-dt-se-ic));
@@ -404,6 +407,7 @@
 
   .icon {
     display: var(--_hover-show-icon, var(--_show-icon, flex));
+
     svg {
       width: var(--_sf-hr-in-se, var(--_thm-ty-bs-dt-se-in-se));
       height: var(--_sf-hr-in-se, var(--_thm-ty-bs-dt-se-in-se));
@@ -418,4 +422,4 @@
     display: inline-block;
     width: 100%;
   }
-}
+}

package/dist/toggle-button.scss

@@ -1,32 +1,32 @@
-.toggle__button {
-  position: relative;
-  width: 36px;
-  height: 20px;
-  background-color: #d0d5dd;
-  border-radius: 12px;
-  cursor: pointer;
-
-  .toggle__slider {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    transform: translateY(0%);
-    width: 16px;
-    height: 16px;
-    background-color: #fff;
-    border-radius: 50%;
-    transition: transform 0.3s ease;
-    fill: var(--_base-white);
-    filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06))
-      drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
-  }
-
-  &.toggle__active {
-    background: #132067;
-
-    .toggle__slider {
-      top: 2px;
-      transform: translateX(16px);
-    }
-  }
-}
+.toggle__button {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  background-color: #d0d5dd;
+  border-radius: 12px;
+  cursor: pointer;
+
+  .toggle__slider {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    transform: translateY(0%);
+    width: 16px;
+    height: 16px;
+    background-color: #fff;
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+    fill: var(--_base-white);
+    filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06))
+      drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
+  }
+
+  &.toggle__active {
+    background: #132067;
+
+    .toggle__slider {
+      top: 2px;
+      transform: translateX(16px);
+    }
+  }
+}

package/dist/transform-properties-module.scss

@@ -1,20 +1,20 @@
-@use "sass:map";
-@use "sass:list";
-@use "./prefix-list.scss" as *;
-$editorBodySelector: '[data-iframe-body="true"]';
-$sectionWrapper: '[data-div-type="cms-section-wrapper"]';
-$le: '[data-element-type="lightboxv2"]';
-$elementSelector: '[data-div-type="element"]';
-$gridSelector: '[data-div-type="grid"]';
-$var: "--_sf-transform-pr-vl";
-
-@mixin FlexElementTransformProps() {
-  &:not(#{$editorBodySelector}) {
-    :is(#{$sectionWrapper} *, #{$le} *) {
-      &:is(#{$gridSelector}, #{$elementSelector}) {
-        @include FlexUpdatedPrefixCSSVariable($var, false, transform, none);
-        transform: var(#{$var}, none);
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./prefix-list.scss" as *;
+$editorBodySelector: '[data-iframe-body="true"]';
+$sectionWrapper: '[data-div-type="cms-section-wrapper"]';
+$le: '[data-element-type="lightboxv2"]';
+$elementSelector: '[data-div-type="element"]';
+$gridSelector: '[data-div-type="grid"]';
+$var: "--_sf-transform-pr-vl";
+
+@mixin FlexElementTransformProps() {
+  &:not(#{$editorBodySelector}) {
+    :is(#{$sectionWrapper} *, #{$le} *) {
+      &:is(#{$gridSelector}, #{$elementSelector}) {
+        @include FlexUpdatedPrefixCSSVariable($var, false, transform, none);
+        transform: var(#{$var}, none);
+      }
+    }
+  }
+}