@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

package/dist/hotspot.scss

@@ -13,6 +13,8 @@ $bm: 30px;
 // default 30px marker it resolves to 20px, matching the previous flat offset.
 $g: var(--_sf-tp-gp);
 
+$overflowSelector: ".flex__overflow";
+
 $resizerOn: "[data-cms-element-resizer='true']";
 $dndOn: "[data-cms-new-element-dragging-v2='true']";
 $fullViewOn: '[data-view-state="full"]';
@@ -23,81 +25,105 @@ $fullViewOn: '[data-view-state="full"]';
 // spans exactly the gap, base on the tooltip edge and apex on the marker edge.
 $data: (
   // tooltip to the LEFT — tip on its right edge, pointing right
-  leftTop: (transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
-    icon: (right: -#{$tip},
-      bottom: calc(#{$bm} - #{$ics}),
-      border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+  leftTop: (
+      transform: translate(calc(-100% - #{$g}), calc(-100% + #{$bm})),
+      icon: (
+        right: -#{$tip},
+        bottom: calc(#{$bm} - #{$ics}),
+        border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
+      ),
     ),
-  ),
-  leftCenter: (transform: translate(calc(-100% - #{$g}), -50%),
-    icon: (right: -#{$tip},
+  leftCenter: (
+    transform: translate(calc(-100% - #{$g}), -50%),
+    icon: (
+      right: -#{$tip},
       top: calc(50% - #{$ics}),
       border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
   ),
-  leftBottom: (transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
-    icon: (right: -#{$tip},
+  leftBottom: (
+    transform: translate(calc(-100% - #{$g}), calc(0% - #{$bm})),
+    icon: (
+      right: -#{$tip},
       top: calc(#{$bm} - #{$ics}),
       border-color: transparent transparent transparent var(--_ctm-dn-tp-dn-bd-cr),
     ),
   ),
   // tooltip ABOVE — tip on its bottom edge, pointing down
-  topLeft: (transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
-    icon: (bottom: -#{$tip},
-      right: calc(#{$bm} - #{$ics}),
-      border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+  topLeft: (
+      transform: translate(calc(-100% + #{$bm}), calc(-100% - #{$g})),
+      icon: (
+        bottom: -#{$tip},
+        right: calc(#{$bm} - #{$ics}),
+        border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
+      ),
     ),
-  ),
-  topCenter: (transform: translate(-50%, calc(-100% - #{$g})),
-    icon: (bottom: -#{$tip},
+  topCenter: (
+    transform: translate(-50%, calc(-100% - #{$g})),
+    icon: (
+      bottom: -#{$tip},
       left: calc(50% - #{$ics}),
       border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
   ),
-  topRight: (transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
-    icon: (bottom: -#{$tip},
+  topRight: (
+    transform: translate(calc(0% - #{$bm}), calc(-100% - #{$g})),
+    icon: (
+      bottom: -#{$tip},
       left: calc(#{$bm} - #{$ics}),
       border-color: var(--_ctm-dn-tp-dn-bd-cr) transparent transparent transparent,
     ),
   ),
   // tooltip to the RIGHT — tip on its left edge, pointing left
-  rightTop: (transform: translate(#{$g}, calc(-100% + #{$bm})),
-    icon: (left: -#{$tip},
-      bottom: calc(#{$bm} - #{$ics}),
-      border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+  rightTop: (
+      transform: translate(#{$g}, calc(-100% + #{$bm})),
+      icon: (
+        left: -#{$tip},
+        bottom: calc(#{$bm} - #{$ics}),
+        border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
+      ),
     ),
-  ),
-  rightCenter: (transform: translate(#{$g}, -50%),
-    icon: (left: -#{$tip},
+  rightCenter: (
+    transform: translate(#{$g}, -50%),
+    icon: (
+      left: -#{$tip},
       top: calc(50% - #{$ics}),
       border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
   ),
-  rightBottom: (transform: translate(#{$g}, calc(0% - #{$bm})),
-    icon: (left: -#{$tip},
+  rightBottom: (
+    transform: translate(#{$g}, calc(0% - #{$bm})),
+    icon: (
+      left: -#{$tip},
       top: calc(#{$bm} - #{$ics}),
       border-color: transparent var(--_ctm-dn-tp-dn-bd-cr) transparent transparent,
     ),
   ),
   // tooltip BELOW — tip on its top edge, pointing up
-  bottomLeft: (transform: translate(calc(-100% + #{$bm}), #{$g}),
-    icon: (top: -#{$tip},
-      right: calc(#{$bm} - #{$ics}),
-      border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+  bottomLeft: (
+      transform: translate(calc(-100% + #{$bm}), #{$g}),
+      icon: (
+        top: -#{$tip},
+        right: calc(#{$bm} - #{$ics}),
+        border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
+      ),
     ),
-  ),
-  bottomCenter: (transform: translate(-50%, #{$g}),
-    icon: (top: -#{$tip},
+  bottomCenter: (
+    transform: translate(-50%, #{$g}),
+    icon: (
+      top: -#{$tip},
       left: calc(50% - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
   ),
-  bottomRight: (transform: translate(calc(0% - #{$bm}), #{$g}),
-    icon: (top: -#{$tip},
+  bottomRight: (
+    transform: translate(calc(0% - #{$bm}), #{$g}),
+    icon: (
+      top: -#{$tip},
       left: calc(#{$bm} - #{$ics}),
       border-color: transparent transparent var(--_ctm-dn-tp-dn-bd-cr) transparent,
     ),
-  ),
+  )
 );
 
 [data-div-type="element"] {
@@ -120,9 +146,7 @@ $data: (
             @each $prop, $val in $value {
               @if ($prop !=icon) {
                 #{$prop}: #{$val};
-              }
-
-              @else {
+              } @else {
                 @each $key2, $value2 in $val {
                   &:after {
                     #{$key2}: #{$value2};
@@ -140,8 +164,12 @@ $data: (
 [data-div-type="element"] {
   &[data-element-type="imageHotspot"] {
     // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-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-lt-mn, --_tst-lt-mn);
     // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
@@ -163,21 +191,19 @@ $data: (
       }
     }
 
-    &>.wrapper {
+    & > .wrapper {
       width: 100%;
       position: relative;
 
       background-color: prepareMediaVariable(--_ctm-dn-ie-se-bd-cr);
       padding: prepareMediaVariable(--_ctm-lt-pg, var(--_tst-lt-pg));
-      box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae) prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd) prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
+      box-shadow: prepareMediaVariable(--_ctm-dn-ie-se-sw-ae)
+        prepareMediaVariable(--_ctm-dn-ie-se-sw-br) prepareMediaVariable(--_ctm-dn-ie-se-sw-sd)
+        prepareMediaVariable(--_ctm-dn-ie-se-sw-cr);
 
-      &>div {
+      & > div {
         &.hotspot__tooltip {
-          --_sf-br-vl: {
-            #prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)
-          }
-
-          ;
+          --_sf-br-vl: #{prepareMediaVariable(--_ctm-dn-tp-dn-br-rs, 0px)};
           position: absolute;
           background: prepareMediaVariable(--_ctm-dn-tp-dn-bd-cr);
           z-index: 1000;
@@ -201,16 +227,22 @@ $data: (
             border-style: solid;
           }
 
-
           .tooltip__image_with_text {
             display: flex;
             // justify-content: center;
             gap: prepareMediaVariable(--_ctm-dn-tp-dn-im-gp);
             overflow-y: auto;
             height: 100%;
+            width: 100%;
 
+            // This wrapper fills the tooltip, so the tooltip's own justify/align
+            // above can't move it — the alignment has to be applied here, on the
+            // container that actually holds the image and the text box. Which axis
+            // each maps to flips with the stack direction.
             &.hrz {
               flex-direction: row;
+              justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
+              align-items: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
 
               .tooltip__image {
                 flex-direction: column;
@@ -219,6 +251,8 @@ $data: (
 
             &.vtl {
               flex-direction: column;
+              justify-content: prepareMediaVariable(--_ctm-dn-tp-dn-vl-at);
+              align-items: prepareMediaVariable(--_ctm-dn-tp-dn-hl-at);
 
               .tooltip__image {
                 flex-direction: row;
@@ -271,6 +305,13 @@ $data: (
                 letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg);
                 line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht);
                 text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-ue);
+                text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm, none);
+                word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp, normal);
+                word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk, normal);
+
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+                }
               }
 
               p {
@@ -283,6 +324,13 @@ $data: (
                 letter-spacing: prepareMediaVariable(--_ctm-dn-tp-tt-lr-sg-dc);
                 line-height: prepareMediaVariable(--_ctm-dn-tp-tt-le-ht-dc);
                 text-decoration: prepareMediaVariable(--_ctm-dn-tp-tt-lh-dc);
+                text-transform: prepareMediaVariable(--_ctm-dn-tp-tt-tt-tm-dc, none);
+                word-wrap: prepareMediaVariable(--_ctm-dn-tp-tt-wd-wp-dc, normal);
+                word-break: prepareMediaVariable(--_ctm-dn-tp-tt-wd-bk-dc, normal);
+
+                &#{$overflowSelector} {
+                  @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+                }
               }
             }
 
@@ -355,8 +403,10 @@ $data: (
                 }
               }
 
-              background-color: var(--_sf-hr-bd-cr,
-                prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr));
+              background-color: var(
+                --_sf-hr-bd-cr,
+                prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-bd-cr)
+              );
 
               padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-pg));
               width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-wh));
@@ -369,17 +419,26 @@ $data: (
 
               border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-rs));
 
-              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
+              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-ae))
+                var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-br))
+                var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-sd))
+                var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-sw-cr));
 
               &[data-show-border="true"] {
-                border-color: var(--_sf-hr-br-cr,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr));
-
-                border-style: var(--_sf-hr-br-se,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se));
-
-                border-width: var(--_sf-hr-br-wh,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh));
+                border-color: var(
+                  --_sf-hr-br-cr,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-cr)
+                );
+
+                border-style: var(
+                  --_sf-hr-br-se,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-se)
+                );
+
+                border-width: var(
+                  --_sf-hr-br-wh,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-br-wh)
+                );
               }
 
               .txt {
@@ -393,13 +452,17 @@ $data: (
 
                 font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-wt));
 
-                font-style: var(--_sf-hr-ft-se-ic,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic));
+                font-style: var(
+                  --_sf-hr-ft-se-ic,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-ft-se-ic)
+                );
 
                 text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-tt-an));
 
-                letter-spacing: var(--_sf-hr-lr-sg,
-                    prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg));
+                letter-spacing: var(
+                  --_sf-hr-lr-sg,
+                  prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-lr-sg)
+                );
 
                 line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tp-bn-dt-se-le-ht));
 
@@ -479,7 +542,6 @@ $data: (
           //   justify-content: prepareMediaVariable(--_ctm-dn-tp-ie-hl-at);
           //   align-items: prepareMediaVariable(--_ctm-dn-tp-ie-vl-at);
 
-
           //   img {
           //     object-fit: prepareMediaVariable(--_ctm-dn-tp-ie-ft-os);
           //     height: -webkit-fill-available;
@@ -523,7 +585,6 @@ $data: (
         border-style: prepareMediaVariable(--_ctm-dn-ie-se-br-se);
         border-color: prepareMediaVariable(--_ctm-dn-ie-se-br-cr);
         border-width: prepareMediaVariable(--_ctm-dn-ie-se-br-wh);
-        border-radius: prepareMediaVariable(--_ctm-dn-ie-se-br-rs);
       }
     }
 
@@ -538,7 +599,9 @@ $data: (
 
     &[data-hotspot-tooltip-style-show-shadow="true"] {
       .hotspot__tooltip {
-        box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae) prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd) prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-tp-dn-sw-ae)
+          prepareMediaVariable(--_ctm-dn-tp-dn-sw-br) prepareMediaVariable(--_ctm-dn-tp-dn-sw-sd)
+          prepareMediaVariable(--_ctm-dn-tp-dn-sw-cr);
       }
     }
 
@@ -553,21 +616,24 @@ $data: (
 
     &[data-hotspot-tooltip-image-style-show-shadow="true"] {
       .tooltip__image {
-        box-shadow: var(--_show-shadow,
-            prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br) prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr));
+        box-shadow: var(
+          --_show-shadow,
+          prepareMediaVariable(--_ctm-dn-tp-ie-sw-ae) prepareMediaVariable(--_ctm-dn-tp-ie-sw-br)
+            prepareMediaVariable(--_ctm-dn-tp-ie-sw-sd) prepareMediaVariable(--_ctm-dn-tp-ie-sw-cr)
+        );
       }
     }
 
     &[data-hotspot-style-show-shadow="true"] {
-
       .hotspot,
       .hotspot__icon {
-        box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae) prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd) prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
+        box-shadow: prepareMediaVariable(--_ctm-dn-ht-se-sw-ae)
+          prepareMediaVariable(--_ctm-dn-ht-se-sw-br) prepareMediaVariable(--_ctm-dn-ht-se-sw-sd)
+          prepareMediaVariable(--_ctm-dn-ht-se-sw-cr);
       }
     }
 
     &[data-hotspot-style-show-border="true"] {
-
       .hotspot,
       .hotspot__icon {
         border-style: prepareMediaVariable(--_ctm-dn-ht-se-br-se);
@@ -592,6 +658,7 @@ $data: (
       scale: prepareMediaVariable(--_ctm-dn-ie-se-zm-ie);
       transition: transform 0.3s ease-in-out;
       rotate: calc(#{prepareMediaVariable(--_ctm-dn-ie-se-re)} * 1deg);
+      border-radius: prepareMediaVariable(--_ctm-dn-ie-se-br-rs);
 
       &:hover {
         &[data-on-hover="Zoom Out"] {
@@ -643,7 +710,12 @@ $data: (
           top: 50%;
           left: 50%;
           translate: -50% -50%;
-          animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
+
+          // Animation gated on the toggle, so turning it off preserves the configured
+          // frequency (it no longer has to be reset to 0 to stop).
+          &[data-show-animation="true"] {
+            animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
+          }
 
           &[data-hotspot-shape="circle"] {
             border-radius: 50%;
@@ -683,7 +755,11 @@ $data: (
           translate: -50% -50%;
           box-sizing: border-box;
           justify-content: center;
-          animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
+
+          // Animation gated on the toggle (see .hotspot__icon note above).
+          &[data-show-animation="true"] {
+            animation: scaleInOut prepareMediaVariable(--_ctm-dn-ht-se-an-fy) infinite;
+          }
 
           &[data-hotspot-shape="circle"] {
             border-radius: 50%;
@@ -696,4 +772,4 @@ $data: (
       }
     }
   }
-}
+}

package/dist/icon-library.scss

@@ -1,74 +1,78 @@
-@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="iconLibrary"] {
-    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, var(--_sf-nw-wh)))
-          )
-      )
-    );
-    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
-    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
-
-    & > .wrapper {
-      width: 100%;
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-    }
-    &[data-widget-border="true"] .icon__container {
-      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(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
-    }
-
-    &[data-widget-shadow="true"] .icon__container {
-      box-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)));
-    }
-
-    &[data-widget-shadow="false"] .icon__container {
-      box-shadow: none;
-    }
-
-    .icon__container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
-      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
-      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
-
-      .icon {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
-
-        svg {
-          width: 100%;
-          height: 100%;
-          path {
-            stroke: var(
-              --_ctm-mob-dn-in-c1,
-              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
-            ) !important;
-          }
-        }
-      }
-    }
-  }
-}
+@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="iconLibrary"] {
+    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, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    // height: var(--_ctm-lt-ht, --_tst-lt-ht);
+
+    & > .wrapper {
+      width: 100%;
+      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    }
+    &[data-widget-border="true"] .icon__container {
+      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(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
+    }
+
+    &[data-widget-shadow="true"] .icon__container {
+      box-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)));
+    }
+
+    &[data-widget-shadow="false"] .icon__container {
+      box-shadow: none;
+    }
+
+    .icon__container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
+      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+
+      .icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
+
+        svg {
+          width: 100%;
+          height: 100%;
+          path {
+            stroke: var(
+              --_ctm-mob-dn-in-c1,
+              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
+            ) !important;
+            // Overrides the stroke-width presentation attribute baked into each icon's
+            // markup. A plain declaration is enough — presentation attributes lose to
+            // any CSS rule — so no !important is needed here.
+            stroke-width: var(--_ctm-mob-dn-se-wh, var(--_ctm-tab-dn-se-wh, var(--_ctm-dn-se-wh)));
+          }
+        }
+      }
+    }
+  }
+}

package/dist/image-temp.scss

@@ -107,6 +107,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
         // transform: scale(var(--_ctm-dn-zm-ie));
         scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
         rotate: calc(var(--_ctm-dn-re) * 1deg);
+        overflow: hidden;
       }
     }
     &[data-show-shadow="false"] {
@@ -129,7 +130,7 @@ $isFlexboxElementChild: ".flx > .wrapper > *";
       row-gap: var(--_sf-gp);
       width: 100%;
       height: prepareMediaVariable(--_ctm-lt-ht);
-      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
+      // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
       // height: 100%;
       // &:is(:not(:has([class*="crop__main"]) *)) {
       //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));