@sonic-equipment/ui 0.0.39 → 0.0.41

package/dist/styles.css

@@ -206,6 +206,7 @@
 
   /* Box shadows */
   --box-shadow-heavy: 0 0 96px 0 rgb(0 0 0 / 30%);
+  --box-shadow-medium: 0 0 16px 0 rgb(0 0 0 / 30%);
   --box-shadow-light: 0 0 8px 0 rgb(0 0 0 / 30%);
 }
 :root {
@@ -782,6 +783,10 @@
     text-decoration: line-through;
   }
 
+  .product-price-module-oIU1K .product-price-module-til0s.product-price-module-V1NCf {
+      opacity: 0;
+    }
+
   .product-price-module-oIU1K .product-price-module-FfVhl {
     display: flex;
     flex-wrap: wrap;
@@ -817,7 +822,7 @@
     font-weight: var(--font-weight-normal);
   }
 
-  .product-price-module-oIU1K:has(.product-price-module-til0s) {
+  .product-price-module-oIU1K:has(.product-price-module-til0s:not(.product-price-module-V1NCf)) {
     --current-price-color: var(--color-brand-red);
     --current-price-font-style: italic;
   }
@@ -854,6 +859,7 @@
 
 .product-card-module-pLaiB {
   --title-font-size: var(--font-size-16);
+  --box-shadow: var(--box-shadow-medium);
   --price-font-size-wholes: var(--font-size-32);
   --price-font-size-decimals: var(--font-size-20);
   --image-width: 122px;
@@ -947,13 +953,14 @@
 
 @media (hover: hover) {
     .product-card-module-pLaiB:hover {
-      box-shadow: var(--box-shadow-heavy);
+      box-shadow: var(--box-shadow);
       scale: 1.04;
     }
 }
 
 @container (min-width: 273px) {
   .product-card-module-pLaiB {
+    --box-shadow: var(--box-shadow-heavy);
     --image-width: 204px;
     --padding-bottom: var(--space-24);
   }
@@ -982,98 +989,6 @@
   }
 }
 
-.category-card-module-4NUjH {
-  all: unset;
-  display: grid;
-  max-width: 136px;
-  cursor: pointer;
-  padding-inline: 10px;
-  place-items: center;
-  -webkit-tap-highlight-color: transparent;
-}
-
-  .category-card-module-4NUjH,
-  .category-card-module-4NUjH * {
-    box-sizing: border-box;
-  }
-
-  .category-card-module-4NUjH .category-card-module-LEhh3 {
-    margin-top: var(--space-8);
-    margin-bottom: 0;
-    color: var(--color-brand-black);
-    font-size: var(--font-size-12);
-    font-style: italic;
-    font-weight: var(--font-weight-bold);
-    line-height: 1;
-    text-align: center;
-    text-transform: uppercase;
-    word-break: break-word;
-  }
-
-  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3 {
-      color: var(--color-brand-red);
-    }
-
-  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3, .category-card-module-4NUjH.category-card-module-vJ7vB .category-card-module-LEhh3 {
-      color: var(--color-brand-red);
-    }
-
-  .category-card-module-4NUjH .category-card-module-oNTrK {
-    position: relative;
-    display: flex;
-    width: 62px;
-    aspect-ratio: 1 / 1;
-  }
-
-  .category-card-module-4NUjH .category-card-module-oNTrK img {
-      position: relative;
-      z-index: 5;
-      margin: auto;
-    }
-
-  .category-card-module-4NUjH .category-card-module-oNTrK::after {
-      position: absolute;
-      width: 52px;
-      border-radius: 100%;
-      margin: auto;
-      aspect-ratio: 1 / 1;
-      background-color: var(--color-brand-light-gray);
-      content: '';
-      inset: 0;
-    }
-
-  @media (width >= 768px) {
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 74px;
-    }
-
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 62px;
-      }
-  }
-
-  @media (width >= 1024px) {.category-card-module-4NUjH {
-    padding-inline: 0
-}
-  }
-
-  @media (width >= 1440px) {.category-card-module-4NUjH {
-    max-width: 144px
-}
-
-    .category-card-module-4NUjH .category-card-module-oNTrK {
-      width: 96px;
-    }
-
-      .category-card-module-4NUjH .category-card-module-oNTrK::after {
-        width: 80px;
-      }
-
-    .category-card-module-4NUjH .category-card-module-LEhh3 {
-      margin-top: var(--space-16);
-    }
-  }
-
 /**
  * Swiper 11.1.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -1368,28 +1283,31 @@
     position: relative;
     overflow: visible;
   }
-.carousel-module-ealh- .carousel-module-IftbN::before,
-    .carousel-module-ealh- .carousel-module-IftbN::after {
-      position: absolute;
-      z-index: calc(var(--carousel-layer) - 1);
-      top: 0;
-      width: calc((100vw - 100%) / 2);
-      height: 100%;
-      background: var(--color-brand-white);
-      content: '';
-      opacity: 1;
-      transition: opacity 0.2s ease;
-    }
-.carousel-module-ealh- .carousel-module-IftbN::before {
-      left: calc(-1 * ((100vw - 100%) / 2));
-    }
-.carousel-module-ealh- .carousel-module-IftbN::after {
-      right: calc(-1 * ((100vw - 100%) / 2));
-    }
+.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::before,
+      .carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::after {
+        position: absolute;
+        z-index: calc(var(--carousel-layer) - 1);
+        top: 0;
+        width: calc((100vw - 100%) / 2);
+        height: 100%;
+        background: var(--color-brand-white);
+        content: '';
+        opacity: 1;
+        transition: opacity 0.2s ease;
+      }
+.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::before {
+        left: calc(-1 * ((100vw - 100%) / 2));
+      }
+.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::after {
+        right: calc(-1 * ((100vw - 100%) / 2));
+      }
 .carousel-module-ealh- .carousel-module-bUMlb {
     display: block;
     width: auto;
   }
+.carousel-module-ealh- .carousel-module-kcqEE.carousel-module-uCrOA {
+      display: none;
+    }
 .carousel-module-ealh-:has(.carousel-module-T7bTr .carousel-module-kcqEE:hover) .carousel-module-IftbN::after, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::after {
         opacity: 0;
       }
@@ -2014,17 +1932,22 @@
 }
 
 .loading-overlay-module-L67Gy {
+  --header-height-desktop: 96px;
+  --header-height-mobile: 54px;
+  --header-height: var(--header-height-mobile);
+
+  display: grid;
   width: 100%;
-  height: 100dvh;
+  height: calc(100dvh - var(--header-height));
   background-color: var(--color-white);
+  place-items: center;
 }
 
-  .loading-overlay-module-L67Gy .loading-overlay-module-N-eSX {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+@media (width >= 1024px) {
+  .loading-overlay-module-L67Gy {
+    --header-height: var(--header-height-desktop);
   }
+}
 
 .page-container-module-PYmbC {
   overflow: hidden;
@@ -2234,6 +2157,98 @@
     height: 12px;
   }
 
+.category-card-module-4NUjH {
+  all: unset;
+  display: grid;
+  max-width: 136px;
+  cursor: pointer;
+  padding-inline: 10px;
+  place-items: center;
+  -webkit-tap-highlight-color: transparent;
+}
+
+  .category-card-module-4NUjH,
+  .category-card-module-4NUjH * {
+    box-sizing: border-box;
+  }
+
+  .category-card-module-4NUjH .category-card-module-LEhh3 {
+    margin-top: var(--space-8);
+    margin-bottom: 0;
+    color: var(--color-brand-black);
+    font-size: var(--font-size-12);
+    font-style: italic;
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    text-align: center;
+    text-transform: uppercase;
+    word-break: break-word;
+  }
+
+  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3 {
+      color: var(--color-brand-red);
+    }
+
+  .category-card-module-4NUjH[data-pressed] .category-card-module-LEhh3, .category-card-module-4NUjH[data-hovered] .category-card-module-LEhh3, .category-card-module-4NUjH[data-focused] .category-card-module-LEhh3, .category-card-module-4NUjH.category-card-module-vJ7vB .category-card-module-LEhh3 {
+      color: var(--color-brand-red);
+    }
+
+  .category-card-module-4NUjH .category-card-module-oNTrK {
+    position: relative;
+    display: flex;
+    width: 62px;
+    aspect-ratio: 1 / 1;
+  }
+
+  .category-card-module-4NUjH .category-card-module-oNTrK img {
+      position: relative;
+      z-index: 5;
+      margin: auto;
+    }
+
+  .category-card-module-4NUjH .category-card-module-oNTrK::after {
+      position: absolute;
+      width: 52px;
+      border-radius: 100%;
+      margin: auto;
+      aspect-ratio: 1 / 1;
+      background-color: var(--color-brand-light-gray);
+      content: '';
+      inset: 0;
+    }
+
+  @media (width >= 768px) {
+    .category-card-module-4NUjH .category-card-module-oNTrK {
+      width: 74px;
+    }
+
+      .category-card-module-4NUjH .category-card-module-oNTrK::after {
+        width: 62px;
+      }
+  }
+
+  @media (width >= 1024px) {.category-card-module-4NUjH {
+    padding-inline: 0
+}
+  }
+
+  @media (width >= 1440px) {.category-card-module-4NUjH {
+    max-width: 144px
+}
+
+    .category-card-module-4NUjH .category-card-module-oNTrK {
+      width: 96px;
+    }
+
+      .category-card-module-4NUjH .category-card-module-oNTrK::after {
+        width: 80px;
+      }
+
+    .category-card-module-4NUjH .category-card-module-LEhh3 {
+      margin-top: var(--space-16);
+    }
+  }
+
 .sidebar-module-fSa9Q {
   --transition-timing-function: ease-in-out;
 
@@ -2464,6 +2479,7 @@
 .global-search-module-d2g2F {
   position: relative;
   z-index: var(--search-layer);
+  font-family: var(--font-family-sonic);
 }
 
 .global-search-module-d2g2F .global-search-module-Sx8Lx {
@@ -2529,6 +2545,117 @@
                 appearance: none;
       }
 
+.search-content-module-KIok6 {
+  --padding-inline: var(--space-16);
+  --padding-block: var(--space-20);
+
+  display: grid;
+  gap: var(--space-24);
+  grid-template-columns: 1fr;
+}
+
+  .search-content-module-KIok6 .search-content-module-YRLIf {
+    display: block;
+  }
+
+  .search-content-module-KIok6 .search-content-module-qK5sg {
+    display: block;
+  }
+
+.search-content-module-HLQ4O {
+  display: grid;
+  padding-block: var(--padding-block);
+  padding-inline: var(--padding-inline);
+}
+
+.search-content-module-HLQ4O .search-content-module-ywvOI {
+    margin-top: 0;
+    margin-bottom: var(--space-8);
+    color: var(--color-brand-dark-gray);
+    font-size: var(--font-size-16);
+    font-weight: var(--font-weight-normal);
+    line-height: 1;
+  }
+
+.search-content-module-HLQ4O.search-content-module--V5hi {
+    padding-block-end: 0;
+    padding-inline: 0;
+  }
+
+.search-content-module-HLQ4O.search-content-module--V5hi .search-content-module-ywvOI {
+      padding-inline: var(--padding-inline);
+    }
+
+.search-content-module-bcFCH {
+  --column-gap: var(--space-16);
+  --card-width: 154px;
+
+  overflow: hidden;
+  padding-top: 32px;
+  margin-top: -32px;
+  gap: var(--column-gap);
+  padding-block-end: var(--padding-block);
+  padding-inline: var(--padding-inline);
+}
+
+@media (width >= 768px) {
+  .search-content-module-KIok6 {
+    grid-template-columns: 324px 1fr;
+  }
+
+  .search-content-module-bcFCH {
+    --card-width: 192px;
+  }
+}
+
+@media (width >= 1024px) {
+  .search-content-module-KIok6 {
+    --padding-inline: var(--space-32);
+  }
+}
+
+.product-carousel-module-XVTB1 {
+  --slide-width: 154px;
+
+  position: relative;
+}
+
+  .product-carousel-module-XVTB1 > * {
+    width: var(--slide-width);
+  }
+
+  .product-carousel-module-XVTB1:not(:last-child)::after {
+      position: absolute;
+      top: 0;
+      left: calc(100% + var(--column-gap) / 2);
+      width: 1px;
+      height: 100%;
+      background-image: linear-gradient(
+        to bottom,
+        var(--color-white),
+        #e0dfdf 10%,
+        #bdbcbc 51%,
+        #e0dfdf 90%,
+        var(--color-white)
+      );
+      content: '';
+    }
+
+  @media (hover: hover) {
+    .product-carousel-module-XVTB1:has(> :hover) {
+      z-index: 1;
+    }
+      .product-carousel-module-XVTB1:has(> :hover)::after, .product-carousel-module-XVTB1:has(+ .product-carousel-module-XVTB1:hover)::after {
+        display: none;
+      }
+  }
+
+@media (width >= 768px) {
+  .product-carousel-module-XVTB1 {
+    --slide-width: 192px;
+  }
+}
+
 .search-result-panel-module-KBrc9 {
   position: absolute;
   z-index: var(--sidebar-layer);
@@ -2536,15 +2663,12 @@
   left: 0;
   overflow: hidden;
   width: 100%;
+  box-sizing: border-box;
   background-color: var(--color-white);
   box-shadow: var(--box-shadow-heavy);
   transition: transform 0.3s ease-in-out;
 }
 
-  .search-result-panel-module-KBrc9:not(:empty) {
-    padding: 20px 32px;
-  }
-
   .search-result-panel-module-KBrc9.search-result-panel-module-Us8rb,
   .search-result-panel-module-KBrc9.search-result-panel-module-7UxfH {
     transform: translateY(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "module",
   "license": "MIT",
   "engines": {