@sonic-equipment/ui 137.0.0 → 138.0.0

package/dist/styles.css

@@ -249,6 +249,15 @@
   --announcement-bar-height: 52px;
   --header-height: 0px;
 }
+:root {
+  /* The brand hook, an SVG shape to be used as a mask */
+  --mask-brand-hook-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 191 403'%3E%3Cpath d='M0,0 L191,0 L191,403 L117.935295,403 L182.535295,190.7 C192.035295,159.5 180.435295,125.8 153.835295,107.2 L00,0 Z' /%3E%3C/svg%3E");
+
+  /* Full brand hook mask definition, ready to be used as a value on the mask property */
+  --mask-brand-hook: var(--mask-brand-hook-file) calc(100% + 1px) 50% / auto
+      100% no-repeat exclude,
+    linear-gradient(0deg, #000, #000);
+}
 
 .address-module-vt62a {
   font: inherit;
@@ -271,6 +280,13 @@
   gap: var(--space-4);
   -webkit-tap-highlight-color: transparent;
 }
+.link-module-xLqBn:where(:not([data-disabled]):focus),
+  .link-module-xLqBn:where(:not([data-disabled]):hover) {
+    color: var(--color-brand-dark-red);
+  }
+.link-module-xLqBn:where(:not([data-disabled]):focus)::after, .link-module-xLqBn:where(:not([data-disabled]):hover)::after {
+      background-color: var(--color-brand-dark-red);
+    }
 .link-module-xLqBn > svg {
     display: block;
     width: 12px;
@@ -279,16 +295,17 @@
 .link-module-xLqBn:where([data-disabled]) {
     cursor: default;
     opacity: 0.4;
+    pointer-events: none;
   }
 .link-module-xLqBn:where(.link-module-HZbAL) {
     cursor: pointer;
   }
-.link-module-xLqBn:where(.link-module-HZbAL):where(.link-module-UuCEp) {
-      text-decoration: underline;
+.link-module-xLqBn:where(.link-module-UuCEp) {
+    text-decoration: underline;
+  }
+.link-module-xLqBn:where(.link-module-UuCEp)::after {
+      display: none;
     }
-.link-module-xLqBn:where(.link-module-HZbAL):where(.link-module-UuCEp)::after {
-        display: none;
-      }
 .link-module-xLqBn:where(.link-module-v31wH) {
     color: var(--color-brand-red);
   }
@@ -401,7 +418,8 @@
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module-KZjMo {
       display: grid;
       grid-template-rows: 0fr;
-      transition: grid-template-rows var(--transition-duration) linear,
+      transition:
+        grid-template-rows var(--transition-duration) linear,
         padding-block var(--transition-duration) linear;
     }
 
@@ -450,6 +468,11 @@
   *
   *********************************************************/
 
+  .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-ogvYX {
+      color: var(--color-brand-black);
+      opacity: 0.4;
+    }
+
   /* stylelint-disable-next-line no-descending-specificity */
 
   .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d- .accordion-module--Rwpb {
@@ -466,6 +489,11 @@
           height: 12px;
         }
 
+  .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d- .accordion-module--Rwpb[disabled] {
+          color: var(--color-brand-black);
+          cursor: default;
+        }
+
   .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-lf9d- .accordion-module-KZjMo {
         padding-inline: 1rem;
       }
@@ -4177,7 +4205,8 @@ button.swiper-pagination-bullet {
         .footer-module-YzJ68 .footer-module-TZq-4 .footer-module-0gJpF:not(:last-child)::after {
           position: absolute;
           right: -17px;
-          color: currentcolor;
+          background: none;
+          color: var(--color-white);
           content: '|';
         }
   }
@@ -5307,6 +5336,55 @@ button.swiper-pagination-bullet {
          object-fit: contain;
     }
 
+.message-module-N1e1t {
+  --color: var(--color-brand-black);
+
+  display: grid;
+  align-items: center;
+  padding: var(--space-8);
+  background: color-mix(in hsl, var(--color), transparent 88%);
+  font-size: var(--font-size-base);
+  grid-template-areas: 'icon body';
+  grid-template-columns: minmax(0, min-content) 1fr;
+}
+
+.message-module-w2hsL {
+  color: var(--color);
+  grid-area: icon;
+  margin-block: -3px;
+  margin-inline-end: var(--space-8);
+}
+
+.message-module-w2hsL svg {
+    display: block;
+  }
+
+.message-module-Gi4uR {
+  grid-area: body;
+}
+
+/* variants */
+
+.message-module-pp9U4 {
+  background: var(--color-brand-light-gray);
+}
+
+.message-module-srkp1 {
+  --color: var(--color-semantic-information);
+}
+
+.message-module-oeSdr {
+  --color: var(--color-semantic-stop);
+}
+
+.message-module-Vp0pA {
+  --color: var(--color-semantic-okay);
+}
+
+.message-module-kvANQ {
+  --color: var(--color-semantic-notify);
+}
+
 .add-to-favorite-dialog-module-WJYMb {
   display: flex;
   flex-direction: column;
@@ -5469,11 +5547,316 @@ button.swiper-pagination-bullet {
   transition: margin-top 300ms linear;
 }
 
-.checkout-page-layout-module-lULV3 .checkout-page-layout-module-cUEmU {
+.sign-in-page-layout-module-Z1oE2 {
+  --layout-width: var(--page-container-max-layout-width, 100vw);
+  --padding-inline: var(--page-container-padding-inline, 10px);
+  --content-width-min: 270px;
+  --gutter-width: minmax(22px, 1fr);
+  --content-width: minmax(var(--content-width-min), 350px);
+  --main-padding-block: var(--space-24);
+  --side-width: auto; /* when shown at lg+, will adapt to 50%; above xl will grow from 4 of 8, until 7 of 12 */
+  --side-height: 100%;
+  --side-height-max: calc(100svb);
+  --side-breakout: min(
+    var(--breakout-minimum),
+    calc((100vw - var(--layout-width)) * -0.5)
+  );
+  --breakout-minimum: calc(var(--padding-inline) * -1);
+
+  display: grid;
+  align-items: center;
+  grid-template-areas: '. main .';
+  grid-template-columns:
+    var(--gutter-width)
+    var(--content-width)
+    var(--gutter-width);
+}
+
+  @media (width >= 768px) {.sign-in-page-layout-module-Z1oE2 {
+    --content-width: minmax(var(--content-width-min), 37.5%); /* 3 of 8 */
+    --gutter-width: 6.25%; /* 0.5 of 8 */
+    --main-padding-block: var(--space-48);
+
+    grid-template-areas: 'side . main .';
+    grid-template-columns:
+      var(--side-width)
+      var(--gutter-width)
+      var(--content-width)
+      var(--gutter-width)
+}
+  }
+
+  @media (width >= 1024px) {.sign-in-page-layout-module-Z1oE2 {
+    --gutter-width: 8.33%; /* 1 of 12 */
+    --content-width: minmax(350px, 25%) /* 350px to 3 of 12 */
+}
+  }
+
+  .sign-in-page-layout-module-Z1oE2.sign-in-page-layout-module-D5yqX {
+    min-block-size: 100%;
+  }
+
+.sign-in-page-layout-module-s6x7v {
+  grid-area: main;
+  padding-block: var(--main-padding-block);
+}
+
+.sign-in-page-layout-module-W-FMF {
+  position: sticky;
+  display: none;
+  overflow: hidden;
+  align-self: stretch;
+  block-size: var(--side-height);
+  grid-area: side;
+  inset-block-start: 0;
+
+  /* negative margin breaking out of the layout, stretching to the view port edge */
+  margin-inline-start: var(--side-breakout);
+  max-block-size: var(--side-height-max);
+}
+
+@media (width >= 768px) {
+
+.sign-in-page-layout-module-W-FMF {
+    display: block
+}
+  }
+
+.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y {
+    position: absolute;
+    background: var(--color-brand-light-gray);
+    inset: 0 0 -1px;
+
+    /* mask, the brand 'hook' */
+    -webkit-mask: var(--mask-brand-hook);
+            mask: var(--mask-brand-hook);
+  }
+
+/* subtle drop shadow at the top (also masked) */
+
+.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y::after {
+      position: absolute;
+      background: linear-gradient(
+        to bottom,
+        hsl(0deg 0% 0% / 20%),
+        hsl(0deg 0% 0% / 0%)
+      );
+      block-size: 40px;
+      content: '';
+      inset: 0 0 auto;
+    }
+
+.sign-in-page-layout-module-W-FMF .sign-in-page-layout-module-cbE8y img {
+      -o-object-position: right;
+         object-position: right;
+    }
+
+.sign-in-form-module-4DkkP {
+  min-inline-size: 270px;
+}
+
+/* generic utility styles that we could reuse */
+
+.sign-in-form-module-bGXUd {
+  --tooltip-size: 24px;
+  --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
+
+  display: grid;
+  container-type: inline-size;
+  gap: var(--space-16);
+}
+
+.sign-in-form-module-bGXUd p {
+    margin: 0 0 var(--space-4);
+  }
+
+.sign-in-form-module-TumIz {
+  display: grid;
+}
+
+.sign-in-form-module-TumIz .sign-in-form-module-bIzyz {
+    justify-self: flex-start;
+  }
+
+.sign-in-form-module-EoTYu {
+  display: grid;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  gap: var(--space-16);
+}
+
+.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
+    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+  }
+
+/* above 1314, where - with a minimum width of 250px and 16px gap - 5 columns would appear, we restrict it to max 4 columns */
+
+@container (min-inline-size: 1314px) {
+
+.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
+      --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
+
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(var(--minimum-width), 1fr)
+      )
+  }
+    }
+
+/* info icon rules: when (visually) the last segment on a row with an icon, needs to have a negative margin */
+
+.sign-in-form-module-EoTYu .sign-in-form-module-TumIz:has([data-info]) {
+    margin-inline-end: var(--info-icon-offset);
+  }
+
+/* 2 * 250px + 16px = 516px; space for 2 columns */
+
+@container (min-inline-size: 516px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):not(:only-child) {
+        margin-inline-end: 0;
+      }
+    }
+
+@container (min-inline-size: 516px) and (max-inline-size: 781px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2n) {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+/* 3 * 250px + 2 * 16px = 782px; space for 3 columns */
+
+@container (min-inline-size: 782px) and (max-inline-size: 1047px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3n),
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+/* 4 * 250px + 3 * 16px = 1048px; space for 4 columns */
+
+@container (min-inline-size: 1048px) {
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(4n),
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3):last-child,
+      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
+        margin-inline-end: var(--info-icon-offset);
+      }
+    }
+
+.sign-in-form-module-aYBAy {
+  display: grid;
+  gap: var(--space-16);
+}
+
+.page-container-module-eFYSe {
+  --page-container-padding-inline: 10px;
+  --page-container-padding-block: 10px;
+  --page-container-max-layout-width: auto;
+  --page-container-max-width: calc(
+    var(--page-container-max-layout-width) + 2 *
+      var(--page-container-padding-inline)
+  );
+}
+
+  @media (width >= 768px) {.page-container-module-eFYSe {
+    --page-container-padding-inline: 20px
+}
+  }
+
+  .page-container-module-eFYSe {
+
+  display: grid;
+  overflow: clip;
+  font-family: var(--font-family-sonic);
+  grid-template-areas:
+    'page-header'
+    'page-main'
+    'page-footer';
+  grid-template-rows: minmax(0, min-content) 1fr minmax(0, min-content);
+}
+
+  /* main area, between page header and footer */
+
+  .page-container-module-eFYSe .page-container-module-JkoQY {
+    display: grid;
+    box-sizing: border-box;
+    margin: 0 auto;
+    grid-area: page-main;
+    grid-template-areas:
+      'breadcrumbs'
+      'title'
+      'content';
+    grid-template-rows: minmax(0, max-content) minmax(0, max-content) 1fr;
+    inline-size: 100%;
+    max-inline-size: var(--page-container-max-width);
+    padding-inline: var(--page-container-padding-inline);
+  }
+
+  .page-container-module-eFYSe:not(.page-container-module-iCrH5) .page-container-module-JkoQY {
+      padding-block: var(--page-container-padding-block);
+    }
+
+  /* default layout behavior, in width brackets */
+
+  @media (width >= 768px) {
+
+  .page-container-module-eFYSe:not(.page-container-module-glxAS) {
+      --page-container-max-layout-width: 806px
+  }
+    }
+
+  @media (width >= 1440px) {
+
+  .page-container-module-eFYSe:not(.page-container-module-glxAS) {
+      --page-container-max-layout-width: 1222px
+  }
+    }
+
+  /* when fluid with a maximum layout width */
+
+  .page-container-module-eFYSe.page-container-module-glxAS {
+    --page-container-max-layout-width: 1440px;
+  }
+
+  /* key segments inside page-main */
+
+  .page-container-module-eFYSe .page-container-module-WfQXa {
+    grid-area: breadcrumbs;
+    padding-block: var(--space-24);
+  }
+
+  .page-container-module-eFYSe .page-container-module-GKN5s {
+    grid-area: title;
+    padding-block-end: var(--space-44);
+  }
+
+  .page-container-module-eFYSe .page-container-module-r0SOZ {
+    grid-area: content;
+    padding-block-end: var(--space-64);
+  }
+
+  @media (width >= 1440px) {
+
+  .page-container-module-eFYSe .page-container-module-r0SOZ {
+      padding-block-end: var(--space-96)
+  }
+    }
+
+  .page-container-module-eFYSe.page-container-module-iCrH5 .page-container-module-r0SOZ {
+    padding-block-end: 0;
+  }
+
+.checkout-page-layout-module-lULV3 {
+  --layout-width: var(--page-container-max-width, 100svw);
+  --padding-inline: var(--page-container-padding-inline, 10px);
+}
+
+  .checkout-page-layout-module-lULV3 .checkout-page-layout-module-cUEmU {
     display: grid;
     gap: var(--space-24);
     grid-template-columns: 1fr;
   }
+
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-B3M80 {
     position: sticky;
     top: calc(var(--header-height) + var(--space-8));
@@ -5482,15 +5865,18 @@ button.swiper-pagination-bullet {
     border-radius: var(--border-radius-12);
     background-color: var(--color-white);
   }
+
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-8UNBq {
     display: grid;
     gap: var(--space-8);
   }
+
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-430Iq {
     max-width: var(--page-container-max-width);
     margin-top: var(--space-16);
     margin-bottom: var(--space-24);
   }
+
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-wGAXb {
     position: fixed;
     z-index: 5;
@@ -5499,73 +5885,25 @@ button.swiper-pagination-bullet {
     left: 0;
     width: 100%;
     box-sizing: border-box;
-    padding: 16px var(--page-container-padding);
+    padding: 16px var(--padding-inline);
     margin: auto;
     background-color: var(--color-white);
   }
+
   @media (width >= 768px) {
+
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-wGAXb {
-      max-width: calc(
-        var(--page-container-max-width) - (2 * var(--page-container-padding))
-      );
+      max-width: calc(var(--layout-width) - (2 * var(--padding-inline)));
       padding: 16px 0
   }
     }
+
   @media (width >= 1440px) {
     .checkout-page-layout-module-lULV3 .checkout-page-layout-module-cUEmU {
       grid-template-columns: 1fr 22.375rem;
     }
   }
 
-.page-container-module-eFYSe {
-  overflow: clip;
-}
-
-  .page-container-module-eFYSe .page-container-module-ZhEJP {
-    --page-container-padding: 10px;
-
-    position: relative;
-    box-sizing: border-box;
-    padding: var(--page-container-padding);
-    padding-bottom: var(--space-64);
-  }
-
-  @media (width >= 768px) {
-
-  .page-container-module-eFYSe .page-container-module-ZhEJP {
-      --page-container-max-width: calc(
-        806px + (2 * var(--page-container-padding))
-      );
-
-      max-width: var(--page-container-max-width);
-      margin: 0 auto
-  }
-    }
-
-  @media (width >= 1440px) {
-
-  .page-container-module-eFYSe .page-container-module-ZhEJP {
-      --page-container-max-width: calc(
-        1222px + (2 * var(--page-container-padding))
-      );
-
-      max-width: var(--page-container-max-width);
-      padding-bottom: var(--space-96)
-  }
-    }
-
-.page-module-a5vPb {
-  font-family: var(--font-family-sonic);
-}
-
-  .page-module-a5vPb .page-module-q0jaH {
-    margin-block: var(--space-24);
-  }
-
-  .page-module-a5vPb .page-module-K7Gmw {
-    margin-bottom: var(--space-44);
-  }
-
 .no-results-module-HGe-Y {
   margin-top: var(--space-24);
   text-align: center;
@@ -6191,103 +6529,6 @@ button.swiper-pagination-bullet {
     --transition-duration: 0.3s;
   }
 
-.sign-in-form-module-4DkkP {
-  min-inline-size: 300px;
-}
-
-/* generic utility styles that we could reuse */
-
-.sign-in-form-module-bGXUd {
-  --tooltip-size: 24px;
-  --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
-
-  display: grid;
-  container-type: inline-size;
-  gap: var(--space-16);
-}
-
-.sign-in-form-module-bGXUd p {
-    margin: 0 0 var(--space-4);
-  }
-
-.sign-in-form-module-TumIz {
-  display: grid;
-}
-
-.sign-in-form-module-TumIz .sign-in-form-module-bIzyz {
-    justify-self: flex-start;
-  }
-
-.sign-in-form-module-EoTYu {
-  display: grid;
-  padding: 0;
-  border: 0;
-  margin: 0;
-  gap: var(--space-16);
-}
-
-.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  }
-
-/* above 1314, where - with a minimum width of 250px and 16px gap - 5 columns would appear, we restrict it to max 4 columns */
-
-@container (min-inline-size: 1314px) {
-
-.sign-in-form-module-EoTYu.sign-in-form-module-9eIx- {
-      --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
-
-      grid-template-columns: repeat(
-        auto-fit,
-        minmax(var(--minimum-width), 1fr)
-      )
-  }
-    }
-
-/* info icon rules: when (visually) the last segment on a row with an icon, needs to have a negative margin */
-
-.sign-in-form-module-EoTYu .sign-in-form-module-TumIz:has([data-info]) {
-    margin-inline-end: var(--info-icon-offset);
-  }
-
-/* 2 * 250px + 16px = 516px; space for 2 columns */
-
-@container (min-inline-size: 516px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):not(:only-child) {
-        margin-inline-end: 0;
-      }
-    }
-
-@container (min-inline-size: 516px) and (max-inline-size: 781px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2n) {
-        margin-inline-end: var(--info-icon-offset);
-      }
-    }
-
-/* 3 * 250px + 2 * 16px = 782px; space for 3 columns */
-
-@container (min-inline-size: 782px) and (max-inline-size: 1047px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3n),
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
-        margin-inline-end: var(--info-icon-offset);
-      }
-    }
-
-/* 4 * 250px + 3 * 16px = 1048px; space for 4 columns */
-
-@container (min-inline-size: 1048px) {
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(4n),
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(3):last-child,
-      .sign-in-form-module-EoTYu.sign-in-form-module-9eIx- .sign-in-form-module-TumIz:has([data-info]):nth-child(2):last-child {
-        margin-inline-end: var(--info-icon-offset);
-      }
-    }
-
-.sign-in-form-module-aYBAy {
-  display: grid;
-  gap: var(--space-16);
-}
-
 :root {
   --toastify-color-light: #fff;
   --toastify-color-dark: #121212;

package/package.json

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

package/dist/pages/components/page/page.module.css.js

@@ -1,3 +0,0 @@
-var styles = {"page":"page-module-a5vPb","breadcrumb":"page-module-q0jaH","title":"page-module-K7Gmw"};
-
-export { styles as default };