@sc-360-v2/storefront-cms-library 0.4.29 → 0.4.30

package/dist/buyForHeaders.scss

@@ -478,6 +478,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                 display: flex;
                 gap: 8px;
                 color: var(--_gray-700);
+                cursor: pointer;
                 button {
                   display: flex;
                 }
@@ -521,17 +522,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
             }
             //  button styles for primary
             .primary__btn {
-              // color: var(--_thm-py-bs-dt-se-tt-cr);
-              // background-color: var(--_thm-py-bs-dt-se-bd-cr);
-              // color: var(--_thm-py-bs-dt-se-tt-cr);
-              // text-align: center;
-              // border-radius: var(--_thm-py-bs-hr-se-br-rs);
+              color: var(--_thm-py-bs-dt-se-tt-cr);
+              background-color: var(--_thm-py-bs-dt-se-bd-cr);
+              color: var(--_thm-py-bs-dt-se-tt-cr);
+              text-align: center;
+              border-radius: var(--_thm-py-bs-hr-se-br-rs);
               padding: 10px 16px;
-              // height: 40px;
-              // &:hover {
-              //   background-color: var(--_thm-py-bs-hr-se-bd-cr);
-              //   color: var(--_thm-py-bs-hr-se-tt-cr);
-              // }
+              height: 40px;
+              &:hover {
+                background-color: var(--_thm-py-bs-hr-se-bd-cr);
+                color: var(--_thm-py-bs-hr-se-tt-cr);
+              }
             }
           }
 
@@ -1069,6 +1070,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
                     font-size: 1rem;
                     text-decoration: none;
                   }
+                  .auto_saved {
+                    background-color: var(--_success-50);
+                    border-radius: 4px;
+                    padding-inline: 12px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    display: inline-block;
+                    margin-left: 12px;
+                    color: var(--_success-600);
+                  }
                 }
 
                 .autosave-info {
@@ -1830,6 +1841,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
           padding: 24px 24px 8px 24px;
           max-height: 550px;
           overflow-y: auto;
+          &:not(:last-child) {
+            margin-bottom: 16px;
+          }
           .review_header {
             padding-bottom: 24px;
             border-bottom: 1px solid var(--_gray-200);

package/dist/buyForPopup.scss

@@ -22,7 +22,7 @@
       justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--_gray-200);
-      padding: 16px 24px;
+      padding: 16px 12px 16px 16px;
       gap: 4px;
 
       .close-icon {
@@ -63,9 +63,10 @@
     }
 
     .popup_body {
-      padding: 8px 24px 24px 24px;
+      // padding: 8px 24px 24px 24px;
       flex-grow: 1;
       .est__dropdown__main {
+        padding-inline: 16px;
         .est__dropdown {
           .list .list__option {
             font-size: 14px;
@@ -75,6 +76,9 @@
             justify-content: space-between;
             align-items: center;
             width: 100%;
+            &.placeholder__text {
+              color: var(--_gray-500);
+            }
             .value__selected {
               justify-content: start;
             }
@@ -132,6 +136,9 @@
           //     }
           //   }
           // }
+          & > span {
+            display: flex;
+          }
 
           &:disabled {
             background: var(--_sf-hr-bd-cr, var(--_thm-py-bs-dt-se-bd-cr));
@@ -199,14 +206,17 @@
   flex-direction: column;
   gap: 16px;
   overflow-y: auto;
-  max-height: 210px;
+  max-height: 240px;
+  overflow-y: auto;
+
   .empty__data {
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    height: 210px;
+    margin-top: 36px;
+
     p {
       color: var(--_thm-ty-p1-tt-cr);
       font-size: 18px;
@@ -218,6 +228,10 @@
 }
 
 .group_section {
+  padding-inline: 16px 6px;
+  height: 100%;
+  overflow-y: auto;
+
   .group_header {
     display: flex;
     align-items: center;
@@ -277,7 +291,7 @@
       }
 
       .user_id {
-        font-size: 12px;
+        font-size: 14px;
         color: var(--_thm-ty-p3-tt-cr);
         display: flex;
         gap: 4px;

package/dist/language-selector.scss

@@ -423,6 +423,7 @@
 
           &.open .list {
             display: flex;
+            animation: slideDown 0.8s ease-in-out;
           }
           .dropdown__button__wrapper {
             width: 100%;
@@ -442,7 +443,7 @@
           .est__dropdown__icon {
             position: absolute;
             right: 5px;
-            // transition: all 200ms ease-in;
+            transition: transform 0.4s ease-in-out;
             &.open {
               transform: rotate(180deg);
             }
@@ -466,6 +467,7 @@
           }
 
           .list {
+            animation: slideDown 0.8s ease-in-out;
             display: none;
             flex-direction: column;
             border: 1px solid var(--_gray-200);
@@ -502,3 +504,25 @@
     }
   }
 }
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}

package/dist/multi-select-dropdown.scss

@@ -23,6 +23,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   &--disabled {
     opacity: 0.6;
     pointer-events: none;
+    background-color: var(--_gray-100);
   }
 }
 
@@ -33,7 +34,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   gap: 14px;
   min-height: 40px;
   border: 1px solid $msd-border;
-  background: $msd-bg;
+  background: var(--_base-white);
   border-radius: 4px;
   padding: 6px 8px;
   cursor: text;
@@ -67,7 +68,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     display: inline-flex;
     align-items: center;
     gap: 6px;
-    padding: 2px 8px 5px 8px;
+    padding: 5px 8px 5px 8px;
     background: $msd-chip-bg;
     border-radius: 999px;
     line-height: 1;
@@ -96,6 +97,10 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   line-height: 1;
   padding: 0;
   margin: 0;
+  svg {
+    width: 10px;
+    height: 10px;
+  }
   &:hover {
     color: $msd-chip-remove-hover;
   }
@@ -110,6 +115,8 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   font-size: 14px;
   background: transparent;
   color: $msd-text;
+  line-height: 19px;
+
   &::placeholder {
     color: $msd-muted;
   }
@@ -122,39 +129,41 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 .msd__clear,
 .msd__arrow {
+  width: 26px;
+  // height: 26px;
   border: 0;
   background: transparent;
   cursor: pointer;
   font-size: 12px;
   color: $msd-muted;
-  padding: 4px 6px;
+  // padding: 4px 6px;
   border-radius: 4px;
-  &:hover {
-    background: #f8fafc;
-    color: #374151;
-  }
+  display: flex;
+  // &:hover {
+  //   color: #374151;
+  // }
 }
 
 .msd__ellipsis {
   position: absolute;
-  right: 33px; // leave room for the arrow
-  top: 3px;
+  right: 30px; // leave room for the arrow
+  top: 5px;
   // transform: translateY(-50%);
   pointer-events: none;
   background: $msd-bg;
   padding-left: 6px;
-  width: 30px;
+  width: 24px;
 }
 
 .msd__menu {
   position: absolute;
   z-index: 20;
-  top: 100%;
+  top: 99%;
   left: 0;
   right: 0;
   background: $msd-bg;
   border: 1px solid $msd-border;
-  border-radius: 10px;
+  border-radius: 4px;
   box-shadow: $msd-shadow;
   overflow: auto;
   padding: 6px;
@@ -194,7 +203,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   //   background: #f1f5f9;
   // }
   &.is-selected {
-    font-weight: 600;
+    font-weight: normal;
     @include BgColorLighter(var(--_thm-cs-at-py), 8%);
     color: var(--_thm-cs-at-py);
     // background: var(--_thm-cs-at-py);
@@ -229,6 +238,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
     &::after {
       content: "";
       position: absolute;
+      top: 2px;
       inset: 0;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 13.296L3.7 9.367l1.414-1.414 2.515 2.515L14.886 3.21l1.414 1.415z"/></svg>')
         center/12px 12px no-repeat;

package/dist/order-status.scss

@@ -38,7 +38,6 @@ $defaultValues: (
     }
 
     .order-confirmation {
-      @include prepareMediaQueries($defaultValues);
       display: flex;
       flex-direction: column;
       padding: prepareMediaVariable(--_ctm-dn-or-wt-pg);
@@ -60,6 +59,7 @@ $defaultValues: (
         --_ctm-mob-dn-or-wt-im-gp,
         var(--_ctm-tab-dn-or-wt-im-gp, var(--_ctm-dn-or-wt-im-gp))
       );
+      @include prepareMediaQueries($defaultValues);
 
       .each-order {
         border: 1px solid var(--_gray-200);

package/dist/product-image.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:list";
-@use "./functions.scss";
+@use "./functions.scss" as *;
 
 [data-div-type="element"] {
   &[data-element-type="productImage"] {
@@ -166,6 +166,7 @@
       --text-high-contrast-rgb-value: 49, 49, 49;
       --detail-medium-contrast: rgb(234, 234, 234);
       --text-body: rgb(54, 49, 61);
+      overflow: hidden;
 
       position: relative;
       background-color: var(
@@ -731,8 +732,14 @@
       &[data-background-shape="Round"] {
         .left-button,
         .right-button {
-          background-color: #f2f5f5;
-          box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
+          // background-color: var(
+          //   --_ctm-mob-dn-pn-as-bd-cr,
+          //   var(--_ctm-tab-dn-pn-as-bd-cr, var(--_ctm-dn-pn-as-bd-cr))
+          // );
+          &:not(:disabled):hover {
+            @include BgColorLighter(var(--_thm-py-bs-hr-se-bd-cr), 5%);
+          }
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
       }
 
@@ -755,6 +762,32 @@
         cursor: pointer;
         outline: none;
         margin-left: 12px;
+        span {
+          display: flex;
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+
+            path {
+              stroke: var(
+                --_ctm-mob-dn-pn-as-aw-cr,
+                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+              );
+            }
+          }
+        }
         &:disabled {
           & svg {
             path {
@@ -782,7 +815,32 @@
         outline: none;
         margin-right: 12px;
         padding: 10px;
+        span {
+          display: flex;
+          svg {
+            width: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
+            height: calc(
+              var(
+                  --_ctm-mob-dn-pn-as-aw-se,
+                  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
+                ) *
+                0.5
+            );
 
+            path {
+              stroke: var(
+                --_ctm-mob-dn-pn-as-aw-cr,
+                var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
+              );
+            }
+          }
+        }
         &:disabled {
           & svg {
             path {

package/dist/quick-order-pad.scss

@@ -25,7 +25,7 @@ $input-padding: 10px 12px;
   .input-group {
     // display: flex;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 90px;
     gap: 12px;
     height: fit-content;
     align-items: center;
@@ -105,57 +105,60 @@ $input-padding: 10px 12px;
       font-weight: 400;
       line-height: 20px;
     }
+    .msd {
+      width: 100%;
+    }
 
     .input-group-right-col {
       display: flex;
       gap: 16px;
-      .msd {
-        width: 100%;
+      max-width: 1200px;
+    }
+    .add-btn {
+      // background-color: $primary;
+      // color: $white;
+      padding: 10px 16px;
+      height: 40px;
+      gap: 6px;
+      // border-radius: 4px;
+      // font-weight: 600;
+      // font-size: 14px;
+      // cursor: pointer;
+      // transition: background-color 0.2s;
+      // display: flex;
+      // gap: 4px;
+      // line-height: 20px;
+      // justify-content: center;
+      svg path {
+        stroke: var(--_base-white);
       }
-      .add-btn {
-        // background-color: $primary;
-        // color: $white;
-        padding: 10px 16px;
-        // border-radius: 4px;
-        // font-weight: 600;
-        // font-size: 14px;
-        // cursor: pointer;
-        // transition: background-color 0.2s;
-        // display: flex;
-        // gap: 4px;
-        // line-height: 20px;
-        // justify-content: center;
-        svg path {
-          stroke: var(--_base-white);
-        }
-        &.disabled {
-          opacity: 0.4;
-          pointer-events: none;
-        }
-        .spinner {
-          margin-top: -3px;
-          display: inline-block;
-        }
-
-        // .add-icon {
-        //   width: 20px;
-        //   height: 20px;
-        //   display: flex;
-        //   align-items: center;
-        //   justify-content: center;
-
-        //   svg {
-        //     width: 16px;
-        //     height: 16px;
-        //     path {
-        //       stroke: #fff;
-        //     }
-        //   }
-        // }
-        // &:hover {
-        //   background-color: $primary-hover;
-        // }
+      &.disabled {
+        opacity: 0.4;
+        pointer-events: none;
       }
+      .spinner {
+        // margin-top: -3px;
+        display: inline-block;
+      }
+
+      // .add-icon {
+      //   width: 20px;
+      //   height: 20px;
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: center;
+
+      //   svg {
+      //     width: 16px;
+      //     height: 16px;
+      //     path {
+      //       stroke: #fff;
+      //     }
+      //   }
+      // }
+      // &:hover {
+      //   background-color: $primary-hover;
+      // }
     }
   }
   .cart_products_wrapper {

package/dist/shipping-payments.scss

@@ -2089,10 +2089,11 @@ $activeElementSelector: "[data-has-clicked='true']";
                   .chk_address {
                     display: flex;
                     flex-direction: column;
-                    gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
+                    // gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);
+                    gap: 12px;
 
                     .chk_saved_address_name {
-                      color: var(--_gray-700);
+                      color: var(--_gray-900);
                       font-size: 16px;
                       font-weight: 600;
                     }
@@ -2108,7 +2109,7 @@ $activeElementSelector: "[data-has-clicked='true']";
                     }
 
                     .chk_saved_address_value {
-                      color: var(--_gray-700);
+                      color: var(--_gray-900);
                       font-size: 12px;
                     }
                     .address_skeletons {
@@ -2120,7 +2121,7 @@ $activeElementSelector: "[data-has-clicked='true']";
 
                   .contact {
                     font-size: 0.875rem;
-                    color: $dark-color;
+                    color: var(--_gray-900);
                     line-height: 1.4;
                   }
                 }

package/dist/types/builder/enums/data-connectors.d.ts

@@ -15,7 +15,6 @@ export declare enum dataConnectorapis {
     MARCHANDISER_SETS = "MARCHANDISER_SETS",
     BUNDLES = "BUNDLES",
     BUNLES_BY_ID = "BUNLES_BY_ID",
-    BUNDLE_BY_TYPE = "BUNDLE_BY_TYPE",
     PRODUCT_BUNDLE_DETAILS = "PRODUCT_BUNDLE_DETAILS",
     CATEGORY_BUNDLE_DETAILS = "CATEGORY_BUNDLE_DETAILS",
     CATEGORY_GROUPS = "CATEGORY_GROUPS",