@sonic-equipment/ui 183.0.0 → 185.0.0

package/dist/styles.css

@@ -883,10 +883,17 @@ html {
   min-height: 36px;
   padding: 0 var(--space-16);
   border-radius: var(--border-radius-20);
-  font-style: normal;
-  text-transform: none;
+  font-size: var(--font-size-12);
+  font-style: italic;
+  text-transform: uppercase;
 }
 
+.button-module-Pbwz7:where(.button-module-fepAr) {
+    font-size: var(--font-size-16);
+    font-style: normal;
+    text-transform: none;
+  }
+
 .button-module-GVTEW {
   min-width: 52px;
   min-height: 40px;
@@ -2019,6 +2026,71 @@ html {
   line-height: 1;
 }
 
+.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;
+  line-height: 1.25;
+}
+
+.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;
+  text-wrap: pretty;
+}
+
+/* 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);
+}
+
+.form-module-xD1fv {
+  display: grid;
+  container-type: inline-size;
+  gap: var(--space-16);
+  min-inline-size: 270px;
+}
+
+  .form-module-xD1fv .form-module-Hy5TM,
+  .form-module-xD1fv .form-module-jDAR6,
+  .form-module-xD1fv .form-module-wcAbi {
+    display: grid;
+    gap: var(--space-16);
+  }
+
 .heading-module-pMC65 {
   padding: 0;
   margin: 0;
@@ -2476,42 +2548,35 @@ html {
   }
 }
 
+.dialog-module-uKVDu {
+  max-width: min(403px, 90%);
+}
+
 .dialog-module-qKzgy {
   position: relative;
-  max-width: 403px;
+  min-width: 300px;
   padding: var(--space-24);
   padding-right: var(--space-32);
 }
 
-  .dialog-module-qKzgy,
+.dialog-module-qKzgy .dialog-module-5sZYV {
+    container-type: unset;
+  }
+
+.dialog-module-qKzgy,
   .dialog-module-qKzgy * {
     box-sizing: border-box;
   }
 
-  .dialog-module-qKzgy .dialog-module-ZnsAe {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: var(--font-weight-bold);
-    gap: 8px;
-    line-height: 1;
+.dialog-module-qKzgy .dialog-module-Y7Tqg {
+    position: absolute;
+    top: -8px;
+    right: -8px;
   }
 
-  .dialog-module-qKzgy .dialog-module-ZnsAe:not(:empty) {
-      margin-bottom: var(--space-16);
-    }
-
-  .dialog-module-qKzgy .dialog-module-ZnsAe .dialog-module-Y7Tqg {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-    }
-
-  .dialog-module-qKzgy .dialog-module-y7Axm:not(:empty) {
+.dialog-module-qKzgy .dialog-module-y7Axm:not(:empty) {
     display: flex;
     flex-direction: column;
-    margin-top: var(--space-32);
-    margin-right: calc(-1 * var(--space-8));
     gap: 8px;
   }
 
@@ -2672,19 +2737,26 @@ html {
   }
 
 .data-card-module-OMXIh {
+  display: grid;
   container-type: inline-size;
+  grid-template-areas:
+    'title'
+    'card';
+  grid-template-rows: minmax(0, min-content) auto;
 }
 
 .data-card-module-DMbBO {
-  margin-bottom: var(--space-12);
+  grid-area: title;
+  margin-block-end: var(--space-12);
 }
 
 .data-card-module-24uin {
   position: relative;
+  display: grid;
   border: 1px solid var(--color-brand-medium-gray);
   border-radius: var(--border-radius-32);
-  inline-size: 100%;
-  min-block-size: 150px;
+  grid-area: card;
+  min-block-size: 85px;
   min-inline-size: 250px;
 }
 
@@ -2694,38 +2766,29 @@ html {
   }
 
 .data-card-module-24uin .data-card-module-j-RFT {
-    position: absolute;
     display: grid;
+    padding: var(--space-16);
     color: var(--color-brand-red);
-    inset: 0;
     place-content: center;
   }
 
 .data-card-module-24uin .data-card-module-d9zvu {
-    position: absolute;
     display: grid;
-    inset: 0;
     place-content: center;
   }
 
 .data-card-module-24uin .data-card-module-FVD44 {
-    position: absolute;
     display: grid;
-    padding: 0;
-    inset: 0;
+    padding: var(--space-16);
     place-content: center;
   }
 
 .data-card-module-24uin .data-card-module-ZefqY {
-    padding: var(--space-32) var(--space-16) var(--space-16) var(--space-32);
-  }
-
-@container (max-width: 314px) {
-
-.data-card-module-24uin .data-card-module-ZefqY {
-      padding: var(--space-20) var(--space-16) var(--space-16)
+    display: grid;
+    align-items: start;
+    padding: var(--space-16);
+    grid-template-rows: 1fr min-content;
   }
-    }
 
 .data-card-module-24uin .data-card-module-ZefqY.data-card-module-Fb4Cx {
       visibility: hidden;
@@ -2733,6 +2796,7 @@ html {
 
 .data-card-module-24uin .data-card-module-EDbE- {
     display: grid;
+    padding: var(--space-16);
     margin: 0;
     gap: var(--space-16);
     grid-template-columns:
@@ -2744,21 +2808,20 @@ html {
 @container (max-width: 314px) {
 
 .data-card-module-24uin .data-card-module-EDbE- {
+      padding: var(--space-8) 0 var(--space-16);
       gap: 0;
-      grid-template-areas: unset;
       grid-template-columns: 1fr;
       line-height: 1.5
   }
     }
 
 .data-card-module-24uin .data-card-module-EDbE- .data-card-module-CjTal {
-      display: block;
       grid-column: span 2;
       text-align: center;
     }
 
-.data-card-module-24uin .data-card-module-EDbE- .data-card-module-QixKJ:not(:last-child) {
-      margin-bottom: var(--space-8);
+.data-card-module-24uin .data-card-module-EDbE- .data-card-module-QixKJ:not(:has(+ .data-card-module-fcSbu:last-child)) {
+      margin-block-end: var(--space-8);
     }
 
 .data-card-module-24uin .data-card-module-EDbE- .data-card-module-FAgmN {
@@ -2777,25 +2840,17 @@ html {
 .data-card-module-24uin .data-card-module-EDbE- .data-card-module-fcSbu {
       margin: 0;
       font-weight: var(--font-weight-normal);
-
-      /* grid-area: value; */
     }
 
 @container (max-width: 314px) {
-
-.data-card-module-24uin .data-card-module-EDbE- .data-card-module-fcSbu {
-        margin-bottom: var(--space-8)
-    }
-
-        .data-card-module-24uin .data-card-module-EDbE- .data-card-module-fcSbu:last-child {
-          margin-bottom: 0;
+        .data-card-module-24uin .data-card-module-EDbE- .data-card-module-fcSbu:not(:last-child) {
+          margin-block-end: var(--space-8);
         }
       }
 
 .data-card-module-24uin .data-card-module-Qv5iI {
     display: flex;
     justify-content: flex-end;
-    margin-top: var(--space-16);
     gap: var(--space-8);
   }
 
@@ -4921,71 +4976,6 @@ button.swiper-pagination-bullet {
   justify-self: flex-start;
 }
 
-.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;
-  line-height: 1.25;
-}
-
-.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;
-  text-wrap: pretty;
-}
-
-/* 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);
-}
-
-.form-module-xD1fv {
-  display: grid;
-  container-type: inline-size;
-  gap: var(--space-16);
-  min-inline-size: 270px;
-}
-
-  .form-module-xD1fv .form-module-Hy5TM,
-  .form-module-xD1fv .form-module-jDAR6,
-  .form-module-xD1fv .form-module-wcAbi {
-    display: grid;
-    gap: var(--space-16);
-  }
-
 .form-segment-module-JLPcG {
   --tooltip-size: 24px;
   --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
@@ -5060,32 +5050,40 @@ button.swiper-pagination-bullet {
   border: 0;
   margin: 0;
   gap: var(--space-16);
-  grid-template-rows: repeat(3, min-content);
 
-  /* TODO: when we continue developing forms, then start doing columns */
+  /* TODO: Unclear what the purpose of this is,
+   * but it seems to be a placeholder for future development
+   * Tested create account and sign-in with and without this, and it seems to work fine
 
-  /* > [class*='form-segment'] {
-    grid-row: span 3;
-    grid-template-rows: subgrid;
-  }
+    grid-template-rows: repeat(3, min-content);
 
-  &.columns {
-    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) {
-      --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
+  /* TODO: when we continue developing forms, then start doing columns
 
-      grid-template-columns: repeat(
-        auto-fit,
-        minmax(var(--minimum-width), 1fr)
-      );
+    > [class*='form-segment'] {
+      grid-row: span 3;
+      grid-template-rows: subgrid;
     }
 
-    > [class*='form-segment'] {
-      --form-segment-toggle-columns: var(--form-segment-columns);
+    &.columns {
+      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) {
+        --minimum-width: calc((100% - 3 * var(--space-16)) / 4);
+
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(var(--minimum-width), 1fr)
+        );
+      }
+
+      > [class*='form-segment'] {
+        --form-segment-toggle-columns: var(--form-segment-columns);
+      }
     }
-  } */
+  */
 }
 
 .password-reveal-toggle-module-bGH6I {
@@ -6331,7 +6329,9 @@ button.swiper-pagination-bullet {
 }
 
 :root {
-  --header-bottom: calc(var(--announcements-height) + var(--header-height));
+  --header-bottom: calc(
+    var(--announcements-height, 0px) + var(--header-height, 0px)
+  );
 }
 
 .header-layout-module-uGT3X {
@@ -6461,6 +6461,7 @@ button.swiper-pagination-bullet {
     font-family: inherit;
     font-size: var(--font-size-18);
     font-weight: var(--font-weight-bold);
+    gap: 0;
     max-inline-size: var(--max-width);
     text-decoration: none;
   }
@@ -6607,6 +6608,21 @@ button.swiper-pagination-bullet {
         border-top: 1px solid var(--color-brand-light-gray);
       }
 
+.widget-grid-module-GdtqD {
+  display: grid;
+  container-type: inline-size;
+  gap: 24px 18px;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+}
+
+  .widget-grid-module-GdtqD .widget-grid-module-y2wM2 {
+    display: grid;
+  }
+
+  .widget-grid-module-GdtqD .widget-grid-module-y2wM2.widget-grid-module-Pladu {
+      grid-column: 1 / -1;
+    }
+
 .blank-page-spacer-module-lXxle {
   display: grid;
   width: 100%;
@@ -7031,107 +7047,6 @@ button.swiper-pagination-bullet {
     margin-block: 0 var(--space-4);
   }
 
-.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;
-  grid-template: minmax(0, min-content) 1fr minmax(0, min-content) / 100%;
-  grid-template-areas:
-    'page-header'
-    'page-main'
-    'page-footer';
-}
-
-  /* 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: minmax(0, max-content) minmax(0, max-content) 1fr / 100%;
-    grid-template-areas:
-      'breadcrumbs'
-      'title'
-      'content';
-    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 {
-    flex-grow: 1; /* TODO: required for Spire, remove later */
-  }
-
-  .page-container-module-eFYSe.page-container-module-iCrH5 .page-container-module-r0SOZ {
-      padding-block-end: 0;
-    }
-
 .sign-in-page-layout-module-Z1oE2 {
   --layout-width: var(--page-container-max-layout-width, 100vw);
   --padding-inline: var(--page-container-padding-inline, 10px);
@@ -7294,6 +7209,107 @@ button.swiper-pagination-bullet {
     }
   }
 
+.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;
+  grid-template: minmax(0, min-content) 1fr minmax(0, min-content) / 100%;
+  grid-template-areas:
+    'page-header'
+    'page-main'
+    'page-footer';
+}
+
+  /* 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: minmax(0, max-content) minmax(0, max-content) 1fr / 100%;
+    grid-template-areas:
+      'breadcrumbs'
+      'title'
+      'content';
+    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 {
+    flex-grow: 1; /* TODO: required for Spire, remove later */
+  }
+
+  .page-container-module-eFYSe.page-container-module-iCrH5 .page-container-module-r0SOZ {
+      padding-block-end: 0;
+    }
+
 .no-results-module-HGe-Y {
   margin-top: var(--space-24);
   text-align: center;
@@ -7533,6 +7549,11 @@ button.swiper-pagination-bullet {
     inset: auto 12px 0;
   }
 
+.change-customer-module-P7ouY .change-customer-module-lxmBJ {
+    width: 16px;
+    height: 16px;
+  }
+
 .change-customer-module-P7ouY [slot='label'] {
     display: flex;
     width: 100%;
@@ -7586,10 +7607,102 @@ button.swiper-pagination-bullet {
     height: 400px;
   }
 
+.change-password-module-hSjXo {
+  display: grid;
+  inset: 0;
+  min-block-size: 150px;
+  min-inline-size: 250px;
+  place-content: center;
+}
+
+.change-password-module-HyPjt {
+  margin-block-start: var(--space-16);
+}
+
+.edit-user-info-module-yQOre {
+  display: grid;
+  inset: 0;
+  min-block-size: 150px;
+  min-inline-size: 250px;
+  place-content: center;
+}
+
+.edit-user-info-module-2CzVn {
+  margin-top: var(--space-16);
+}
+
+.my-sonic-layout-module-ep0n3 {
+  --gap: 0;
+  --padding: var(--space-24);
+  --margin: var(--space-24);
+
+  display: grid;
+  gap: var(--gap) 0;
+  grid-template-areas:
+    'pre-aside'
+    'aside'
+    'title'
+    'main';
+  grid-template-columns: 1fr;
+  padding-block: var(--padding);
+}
+
+  @media (width >= 768px) {.my-sonic-layout-module-ep0n3 {
+    --aside-size: clamp(236px, 22%, 308px);
+    --gap: var(--space-20);
+    --margin: 0;
+
+    grid-template-areas:
+      'pre-aside . title'
+      'aside . main';
+    grid-template-columns: var(--aside-size) var(--gap) 1fr
+}
+  }
+
+  @media (width >= 1440px) {.my-sonic-layout-module-ep0n3 {
+    --gap: var(--space-40);
+    --padding: var(--space-48)
+}
+  }
+
+  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-yMdPQ {
+    align-self: last baseline;
+    grid-area: title;
+    margin-block-end: var(--margin);
+  }
+
+  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-f0Bhf {
+    container-type: inline-size;
+    grid-area: main;
+  }
+
+  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module-6pWHC {
+    align-self: last baseline;
+    grid-area: pre-aside;
+    margin-block-end: var(--margin);
+  }
+
+  .my-sonic-layout-module-ep0n3 .my-sonic-layout-module--OEV- {
+    grid-area: aside;
+    margin-block-end: var(--margin);
+  }
+
 .my-sonic-desktop-navigation-module-f8Y3F {
   font-weight: bold;
 }
 
+@media (width >= 768px) {.connected-my-sonic-navigation-module-2iY0- {
+    display: none
+}
+  }
+
+@media (width < 768px) {
+
+.connected-my-sonic-navigation-module-MgsX2 {
+    display: none
+}
+  }
+
 .product-details-page-layout-module-pPtZX {
   display: flex;
   flex-direction: column;