@sonic-equipment/ui 0.0.71 → 0.0.72

package/dist/styles.css

@@ -213,6 +213,7 @@
   --carousel-layer: 10;
   --header-layer: 15;
   --loading-layer: 50;
+  --background-overlay-layer: 90;
   --sidebar-layer: 100;
   --search-layer: 200;
   --modal-layer: 300;
@@ -1030,7 +1031,7 @@
 }
 
 /**
- * Swiper 11.1.12
+ * Swiper 11.1.14
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -1038,7 +1039,7 @@
  *
  * Released under the MIT License
  *
- * Released on: September 1, 2024
+ * Released on: September 12, 2024
  */
 
 /* FONT_START */
@@ -1306,7 +1307,6 @@
 
 /* Slide styles end */
 
-/* stylelint-disable no-descending-specificity */
 .carousel-module-ealh- {
   position: relative;
   display: block;
@@ -1315,15 +1315,24 @@
      -moz-user-select: none;
           user-select: none;
 }
-.carousel-module-ealh-,
+
+  .carousel-module-ealh-,
   .carousel-module-ealh- * {
     box-sizing: border-box;
   }
-.carousel-module-ealh- .carousel-module-IftbN {
+
+  .carousel-module-ealh- .carousel-module-IftbN {
     position: relative;
+    display: block;
     overflow: visible;
+    opacity: 0;
   }
-.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::before,
+
+  .carousel-module-ealh- .carousel-module-IftbN.carousel-module-RCpfc {
+      opacity: 1;
+    }
+
+  .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);
@@ -1335,39 +1344,56 @@
         opacity: 1;
         transition: opacity 0.2s ease;
       }
-.carousel-module-ealh- .carousel-module-IftbN.carousel-module-tPg7k::before {
+
+  .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 {
+
+  .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;
-    text-align: left;
+
+  .carousel-module-ealh- .carousel-module-bUMlb {
+    width: -moz-fit-content;
+    width: fit-content;
   }
-.carousel-module-ealh- .carousel-module-kcqEE.carousel-module-uCrOA {
+
+  .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 {
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  .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;
       }
-.carousel-module-ealh-:has(.carousel-module-984Rr .carousel-module-kcqEE:hover) .carousel-module-IftbN::before, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::before {
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  .carousel-module-ealh-:has(.carousel-module-984Rr .carousel-module-kcqEE:hover) .carousel-module-IftbN::before, .carousel-module-ealh-:has(.carousel-module-34OWD) .carousel-module-IftbN::before {
         opacity: 0;
       }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z {
       position: absolute;
       z-index: var(--carousel-layer);
     }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-984Rr {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-984Rr {
         left: 0;
         transform: translate(-50%, 0);
       }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-T7bTr {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z.carousel-module-T7bTr {
         right: 0;
         transform: translate(50%, 0);
       }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE {
         width: 44px;
         height: 44px;
         border: 1px solid currentcolor;
@@ -1378,20 +1404,25 @@
         outline: none;
         transition: background-color 0.2s ease;
       }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-hovered] {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-hovered] {
           background-color: var(--color-brand-light-gray);
         }
-.carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-disabled] {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S .carousel-module-Hi-0z .carousel-module-kcqEE[data-disabled] {
           color: #bcbcbc66;
           cursor: default;
         }
-.carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-nL-O8 .carousel-module-Hi-0z {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-nL-O8 .carousel-module-Hi-0z {
         top: var(--space-24);
       }
-.carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-Hi-0z {
+
+  .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-Hi-0z {
         top: 50%;
       }
-@media (width < 1024px) {
+
+  @media (width < 1024px) {
     .carousel-module-ealh-:has(.carousel-module-tPg7k) {
       width: calc(100% + 20px);
       margin-left: -10px;
@@ -1402,6 +1433,20 @@
     }
   }
 
+  .category-carousel-module-muLq-:not(:last-child) {
+      margin-right: var(--space-8);
+    }
+
+      @media (width >= 1024px) {  .category-carousel-module-muLq-:not(:last-child) {
+        margin-right: var(--space-12)
+    }
+      }
+
+      @media (width >= 1440px) {  .category-carousel-module-muLq-:not(:last-child) {
+        margin-right: var(--space-16)
+    }
+      }
+
 .accordion-module-9WvAH {
   --color: var(--color-black);
   --button-font-size: var(--font-size-16);
@@ -2051,7 +2096,7 @@
 }
 
 .page-container-module-PYmbC {
-  overflow: hidden;
+  overflow: clip;
 }
 
   .page-container-module-PYmbC .page-container-module-uD8GF {
@@ -2146,6 +2191,198 @@
     margin-bottom: var(--space-44);
   }
 
+.modal-module-rVFJc {
+  position: fixed;
+  z-index: calc(var(--modal-layer) - 1);
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100vw;
+  height: var(--visual-viewport-height);
+  align-items: center;
+  justify-content: center;
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+  background-color: rgb(0 0 0 / 52%);
+}
+
+  .modal-module-rVFJc[data-entering] {
+    animation: modal-module-63Uyl 200ms;
+  }
+
+  .modal-module-rVFJc[data-exiting] {
+    animation: modal-module-63Uyl 150ms reverse ease-in;
+  }
+
+.modal-module-6vlFt {
+  position: relative;
+  z-index: calc(var(--modal-layer) - 1);
+  min-width: 300px;
+  max-width: 90%;
+  border: 1px solid var(--gray-400);
+  border-radius: 6px;
+  background: var(--color-white);
+  box-shadow: 0 8px 20px rgba(0 0 0 / 10%);
+  color: var(--text-color);
+  outline: none;
+}
+
+.modal-module-6vlFt section:focus-visible,
+  .modal-module-6vlFt section:focus {
+    outline: none;
+  }
+
+.modal-module-6vlFt[data-entering] {
+    animation: modal-module-aPJ7X 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+@keyframes modal-module-63Uyl {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-module-aPJ7X {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+.dialog-module-ZnsAe {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  gap: 8px;
+}
+
+  .dialog-module-ZnsAe .dialog-module-SwpuZ {
+    padding: 1rem;
+  }
+
+  .dialog-module-ZnsAe .dialog-module-Y7Tqg {
+    align-self: flex-start;
+  }
+
+.dialog-module-Koqia {
+  padding: 1rem;
+}
+
+.dialog-module-y7Axm {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  padding: 1rem;
+  border-top: 1px solid #e0e0e0;
+  gap: 8px;
+}
+
+.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;
+  }
+}
+
+.product-details-page-layout-module-IQFIn {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--space-24);
+  margin-bottom: var(--space-64);
+  gap: var(--space-64);
+}
+
+  .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
+    display: grid;
+    gap: var(--space-16);
+    grid-template-columns: 1fr;
+  }
+
+  .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp .product-details-page-layout-module-Efavu {
+      height: 100%;
+      align-self: flex-start;
+    }
+
+  .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp .product-details-page-layout-module-Y2490 {
+      position: sticky;
+      top: 0;
+      height: -moz-fit-content;
+      height: fit-content;
+    }
+
+  @media(width >= 1024px) {
+    .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
+      gap: var(--space-24);
+      grid-template-columns: 396px 1fr;
+    }
+  }
+
+  @media(width >= 1440px) {
+    .product-details-page-layout-module-IQFIn .product-details-page-layout-module--7oUp {
+      gap: var(--space-32);
+      grid-template-columns: 600px 1fr;
+    }
+  }
+
+.blank-page-spacer-module-lXxle {
+  --header-height: var(--header-height-mobile);
+
+  display: grid;
+  width: 100%;
+  height: calc(100dvh - var(--header-height));
+  background-color: var(--color-white);
+  place-items: center;
+}
+
+@media (width >= 1024px) {
+  .blank-page-spacer-module-hbxDP {
+    --header-height: var(--header-height-desktop);
+  }
+}
+
 .filter-section-module-q1Ob8 {
   --border-bottom: 1px solid var(--color-brand-medium-gray);
 
@@ -2410,22 +2647,6 @@
     }
   }
 
-.blank-page-spacer-module-lXxle {
-  --header-height: var(--header-height-mobile);
-
-  display: grid;
-  width: 100%;
-  height: calc(100dvh - var(--header-height));
-  background-color: var(--color-white);
-  place-items: center;
-}
-
-@media (width >= 1024px) {
-  .blank-page-spacer-module-hbxDP {
-    --header-height: var(--header-height-desktop);
-  }
-}
-
 & .promo-card-module-e2oii {
   display: block;
   height: 122px;
@@ -2585,100 +2806,6 @@
     margin-top: var(--space-32);
   }
 
-.modal-module-rVFJc {
-  position: fixed;
-  z-index: calc(var(--modal-layer) - 1);
-  top: 0;
-  left: 0;
-  display: flex;
-  width: 100vw;
-  height: var(--visual-viewport-height);
-  align-items: center;
-  justify-content: center;
-  -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
-  background-color: rgb(0 0 0 / 52%);
-}
-
-  .modal-module-rVFJc[data-entering] {
-    animation: modal-module-63Uyl 200ms;
-  }
-
-  .modal-module-rVFJc[data-exiting] {
-    animation: modal-module-63Uyl 150ms reverse ease-in;
-  }
-
-.modal-module-6vlFt {
-  position: relative;
-  z-index: calc(var(--modal-layer) - 1);
-  min-width: 300px;
-  max-width: 90%;
-  border: 1px solid var(--gray-400);
-  border-radius: 6px;
-  background: var(--color-white);
-  box-shadow: 0 8px 20px rgba(0 0 0 / 10%);
-  color: var(--text-color);
-  outline: none;
-}
-
-.modal-module-6vlFt section:focus-visible,
-  .modal-module-6vlFt section:focus {
-    outline: none;
-  }
-
-.modal-module-6vlFt[data-entering] {
-    animation: modal-module-aPJ7X 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-
-@keyframes modal-module-63Uyl {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes modal-module-aPJ7X {
-  from {
-    transform: scale(0.8);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
-
-.dialog-module-ZnsAe {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e0e0e0;
-  gap: 8px;
-}
-
-  .dialog-module-ZnsAe .dialog-module-SwpuZ {
-    padding: 1rem;
-  }
-
-  .dialog-module-ZnsAe .dialog-module-Y7Tqg {
-    align-self: flex-start;
-  }
-
-.dialog-module-Koqia {
-  padding: 1rem;
-}
-
-.dialog-module-y7Axm {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  padding: 1rem;
-  border-top: 1px solid #e0e0e0;
-  gap: 8px;
-}
-
 .product-listing-page-module-dmIHF .product-listing-page-module-Oz76Z {
     margin-bottom: 44px;
   }
@@ -2694,7 +2821,7 @@
     .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
       width: 100%;
     }
-  .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy > *, .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr > * {
+  .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy >*, .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr >* {
         display: flex;
         width: 100%;
         justify-content: center;
@@ -2736,7 +2863,7 @@
         width: initial;
       }
 
-        .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy > *, .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr > * {
+        .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-F7bxy >*, .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr >* {
           width: initial;
         }
 
@@ -2838,9 +2965,9 @@
     }
   }
 
-.overlay-background-module-j7R7T {
+.background-overlay-module-mGiNQ {
   position: fixed;
-  z-index: calc(var(--sidebar-layer) - 1);
+  z-index: --background-overlay-layer;
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: rgb(0 0 0 / 52%);
@@ -2850,12 +2977,12 @@
   transition: opacity 0.3s ease-in-out;
 }
 
-  .overlay-background-module-j7R7T.overlay-background-module-DZWsP {
+  .background-overlay-module-mGiNQ.background-overlay-module-5Uxcl {
     opacity: 1;
     pointer-events: auto;
   }
 
-  .overlay-background-module-j7R7T.overlay-background-module-8pcWN {
+  .background-overlay-module-mGiNQ.background-overlay-module-GRInQ {
     opacity: 0;
   }
 
@@ -2867,7 +2994,7 @@
     --transition-duration: 0.3s;
   }
 
-.global-search-module-mmXv1 {
+.global-search-module-T0bEf {
   z-index: calc(var(--header-layer) - 1);
 }
 
@@ -2946,15 +3073,16 @@
   .search-input-module-xCCzd .search-input-module-okP8k .search-input-module-lYseZ {
       position: absolute;
       top: 50%;
-      right: var(--space-32);
+      right: var(--space-16);
       transform: translateY(-50%);
     }
 
   .search-input-module-xCCzd .search-input-module-okP8k .search-input-module-bELFK {
       display: inline-block;
       width: 100%;
-      padding: var(--space-24) var(--space-64);
+      padding: var(--space-24) var(--space-48);
       border: none;
+      border-radius: 0;
       background-blend-mode: darken;
       background-color: var(--color-gray-75);
       color: currentcolor;
@@ -2980,11 +3108,21 @@
         color: var(--color-brand-dark-gray);
       }
 
-@media (width >= 768px) {
+  @media (width >= 768px) {
       .search-input-module-xCCzd .search-input-module-okP8k .search-input-module-vKCm4 {
         left: var(--space-24);
       }
-}
+  }
+
+  @media (width >= 1024px) {
+      .search-input-module-xCCzd .search-input-module-okP8k .search-input-module-lYseZ {
+        right: var(--space-32);
+      }
+
+      .search-input-module-xCCzd .search-input-module-okP8k .search-input-module-bELFK {
+        padding: var(--space-24) var(--space-64);
+      }
+  }
 
 .categories-grid-module-C751R {
   --amount-of-columns: 2;
@@ -3252,48 +3390,6 @@
     }
 }
 
-.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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -80,7 +80,7 @@
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-no-relative-import-paths": "^1.5.5",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react": "7.34.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",

package/dist/src/overlay-background/overlay-background.d.ts

@@ -1,7 +0,0 @@
-interface OverlayBackgroundProps {
-    className?: string;
-    isOpen: boolean;
-    onClick?: VoidFunction;
-}
-export declare function OverlayBackground({ className, isOpen, onClick, }: OverlayBackgroundProps): React.ReactPortal | null;
-export {};

package/dist/src/shared/api/shop/hooks/authentication/use-session.d.ts

@@ -1,2 +0,0 @@
-import { SessionModel as ShopSessionModel } from 'shared/api/shop/model/shop.model';
-export declare function useSession(): import("@tanstack/react-query").UseQueryResult<ShopSessionModel, Error>;