@sc-360-v2/storefront-cms-library 0.4.25 → 0.4.27

package/dist/language-selector.scss

@@ -475,10 +475,13 @@
             left: 0;
             width: 100%;
             background-color: #fff;
-            border-radius: 4px;
+            border-radius: prepareMediaVariable(--_ctm-dn-wt-dn-br-rs);
             z-index: var(--_higher-zIndex);
             max-height: 200px;
             overflow-y: auto;
+            border-width: prepareMediaVariable(--_ctm-dn-wt-dn-br-wh);
+            border-style: prepareMediaVariable(--_ctm-dn-wt-dn-br-se);
+            border-color: prepareMediaVariable(--_ctm-dn-wt-dn-br-cr);
             margin-top: var(
               --_ctm-mob-lt-gp-bn-is,
               var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))

package/dist/modal.scss

@@ -2048,40 +2048,50 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
         gap: 10px;
 
         .cancel-btn {
-          border-radius: $radius;
+          // border-radius: $radius;
           padding: 10px 14px;
-          font-weight: 500;
-          font-size: $font-size-base;
-          color: var(--_gray-900);
-          cursor: pointer;
-          transition: background 0.2s;
-
-          &:hover {
-            background: var(--_gray-100);
-          }
+          // font-weight: 500;
+          // font-size: $font-size-base;
+          // color: var(--_gray-900);
+          // cursor: pointer;
+          // transition: background 0.2s;
+
+          // &:hover {
+          //   background: var(--_gray-100);
+          // }
         }
 
         .cart-btn {
-          background: $primary;
-          color: $white;
-          border-radius: $radius;
+          // background: $primary;
+          // color: $white;
+          // border-radius: $radius;
           padding: 10px 16px;
-          font-weight: 600;
-          font-size: $font-size-base;
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          cursor: pointer;
-          transition: background 0.2s;
-          span {
+          // font-weight: 600;
+          // font-size: $font-size-base;
+          // display: flex;
+          // align-items: center;
+          // gap: 8px;
+          // cursor: pointer;
+          // transition: background 0.2s;
+          // span {
+          //   display: flex;
+          // }
+          // svg path {
+          //   stroke: var(--_base-white);
+          // }
+
+          // &:hover {
+          //   background: $primary-hover;
+          // }
+          & > span {
             display: flex;
+            svg path {
+              stroke: var(--_base-white);
+            }
           }
-          svg path {
-            stroke: var(--_base-white);
-          }
-
-          &:hover {
-            background: $primary-hover;
+          &.disabled {
+            opacity: 0.4;
+            pointer-events: none;
           }
         }
       }

package/dist/multi-select-dropdown.scss

@@ -0,0 +1,241 @@
+/* ----------------------------------------------
+   File: MultiSelect.scss
+   Place this in the same folder. This file contains styles only.
+------------------------------------------------*/
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+$msd-bg: #fff;
+$msd-border: #dcdfe4;
+$msd-border-focus: #6b9cff;
+$msd-text: #1f2937;
+$msd-muted: #6b7280;
+$msd-chip-bg: #f3f4f6;
+$msd-chip-text: #111827;
+$msd-chip-remove: #9ca3af;
+$msd-chip-remove-hover: #4b5563;
+$msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+
+.msd {
+  position: relative;
+  color: $msd-text;
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.msd__control {
+  position: relative; // anchor for ellipsis
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 40px;
+  border: 1px solid $msd-border;
+  background: $msd-bg;
+  border-radius: 4px;
+  padding: 6px 8px;
+  cursor: text;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+
+  &--open {
+    box-shadow: $msd-shadow;
+    border-color: lighten($msd-border, 5%);
+  }
+
+  &:focus-within {
+    border-color: $msd-border-focus;
+    box-shadow: 0 0 0 3px rgba($msd-border-focus, 0.25);
+  }
+}
+
+.msd__chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap; // single line only
+  overflow: hidden; // hide overflowed chips
+  white-space: nowrap; // prevent wrapping
+  gap: 6px;
+  min-height: 28px;
+  flex: 1 1 auto;
+  .msd__chip {
+    // ensure chips do not wrap individually
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 8px 5px 8px;
+    background: $msd-chip-bg;
+    border-radius: 999px;
+    line-height: 1;
+    border: 1px solid lighten($msd-border, 6%);
+  }
+  &--single {
+    .msd__chip {
+      background-color: transparent;
+      border: none !important;
+      border-radius: 0px !important;
+    }
+  }
+}
+
+.msd__chipLabel {
+  font-size: 12px;
+  color: $msd-chip-text;
+}
+
+.msd__chipRemove {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: $msd-chip-remove;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  &:hover {
+    color: $msd-chip-remove-hover;
+  }
+}
+
+.msd__input {
+  border: 0;
+  outline: 0;
+  flex: 0 0 auto;
+  min-width: 100px; // keep single line
+  max-width: 45%; // avoid pushing actions off-screen
+  font-size: 14px;
+  background: transparent;
+  color: $msd-text;
+  &::placeholder {
+    color: $msd-muted;
+  }
+}
+.msd__clear {
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+.msd__clear,
+.msd__arrow {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12px;
+  color: $msd-muted;
+  padding: 4px 6px;
+  border-radius: 4px;
+  &:hover {
+    background: #f8fafc;
+    color: #374151;
+  }
+}
+
+.msd__ellipsis {
+  position: absolute;
+  right: 33px; // leave room for the arrow
+  top: 3px;
+  // transform: translateY(-50%);
+  pointer-events: none;
+  background: $msd-bg;
+  padding-left: 6px;
+  width: 30px;
+}
+
+.msd__menu {
+  position: absolute;
+  z-index: 20;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: $msd-bg;
+  border: 1px solid $msd-border;
+  border-radius: 10px;
+  box-shadow: $msd-shadow;
+  overflow: auto;
+  padding: 6px;
+}
+
+.msd__empty {
+  padding: 10px;
+  text-align: center;
+  color: $msd-muted;
+  font-size: 13px;
+}
+
+.msd__menu--up {
+  top: auto;
+  bottom: 100%;
+}
+
+.msd__option {
+  // display: grid;
+  // grid-template-columns: 16px 1fr;
+  // align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  svg path {
+    stroke: var(--_primary-50);
+  }
+
+  &:not(.is-disabled):hover {
+    @include BgColorLighter(var(--_thm-cs-at-py), 8%);
+  }
+  // &.is-active {
+  //   background: #f1f5f9;
+  // }
+  &.is-selected {
+    font-weight: 600;
+    @include BgColorLighter(var(--_thm-cs-at-py), 8%);
+    color: var(--_thm-cs-at-py);
+    // background: var(--_thm-cs-at-py);
+    svg path {
+      stroke: var(--_thm-cs-at-py);
+    }
+  }
+  &.is-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  &--selectAll {
+    font-weight: 600;
+  }
+  &:not(:last-child) {
+    margin-bottom: 2px;
+  }
+}
+
+.msd__checkbox {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid $msd-border;
+  background: #fff;
+  position: relative;
+  top: 2px;
+
+  &.is-checked {
+    border-color: $msd-border-focus;
+    background: $msd-border-focus;
+    &::after {
+      content: "";
+      position: absolute;
+      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;
+    }
+  }
+
+  &.is-disabled {
+    opacity: 0.6;
+  }
+}

package/dist/option-bar.scss

@@ -194,8 +194,8 @@
             var(--_ctm-tab-dn-tb-hr-se-in-c1, var(--_ctm-dn-tb-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-tb-hr-ue,
-            var(--_ctm-tab-dn-tb-hr-ue, var(--_ctm-dn-tb-hr-ue))
+            --_ctm-mob-dn-tb-hr-se-ue,
+            var(--_ctm-tab-dn-tb-hr-se-ue, var(--_ctm-dn-tb-hr-se-ue))
           );
 
           // for pading and width

package/dist/order-status.scss

@@ -1656,7 +1656,7 @@ $defaultValues: (
               --_ctm-mob-dn-pt-wt-pt-pe-tt-an,
               var(--_ctm-tab-dn-pt-wt-pt-pe-tt-an, var(--_ctm-dn-pt-wt-pt-pe-tt-an))
             );
-            margin-left: 12px;
+            // margin-left: 12px;
           }
         }
 
@@ -1664,7 +1664,8 @@ $defaultValues: (
           margin: 32px 16px 16px 0px;
           button {
             padding: 12px 16px;
-            color: var(--_primary-400);
+            // color: var(--_primary-400);
+            color: var(--_thm-cs-tt-ls-as);
             font-weight: 600;
             border-radius: 6px;
             &:hover {
@@ -1678,20 +1679,23 @@ $defaultValues: (
       .order-attributes {
         border-top: 1px solid #eaecf0;
         padding-top: 24px;
-
-        h4 {
-          font-size: 14px;
-          font-weight: 400;
-          color: var(--_gray-500);
-          line-height: 20px;
+        .order_attribute_text {
+          font-weight: 700;
         }
 
-        p {
-          font-size: 14px;
-          font-weight: 600;
-          line-height: 20px;
-          color: var(--_gray-900);
-        }
+        // h4 {
+        //   font-size: 14px;
+        //   font-weight: 400;
+        //   color: var(--_gray-500);
+        //   line-height: 20px;
+        // }
+
+        // p {
+        //   font-size: 14px;
+        //   font-weight: 600;
+        //   line-height: 20px;
+        //   color: var(--_gray-900);
+        // }
       }
 
       /* ───────── Responsive ───────── */

package/dist/product-actions.scss

@@ -189,8 +189,8 @@
             var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ad-to-ct-hr-ue,
-            var(--_ctm-tab-dn-ad-to-ct-hr-ue, var(--_ctm-dn-ad-to-ct-hr-ue))
+            --_ctm-mob-dn-ad-to-ct-hr-se-ue,
+            var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue))
           );
 
           // for pading and width
@@ -288,7 +288,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -408,8 +408,8 @@
             var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-by-nw-hr-ue,
-            var(--_ctm-tab-dn-by-nw-hr-ue, var(--_ctm-dn-by-nw-hr-ue))
+            --_ctm-mob-dn-by-nw-hr-se-ue,
+            var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue))
           );
 
           // for pading and width
@@ -508,7 +508,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -628,8 +628,8 @@
             var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-wt-hr-ue,
-            var(--_ctm-tab-dn-wt-hr-ue, var(--_ctm-dn-wt-hr-ue))
+            --_ctm-mob-dn-wt-hr-se-ue,
+            var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue))
           );
 
           // for pading and width
@@ -725,7 +725,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -844,8 +844,8 @@
             var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ce-hr-ue,
-            var(--_ctm-tab-dn-ce-hr-ue, var(--_ctm-dn-ce-hr-ue))
+            --_ctm-mob-dn-ce-hr-se-ue,
+            var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue))
           );
 
           // for pading and width
@@ -941,7 +941,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1060,8 +1060,8 @@
             var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ad-to-qe-hr-ue,
-            var(--_ctm-tab-dn-ad-to-qe-hr-ue, var(--_ctm-dn-ad-to-qe-hr-ue))
+            --_ctm-mob-dn-ad-to-qe-hr-se-ue,
+            var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue))
           );
 
           // for pading and width
@@ -1160,7 +1160,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1279,8 +1279,8 @@
             var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ad-to-or-te-hr-ue,
-            var(--_ctm-tab-dn-ad-to-or-te-hr-ue, var(--_ctm-dn-ad-to-or-te-hr-ue))
+            --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
+            var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
           );
 
           // for pading and width
@@ -1394,7 +1394,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1512,8 +1512,8 @@
             var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-ny-me-hr-ue,
-            var(--_ctm-tab-dn-ny-me-hr-ue, var(--_ctm-dn-ny-me-hr-ue))
+            --_ctm-mob-dn-ny-me-hr-se-ue,
+            var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
           );
 
           // for pading and width
@@ -1609,7 +1609,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1727,8 +1727,8 @@
             var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-dd-hr-ue,
-            var(--_ctm-tab-dn-dd-hr-ue, var(--_ctm-dn-dd-hr-ue))
+            --_ctm-mob-dn-dd-hr-se-ue,
+            var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
           );
 
           // for pading and width
@@ -1824,7 +1824,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {
@@ -1942,8 +1942,8 @@
             var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
           );
           --_sf-hr-ue: var(
-            --_ctm-mob-dn-me-hr-ue,
-            var(--_ctm-tab-dn-me-hr-ue, var(--_ctm-dn-me-hr-ue))
+            --_ctm-mob-dn-me-hr-se-ue,
+            var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
           );
 
           // for pading and width
@@ -2039,7 +2039,7 @@
 
         &:hover .icon--hover {
           // opacity: 1;
-          display: inline;
+          display: flex;
         }
 
         &:hover .icon--default {