@sc-360-v2/storefront-cms-library 0.3.49 → 0.3.50

package/dist/bulk-variant-picker.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 $minWidth: 70px;
 
@@ -31,8 +31,10 @@ $minWidth: 70px;
     .option__title {
       margin-bottom: 4px;
       color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
-      font-family:
-        var(--_ctm-mob-dn-on-te-ft-fy, var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))),
+      font-family: var(
+          --_ctm-mob-dn-on-te-ft-fy,
+          var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
+        ),
         sans-serif;
       font-size: var(
         --_ctm-mob-dn-on-te-ft-se,
@@ -116,8 +118,7 @@ $minWidth: 70px;
                 --_ctm-mob-dn-sw-me-is-bn-bd-cr,
                 var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
               );
-              font-family:
-                var(
+              font-family: var(
                   --_ctm-mob-dn-sw-me-is-bn-ft-fy,
                   var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
                 ),
@@ -623,8 +624,7 @@ $minWidth: 70px;
                 --_ctm-mob-dn-sw-me-is-bn-bd-cr,
                 var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
               );
-              font-family:
-                var(
+              font-family: var(
                   --_ctm-mob-dn-sw-me-is-bn-ft-fy,
                   var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
                 ),
@@ -754,8 +754,10 @@ $minWidth: 70px;
               // font is pending
 
               color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
-              font-family:
-                var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
+              font-family: var(
+                  --_sf-hr-ft-fy,
+                  prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
+                ),
                 sans-serif;
               font-size: var(
                 --_sf-hr-ft-se,
@@ -997,8 +999,10 @@ $minWidth: 70px;
                 // font is pending
 
                 color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
-                font-family:
-                  var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
+                font-family: var(
+                    --_sf-sd-ft-fy,
+                    prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
+                  ),
                   sans-serif;
                 font-size: var(
                   --_sf-sd-ft-se,
@@ -1106,8 +1110,7 @@ $minWidth: 70px;
         .title {
           margin-bottom: 4px;
           color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
-          font-family:
-            var(
+          font-family: var(
               --_ctm-mob-dn-on-te-ft-fy,
               var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
             ),
@@ -2639,8 +2642,7 @@ $minWidth: 70px;
                     var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
                   );
 
-                  font-family:
-                    var(
+                  font-family: var(
                       --_ctm-mob-dn-hr-tt-ft-fy,
                       var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
                     ),
@@ -2706,8 +2708,7 @@ $minWidth: 70px;
                     )
                   );
 
-                  font-family:
-                    var(
+                  font-family: var(
                       --_sf-hr-ff,
                       var(
                         --_ctm-mob-dn-rw-tt-ft-fy,
@@ -2838,8 +2839,7 @@ $minWidth: 70px;
                   )
                 );
 
-                font-family:
-                  var(
+                font-family: var(
                     --_sf-hr-ff,
                     var(
                       --_ctm-mob-dn-pn-dt-se-ft-fy,
@@ -2943,8 +2943,7 @@ $minWidth: 70px;
                   var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr))
                 )
               );
-              font-family:
-                var(
+              font-family: var(
                   --_sf-hr-ff,
                   var(
                     --_ctm-mob-dn-ld-me-bn-ft-fy,
@@ -3060,8 +3059,7 @@ $minWidth: 70px;
 
         &::placeholder {
           color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
-          font-family:
-            var(
+          font-family: var(
               --_ctm-mob-dn-pr-tt-ft-fy,
               var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
             ),

package/dist/button copy.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "sass:list";
 
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="button"] {
@@ -197,8 +197,7 @@
           --_sf-hr-fc,
           var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)))
         );
-        font-family:
-          var(
+        font-family: var(
             --_sf-hr-ff,
             var(
               --_ctm-mob-dn-dt-se-ft-fy,

package/dist/button.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "sass:list";
 
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="button"] {

package/dist/buy-for-tab.scss

@@ -127,7 +127,7 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
           &.#{$tabHeader} {
             display: var(--_d-flex);
             border-bottom: 1px solid var(--_gray-200);
-            margin: 0 16px;
+            margin-bottom: 16px;
 
             &[data-hs-br="false"] {
               --_hide-btn-border: none;

package/dist/buyForHeaders.scss

@@ -73,6 +73,11 @@
       font-size: 14px;
       font-weight: normal;
       color: var(--_gray-600);
+      .svg_icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
       .subtitle_container {
         // color: var(--_gray-500);
         // font-weight: 700;
@@ -463,6 +468,11 @@
             background-color: var(--_gray-200);
             border-radius: 50%;
           }
+          .svg_icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
         }
       }
       .employee-details {

package/dist/cartDropdownOverlay.scss

@@ -68,13 +68,14 @@ $button-padding: 6px 12px;
 
   .overlay-panel {
     position: fixed;
+    // right: 0px;
     // top: 100%;
     // left: -160px;
     background: $background-color;
     box-shadow: $shadow;
     border-radius: $border-radius;
     // padding: $spacing-sm;
-    z-index: 20;
+    z-index: 1000;
     display: flex;
     flex-direction: column;
     width: 260px;
@@ -113,7 +114,8 @@ $button-padding: 6px 12px;
     }
 
     .options-container {
-      max-height: 200px;
+      min-height: 150px;
+      max-height: 250px;
       padding: 4px;
       overflow-y: auto;
 

package/dist/container.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 $activeElementSelector: "[data-has-clicked='true']";
 [data-div-type="element"] {
   &[data-element-type="container"] {

package/dist/dropdownTemplate.scss

@@ -104,13 +104,17 @@
       z-index: 10;
       min-width: 240px;
       max-height: 300px;
-      padding: 4px;
+      display: flex;
+      flex-direction: column;
+      // padding: 4px;
 
       .dropdown_menu_ul {
-        max-height: 200px;
+        height: 200px;
+        overflow-y: auto;
         display: flex;
         flex-direction: column;
         gap: 4px;
+        padding: 4px;
       }
 
       .dropdown-opt {
@@ -177,15 +181,18 @@
         }
         .dropdown-item {
           height: 40px;
+          &:not(:last-child) {
+            margin-bottom: 2px;
+          }
         }
       }
 
       .dropdown_selection_actions {
         display: flex;
         align-items: center;
-        height: 40px;
-        position: absolute;
-        bottom: 0;
+        height: 50px;
+        // position: absolute;
+        // bottom: 0;
         width: 100%;
         background: #fff;
         border-top: 1px solid #d1d1d1;
@@ -196,6 +203,15 @@
           display: flex;
           align-items: center;
           justify-content: center;
+          cursor: pointer;
+          &.discard_selection {
+            &:hover {
+              background-color: var(--_gray-50);
+            }
+          }
+          &:hover {
+            background-color: var(--_primary-25);
+          }
           .svg_icon {
             cursor: pointer;
             position: relative !important;

package/dist/empty-states.scss

@@ -4,7 +4,6 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  width: 100%;
 
   h3 {
     font-size: 16px;
@@ -18,6 +17,40 @@
   }
 }
 
+.bulk_order_pad_empty_msg_container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  img {
+    max-width: 100px;
+    max-height: 100px;
+  }
+
+  .bulk_order_pad_empty_msg {
+    font-family: "Lato";
+    font-weight: 700;
+    font-size: 24px;
+    color: var(--_gray-900);
+    line-height: 32px;
+  }
+
+  .bulk_order_pad_support_msg {
+    font-family: "Lato";
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--_gray-900);
+  }
+}
+
 .empty_cart_wrapper {
   display: flex;
   flex-direction: column;

package/dist/emtpy-templates.scss

@@ -0,0 +1,84 @@
+.empty_template {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  h3 {
+    font-size: 16px;
+    color: var(--_gray-900);
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+  p {
+    font-size: 12px;
+    color: var(--_gray-600);
+  }
+}
+
+.empty_cart_wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 6px;
+  margin-top: 24px;
+  img {
+    max-width: 100px;
+    max-height: 100px;
+  }
+
+  .empty_msg_title {
+    font-family: "Lato";
+    font-weight: 700;
+    font-size: 24px;
+    color: var(--_gray-900);
+    line-height: 32px;
+    margin-top: 24px;
+  }
+
+  .empty_msg_desc {
+    font-family: "Lato";
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--_gray-900);
+  }
+  .emtpy_cart_btn {
+    display: flex;
+    gap: 12px;
+    margin-top: 24px;
+    .empty_crt_btn {
+      padding: 12px 24px;
+      border-radius: 6px;
+      background-color: var(--_primary-400);
+      font-weight: 600px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      &:hover {
+        background-color: var(--_primary-500);
+      }
+      .label {
+        color: var(--_base-white);
+        font-size: 16px;
+      }
+      svg path {
+        stroke: var(--_base-white);
+      }
+    }
+    .empty_wl_btn {
+      padding: 12px 24px;
+      border-radius: 6px;
+      background-color: var(--_base-white);
+      color: var(--_primary-400);
+      font-weight: 500;
+      font-size: 16px;
+      &:hover {
+        background-color: var(--_gray-50);
+      }
+    }
+  }
+}

package/dist/filters.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';
@@ -373,8 +373,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
                   )
                 );
-                font-family:
-                  var(
+                font-family: var(
                     --_sf-hr-ff,
                     var(
                       --_ctm-mob-dn-sd-im-dt-se-ft-fy,
@@ -1077,8 +1076,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                   var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
                 )
               );
-              font-family:
-                var(
+              font-family: var(
                   --_sf-hr-ff,
                   var(
                     --_ctm-mob-dn-sd-im-dt-se-ft-fy,

package/dist/globals.scss

@@ -1,9 +1,9 @@
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
-    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
-    "Courier New", monospace;
+  --font-mono:
+    ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
+    "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 
   --foreground-rgb: 0, 0, 0;
   --background-start-rgb: 214, 219, 220;
@@ -98,3 +98,16 @@ a {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+/* For actual disabled buttons via the HTML attribute */
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* For buttons or divs using the .disabled class */
+button.disabled,
+div.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/dist/grid.scss

@@ -1,7 +1,7 @@
 $activeElementSelector: "[data-has-clicked='true']";
 $elementSelector: "[data-div-type='element']";
 
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 [data-div-type="grid"] {
   position: var(--_p-relative);
   display: var(--_d-grid);
@@ -43,6 +43,7 @@ $elementSelector: "[data-div-type='element']";
       }
     }
   }
+
   & > div {
     &[data-type="wrapper-layer"] {
       display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
@@ -51,7 +52,13 @@ $elementSelector: "[data-div-type='element']";
       opacity: var(--_sf-gri-wl-op, 0) !important;
       position: var(--_p-absolute) !important;
       inset: 0 0 0 0;
-      border: var(--_sf-gri-wl-bw) solid var(--_accent-color-2-500);
+      --_sf-pr-wr-ly-br-cl: 25%;
+      border: var(--_sf-gri-wl-bw) solid
+        color-mix(
+          in srgb,
+          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
+          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
+        );
     }
     &[data-div-type="cms-grid-wrapper"] {
       // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));

package/dist/icon-list.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 $item: "flex__icon_list_item";
 $icon: "flex__ili_span_icn";
@@ -139,8 +139,8 @@ $pos: (
                 }
               }
               & > .#{$text} {
-                font-family:
-                  var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy)), sans-serif;
+                font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy)),
+                  sans-serif;
                 font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
                 color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
                 font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));

package/dist/image-temp.scss

@@ -1,6 +1,8 @@
 @use "sass:map";
 @use "sass:list";
 
+@use "../functions.scss" as *;
+
 [data-div-type="element"] {
   &[data-element-type="image"],
   &[data-element-type="brandImage"],
@@ -28,10 +30,10 @@
         opacity: 0;
       }
     }
-
-    &:not([data-element-type="image"]) {
-      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
-    }
+    // width: prepareMediaVariable(--_ctm-lt-wh);
+    height: prepareMediaVariable(--_ctm-lt-ht) !important;
+    // &:not([data-element-type="image"]) {
+    // }
 
     --_aspect-ratio: calc(
       1 *

package/dist/item-stock.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="itemStock"] {

package/dist/language-selector.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="languageMenu"],
@@ -262,8 +262,8 @@
             var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
           .language__name {
             color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
-            font-family:
-              var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy)), sans-serif;
+            font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy)),
+              sans-serif;
             font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
             font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
             font-style: var(
@@ -363,8 +363,8 @@
 
       .language__name {
         color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
-        font-family:
-          var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy)), sans-serif;
+        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy)),
+          sans-serif;
         font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
         font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
         font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));

package/dist/layouter-pro-item.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 $flex: "flx";
 $grid: "grd";
 $flexRow: "rw";

package/dist/layouter-pro.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 $childItemSelector: '[data-element-type="layouter-pro-item"]';
 $flex: "flx";
 $grid: "grd";

package/dist/menu-item.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 $activeElementSelector: "[data-has-clicked='true']";
 
 [data-div-type="element"] {

package/dist/menu-v2.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 $activeElementSelector: "[data-has-clicked='true']";
 $wrapper: ".flex__menu__list__wrapper";
 $menuItem: ".flex__menu__item";
@@ -252,8 +252,7 @@ $defaultValues: (
                   gap: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-gp);
                   & > span {
                     display: var(--_d-flex);
-                    font-family:
-                      var(
+                    font-family: var(
                         --_sf-it-at-ff,
                         var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-fy)})
                       ),
@@ -563,8 +562,7 @@ $defaultValues: (
                             display: var(--_d-flex);
 
                             &#{$subMenuItemText} {
-                              font-family:
-                                var(
+                              font-family: var(
                                   --_sf-it-at-ff,
                                   var(
                                     --_sf-it-hr-ff,

package/dist/order-status.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="orderStatus"] {

package/dist/overflow-module.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 @use "./prefix-list.scss" as *;
 $var: "--_ctm-sf-or-mx-ht";
 $overflow: (

package/dist/past-orders.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 
 $resizerId: "[data-cms-tool='cms-element-resizer']";
 $resizeActive: '[data-cms-element-resizer="true"]';

package/dist/payment-methods.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss" as *;
+@use "../functions.scss" as *;
 [data-div-type="element"] {
   &[data-element-type="paymentMethods"] {
     // width: var(--_lt-wh);