@sonic-equipment/ui 184.0.0 → 186.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;
@@ -1054,22 +1061,22 @@ html {
     gap: var(--space-4);
   }
 
-.label-module-LGfJt {
+.label-module-iLPRx {
   all: unset;
   cursor: pointer;
   font-weight: var(--font-weight-bold);
 }
 
-  .label-module-LGfJt:has(+ div [data-disabled]) {
+  .label-module-iLPRx:has(+ div [data-disabled]) {
     cursor: default;
   }
 
-  .label-module-LGfJt :where(.label-module-oTWaS) {
+  .label-module-iLPRx :where(.label-module-8uUN-) {
     color: var(--color-brand-red);
     margin-inline-start: var(--space-4);
   }
 
-.checkbox-module-YNVdd {
+.checkbox-module-QzsaZ {
   --selected-color: var(--color-brand-red);
   --selected-color-pressed: var(--color-brand-dark-red);
   --disabled-color: var(--color-brand-dark-gray);
@@ -1086,7 +1093,7 @@ html {
   forced-color-adjust: none;
 }
 
-  .checkbox-module-YNVdd .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ .checkbox-module-spG9E {
     display: flex;
     width: 16px;
     height: 16px;
@@ -1100,7 +1107,7 @@ html {
     transition: all 200ms;
   }
 
-  .checkbox-module-YNVdd .checkbox-module-pHIwh {
+  .checkbox-module-QzsaZ .checkbox-module-CQcmb {
     aspect-ratio: 11/8;
     fill: none;
     inline-size: 10px;
@@ -1116,54 +1123,54 @@ html {
       stroke-dashoffset 600ms;
   }
 
-  .checkbox-module-YNVdd[data-disabled] {
+  .checkbox-module-QzsaZ[data-disabled] {
     cursor: default;
     opacity: 0.4;
   }
 
-  .checkbox-module-YNVdd[data-pressed] .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ[data-pressed] .checkbox-module-spG9E {
     border-color: var(--color-brand-dark-gray);
   }
 
-  .checkbox-module-YNVdd[data-focus-visible] .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ[data-focus-visible] .checkbox-module-spG9E {
       box-shadow: var(--shadow-focus-outline-padded);
       outline: 2px solid var(--color-brand-white);
       outline-offset: 0;
     }
 
-  .checkbox-module-YNVdd[data-selected] .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ[data-selected] .checkbox-module-spG9E, .checkbox-module-QzsaZ[data-indeterminate] .checkbox-module-spG9E {
       border-color: var(--selected-color);
       background: var(--selected-color);
     }
 
-  .checkbox-module-YNVdd[data-selected][data-pressed] .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-indeterminate][data-pressed] .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ[data-selected][data-pressed] .checkbox-module-spG9E, .checkbox-module-QzsaZ[data-indeterminate][data-pressed] .checkbox-module-spG9E {
       border-color: var(--selected-color-pressed);
       background: var(--selected-color-pressed);
     }
 
-  .checkbox-module-YNVdd[data-selected] .checkbox-module-pHIwh, .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-pHIwh {
+  .checkbox-module-QzsaZ[data-selected] .checkbox-module-CQcmb, .checkbox-module-QzsaZ[data-indeterminate] .checkbox-module-CQcmb {
       stroke-dashoffset: 44;
     }
 
-  .checkbox-module-YNVdd[data-selected][data-disabled] .checkbox-module-UKoyf, .checkbox-module-YNVdd[data-indeterminate][data-disabled] .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ[data-selected][data-disabled] .checkbox-module-spG9E, .checkbox-module-QzsaZ[data-indeterminate][data-disabled] .checkbox-module-spG9E {
         border-color: transparent;
         background: var(--disabled-color);
       }
 
-  .checkbox-module-YNVdd[data-indeterminate] .checkbox-module-pHIwh {
+  .checkbox-module-QzsaZ[data-indeterminate] .checkbox-module-CQcmb {
       fill: var(--checkmark-color);
       stroke: none;
     }
 
   /* stylelint-disable-next-line no-descending-specificity */
 
-  .checkbox-module-YNVdd.checkbox-module-nEhvW .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ.checkbox-module-CRPMG .checkbox-module-spG9E {
       border: none;
       background: var(--selected-color);
       transition: none;
     }
 
-  .checkbox-module-YNVdd.checkbox-module-nEhvW[data-selected] .checkbox-module-UKoyf, .checkbox-module-YNVdd.checkbox-module-nEhvW[data-indeterminate] .checkbox-module-UKoyf {
+  .checkbox-module-QzsaZ.checkbox-module-CRPMG[data-selected] .checkbox-module-spG9E, .checkbox-module-QzsaZ.checkbox-module-CRPMG[data-indeterminate] .checkbox-module-spG9E {
         border: 1px solid var(--color-brand-red);
         background: unset;
         background-image:
@@ -1176,12 +1183,12 @@ html {
         background-size: 10px 10px;
       }
 
-  .checkbox-module-YNVdd.checkbox-module-nEhvW[data-disabled] {
+  .checkbox-module-QzsaZ.checkbox-module-CRPMG[data-disabled] {
       cursor: default;
       opacity: 0.4;
     }
 
-  .checkbox-module-YNVdd .checkbox-module-ITd8W:not(:empty) {
+  .checkbox-module-QzsaZ .checkbox-module-bO3ou:not(:empty) {
     font-weight: unset;
     margin-inline-start: var(--space-8);
   }
@@ -1315,55 +1322,14 @@ html {
       color: var(--color-trigger-active);
     }
 
-.field-error-module-FXnIg {
+.field-error-module-1wmEy {
   color: var(--color-brand-red);
 }
 
-.form-field-layout-module-ATB1W {
-  display: grid;
-  gap: 0;
-  grid-template: repeat(3, min-content) / 1fr auto;
-  grid-template-areas:
-    'label .'
-    'field info'
-    'error .';
-}
-
-  .form-field-layout-module-ATB1W .form-field-layout-module-3tbc7 {
-    display: grid;
-    grid-area: label;
-  }
-
-  .form-field-layout-module-ATB1W .form-field-layout-module-3tbc7:not(:empty) {
-      margin-block-end: var(--space-4);
-    }
-
-  .form-field-layout-module-ATB1W .form-field-layout-module-vT6Gy {
-    display: grid;
-    align-self: center;
-    grid-area: field;
-  }
-
-  .form-field-layout-module-ATB1W .form-field-layout-module-UcHO- {
-    display: grid;
-    align-self: center;
-    grid-area: info;
-    margin-inline-start: var(--space-4);
-  }
-
-  .form-field-layout-module-ATB1W .form-field-layout-module-Pfatk {
-    display: grid;
-    grid-area: error;
-  }
-
-  .form-field-layout-module-ATB1W .form-field-layout-module-Pfatk:not(:empty) {
-      margin-block-start: var(--space-4);
-    }
-
 /*************************************************************************
  * Shared Text Field Styles
  *************************************************************************/
-.input-module-2woJR {
+.input-module-uAOUY {
   position: relative;
   display: inline-block;
   overflow: hidden;
@@ -1371,21 +1337,21 @@ html {
   border-radius: var(--border-radius-8);
   background-color: var(--color-brand-light-gray);
 }
-.input-module-2woJR.input-module-uWZm6 {
+.input-module-uAOUY.input-module-7IaPE {
     background-color: var(--color-brand-light-gray);
   }
-.input-module-2woJR.input-module-i5PS- {
+.input-module-uAOUY.input-module-axHOD {
     border: solid 1.5px var(--color-brand-medium-gray);
     background-color: var(--color-brand-white);
   }
-.input-module-2woJR::-moz-placeholder {
+.input-module-uAOUY::-moz-placeholder {
     font-style: italic;
   }
-.input-module-2woJR::placeholder {
+.input-module-uAOUY::placeholder {
     font-style: italic;
   }
-.input-module-2woJR .input-module-pNKEt,
-  .input-module-2woJR input {
+.input-module-uAOUY .input-module-2u4Pp,
+  .input-module-uAOUY input {
     all: unset;
     width: 100%;
     min-width: 180px;
@@ -1396,44 +1362,44 @@ html {
     font: inherit;
     font-size: inherit;
   }
-.input-module-2woJR input[type='search']::-webkit-search-cancel-button {
+.input-module-uAOUY input[type='search']::-webkit-search-cancel-button {
     display: none;
     -webkit-appearance: none;
             appearance: none;
   }
-.input-module-2woJR .input-module-pNKEt {
+.input-module-uAOUY .input-module-2u4Pp {
     display: none;
     pointer-events: none;
   }
-.input-module-2woJR:where(.input-module-Dx2qC) {
+.input-module-uAOUY:where(.input-module-HFhUu) {
     height: var(--space-44);
   }
-.input-module-2woJR:where(.input-module-Dx2qC) .input-module-pNKEt,
-    .input-module-2woJR:where(.input-module-Dx2qC) input {
+.input-module-uAOUY:where(.input-module-HFhUu) .input-module-2u4Pp,
+    .input-module-uAOUY:where(.input-module-HFhUu) input {
       height: var(--space-44);
       padding: 0 var(--space-16);
     }
-.input-module-2woJR:where(.input-module-sH6e7) {
+.input-module-uAOUY:where(.input-module-DRosR) {
     height: var(--space-40);
   }
-.input-module-2woJR:where(.input-module-sH6e7) .input-module-pNKEt,
-    .input-module-2woJR:where(.input-module-sH6e7) input {
+.input-module-uAOUY:where(.input-module-DRosR) .input-module-2u4Pp,
+    .input-module-uAOUY:where(.input-module-DRosR) input {
       height: var(--space-40);
       padding: 0 var(--space-8);
     }
-.input-module-2woJR:has([data-disabled]) {
+.input-module-uAOUY:has([data-disabled]) {
     /* TODO: Properly standarize disabled state of "fields" */
     opacity: 0.4;
   }
-.input-module-2woJR.input-module-hEEuy,
-  .input-module-2woJR:has([data-focused]) {
+.input-module-uAOUY.input-module-7iPV5,
+  .input-module-uAOUY:has([data-focused]) {
     box-shadow: var(--shadow-focus-outline);
     outline: 0;
   }
-.input-module-2woJR:has([data-invalid]) {
+.input-module-uAOUY:has([data-invalid]) {
     border-bottom-color: var(--color-brand-red);
   }
-.input-module-2woJR:has([data-invalid])::after {
+.input-module-uAOUY:has([data-invalid])::after {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -1444,77 +1410,118 @@ html {
       content: '';
     }
 /* growing input field */
-.input-module-2woJR:has(.input-module-6HwY4) {
+.input-module-uAOUY:has(.input-module-peOqs) {
     justify-self: flex-start;
   }
-.input-module-2woJR .input-module-6HwY4 {
+.input-module-uAOUY .input-module-peOqs {
     display: inline-grid;
   }
-.input-module-2woJR .input-module-6HwY4 .input-module-pNKEt,
-    .input-module-2woJR .input-module-6HwY4 input {
+.input-module-uAOUY .input-module-peOqs .input-module-2u4Pp,
+    .input-module-uAOUY .input-module-peOqs input {
       min-width: 2.35em;
       grid-area: 1 / 1;
     }
-.input-module-2woJR .input-module-6HwY4 input {
+.input-module-uAOUY .input-module-peOqs input {
       text-align: center;
     }
-.input-module-2woJR .input-module-6HwY4 .input-module-pNKEt {
+.input-module-uAOUY .input-module-peOqs .input-module-2u4Pp {
       display: block;
       visibility: hidden;
       white-space: nowrap;
     }
 /* account for inline element when growing */
-.input-module-2woJR .input-module-6HwY4 .input-module-oeAz2 ~ .input-module-pNKEt {
+.input-module-uAOUY .input-module-peOqs .input-module-Ai2f7 ~ .input-module-2u4Pp {
       margin-right: var(--space-24);
     }
-.input-module-2woJR .input-module-zjVxG {
+.input-module-uAOUY .input-module-JdwaH {
     display: inline-grid;
     width: 100%;
     align-items: center;
     grid-template-columns: 1fr 0;
   }
-.input-module-2woJR .input-module-zjVxG input:has(~ .input-module-oeAz2) {
+.input-module-uAOUY .input-module-JdwaH input:has(~ .input-module-Ai2f7) {
       padding-right: var(--space-36);
       margin-right: -20px;
     }
-.input-module-2woJR .input-module-zjVxG .input-module-oeAz2 {
+.input-module-uAOUY .input-module-JdwaH .input-module-Ai2f7 {
       display: inline-flex;
       margin-left: calc(0px - var(--space-32));
       color: var(--color-brand-dark-gray);
     }
 /* Don't show value-reveal button on empty password fields  */
-.input-module-2woJR .input-module-zjVxG input[type='password'] {
+.input-module-uAOUY .input-module-JdwaH input[type='password'] {
       /* TODO: overwriting forced Spire style, remove !important in the future */
       font-family: 'Verdana', sans-serif !important;
       font-size: inherit !important;
     }
-.input-module-2woJR .input-module-zjVxG input[type='password'] ~ .input-module-oeAz2 {
+.input-module-uAOUY .input-module-JdwaH input[type='password'] ~ .input-module-Ai2f7 {
         transition: all 0.2s ease;
       }
-.input-module-2woJR .input-module-zjVxG input[type='password'][value=''] ~ .input-module-oeAz2 {
+.input-module-uAOUY .input-module-JdwaH input[type='password'][value=''] ~ .input-module-Ai2f7 {
         opacity: 0;
         visibility: hidden;
       }
-.input-module-2woJR .input-module-zjVxG input[type='password']:not([value='']) ~ .input-module-oeAz2 {
+.input-module-uAOUY .input-module-JdwaH input[type='password']:not([value='']) ~ .input-module-Ai2f7 {
         opacity: 1;
         visibility: visible;
       }
-.input-module-2woJR .input-module-zjVxG input[type='password']::-ms-reveal {
+.input-module-uAOUY .input-module-JdwaH input[type='password']::-ms-reveal {
         display: none;
       }
-.input-module-2woJR .input-module-zjVxG input[type='password'] ~ .input-module-pNKEt {
+.input-module-uAOUY .input-module-JdwaH input[type='password'] ~ .input-module-2u4Pp {
         font-family: 'Verdana', sans-serif !important;
       }
 
-.number-field-module-xawWc .number-field-module-A1nvE {
+.form-field-layout-module-6lieX {
+  display: grid;
+  gap: 0;
+  grid-template: repeat(3, min-content) / 1fr auto;
+  grid-template-areas:
+    'label .'
+    'field info'
+    'error .';
+}
+
+  .form-field-layout-module-6lieX .form-field-layout-module-3CQx4 {
+    display: grid;
+    grid-area: label;
+  }
+
+  .form-field-layout-module-6lieX .form-field-layout-module-3CQx4:not(:empty) {
+      margin-block-end: var(--space-4);
+    }
+
+  .form-field-layout-module-6lieX .form-field-layout-module-0CMW- {
+    display: grid;
+    align-self: center;
+    grid-area: field;
+  }
+
+  .form-field-layout-module-6lieX .form-field-layout-module-RCuwU {
+    display: grid;
+    align-self: center;
+    grid-area: info;
+    margin-inline-start: var(--space-4);
+  }
+
+  .form-field-layout-module-6lieX .form-field-layout-module-VHcQ- {
+    display: grid;
+    grid-area: error;
+  }
+
+  .form-field-layout-module-6lieX .form-field-layout-module-VHcQ-:not(:empty) {
+      margin-block-start: var(--space-4);
+    }
+
+.number-field-module-eFnKr .number-field-module-MAY-9 {
     display: flex;
     justify-content: space-between;
   }
 
-    .number-field-module-xawWc .number-field-module-A1nvE:has(button[data-pressed]) [class*='growing-input'] input {
-        animation: number-field-module-OlEoa 100ms;
+    .number-field-module-eFnKr .number-field-module-MAY-9:has(button[data-pressed]) [class*='growing-input'] input {
+        animation: number-field-module-QbNfS 100ms;
       }
-  .number-field-module-xawWc .number-field-module-lkZYQ {
+  .number-field-module-eFnKr .number-field-module-v1sB2 {
     --btn-bgcolor: transparent;
 
     all: unset;
@@ -1529,17 +1536,17 @@ html {
        -moz-user-select: none;
             user-select: none;
   }
-  .number-field-module-xawWc .number-field-module-lkZYQ[data-hovered] {
+  .number-field-module-eFnKr .number-field-module-v1sB2[data-hovered] {
       --btn-bgcolor: var(--color-brand-light-gray);
     }
-  .number-field-module-xawWc .number-field-module-lkZYQ[data-hovered][data-pressed] {
+  .number-field-module-eFnKr .number-field-module-v1sB2[data-hovered][data-pressed] {
         --btn-bgcolor: var(--color-brand-medium-gray);
       }
-  .number-field-module-xawWc .number-field-module-lkZYQ[data-disabled] {
+  .number-field-module-eFnKr .number-field-module-v1sB2[data-disabled] {
       cursor: default;
       opacity: 0.4;
     }
-  .number-field-module-xawWc .number-field-module-lkZYQ:not([data-disabled])::before {
+  .number-field-module-eFnKr .number-field-module-v1sB2:not([data-disabled])::before {
         border-radius: 50%;
         aspect-ratio: 1;
         background-color: var(--btn-bgcolor);
@@ -1547,13 +1554,13 @@ html {
         grid-area: button;
         inline-size: 75%;
       }
-  .number-field-module-xawWc .number-field-module-lkZYQ svg {
+  .number-field-module-eFnKr .number-field-module-v1sB2 svg {
       width: 16px;
       height: 16px;
       grid-area: button;
     }
 
-@keyframes number-field-module-OlEoa {
+@keyframes number-field-module-QbNfS {
   0%,
   100% {
     transform: scale(1);
@@ -1585,7 +1592,7 @@ html {
       height: 12px;
     }
 
-.select-module-ui-Wc {
+.select-module-IPU-m {
   --trigger-width: initial;
   --height: var(--space-44);
 
@@ -1598,15 +1605,15 @@ html {
   gap: var(--space-4);
 }
 
-  .select-module-ui-Wc.select-module-44a1l {
+  .select-module-IPU-m.select-module-ysEmc {
     --height: var(--space-36);
   }
 
-  .select-module-ui-Wc.select-module-QUm-8 {
+  .select-module-IPU-m.select-module-E62kG {
     --height: var(--space-44);
   }
 
-  .select-module-ui-Wc .select-module-aMQIQ {
+  .select-module-IPU-m .select-module-0kwVJ {
     all: unset;
     position: relative;
     display: flex;
@@ -1623,7 +1630,7 @@ html {
     outline: none;
   }
 
-  .select-module-ui-Wc .select-module-aMQIQ .select-module-3scUm > :first-child {
+  .select-module-IPU-m .select-module-0kwVJ .select-module-ptK6Z > :first-child {
         position: absolute;
         display: block;
         width: var(--space-12);
@@ -1634,27 +1641,27 @@ html {
         margin-block: auto;
       }
 
-  .select-module-ui-Wc .select-module-aMQIQ [slot='description'] {
+  .select-module-IPU-m .select-module-0kwVJ [slot='description'] {
       display: none;
     }
 
-  .select-module-ui-Wc .select-module-aMQIQ.select-module-XMc0P,
-    .select-module-ui-Wc .select-module-aMQIQ:focus,
-    .select-module-ui-Wc .select-module-aMQIQ:has([data-focused]) {
+  .select-module-IPU-m .select-module-0kwVJ.select-module-cnFLz,
+    .select-module-IPU-m .select-module-0kwVJ:focus,
+    .select-module-IPU-m .select-module-0kwVJ:has([data-focused]) {
       border-color: transparent;
       box-shadow: var(--shadow-focus-outline);
       outline: none;
     }
 
-  .select-module-ui-Wc .select-module-aMQIQ[disabled] {
+  .select-module-IPU-m .select-module-0kwVJ[disabled] {
       opacity: 0.4;
     }
 
-  .select-module-ui-Wc[data-invalid] .select-module-aMQIQ {
+  .select-module-IPU-m[data-invalid] .select-module-0kwVJ {
     border-bottom-color: var(--color-brand-red);
   }
 
-  .select-module-ui-Wc[data-invalid] .select-module-aMQIQ::after {
+  .select-module-IPU-m[data-invalid] .select-module-0kwVJ::after {
       position: absolute;
       right: 0;
       bottom: 0;
@@ -1667,17 +1674,17 @@ html {
 
   /* stylelint-disable-next-line no-descending-specificity */
 
-  .select-module-ui-Wc:where(.select-module-IRd4F) .select-module-aMQIQ {
+  .select-module-IPU-m:where(.select-module-Qq411) .select-module-0kwVJ {
     border-color: var(--color-brand-light-gray);
     background-color: var(--color-brand-light-gray);
   }
 
-  .select-module-ui-Wc:where(.select-module-nKUxG) {
+  .select-module-IPU-m:where(.select-module-KuyIv) {
     cursor: default;
     pointer-events: none;
   }
 
-.select-module-z8cWq {
+.select-module-XFHrL {
   overflow: auto;
   width: var(--trigger-width);
   min-width: -moz-fit-content;
@@ -1687,11 +1694,11 @@ html {
   padding-block: var(--space-8);
 }
 
-.select-module-S21ba {
+.select-module-K6TjK {
   outline: none;
 }
 
-.select-module-4Bm2j {
+.select-module-AUXLg {
   padding: var(--space-8) var(--space-24);
   color: var(--color-brand-dark-gray);
   cursor: default;
@@ -1700,7 +1707,7 @@ html {
   overflow-wrap: break-word;
 }
 
-.select-module-LgEJO {
+.select-module-MkKKi {
   position: relative;
   padding: var(--space-8) var(--space-24);
   cursor: pointer;
@@ -1709,7 +1716,7 @@ html {
   overflow-wrap: break-word;
 }
 
-.select-module-LgEJO .select-module-lQFw3 {
+.select-module-MkKKi .select-module-N7nUk {
     position: absolute;
     width: var(--space-24);
     height: var(--space-24);
@@ -1717,8 +1724,8 @@ html {
     margin-block: auto;
   }
 
-.select-module-LgEJO:hover,
-  .select-module-LgEJO:focus {
+.select-module-MkKKi:hover,
+  .select-module-MkKKi:focus {
     background-color: var(--color-brand-red);
     color: var(--color-white);
   }
@@ -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-j-sK- {
+  display: grid;
+  container-type: inline-size;
+  gap: var(--space-16);
+  min-inline-size: 270px;
+}
+
+  .form-module-j-sK- .form-module-FJZtR,
+  .form-module-j-sK- .form-module-KjHjn,
+  .form-module-j-sK- .form-module-2IhUq {
+    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);
   }
 
@@ -3219,7 +3274,7 @@ html {
     box-shadow ease 0.2s;
 }
 
-@media (hover: hover) {
+@media (hover: hover) and (pointer: fine) {
     .product-card-module-pLaiB:has(.product-card-module-CStNi[href]):hover {
       box-shadow: var(--box-shadow);
       scale: 1.04;
@@ -3477,9 +3532,11 @@ html {
       .product-overview-grid-module-MlUVA:nth-child(2n)::after {
         display: none;
       }
+        @media (pointer: fine) {
       .product-overview-grid-module-MlUVA:has(> :hover)::after, .product-overview-grid-module-MlUVA:has(+ .product-overview-grid-module-MlUVA:hover)::after {
-        display: none;
+          display: none
       }
+        }
 }
 
 @media (width >= 1440px) {
@@ -3492,9 +3549,11 @@ html {
       .product-overview-grid-module-MlUVA:nth-child(3n)::after {
         display: none;
       }
+        @media (pointer: fine) {
       .product-overview-grid-module-MlUVA:has(> :hover)::after, .product-overview-grid-module-MlUVA:has(+ .product-overview-grid-module-MlUVA:hover)::after {
-        display: none;
+          display: none
       }
+        }
 }
 
 /**
@@ -4508,7 +4567,7 @@ button.swiper-pagination-bullet {
     margin: 0;
   }
 
-.select-field-module-6Mz-Y {
+.select-field-module-T07fb {
   --button-height: var(--space-44);
   --button-gap: var(--space-8);
   --button-border-color: var(--color-brand-medium-gray);
@@ -4518,22 +4577,22 @@ button.swiper-pagination-bullet {
   position: relative;
 }
 
-  .select-field-module-6Mz-Y:where(.select-field-module-CSbmU) {
+  .select-field-module-T07fb:where(.select-field-module-x-dtL) {
     --button-height: var(--space-36);
     --button-gap: var(--space-4);
   }
 
-  .select-field-module-6Mz-Y:where(.select-field-module--Ocnn) {
+  .select-field-module-T07fb:where(.select-field-module-jfk-G) {
     --button-border-color: var(--color-brand-light-gray);
     --button-bg-color: var(--color-brand-light-gray);
   }
 
-  .select-field-module-6Mz-Y:where(.select-field-module-nT7fi) {
+  .select-field-module-T07fb:where(.select-field-module-NyDa0) {
     cursor: default;
     pointer-events: none;
   }
 
-  .select-field-module-6Mz-Y .select-field-module-GkFBV {
+  .select-field-module-T07fb .select-field-module-uGX30 {
     all: unset;
     position: relative;
     display: grid;
@@ -4551,40 +4610,40 @@ button.swiper-pagination-bullet {
     padding-inline: 16px 8px;
   }
 
-  .select-field-module-6Mz-Y .select-field-module-GkFBV [slot='description'] {
+  .select-field-module-T07fb .select-field-module-uGX30 [slot='description'] {
       display: none;
     }
 
-  .select-field-module-6Mz-Y .select-field-module-GkFBV[data-focused],
-    .select-field-module-6Mz-Y .select-field-module-GkFBV[data-pressed] {
+  .select-field-module-T07fb .select-field-module-uGX30[data-focused],
+    .select-field-module-T07fb .select-field-module-uGX30[data-pressed] {
       border-color: transparent;
       box-shadow: var(--shadow-focus-outline);
       outline: none;
     }
 
-  .select-field-module-6Mz-Y .select-field-module-GkFBV[disabled] {
+  .select-field-module-T07fb .select-field-module-uGX30[disabled] {
       opacity: 0.4;
     }
 
-  .select-field-module-6Mz-Y .select-field-module-GkFBV .select-field-module-qQmvX {
+  .select-field-module-T07fb .select-field-module-uGX30 .select-field-module-z-6Ym {
       overflow: hidden;
       grid-area: value;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-  .select-field-module-6Mz-Y .select-field-module-GkFBV .select-field-module-yhZMK {
+  .select-field-module-T07fb .select-field-module-uGX30 .select-field-module-Njvvb {
       block-size: 12px;
       grid-area: icon;
       inline-size: 12px;
       justify-self: center;
     }
 
-  .select-field-module-6Mz-Y[data-invalid] .select-field-module-GkFBV {
+  .select-field-module-T07fb[data-invalid] .select-field-module-uGX30 {
     border-bottom-color: var(--color-brand-red);
   }
 
-  .select-field-module-6Mz-Y[data-invalid] .select-field-module-GkFBV::after {
+  .select-field-module-T07fb[data-invalid] .select-field-module-uGX30::after {
       position: absolute;
       background-color: var(--color-brand-red);
       block-size: 1px;
@@ -4592,7 +4651,7 @@ button.swiper-pagination-bullet {
       inset: auto 0 0;
     }
 
-.select-field-module--7nQi {
+.select-field-module-tbhPg {
   overflow: auto;
   background-color: var(--color-white);
   box-shadow: var(--box-shadow-light);
@@ -4603,16 +4662,16 @@ button.swiper-pagination-bullet {
   transition: opacity 0.2s;
 }
 
-.select-field-module--7nQi[data-entering],
-  .select-field-module--7nQi[data-exiting] {
+.select-field-module-tbhPg[data-entering],
+  .select-field-module-tbhPg[data-exiting] {
     opacity: 0;
   }
 
-.select-field-module--7nQi .select-field-module-O2abK {
+.select-field-module-tbhPg .select-field-module-Rwf0R {
     outline: none;
   }
 
-.select-field-module--7nQi .select-field-module-O7Ce- {
+.select-field-module-tbhPg .select-field-module-KDZmc {
     display: grid;
     align-items: center;
     color: var(--color-brand-dark-gray);
@@ -4625,7 +4684,7 @@ button.swiper-pagination-bullet {
     padding-inline: calc(var(--space-24) + var(--space-2) + var(--space-4));
   }
 
-.select-field-module--7nQi .select-field-module-KFavE {
+.select-field-module-tbhPg .select-field-module-u3hoe {
     display: grid;
     align-items: center;
     padding: var(--space-4);
@@ -4640,18 +4699,18 @@ button.swiper-pagination-bullet {
     overflow-wrap: break-word;
   }
 
-.select-field-module--7nQi .select-field-module-KFavE [slot='description'] {
+.select-field-module-tbhPg .select-field-module-u3hoe [slot='description'] {
       display: grid;
       grid-area: icon;
       justify-self: center;
     }
 
-.select-field-module--7nQi .select-field-module-KFavE [slot='label'] {
+.select-field-module-tbhPg .select-field-module-u3hoe [slot='label'] {
       grid-area: label;
     }
 
-.select-field-module--7nQi .select-field-module-KFavE[data-hovered],
-    .select-field-module--7nQi .select-field-module-KFavE[data-focused] {
+.select-field-module-tbhPg .select-field-module-u3hoe[data-hovered],
+    .select-field-module-tbhPg .select-field-module-u3hoe[data-focused] {
       background-color: var(--color-brand-red);
       color: var(--color-white);
     }
@@ -4917,76 +4976,195 @@ button.swiper-pagination-bullet {
         }
   }
 
-.checkbox-field-module-fdQEa {
-  justify-self: flex-start;
+.switch-module-C7eqt {
+  --pin-color: var(--color-white);
+  --box-color: var(--color-brand-light-gray);
+  --box-color-pressed: var(--color-brand-medium-gray);
+  --selected-box-color: var(--color-brand-red);
+  --selected-box-color-pressed: var(--color-brand-dark-red);
+  --disabled-box-color: var(--color-brand-medium-gray);
+  --disabled-selected-box-color: var(--color-brand-dark-gray);
+
+  display: flex;
+  align-items: baseline;
+  color: var(--color-brand-black);
+  cursor: pointer;
+  font-size: var(--font-size-14);
+  forced-color-adjust: none;
 }
 
-.message-module-N1e1t {
-  --color: var(--color-brand-black);
+  .switch-module-C7eqt .switch-module-UZop9 {
+    width: 44px;
+    height: 24px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    border-radius: 12px;
+    background: var(--box-color);
+    margin-block: -0.5em 0.5em;
+    transition-duration: 200ms;
+    transition-property: background;
+    translate: 0 0.5em;
+  }
 
-  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;
-}
+  .switch-module-C7eqt .switch-module-UZop9::before {
+      display: block;
+      width: 20px;
+      height: 20px;
+      box-sizing: border-box;
+      border: solid 0.5px rgb(0 0 0 / 4%);
+      border-radius: 50%;
+      margin: var(--space-2);
+      background: var(--pin-color);
+      box-shadow:
+        0 3px 1px 0 rgb(0 0 0 / 6%),
+        0 3px 8px 0 rgb(0 0 0 / 15%);
+      content: '';
+      transition: all 200ms;
+    }
 
-.message-module-w2hsL {
-  color: var(--color);
-  grid-area: icon;
-  margin-block: -3px;
-  margin-inline-end: var(--space-8);
-}
+  .switch-module-C7eqt[data-pressed] .switch-module-UZop9 {
+    background: var(--box-color-pressed);
+  }
 
-.message-module-w2hsL svg {
-    display: block;
+  .switch-module-C7eqt[data-disabled] {
+    cursor: default;
+    opacity: 0.4;
   }
 
-.message-module-Gi4uR {
-  grid-area: body;
-  text-wrap: pretty;
-}
+  .switch-module-C7eqt[data-disabled] .switch-module-UZop9 {
+      background: var(--disabled-box-color);
+    }
 
-/* variants */
+  .switch-module-C7eqt[data-disabled] .switch-module-UZop9::before {
+        box-shadow: none;
+        opacity: 0.4;
+      }
 
-.message-module-pp9U4 {
-  background: var(--color-brand-light-gray);
-}
+  .switch-module-C7eqt[data-focus-visible] .switch-module-UZop9 {
+      box-shadow: var(--shadow-focus-outline-padded);
+      outline: 2px solid var(--color-brand-white);
+      outline-offset: 0;
+    }
 
-.message-module-srkp1 {
-  --color: var(--color-semantic-information);
-}
+  .switch-module-C7eqt[data-selected] .switch-module-UZop9 {
+      background: var(--selected-box-color);
+    }
 
-.message-module-oeSdr {
-  --color: var(--color-semantic-stop);
-}
+  .switch-module-C7eqt[data-selected] .switch-module-UZop9::before {
+        transform: translateX(100%);
+      }
 
-.message-module-Vp0pA {
-  --color: var(--color-semantic-okay);
+  .switch-module-C7eqt[data-selected][data-pressed] .switch-module-UZop9 {
+      background: var(--selected-box-color-pressed);
+    }
+
+  .switch-module-C7eqt[data-selected][data-disabled] .switch-module-UZop9 {
+      background: var(--disabled-selected-box-color);
+    }
+
+  .switch-module-C7eqt .switch-module-rX09b:not(:empty) {
+    font-weight: unset;
+    margin-inline-start: var(--space-8);
+  }
+
+.textarea-module-FEAEz {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--border-radius-8);
 }
 
-.message-module-kvANQ {
-  --color: var(--color-semantic-notify);
+  .textarea-module-FEAEz.textarea-module-hHg5e {
+    background-color: var(--color-brand-light-gray);
+  }
+
+  .textarea-module-FEAEz.textarea-module-CEbPl {
+    border: solid 1.5px var(--color-brand-medium-gray);
+    background-color: var(--color-brand-white);
+  }
+
+  .textarea-module-FEAEz:has([data-disabled]) {
+    opacity: 0.4;
+  }
+
+  .textarea-module-FEAEz:has([data-focused]) {
+    box-shadow: 0 0 8px 2px var(--color-brand-red);
+    outline: 0;
+  }
+
+  .textarea-module-FEAEz:has([data-invalid])::after {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    height: 2px;
+    background-color: var(--color-brand-red);
+    content: '';
+  }
+
+  .textarea-module-FEAEz textarea {
+    all: unset;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 13px var(--space-16);
+    font: inherit;
+    overflow-y: hidden;
+  }
+
+  .textarea-module-FEAEz.textarea-module-PKIWL textarea,
+    .textarea-module-FEAEz.textarea-module-PKIWL .textarea-module-FEAEz {
+      min-height: var(--space-44);
+    }
+
+  .textarea-module-FEAEz.textarea-module-PKIWL textarea {
+      padding: var(--space-16);
+    }
+
+  .textarea-module-FEAEz.textarea-module-27RUM textarea,
+    .textarea-module-FEAEz.textarea-module-27RUM .textarea-module-FEAEz {
+      min-height: var(--space-40);
+    }
+
+  .textarea-module-FEAEz.textarea-module-27RUM textarea {
+      padding: 11px var(--space-8);
+    }
+
+.checkbox-field-module-cjj4V {
+  justify-self: flex-start;
 }
 
-.form-module-xD1fv {
-  display: grid;
-  container-type: inline-size;
-  gap: var(--space-16);
-  min-inline-size: 270px;
+.password-reveal-toggle-module-cW16B {
+  display: inline-flex;
+  color: var(--color-brand-medium-gray);
+  cursor: pointer;
 }
 
-  .form-module-xD1fv .form-module-Hy5TM,
-  .form-module-xD1fv .form-module-jDAR6,
-  .form-module-xD1fv .form-module-wcAbi {
-    display: grid;
-    gap: var(--space-16);
+  .password-reveal-toggle-module-cW16B[data-hovered],
+  .password-reveal-toggle-module-cW16B[data-focused] {
+    color: var(--color-brand-dark-gray);
   }
 
-.form-segment-module-JLPcG {
+  .password-reveal-toggle-module-cW16B input {
+    block-size: 0;
+    inline-size: 0;
+  }
+
+  .password-reveal-toggle-module-cW16B span {
+    block-size: var(--space-24);
+    inline-size: var(--space-24);
+  }
+
+.text-field-module-TYL3X {
+  /* styles */
+}
+
+.switch-field-module-sVrKL {
+  justify-self: flex-start;
+}
+
+.form-segment-module-GbJZZ {
   --tooltip-size: 24px;
   --info-icon-offset: calc((var(--tooltip-size) + var(--space-4)) * -1);
   --form-segment-toggle-columns: var(--form-segment-no-columns);
@@ -5012,13 +5190,13 @@ button.swiper-pagination-bullet {
     grid-template-rows: subgrid;
   } */
 
-  .form-segment-module-JLPcG.form-segment-module-98g3i {
+  .form-segment-module-GbJZZ.form-segment-module-60hj6 {
     justify-self: flex-start;
   }
 
   /* when info icon is present inside TODO: use class name partial value instead of data */
 
-  .form-segment-module-JLPcG:has([class*='info-icon-tooltip']) {
+  .form-segment-module-GbJZZ:has([class*='info-icon-tooltip']) {
     margin-inline-end: var(--info-icon-offset);
 
     /* TODO: for when we continue developing forms */
@@ -5054,222 +5232,59 @@ button.swiper-pagination-bullet {
     } */
   }
 
-.form-segment-group-module-P3YjC {
+.form-segment-group-module-810IM {
   display: grid;
   padding: 0;
   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 */
 
-  /* > [class*='form-segment'] {
-    grid-row: span 3;
-    grid-template-rows: subgrid;
-  }
+  /* 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
 
-  &.columns {
-    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+    grid-template-rows: repeat(3, min-content);
 
-    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)
-      );
-    }
+  /* TODO: when we continue developing forms, then start doing columns
 
     > [class*='form-segment'] {
-      --form-segment-toggle-columns: var(--form-segment-columns);
-    }
-  } */
-}
-
-.password-reveal-toggle-module-bGH6I {
-  display: inline-flex;
-  color: var(--color-brand-medium-gray);
-  cursor: pointer;
-}
-
-  .password-reveal-toggle-module-bGH6I[data-hovered],
-  .password-reveal-toggle-module-bGH6I[data-focused] {
-    color: var(--color-brand-dark-gray);
-  }
-
-  .password-reveal-toggle-module-bGH6I input {
-    block-size: 0;
-    inline-size: 0;
-  }
-
-  .password-reveal-toggle-module-bGH6I span {
-    block-size: var(--space-24);
-    inline-size: var(--space-24);
-  }
-
-.textarea-module-C6Xr1 {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  border: none;
-  border-radius: var(--border-radius-8);
-}
-
-  .textarea-module-C6Xr1.textarea-module-NgOND {
-    background-color: var(--color-brand-light-gray);
-  }
-
-  .textarea-module-C6Xr1.textarea-module-Z-ytQ {
-    border: solid 1.5px var(--color-brand-medium-gray);
-    background-color: var(--color-brand-white);
-  }
-
-  .textarea-module-C6Xr1:has([data-disabled]) {
-    opacity: 0.4;
-  }
-
-  .textarea-module-C6Xr1:has([data-focused]) {
-    box-shadow: 0 0 8px 2px var(--color-brand-red);
-    outline: 0;
-  }
-
-  .textarea-module-C6Xr1:has([data-invalid])::after {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    height: 2px;
-    background-color: var(--color-brand-red);
-    content: '';
-  }
-
-  .textarea-module-C6Xr1 textarea {
-    all: unset;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 13px var(--space-16);
-    font: inherit;
-    overflow-y: hidden;
-  }
-
-  .textarea-module-C6Xr1.textarea-module-vksG- textarea,
-    .textarea-module-C6Xr1.textarea-module-vksG- .textarea-module-C6Xr1 {
-      min-height: var(--space-44);
-    }
-
-  .textarea-module-C6Xr1.textarea-module-vksG- textarea {
-      padding: var(--space-16);
-    }
-
-  .textarea-module-C6Xr1.textarea-module-6JrQJ textarea,
-    .textarea-module-C6Xr1.textarea-module-6JrQJ .textarea-module-C6Xr1 {
-      min-height: var(--space-40);
-    }
-
-  .textarea-module-C6Xr1.textarea-module-6JrQJ textarea {
-      padding: 11px var(--space-8);
-    }
-
-.text-field-module-PBkCx {
-  /* styles */
-}
-
-.switch-module-ywpXc {
-  --pin-color: var(--color-white);
-  --box-color: var(--color-brand-light-gray);
-  --box-color-pressed: var(--color-brand-medium-gray);
-  --selected-box-color: var(--color-brand-red);
-  --selected-box-color-pressed: var(--color-brand-dark-red);
-  --disabled-box-color: var(--color-brand-medium-gray);
-  --disabled-selected-box-color: var(--color-brand-dark-gray);
-
-  display: flex;
-  align-items: baseline;
-  color: var(--color-brand-black);
-  cursor: pointer;
-  font-size: var(--font-size-14);
-  forced-color-adjust: none;
-}
-
-  .switch-module-ywpXc .switch-module-2e1rG {
-    width: 44px;
-    height: 24px;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    border-radius: 12px;
-    background: var(--box-color);
-    margin-block: -0.5em 0.5em;
-    transition-duration: 200ms;
-    transition-property: background;
-    translate: 0 0.5em;
-  }
-
-  .switch-module-ywpXc .switch-module-2e1rG::before {
-      display: block;
-      width: 20px;
-      height: 20px;
-      box-sizing: border-box;
-      border: solid 0.5px rgb(0 0 0 / 4%);
-      border-radius: 50%;
-      margin: var(--space-2);
-      background: var(--pin-color);
-      box-shadow:
-        0 3px 1px 0 rgb(0 0 0 / 6%),
-        0 3px 8px 0 rgb(0 0 0 / 15%);
-      content: '';
-      transition: all 200ms;
+      grid-row: span 3;
+      grid-template-rows: subgrid;
     }
 
-  .switch-module-ywpXc[data-pressed] .switch-module-2e1rG {
-    background: var(--box-color-pressed);
-  }
+    &.columns {
+      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
 
-  .switch-module-ywpXc[data-disabled] {
-    cursor: default;
-    opacity: 0.4;
-  }
+      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);
 
-  .switch-module-ywpXc[data-disabled] .switch-module-2e1rG {
-      background: var(--disabled-box-color);
-    }
-
-  .switch-module-ywpXc[data-disabled] .switch-module-2e1rG::before {
-        box-shadow: none;
-        opacity: 0.4;
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(var(--minimum-width), 1fr)
+        );
       }
 
-  .switch-module-ywpXc[data-focus-visible] .switch-module-2e1rG {
-      box-shadow: var(--shadow-focus-outline-padded);
-      outline: 2px solid var(--color-brand-white);
-      outline-offset: 0;
-    }
-
-  .switch-module-ywpXc[data-selected] .switch-module-2e1rG {
-      background: var(--selected-box-color);
-    }
-
-  .switch-module-ywpXc[data-selected] .switch-module-2e1rG::before {
-        transform: translateX(100%);
+      > [class*='form-segment'] {
+        --form-segment-toggle-columns: var(--form-segment-columns);
       }
-
-  .switch-module-ywpXc[data-selected][data-pressed] .switch-module-2e1rG {
-      background: var(--selected-box-color-pressed);
     }
+  */
+}
 
-  .switch-module-ywpXc[data-selected][data-disabled] .switch-module-2e1rG {
-      background: var(--disabled-selected-box-color);
-    }
+.edit-address-form-module-HF64G {
+  display: grid;
+}
 
-  .switch-module-ywpXc .switch-module-rZxF4:not(:empty) {
-    font-weight: unset;
-    margin-inline-start: var(--space-8);
+  @media (width >= 576px) {.edit-address-form-module-HF64G {
+    grid-column: span 2
+}
   }
 
-.switch-field-module-lBYuh {
-  justify-self: flex-start;
+.edit-address-form-module-V-LOB {
+  margin-block-start: var(--space-8);
 }
 
 .categories-grid-module-C751R {
@@ -6463,6 +6478,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;
   }
@@ -6609,6 +6625,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%;
@@ -6948,192 +6979,91 @@ button.swiper-pagination-bullet {
   .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module--Bhqj::after {
           position: absolute;
           background: transparent;
-          content: '';
-          inset: 0;
-        }
-
-  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-gZ9ae {
-      z-index: 1;
-      grid-area: close;
-      justify-self: center;
-    }
-
-  .announcement-module-Xi0L5:where(.announcement-module-0LTWL) {
-    --icon-color: var(--color-semantic-information);
-  }
-
-  .announcement-module-Xi0L5:where(.announcement-module-Ga3lN) {
-    --icon-color: var(--color-semantic-notify);
-  }
-
-  .announcement-module-Xi0L5:where(.announcement-module-S3nSW) {
-    --icon-color: var(--color-semantic-stop);
-  }
-
-  .announcement-module-Xi0L5:where(.announcement-module-E6DqW) {
-    --z: 2;
-    --background-color: var(--color-brand-red);
-    --text-color: var(--color-white);
-    --icon-color: var(--color-white);
-    --border-color: var(--color-white);
-  }
-
-  .announcement-module-Xi0L5:where(.announcement-module-E6DqW):has([href]):hover {
-      --background-color: var(--color-brand-dark-red);
-    }
-
-:root {
-  --announcements-bottom: var(--announcements-height);
-}
-
-.announcement-list-module-Nn6HC {
-  position: relative;
-  z-index: var(--announcements-layer);
-}
-
-.announcement-list-module-Nn6HC.announcement-list-module-icXq8 {
-    position: sticky;
-    top: 0;
-  }
-
-.announcement-list-module-Nn6HC .announcement-list-module-cgFNU {
-    display: flex;
-    flex-direction: column;
-  }
-
-.announcement-list-module-Nn6HC .announcement-list-module-fUupi {
-    margin-block: -1px;
-  }
-
-.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi,
-    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0 {
-      transition: all var(--transition-duration-short) linear;
-    }
-
-.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi,
-    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0.announcement-list-module-dUOEB {
-      z-index: -1;
-      height: 0;
-    }
-
-.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi.announcement-list-module-1Rfn0,
-    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0 {
-      height: auto;
-    }
-
-.create-account-form-module-TMU8F {
-  min-inline-size: 270px;
-}
-
-.sign-in-form-module-BoJwR {
-  min-inline-size: 270px;
-}
-
-  .sign-in-form-module-BoJwR .sign-in-form-module-PQ4Ik {
-    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);
-  }
+          content: '';
+          inset: 0;
+        }
 
-  .page-container-module-eFYSe:not(.page-container-module-iCrH5) .page-container-module-JkoQY {
-      padding-block: var(--page-container-padding-block);
+  .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-gZ9ae {
+      z-index: 1;
+      grid-area: close;
+      justify-self: center;
     }
 
-  /* default layout behavior, in width brackets */
-
-  @media (width >= 768px) {
+  .announcement-module-Xi0L5:where(.announcement-module-0LTWL) {
+    --icon-color: var(--color-semantic-information);
+  }
 
-  .page-container-module-eFYSe:not(.page-container-module-glxAS) {
-      --page-container-max-layout-width: 806px
+  .announcement-module-Xi0L5:where(.announcement-module-Ga3lN) {
+    --icon-color: var(--color-semantic-notify);
   }
-    }
 
-  @media (width >= 1440px) {
+  .announcement-module-Xi0L5:where(.announcement-module-S3nSW) {
+    --icon-color: var(--color-semantic-stop);
+  }
 
-  .page-container-module-eFYSe:not(.page-container-module-glxAS) {
-      --page-container-max-layout-width: 1222px
+  .announcement-module-Xi0L5:where(.announcement-module-E6DqW) {
+    --z: 2;
+    --background-color: var(--color-brand-red);
+    --text-color: var(--color-white);
+    --icon-color: var(--color-white);
+    --border-color: var(--color-white);
   }
-    }
 
-  /* when fluid with a maximum layout width */
+  .announcement-module-Xi0L5:where(.announcement-module-E6DqW):has([href]):hover {
+      --background-color: var(--color-brand-dark-red);
+    }
 
-  .page-container-module-eFYSe.page-container-module-glxAS {
-    --page-container-max-layout-width: 1440px;
-  }
+:root {
+  --announcements-bottom: var(--announcements-height);
+}
 
-  /* key segments inside page-main */
+.announcement-list-module-Nn6HC {
+  position: relative;
+  z-index: var(--announcements-layer);
+}
 
-  .page-container-module-eFYSe .page-container-module-WfQXa {
-    grid-area: breadcrumbs;
-    padding-block: var(--space-24);
+.announcement-list-module-Nn6HC.announcement-list-module-icXq8 {
+    position: sticky;
+    top: 0;
   }
 
-  .page-container-module-eFYSe .page-container-module-GKN5s {
-    grid-area: title;
-    padding-block-end: var(--space-44);
+.announcement-list-module-Nn6HC .announcement-list-module-cgFNU {
+    display: flex;
+    flex-direction: column;
   }
 
-  .page-container-module-eFYSe .page-container-module-r0SOZ {
-    grid-area: content;
-    padding-block-end: var(--space-64);
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi {
+    margin-block: -1px;
   }
 
-  @media (width >= 1440px) {
-
-  .page-container-module-eFYSe .page-container-module-r0SOZ {
-      padding-block-end: var(--space-96)
-  }
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi,
+    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0 {
+      transition: all var(--transition-duration-short) linear;
     }
 
-  .page-container-module-eFYSe.page-container-module-iCrH5 {
-    flex-grow: 1; /* TODO: required for Spire, remove later */
-  }
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi,
+    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0.announcement-list-module-dUOEB {
+      z-index: -1;
+      height: 0;
+    }
 
-  .page-container-module-eFYSe.page-container-module-iCrH5 .page-container-module-r0SOZ {
-      padding-block-end: 0;
+.announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-W10mi.announcement-list-module-1Rfn0,
+    .announcement-list-module-Nn6HC .announcement-list-module-fUupi.announcement-list-module-tyqE0 {
+      height: auto;
     }
 
+.create-account-form-module-TMU8F {
+  min-inline-size: 270px;
+}
+
+.sign-in-form-module-BoJwR {
+  min-inline-size: 270px;
+}
+
+  .sign-in-form-module-BoJwR .sign-in-form-module-PQ4Ik {
+    margin-block: 0 var(--space-4);
+  }
+
 .sign-in-page-layout-module-Z1oE2 {
   --layout-width: var(--page-container-max-layout-width, 100vw);
   --padding-inline: var(--page-container-padding-inline, 10px);
@@ -7296,6 +7226,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;
@@ -7445,32 +7476,28 @@ button.swiper-pagination-bullet {
   white-space: pre;
 }
 
-.edit-address-form-module-s19Fg {
+.edit-checkout-bill-to-address-form-module-UWk3T {
   display: grid;
   gap: var(--space-16);
-  grid-template-columns: 1fr;
+  grid-template-columns: auto;
 }
 
-  .edit-address-form-module-s19Fg .edit-address-form-module-O1w3c {
+  .edit-checkout-bill-to-address-form-module-UWk3T .edit-checkout-bill-to-address-form-module-ajfl4 {
     display: grid;
   }
 
-  @media (width >= 768px) {.edit-address-form-module-s19Fg {
+  @media (width >= 576px) {.edit-checkout-bill-to-address-form-module-UWk3T {
     align-items: flex-start;
     grid-template-columns: 1fr 1fr
 }
 
-    .edit-address-form-module-s19Fg .edit-address-form-module-O1w3c {
+    .edit-checkout-bill-to-address-form-module-UWk3T .edit-checkout-bill-to-address-form-module-ajfl4 {
       display: grid;
       grid-column: span 2;
     }
   }
 
-.edit-address-form-module-lLT5t {
-  margin-block-start: var(--space-8);
-}
-
-.edit-address-form-module-2bfdq {
+.edit-checkout-bill-to-address-form-module-jumWh {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -7535,6 +7562,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%;
@@ -7588,10 +7620,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;