@sonic-equipment/ui 215.0.0 → 217.0.0

package/dist/styles.css

@@ -240,6 +240,7 @@
   --search-layer: 200;
   --modal-layer: 2000;
   --zoom-image-layer: 2100;
+  --popover-layer: 100000;
 }
 :root {
   --search-input-height: 76px;
@@ -1106,8 +1107,13 @@ html {
 
   .button-module-V4meK .button-module-XaNWz {
     display: block;
-    width: 24px;
-    height: 24px;
+    width: 1.5em;
+    height: 1.5em;
+  }
+
+  .button-module-V4meK .button-module-ydQAo {
+    block-size: 0.7em;
+    inline-size: 0.7em;
   }
 
   .button-module-V4meK.button-module-LwuW2,
@@ -1218,7 +1224,6 @@ html {
 
 .button-module-tmyk8 .button-module-ydQAo {
     color: var(--color-brand-white);
-    transform: translateY(-1px);
   }
 
 .button-module-tmyk8:where([data-disabled]):where(:not(.button-module-U5IxM, .button-module-LwuW2)) {
@@ -2047,16 +2052,17 @@ html {
 .badge-module-X5Au9 {
   --shadow-color: 48 209 88;
   --animation-duration: 1000ms;
+  --size: 16px;
 
   display: flex;
-  min-width: 16px;
-  height: 16px;
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
   padding: var(--space-4);
   border: 1px solid var(--color-white);
-  border-radius: var(--border-radius-8);
+  border-radius: calc(var(--size) / 2);
+  block-size: var(--size);
+  min-inline-size: var(--size);
 }
 
   .badge-module-X5Au9 .badge-module-ododp {
@@ -2066,6 +2072,7 @@ html {
     color: var(--color-white);
     font-size: var(--font-size-8);
     font-weight: var(--font-weight-bold);
+    line-height: 1;
   }
 
   .badge-module-X5Au9:where(.badge-module-Q03Go) {
@@ -2904,7 +2911,7 @@ html {
   font-size: var(--font-size, 1em);
   font-style: var(--font-style, inherit);
   font-weight: var(--font-weight, inherit);
-  grid-template-areas: 'symbol number';
+  grid-template-columns: repeat(2, minmax(0, min-content));
   line-height: var(--line-height, inherit);
   vertical-align: baseline;
   white-space: nowrap;
@@ -2917,14 +2924,12 @@ html {
 .price-module-Qyyas .price-module--Oil0 {
     font-size: var(--font-size-symbol);
     font-weight: var(--font-weight-symbol);
-    grid-area: symbol;
     justify-self: flex-end;
     margin-block-start: var(--margin-block-symbol);
     margin-inline-end: var(--margin-inline-symbol);
   }
 .price-module-Qyyas .price-module-QnS4t {
     display: inline-flex;
-    grid-area: number;
   }
 .price-module-Qyyas .price-module-p8hAn {
     font-size: var(--font-size-fraction);
@@ -2940,9 +2945,9 @@ html {
     --font-weight: var(--font-weight-black);
     --font-weight-symbol: var(--font-weight-medium);
     --line-height: 1;
-    --margin-block-fraction: 0.05em;
-    --margin-block-symbol: 0.1em;
-    --margin-inline-fraction: -0.35em;
+    --margin-block-fraction: 0.075em;
+    --margin-block-symbol: 0.075em;
+    --margin-inline-fraction: -0.3em;
     --margin-inline-symbol: 0.05em;
   }
 .price-module-Qyyas.price-module-vUbWV .price-module-9HAVF {
@@ -3066,6 +3071,13 @@ html {
 .price-module-tbuNk:where(.price-module-vUbWV) .price-module-uVTD7 {
       grid-column: 1 / -1;
     }
+.price-module-tbuNk:where(.price-module-vUbWV):has(.price-module-SkIMi) {
+      justify-content: start;
+      grid-template-columns: 1fr minmax(0, min-content);
+    }
+.price-module-tbuNk:where(.price-module-vUbWV):has(.price-module-SkIMi) .price-module-x77Vd {
+        grid-template-columns: auto auto;
+      }
 
 .product-sku-module-ITb8x {
   all: unset;
@@ -6034,6 +6046,98 @@ button.swiper-pagination-bullet {
       transform: translateY(-100%);
     }
 
+.quick-access-menu-module-Hr2Dq {
+  --size-vp: calc(100svh - var(--space-16) * 2);
+  --size: min-content;
+  --size-min: 224px;
+  --size-max: min(var(--size-vp), 350px);
+
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: var(--space-12) var(--space-16);
+  border: 1px solid var(--color-brand-medium-gray);
+  border-radius: var(--border-radius-22);
+  background: var(--color-white);
+  box-shadow: 0 0 96px #0000004c;
+  inline-size: var(--size);
+  max-inline-size: var(--size-max);
+  min-inline-size: var(--size-min);
+}
+
+  .quick-access-menu-module-Hr2Dq > * {
+    box-sizing: border-box;
+  }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-wUIbQ {
+    display: flex;
+    overflow: hidden;
+    flex-flow: row wrap;
+    padding: var(--space-8);
+    border-block-end: 1px solid var(--color-brand-light-gray);
+    gap: 0 0.25em;
+    line-height: 1.2;
+  }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-wUIbQ .quick-access-menu-module-7o1R6 {
+      font-weight: var(--font-weight-bold);
+    }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-wUIbQ:has(> .quick-access-menu-module-VtAXj) .quick-access-menu-module-7zAki {
+        flex-basis: 100%;
+      }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-wUIbQ .quick-access-menu-module-7zAki + .quick-access-menu-module-VtAXj {
+      flex-basis: 100%;
+      color: var(--color-brand-dark-gray);
+    }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-IO03P ul {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-IO03P .quick-access-menu-module-Wm-UG {
+      border-block-end: 1px solid var(--color-brand-light-gray);
+    }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-IO03P .quick-access-menu-module-8Qwjw {
+      display: block;
+      padding: var(--space-8);
+    }
+
+  .quick-access-menu-module-Hr2Dq .quick-access-menu-module-L-W3I {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    margin-block-start: var(--space-24);
+  }
+
+.connected-account-button-module-d7qyN {
+  z-index: var(--popover-layer) !important;
+  max-height: none !important;
+  outline: 0;
+  transition: opacity var(--transition-duration-short);
+}
+
+  .connected-account-button-module-d7qyN[data-entering],
+  .connected-account-button-module-d7qyN[data-exiting] {
+    opacity: 0;
+  }
+
+  @media (width < 576px) {.connected-account-button-module-d7qyN {
+    margin: auto;
+    block-size: -moz-fit-content;
+    block-size: fit-content;
+    inline-size: -moz-fit-content;
+    inline-size: fit-content;
+    inset: 0 !important
+}
+  }
+
 .hamburger-button-module-W6FPI {
   --size: 24px;
   --duration: var(--transition-duration-short);
@@ -8121,6 +8225,7 @@ button.swiper-pagination-bullet {
 
     grid-template-areas:
       'breadcrumb breadcrumb breadcrumb'
+      'pre-aside pre-aside pre-aside'
       '. . title'
       'aside . main';
     grid-template-columns: var(--aside-size) var(--gap) 1fr

package/package.json

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