@7shifts/sous-chef 3.76.2 → 3.77.0-beta.0

package/dist/index.css

@@ -45,130 +45,160 @@
   --p-font-weight-bold: 600;
 }
 :root {
-  --color-white: #fff;
-  --color-white-rgb: 255, 255, 255;
-  --color-black: #000;
-  --color-black-rgb: 0, 0, 0;
-  --color-tangerine-100: #fef1ed;
-  --color-tangerine-100-rgb: 254, 241, 237;
-  --color-tangerine-200: #fdd5c8;
-  --color-tangerine-200-rgb: 253, 213, 200;
-  --color-tangerine-300: #fcab91;
-  --color-tangerine-300-rgb: 252, 171, 145;
-  --color-tangerine-400: #ff6808;
-  --color-tangerine-400-rgb: 255, 104, 8;
-  --color-tangerine-500: #cf5406;
-  --color-tangerine-500-rgb: 207, 84, 6;
-  --color-tangerine-600: #95400a;
-  --color-tangerine-600-rgb: 149, 64, 10;
-  --color-eggplant-100: #f8f3ff;
-  --color-eggplant-100-rgb: 248, 243, 255;
-  --color-eggplant-200: #ebdcff;
-  --color-eggplant-200-rgb: 235, 220, 255;
-  --color-eggplant-300: #d9bff4;
-  --color-eggplant-300-rgb: 217, 191, 244;
-  --color-eggplant-400: #c293f1;
-  --color-eggplant-400-rgb: 194, 147, 241;
-  --color-eggplant-500: #846db3;
-  --color-eggplant-500-rgb: 132, 109, 179;
-  --color-eggplant-600: #453e75;
-  --color-eggplant-600-rgb: 69, 62, 117;
-  --color-mint-100: #ecfaf8;
-  --color-mint-100-rgb: 236, 250, 248;
-  --color-mint-200: #c6f1eb;
-  --color-mint-200-rgb: 198, 241, 235;
-  --color-mint-300: #8de4d7;
-  --color-mint-300-rgb: 141, 228, 215;
-  --color-mint-400: #3abda9;
-  --color-mint-400-rgb: 58, 189, 169;
-  --color-mint-500: #35ac9a;
-  --color-mint-500-rgb: 53, 172, 154;
-  --color-mint-600: #277e71;
-  --color-mint-600-rgb: 39, 126, 113;
-  --color-radish-100: #fcf0f0;
-  --color-radish-100-rgb: 252, 240, 240;
-  --color-radish-200: #f7d1d1;
-  --color-radish-200-rgb: 247, 209, 209;
-  --color-radish-300: #f0a3a3;
-  --color-radish-300-rgb: 240, 163, 163;
-  --color-radish-400: #e76767;
-  --color-radish-400-rgb: 231, 103, 103;
-  --color-radish-500: #d33434;
-  --color-radish-500-rgb: 211, 52, 52;
-  --color-radish-600: #981b1e;
-  --color-radish-600-rgb: 152, 27, 30;
-  --color-blueberry-100: #f6fdff;
-  --color-blueberry-100-rgb: 246, 253, 255;
-  --color-blueberry-200: #ceecf5;
-  --color-blueberry-200-rgb: 206, 236, 245;
-  --color-blueberry-300: #9cd9eb;
-  --color-blueberry-300-rgb: 156, 217, 235;
-  --color-blueberry-400: #5bc0de;
-  --color-blueberry-400-rgb: 91, 192, 222;
-  --color-blueberry-500: #51acc7;
-  --color-blueberry-500-rgb: 81, 172, 199;
-  --color-blueberry-600: #367385;
-  --color-blueberry-600-rgb: 54, 115, 133;
-  --color-banana-100: #fff9ed;
-  --color-banana-100-rgb: 255, 249, 237;
-  --color-banana-200: #ffeec9;
-  --color-banana-200-rgb: 255, 238, 201;
-  --color-banana-300: #ffdd92;
-  --color-banana-300-rgb: 255, 221, 146;
-  --color-banana-400: #ffc74a;
-  --color-banana-400-rgb: 255, 199, 74;
-  --color-banana-500: #e5b242;
-  --color-banana-500-rgb: 229, 178, 66;
-  --color-banana-600: #99772c;
-  --color-banana-600-rgb: 153, 119, 44;
-  --color-grey-100: #f3f3f3;
-  --color-grey-100-rgb: 243, 243, 243;
-  --color-grey-200: #d5d5d5;
-  --color-grey-200-rgb: 213, 213, 213;
-  --color-grey-300: #949494;
-  --color-grey-300-rgb: 148, 148, 148;
-  --color-grey-400: #767676;
-  --color-grey-400-rgb: 118, 118, 118;
-  --color-grey-500: #464646;
-  --color-grey-500-rgb: 70, 70, 70;
-  --color-grey-600: #323232;
-  --color-grey-600-rgb: 50, 50, 50;
-  --color-oat-100: #f1f0ec;
-  --color-oat-100-rgb: 241, 240, 236;
-  --color-oat-200: #e2ded6;
-  --color-oat-200-rgb: 226, 222, 214;
-  --color-oat-300: #c7c0b2;
-  --color-oat-300-rgb: 199, 192, 178;
-  --color-oat-400: #6e6d6c;
-  --color-oat-400-rgb: 110, 109, 108;
-  --color-oat-500: #4c4b49;
-  --color-oat-500-rgb: 76, 75, 73;
-  --color-oat-600: #383430;
-  --color-oat-600-rgb: 56, 52, 48;
-  --color-lime-100: #efffe0;
-  --color-lime-100-rgb: 239, 255, 224;
-  --color-lime-200: #c6ff94;
-  --color-lime-200-rgb: 198, 255, 148;
-  --color-lime-300: #81ffac;
-  --color-lime-300-rgb: 129, 255, 172;
-  --color-lime-400: #00feb2;
-  --color-lime-400-rgb: 0, 254, 178;
-  --color-lime-500: #3fb994;
-  --color-lime-500-rgb: 63, 185, 148;
-  --color-lime-600: #244f47;
-  --color-lime-600-rgb: 36, 79, 71;
-  --color-blackberry-100: #ecf0ff;
-  --color-blackberry-100-rgb: 236, 240, 255;
-  --color-blackberry-200: #d6e0ff;
-  --color-blackberry-200-rgb: 214, 224, 255;
-  --color-blackberry-300: #a0bbff;
-  --color-blackberry-300-rgb: 160, 187, 255;
-  --color-blackberry-400: #4570ff;
-  --color-blackberry-400-rgb: 69, 112, 255;
-  --color-blackberry-500: #1c5cbb;
-  --color-blackberry-500-rgb: 28, 92, 187;
-  --color-blackberry-600: #193f78;
-  --color-blackberry-600-rgb: 25, 63, 120;
+  --color-surface-color-dim: #fafafa;
+  --color-surface-color: #fff;
+  --color-surface-on-color-disabled: #d5d5d5;
+  --color-surface-on-color-subtle: #767676;
+  --color-surface-on-color: #464646;
+  --color-surface-on-color-bold: #323232;
+  --color-surface-container: #fff;
+  --color-surface-container-high: #f3f3f3;
+  --color-surface-container-highest: #d5d5d5;
+  --color-surface-container-disabled: #f3f3f3;
+  --color-surface-container-disabled-variant: #d5d5d5;
+  --color-surface-on-container-disabled: #949494;
+  --color-surface-inverse: #323232;
+  --color-surface-on-inverse: #fff;
+  --color-outline: #d5d5d5;
+  --color-outline-variant: #949494;
+  --color-primary-color: #4570ff;
+  --color-primary-on-color: #fff;
+  --color-primary-color-variant: #193f78;
+  --color-primary-on-color-variant: #fff;
+  --color-primary-container: #d6e0ff;
+  --color-primary-on-container: #323232;
+  --color-primary-container-variant: #ecf0ff;
+  --color-primary-on-container-variant: #193f78;
+  --color-secondary-color: #ff6808;
+  --color-secondary-on-color: #fff;
+  --color-secondary-container: #fdd5c8;
+  --color-secondary-on-container: #323232;
+  --color-secondary-container-variant: #fef1ed;
+  --color-secondary-on-container-variant: #95400a;
+  --color-tertiary-color: #244f47;
+  --color-tertiary-on-color: #fff;
+  --color-tertiary-container: #c6ff94;
+  --color-tertiary-on-container: #323232;
+  --color-tertiary-container-variant: #00feb2;
+  --color-tertiary-on-container-variant: #323232;
+  --color-success-color: #3abda9;
+  --color-success-on-color: #fff;
+  --color-success-container: #c6f1eb;
+  --color-success-on-container: #323232;
+  --color-success-container-variant: #ecfaf8;
+  --color-danger-color: #e76767;
+  --color-danger-on-color: #fff;
+  --color-danger-container: #f7d1d1;
+  --color-danger-on-container: #323232;
+  --color-danger-container-variant: #fcf0f0;
+  --color-danger-on-container-variant: #793133;
+  --color-info-color: #5bc0de;
+  --color-info-on-color: #fff;
+  --color-info-container: #ceecf5;
+  --color-info-on-container: #323232;
+  --color-info-container-variant: #f6fdff;
+  --color-info-on-container-variant: #2c5d6b;
+  --color-upsell-color: #c293f1;
+  --color-upsell-on-color: #fff;
+  --color-upsell-color-variant: #d9bff4;
+  --color-upsell-on-color-variant: #323232;
+  --color-upsell-container: #ebdcff;
+  --color-upsell-on-container: #323232;
+  --color-upsell-container-variant: #f8f3ff;
+  --color-upsell-on-container-variant: #453e75;
+  --color-warning-color: #bf9436;
+  --color-warning-on-color: #fff;
+  --color-warning-container: #ffeec9;
+  --color-warning-on-container: #323232;
+  --color-warning-container-variant: #fff9ed;
+  --color-warning-on-container-variant: #765f2c;
+  --color-neutral-color: #6e6d6c;
+  --color-neutral-on-color: #fff;
+  --color-neutral-container: #e2ded6;
+  --color-neutral-on-container: #323232;
+  --color-neutral-container-variant: #f1f0ec;
+  --color-neutral-on-container-variant: #383430;
+}
+:root body {
+  background-color: var(--color-surface-color) !important;
+}
+
+:root.theme-dark {
+  --color-surface-color-dim: #252525;
+  --color-surface-color: #323232;
+  --color-surface-on-color-disabled: #767676;
+  --color-surface-on-color-subtle: #949494;
+  --color-surface-on-color: #f3f3f3;
+  --color-surface-on-color-bold: #fff;
+  --color-surface-container: #323232;
+  --color-surface-container-high: #464646;
+  --color-surface-container-highest: #767676;
+  --color-surface-container-disabled: #464646;
+  --color-surface-container-disabled-variant: #464646;
+  --color-surface-on-container-disabled: #949494;
+  --color-surface-inverse: #d5d5d5;
+  --color-surface-on-inverse: #323232;
+  --color-outline: #464646;
+  --color-outline-variant: #767676;
+  --color-primary-color: #4570ff;
+  --color-primary-on-color: #fff;
+  --color-primary-color-variant: #193f78;
+  --color-primary-on-color-variant: #fff;
+  --color-primary-container: #193f78;
+  --color-primary-on-container: #fff;
+  --color-primary-container-variant: #193f78;
+  --color-primary-on-container-variant: #a0bbff;
+  --color-secondary-color: #ff6808;
+  --color-secondary-on-color: #fff;
+  --color-secondary-container: #95400a;
+  --color-secondary-on-container: #fff;
+  --color-secondary-container-variant: #95400a;
+  --color-secondary-on-container-variant: #fcab91;
+  --color-tertiary-color: #244f47;
+  --color-tertiary-on-color: #fff;
+  --color-tertiary-container: #c6ff94;
+  --color-tertiary-on-container: #323232;
+  --color-tertiary-container-variant: #00feb2;
+  --color-tertiary-on-container-variant: #323232;
+  --color-success-color: #3abda9;
+  --color-success-on-color: #323232;
+  --color-success-on-container: #fff;
+  --color-success-on-container-variant: #8de4d7;
+  --color-danger-color: #e76767;
+  --color-danger-on-color: #323232;
+  --color-danger-container: #793133;
+  --color-danger-on-container: #fff;
+  --color-danger-container-variant: #793133;
+  --color-danger-on-container-variant: #f0a3a3;
+  --color-info-color: #5bc0de;
+  --color-info-on-color: #323232;
+  --color-info-container: #2c5d6b;
+  --color-info-on-container: #fff;
+  --color-info-container-variant: #2c5d6b;
+  --color-info-on-container-variant: #9cd9eb;
+  --color-upsell-color: #c293f1;
+  --color-upsell-on-color: #323232;
+  --color-upsell-color-variant: #c293f1;
+  --color-upsell-on-color-variant: #323232;
+  --color-upsell-container: #453e75;
+  --color-upsell-on-container: #fff;
+  --color-upsell-container-variant: #453e75;
+  --color-upsell-on-container-variant: #d9bff4;
+  --color-warning-color: #e5b242;
+  --color-warning-on-color: #323232;
+  --color-warning-container: #765f2c;
+  --color-warning-on-container: #fff;
+  --color-warning-container-variant: #765f2c;
+  --color-warning-on-container-variant: #ffdd92;
+  --color-neutral-color: #c7c0b2;
+  --color-neutral-on-color: #323232;
+  --color-neutral-container: #4c4b49;
+  --color-neutral-on-container: #e2ded6;
+  --color-neutral-container-variant: #383430;
+  --color-neutral-on-container-variant: #e2ded6;
+}
+:root.theme-dark body {
+  background-color: var(--color-surface-color) !important;
 }
 :root {
   --border-radius-300: 4px;
@@ -189,7 +219,7 @@ body {
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._GFHBy {
   display: flex;
@@ -243,7 +273,7 @@ body {
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._NfOw5 {
@@ -255,7 +285,7 @@ body {
   padding: 0;
   width: auto;
   float: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-height: 16px;
 }
 
@@ -293,7 +323,7 @@ Just for future references:
   padding: 0;
   width: auto;
   float: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-height: 16px;
   margin-left: 8px;
 }
@@ -303,7 +333,7 @@ Just for future references:
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   margin-left: 48px;
   display: block;
 }
@@ -323,7 +353,7 @@ Just for future references:
 ._kBjjH::before {
   content: "";
   display: block;
-  background: var(--color-grey-200);
+  background: var(--color-surface-container-highest);
   transition: all ease-in-out 150ms;
   box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
   border-radius: 26px;
@@ -338,8 +368,8 @@ Just for future references:
   left: 2px;
   right: 21px;
   top: 2px;
-  background: var(--color-white);
-  border: 1px solid var(--color-grey-200);
+  background: var(--color-surface-container);
+  border: 1px solid var(--color-surface-container-highest);
   border-radius: 24px;
   height: 14px;
   width: 14px;
@@ -349,7 +379,7 @@ Just for future references:
 
 /* special states */
 ._QDQZ1 [type=checkbox]:focus-visible + ._kBjjH {
-  outline: var(--color-blackberry-400) solid 1px;
+  outline: var(--color-primary-color) solid 1px;
 }
 
 ._QDQZ1 [type=checkbox]:disabled + ._kBjjH {
@@ -363,11 +393,11 @@ Just for future references:
 
 /* checked states */
 ._QDQZ1 [type=checkbox]:checked + ._kBjjH::before {
-  background: var(--color-mint-400);
+  background: var(--color-success-color);
 }
 
 ._QDQZ1 [type=checkbox]:checked + ._kBjjH::after {
-  border-color: var(--color-mint-400);
+  border-color: var(--color-success-color);
   left: 21px;
   right: 2px;
 }
@@ -392,21 +422,21 @@ Just for future references:
 ._KSRP9 {
   stroke-dasharray: 187;
   stroke-dashoffset: 0;
-  stroke: var(--color-tangerine-400);
+  stroke: var(--color-secondary-color);
   transform-origin: center;
   animation: _RyBY2 1.4s ease-in-out infinite;
 }
 
 ._-sIZJ {
-  stroke: var(--color-mint-400);
+  stroke: var(--color-success-color);
 }
 
 ._3fox0 {
-  stroke: var(--color-grey-300);
+  stroke: var(--color-surface-on-color-disabled);
 }
 
 ._VteKz {
-  stroke: var(--color-white);
+  stroke: var(--color-surface-on-inverse);
 }
 
 ._7rzsv {
@@ -451,12 +481,12 @@ Just for future references:
   opacity: 1;
 }
 ._UUdng {
-  background: var(--color-grey-600);
-  color: var(--color-white);
+  background: var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
 }
 ._brSNX {
-  background: var(--color-white);
-  color: var(--color-grey-500);
+  background: var(--color-surface-container);
+  color: var(--color-surface-on-color);
 }
 ._uP8x7 {
   font-family: var(--font-family-body);
@@ -487,12 +517,12 @@ Just for future references:
   opacity: 1;
 }
 ._FXaBf {
-  border-top-color: var(--color-grey-600);
-  color: var(--color-white);
+  border-top-color: var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
 }
 ._FyPu8 {
-  border-top-color: var(--color-white);
-  color: var(--color-grey-500);
+  border-top-color: var(--color-surface-container);
+  color: var(--color-surface-on-color);
 }
 ._pgOR3 {
   font-family: var(--font-family-body);
@@ -533,7 +563,7 @@ Just for future references:
   height: 16px;
 }
 ._pgOR3:focus {
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
   text-decoration: none;
 }
@@ -572,162 +602,141 @@ Just for future references:
 }
 
 ._ICNz7 {
-  background: var(--color-white);
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-600);
+  background: var(--color-surface-container);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-color-bold);
 }
 ._ICNz7:hover {
-  background: var(--color-grey-100);
-  border-color: var(--color-grey-300);
-  color: var(--color-grey-600);
+  border-color: var(--color-outline-variant);
+  background: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
+  color: var(--color-surface-on-color-bold);
 }
 ._ICNz7:disabled {
-  background: var(--color-white);
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 ._ICNz7[aria-disabled=true] {
-  background: var(--color-white);
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._XwJWT {
-  background: var(--color-blackberry-600);
-  border-color: var(--color-blackberry-600);
-  color: var(--color-white);
+  background: var(--color-primary-color-variant);
+  border-color: var(--color-primary-color-variant);
+  color: var(--color-primary-on-color-variant);
 }
 ._XwJWT:hover {
-  background: #20519a;
-  border-color: var(--color-blackberry-600);
-  color: var(--color-white);
+  border-color: color-mix(in srgb, var(--color-primary-color-variant) 100%, var(--color-surface-inverse) 5%);
+  background: color-mix(in srgb, var(--color-primary-color-variant) 100%, var(--color-surface-inverse) 5%);
+  color: var(--color-primary-on-color-variant);
 }
 ._XwJWT:disabled {
-  background: var(--color-grey-200);
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 ._XwJWT[aria-disabled=true] {
-  background: var(--color-grey-200);
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._gr3Dh {
-  background: var(--color-radish-400);
-  border-color: var(--color-radish-400);
-  color: var(--color-white);
+  background: var(--color-danger-color);
+  border-color: var(--color-danger-color);
+  color: var(--color-danger-on-color);
 }
 ._gr3Dh:hover {
-  background: var(--color-radish-500);
-  border-color: var(--color-radish-500);
-  color: var(--color-white);
+  border-color: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-inverse) 5%);
+  background: color-mix(in srgb, var(--color-danger-color) 100%, var(--color-surface-inverse) 5%);
+  color: var(--color-danger-on-color);
 }
 ._gr3Dh:disabled {
-  background: var(--color-radish-300);
-  border-color: var(--color-radish-300);
-  color: var(--color-white);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 ._gr3Dh[aria-disabled=true] {
-  background: var(--color-radish-300);
-  border-color: var(--color-radish-300);
-  color: var(--color-white);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._ME8te {
-  background: var(--color-eggplant-300);
-  border-color: var(--color-eggplant-300);
-  color: var(--color-grey-600);
+  background: var(--color-upsell-color-variant);
+  border-color: var(--color-upsell-color-variant);
+  color: var(--color-upsell-on-color-variant);
 }
 ._ME8te:hover {
-  background: #cfaef1;
-  border-color: #cfaef1;
-  color: var(--color-grey-600);
+  border-color: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-inverse) 5%);
+  background: color-mix(in srgb, var(--color-upsell-color-variant) 100%, var(--color-surface-inverse) 5%);
+  color: var(--color-upsell-on-color-variant);
 }
 ._ME8te:disabled {
-  background: var(--color-grey-200);
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 ._ME8te[aria-disabled=true] {
-  background: var(--color-grey-200);
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
-}
-
-._mI-Dx {
-  background: var(--color-tangerine-400);
-  border-color: var(--color-tangerine-400);
-  color: var(--color-white);
-}
-._mI-Dx:hover {
-  background: var(--color-tangerine-500);
-  border-color: var(--color-tangerine-500);
-  color: var(--color-white);
-}
-._mI-Dx:disabled {
-  background: var(--color-tangerine-300);
-  border-color: var(--color-tangerine-300);
-  color: var(--color-white);
-}
-._mI-Dx[aria-disabled=true] {
-  background: var(--color-tangerine-300);
-  border-color: var(--color-tangerine-300);
-  color: var(--color-white);
+  background: var(--color-surface-container-disabled-variant);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._orywo {
   background: transparent;
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-600);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-color-bold);
 }
 ._orywo:hover {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: var(--color-grey-300);
-  color: var(--color-grey-600);
+  border-color: var(--color-outline-variant);
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-surface-on-color-bold);
 }
 ._orywo:disabled {
   background: transparent;
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 ._orywo[aria-disabled=true] {
   background: transparent;
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-300);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._obtsl {
   background: transparent;
-  border-color: var(--color-white);
-  color: var(--color-white);
+  border-color: var(--color-surface-on-inverse);
+  color: var(--color-surface-on-inverse);
 }
 ._obtsl:hover {
-  background: rgba(var(--color-white-rgb), 0.05);
-  border-color: var(--color-white);
-  color: var(--color-white);
+  border-color: var(--color-surface-on-inverse);
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-surface-on-inverse);
 }
 ._obtsl:disabled {
   background: transparent;
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-200);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-color-disabled);
 }
 ._obtsl[aria-disabled=true] {
   background: transparent;
-  border-color: var(--color-grey-200);
-  color: var(--color-grey-200);
+  border-color: var(--color-outline);
+  color: var(--color-surface-on-color-disabled);
 }
 
 ._00jK4 {
   background: transparent;
   border-color: transparent;
-  color: var(--color-white);
+  color: var(--color-surface-on-inverse);
   text-decoration: underline;
 }
 ._00jK4:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.1);
-  color: var(--color-white);
+  border-color: transparent;
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-surface-on-inverse);
   text-decoration: underline;
 }
 ._00jK4:focus {
@@ -736,24 +745,24 @@ Just for future references:
 ._00jK4:disabled {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-color-disabled);
 }
 ._00jK4[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-color-disabled);
 }
 
 ._JPwJ7 {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-600);
+  color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
 ._JPwJ7:hover {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: var(--color-grey-100);
-  color: var(--color-grey-600);
+  border-color: transparent;
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
 ._JPwJ7:focus {
@@ -762,24 +771,24 @@ Just for future references:
 ._JPwJ7:disabled {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 ._JPwJ7[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._9TprN {
   background: transparent;
   border-color: transparent;
-  color: var(--color-radish-400);
+  color: var(--color-danger-color);
   text-decoration: underline;
 }
 ._9TprN:hover {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: var(--color-grey-100);
-  color: var(--color-radish-500);
+  border-color: transparent;
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-danger-color);
   text-decoration: underline;
 }
 ._9TprN:focus {
@@ -788,24 +797,24 @@ Just for future references:
 ._9TprN:disabled {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 ._9TprN[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._tktX- {
   background: transparent;
   border-color: transparent;
-  color: var(--color-eggplant-500);
+  color: var(--color-upsell-color);
   text-decoration: underline;
 }
 ._tktX-:hover {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: var(--color-grey-100);
-  color: var(--color-eggplant-500);
+  border-color: transparent;
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-upsell-color);
   text-decoration: underline;
 }
 ._tktX-:focus {
@@ -814,24 +823,24 @@ Just for future references:
 ._tktX-:disabled {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 ._tktX-[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._r3SQl {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
 ._r3SQl:hover {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: var(--color-grey-100);
-  color: var(--color-grey-500);
+  border-color: transparent;
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-surface-on-color-bold);
   text-decoration: underline;
 }
 ._r3SQl:focus {
@@ -840,24 +849,24 @@ Just for future references:
 ._r3SQl:disabled {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 ._r3SQl[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._oFBLN {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-subtle);
   text-decoration: underline;
 }
 ._oFBLN:hover {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: var(--color-grey-100);
-  color: var(--color-grey-400);
+  border-color: transparent;
+  background: rgb(from var(--color-surface-inverse) r g b/0.05);
+  color: var(--color-surface-on-color-subtle);
   text-decoration: underline;
 }
 ._oFBLN:focus {
@@ -866,19 +875,19 @@ Just for future references:
 ._oFBLN:disabled {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 ._oFBLN[aria-disabled=true] {
   background: transparent;
   border-color: transparent;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._yTBTz {
   display: inline-block;
 }
 ._S1co- button:disabled {
-  border-color: var(--color-grey-200);
+  border-color: var(--color-outline);
 }
 ._S1co- > *:last-child {
   margin-left: -1px;
@@ -901,15 +910,15 @@ Just for future references:
   text-align: center;
   box-sizing: border-box;
   font-weight: bold;
-  color: var(--color-white);
-  background: var(--color-grey-500);
+  color: var(--color-surface-on-color);
+  background: var(--color-surface-container-high);
   border-radius: 2px;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
 }
 ._8zg4j {
-  color: var(--color-grey-600);
-  background: var(--color-grey-200);
-  border: 1px solid var(--color-grey-200);
+  color: var(--color-surface-on-color);
+  background: var(--color-surface-container-high);
+  border: 1px solid var(--color-outline);
 }
 ._GAIig {
   font-family: var(--font-family-body);
@@ -926,7 +935,7 @@ Just for future references:
   top: 1px;
 }
 ._EiQ4c {
-  color: var(--color-grey-600);
+  color: var(--color-surface-on-color);
   text-decoration: underline;
 }
 ._iSC5P._iSC5P {
@@ -934,13 +943,13 @@ Just for future references:
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  background: var(--color-grey-500);
-  color: var(--color-white);
+  background: var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
   border-radius: var(--border-radius-400);
   min-height: auto;
 }
 ._iSC5P._OWpOG {
-  background-color: var(--color-radish-400);
+  background-color: var(--color-danger-color);
 }
 
 ._4JJwF {
@@ -963,7 +972,7 @@ Just for future references:
   font-weight: var(--p-font-weight-bold);
   padding: 0 16px 8px 16px;
   background-color: unset;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   border: 0;
 }
 ._oKH7a {
@@ -1005,7 +1014,7 @@ Just for future references:
 }
 ._xI2-r > table > thead, ._xI2-r > table > tfoot {
   position: sticky;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
   z-index: var(--z-index-base);
 }
 ._xI2-r > table > thead {
@@ -1038,7 +1047,7 @@ Just for future references:
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   border-radius: var(--border-radius-600);
 }
 ._1SNLz tr:first-of-type > td:first-of-type {
@@ -1067,13 +1076,13 @@ Just for future references:
   font-weight: var(--p-font-weight-bold);
 }
 ._mp1Ok tr td {
-  background: var(--color-grey-100);
+  background: var(--color-surface-container-high);
 }
 ._mp1Ok tr td:first-of-type {
-  border-left: 1px solid var(--color-grey-200);
+  border-left: 1px solid var(--color-outline);
 }
 ._mp1Ok tr td:last-of-type {
-  border-right: 1px solid var(--color-grey-200);
+  border-right: 1px solid var(--color-outline);
 }
 ._mp1Ok tr:first-of-type td {
   border-top: 0;
@@ -1090,7 +1099,7 @@ Just for future references:
 ._wZ8Xg {
   width: 100%;
   height: 20px;
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   box-sizing: border-box;
   position: absolute;
   z-index: var(--z-index-base);
@@ -1173,11 +1182,10 @@ Just for future references:
 }
 ._omAUf {
   padding: 16px 12px 16px 12px;
-  background: var(--color-grey-100);
   margin: 1px;
   position: relative;
   border-radius: var(--border-radius-600);
-  box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
+  border: 1px solid var(--color-outline);
 }
 
 ._8xIYW {
@@ -1186,7 +1194,7 @@ Just for future references:
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   font-weight: var(--p-font-weight-bold);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
 }
 
 ._oA2J6 {
@@ -1195,15 +1203,14 @@ Just for future references:
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   flex-grow: 1;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._oA2J6 a {
   text-decoration: underline;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._oA2J6 a:hover {
   cursor: pointer;
-  color: var(--color-grey-600);
 }
 
 ._PLG8Z {
@@ -1211,11 +1218,10 @@ Just for future references:
 }
 
 ._CRmFE {
-  background: rgb(var(--color-blueberry-100-rgb));
-  box-shadow: 0 0 0 1px rgba(var(--color-blueberry-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-blueberry-500-rgb), 0.25);
+  background: var(--color-info-container-variant);
 }
 ._CRmFE ._T80if {
-  color: rgb(var(--color-blueberry-500-rgb));
+  color: rgb(var(--color-info-on-container-variant));
   padding-top: 10px;
 }
 ._CRmFE ._uJl2Y {
@@ -1223,11 +1229,10 @@ Just for future references:
 }
 
 ._PgpTw {
-  background: rgb(var(--color-mint-100-rgb));
-  box-shadow: 0 0 0 1px rgba(var(--color-mint-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-mint-500-rgb), 0.25);
+  background: var(--color-success-container-variant);
 }
 ._PgpTw ._T80if {
-  color: rgb(var(--color-mint-500-rgb));
+  color: rgb(var(--color-success-on-container-variant));
   padding-top: 10px;
 }
 ._PgpTw ._uJl2Y {
@@ -1235,11 +1240,10 @@ Just for future references:
 }
 
 ._O-lNW {
-  background: rgb(var(--color-radish-100-rgb));
-  box-shadow: 0 0 0 1px rgba(var(--color-radish-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-radish-500-rgb), 0.25);
+  background: var(--color-danger-container-variant);
 }
 ._O-lNW ._T80if {
-  color: rgb(var(--color-radish-500-rgb));
+  color: rgb(var(--color-danger-on-container-variant));
   padding-top: 10px;
 }
 ._O-lNW ._uJl2Y {
@@ -1247,11 +1251,10 @@ Just for future references:
 }
 
 ._fICdJ {
-  background: rgb(var(--color-banana-100-rgb));
-  box-shadow: 0 0 0 1px rgba(var(--color-banana-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-banana-500-rgb), 0.25);
+  background: var(--color-warning-container-variant);
 }
 ._fICdJ ._T80if {
-  color: rgb(var(--color-banana-500-rgb));
+  color: rgb(var(--color-warning-on-container-variant));
   padding-top: 10px;
 }
 ._fICdJ ._uJl2Y {
@@ -1259,11 +1262,10 @@ Just for future references:
 }
 
 ._kUB2k {
-  background: rgb(var(--color-eggplant-100-rgb));
-  box-shadow: 0 0 0 1px rgba(var(--color-eggplant-500-rgb), 0.15), 0 1px 3px 0 rgba(var(--color-eggplant-500-rgb), 0.25);
+  background: var(--color-upsell-container-variant);
 }
 ._kUB2k ._T80if {
-  color: rgb(var(--color-eggplant-500-rgb));
+  color: rgb(var(--color-upsell-on-container-variant));
   padding-top: 10px;
 }
 ._kUB2k ._uJl2Y {
@@ -1295,13 +1297,13 @@ Just for future references:
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._sp-pT {
   position: absolute;
   list-style: none;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  background: var(--color-white);
+  box-shadow: 0 0 12px -3px var(--color-outline-variant);
+  background: var(--color-surface-container);
   margin-top: 8px;
   transform-origin: top right;
   min-width: 120px;
@@ -1319,7 +1321,7 @@ Just for future references:
   text-decoration: none;
 }
 ._AktVc:focus > * {
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
 }
 ._zv4ua {
   font-family: var(--font-family-body);
@@ -1330,7 +1332,7 @@ Just for future references:
   padding: 0;
   width: auto;
   float: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-height: 16px;
 }
 
@@ -1344,21 +1346,21 @@ Just for future references:
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._eS4YO {
   font-family: var(--font-family-body);
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-radish-400);
+  color: var(--color-danger-color);
 }
 h1._6SgoN {
   font-family: var(--font-family-heading);
   font-size: var(--font-size-600);
   line-height: var(--font-line-height-600);
   font-weight: var(--p-font-weight-semibold);
-  color: var(--color-grey-600);
+  color: var(--color-surface-on-color-bold);
 }
 
 h2._6SgoN {
@@ -1366,7 +1368,7 @@ h2._6SgoN {
   font-size: var(--font-size-500);
   line-height: var(--font-line-height-500);
   font-weight: var(--p-font-weight-semibold);
-  color: var(--color-grey-600);
+  color: var(--color-surface-on-color-bold);
 }
 
 h3._6SgoN {
@@ -1374,7 +1376,7 @@ h3._6SgoN {
   font-size: var(--font-size-400);
   line-height: var(--font-line-height-400);
   font-weight: var(--p-font-weight-semibold);
-  color: var(--color-grey-600);
+  color: var(--color-surface-on-color-bold);
 }
 
 h4._6SgoN {
@@ -1392,7 +1394,7 @@ h5._6SgoN {
 }
 
 ._6SgoN {
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   margin: 0;
 }
 ._SF95f {
@@ -1421,7 +1423,7 @@ h5._6SgoN {
 }
 ._i2LHD {
   font-weight: var(--p-font-weight-bold);
-  color: var(--color-grey-600);
+  color: var(--color-surface-on-color-bold);
 }
 ._NgSTT {
   font-style: italic;
@@ -1459,32 +1461,33 @@ h5._6SgoN {
   line-height: 22px;
   padding: 7px;
   border-radius: var(--border-radius-400);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   box-shadow: none;
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   margin: 0;
   flex: 1;
   min-width: 90px;
+  background-color: var(--color-surface-container);
 }
 ._G6LsE:focus {
-  border: 1px solid var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border: 1px solid var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._G6LsE:disabled {
-  background-color: var(--color-grey-100);
-  color: var(--color-grey-400);
+  background-color: var(--color-surface-container-disabled);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._2ZYtt {
-  border-color: var(--color-radish-400) !important;
+  border-color: var(--color-danger-color) !important;
 }
 
 ._rWp7H {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._Xq8xX {
@@ -1513,7 +1516,7 @@ h5._6SgoN {
   font-weight: var(--p-font-weight-normal);
   position: absolute;
   padding: 8px;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   min-width: 8px;
   pointer-events: none;
   box-sizing: content-box;
@@ -1528,7 +1531,7 @@ h5._6SgoN {
 }
 ._yPPIy svg,
 ._yPPIy path {
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-subtle);
 }
 
 ._Y3yFd {
@@ -1538,7 +1541,7 @@ h5._6SgoN {
   font-weight: var(--p-font-weight-normal);
   position: absolute;
   padding: 8px;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   min-width: 8px;
   pointer-events: none;
   box-sizing: content-box;
@@ -1553,7 +1556,7 @@ h5._6SgoN {
 }
 ._Y3yFd svg,
 ._Y3yFd path {
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-subtle);
 }
 ._91hvH {
   list-style: none;
@@ -1561,48 +1564,68 @@ h5._6SgoN {
   padding: 0;
 }
 ._aMs9c {
-  background-color: var(--color-grey-100);
+  background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
 }
 ._ISJ4M {
   width: 100%;
   height: 1px;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-outline);
   margin: 4px 0;
 }
 ._W12mF {
   cursor: pointer;
 }
 ._Zu9cD {
-  background-color: var(--color-blackberry-100);
+  background-color: var(--color-primary-container-variant);
 }
 ._Zu9cD ._xS6fS {
-  color: var(--color-blackberry-500);
+  color: var(--color-primary-on-container-variant);
+}
+._Zu9cD ._7EI7m {
+  color: var(--color-primary-on-container-variant);
 }
 ._0OB5b {
   cursor: auto;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-disabled);
 }
 ._0OB5b ._xS6fS {
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-disabled);
+}
+._0OB5b ._7EI7m {
+  color: var(--color-surface-on-color-disabled);
+}
+._0OB5b ._dpo67 {
+  color: var(--color-surface-on-color-disabled);
+}
+._0OB5b ._ObP6B {
+  color: var(--color-surface-on-color-disabled);
 }
 ._IBrNj {
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color);
   padding: 12px;
   display: flex;
   white-space: nowrap;
   gap: 8px;
   align-items: center;
 }
+._7EI7m {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-100);
+  line-height: var(--font-line-height-100);
+  font-weight: var(--p-font-weight-normal);
+  color: var(--color-surface-on-color);
+  text-wrap: wrap;
+}
 ._xS6fS {
   flex: 1;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._vC0uY {
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   text-decoration: none;
   display: block;
   width: 100%;
@@ -1620,13 +1643,13 @@ h5._6SgoN {
 }
 ._C3waP {
   box-sizing: border-box;
-  background: white;
-  border: 1px solid var(--color-grey-200);
+  background: var(--color-surface-color);
+  border: 1px solid var(--color-outline);
   border-radius: 20px;
   width: 100%;
   height: 100%;
   padding: 24px 20px;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._uc-GV {
   cursor: pointer;
@@ -1636,21 +1659,20 @@ h5._6SgoN {
   text-align: inherit;
 }
 ._uc-GV:not(._ft0I1):hover {
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.2);
-  background-color: var(--color-grey-100);
+  background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
 }
 ._uc-GV:focus {
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._wx2MU {
-  border-color: var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border-color: var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
 }
 ._TQDZH {
-  background: var(--color-grey-100);
+  background: var(--color-surface-container-disabled);
   box-shadow: none;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
   pointer-events: none;
 }
 ._kkYit {
@@ -1695,18 +1717,18 @@ h5._6SgoN {
   gap: 8px;
   border-radius: var(--border-radius-400);
   text-decoration: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   padding: 8px;
   align-items: center;
   border: 1px solid transparent;
 }
 ._fo7-A:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-  border-color: var(--color-grey-100);
+  background: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
+  border-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
   text-decoration: none;
 }
 ._fo7-A:focus {
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
   text-decoration: none;
 }
@@ -1746,7 +1768,7 @@ h5._6SgoN {
   list-style: none;
   padding: 0;
   padding-right: 32px;
-  border-right: 1px solid var(--color-grey-200);
+  border-right: 1px solid var(--color-outline);
   display: inline-block;
   width: 100%;
   box-sizing: border-box;
@@ -1775,7 +1797,7 @@ h5._6SgoN {
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   text-decoration: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   padding: 12px 20px;
   display: flex;
   align-items: center;
@@ -1788,9 +1810,9 @@ h5._6SgoN {
   word-break: break-all;
 }
 ._SebbU a:hover {
-  background: var(--color-oat-100);
-  color: var(--color-grey-600);
-  border-left: 2px solid var(--color-grey-200);
+  background: var(--color-surface-container-high);
+  color: var(--color-surface-on-color-bold);
+  border-left: 2px solid var(--color-outline);
 }
 ._SebbU a._CDEVl {
   font-family: var(--font-family-body);
@@ -1798,9 +1820,9 @@ h5._6SgoN {
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   font-weight: var(--p-font-weight-bold);
-  background: var(--color-oat-100);
-  color: var(--color-grey-600);
-  border-left: 2px solid var(--color-grey-200);
+  background: var(--color-surface-container-high);
+  color: var(--color-surface-on-color-bold);
+  border-left: 2px solid var(--color-outline);
   cursor: default;
 }
 ._VudDE a {
@@ -1816,32 +1838,32 @@ h5._6SgoN {
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
   display: inline-flex;
-  background-color: var(--color-tangerine-400);
+  background-color: var(--color-secondary-color);
   height: 20px;
   min-width: 20px;
-  color: var(--color-white);
+  color: var(--color-secondary-on-color);
   text-align: center;
   border-radius: 20px;
   box-sizing: border-box;
   padding: 0 6px;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--color-white);
+  border: 1px solid var(--color-secondary-on-color);
 }
 ._RXV4h svg {
-  fill: var(--color-white);
+  fill: var(--color-secondary-on-color);
 }
 ._2An1I {
-  background-color: var(--color-banana-400);
+  background-color: var(--color-warning-color);
 }
 ._-Bw8L {
-  background-color: var(--color-radish-400);
+  background-color: var(--color-danger-color);
 }
 ._RxlMz {
-  background-color: var(--color-mint-400);
+  background-color: var(--color-success-color);
 }
 ._dzCH- {
-  background-color: var(--color-blueberry-400);
+  background-color: var(--color-info-color);
 }
 ._Ix9tP {
   font-variant-numeric: tabular-nums;
@@ -1853,7 +1875,7 @@ h5._6SgoN {
   bottom: 0px;
   left: 0px;
   right: 0px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgb(from var(--color-surface-inverse) r g b/0.65);
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -1883,8 +1905,8 @@ h5._6SgoN {
 
 ._ntozd {
   position: relative;
-  border: 1px solid var(--color-grey-200);
-  background: var(--color-white);
+  border: 1px solid var(--color-outline);
+  background: var(--color-surface-color);
   overflow: auto;
   outline: none;
   padding: 32px 24px;
@@ -1910,7 +1932,7 @@ h5._6SgoN {
   font-size: var(--font-size-500);
   line-height: var(--font-line-height-500);
   font-weight: var(--p-font-weight-semibold);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   padding: 0;
 }
 ._b1dgU {
@@ -1926,7 +1948,7 @@ h5._6SgoN {
   font-size: var(--font-size-400);
   line-height: var(--font-line-height-400);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color);
 }
 /**
  * This is for adding a shadow when the body is scrollable.
@@ -1944,7 +1966,7 @@ h5._6SgoN {
 }
 ._wo1vv {
   z-index: var(--z-index-base);
-  background: #fff no-repeat;
+  background: var(--color-surface-color) no-repeat;
   background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
   background-position: 0 0, 0 100%;
   background-size: 100% 14px;
@@ -1956,11 +1978,11 @@ h5._6SgoN {
   display: block;
   height: 30px;
   margin: 0 0 -30px;
-  background: linear-gradient(to bottom, #fff, #fff 30%, rgba(255, 255, 255, 0));
+  background: linear-gradient(to bottom, var(--color-surface-color), var(--color-surface-color) 30%, rgba(255, 255, 255, 0));
 }
 ._wo1vv::after {
   margin: -30px 0 0;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%, #fff);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-surface-color) 70%, var(--color-surface-color));
 }
 ._9u6xC {
   padding-bottom: 8px;
@@ -1979,10 +2001,14 @@ h5._6SgoN {
 ._et9Fs {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-blackberry-200);
-  --rdp-background-color: var(--color-grey-100);
-  --rdp-accent-color-dark: var(--color-blackberry-400);
-  --rdp-background-color-dark: var(--color-grey-500);
+  --rdp-accent-color: var(--color-primary-container);
+  --rdp-background-color: color-mix(
+      in srgb,
+      var(--color-surface-color) 100%,
+      var(--color-surface-inverse) 5%
+  );
+  --rdp-accent-color-dark: var(--color-primary-color);
+  --rdp-background-color-dark: var(--color-surface-on-color);
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
   margin: 1em;
@@ -1993,7 +2019,7 @@ h5._6SgoN {
   max-width: calc(var(--rdp-cell-size) * 7);
   border-collapse: collapse;
   border: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._XGu8K {
@@ -2002,7 +2028,7 @@ h5._6SgoN {
   justify-content: space-between;
   padding: 0;
   text-align: left;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._e0MoB {
@@ -2015,18 +2041,18 @@ h5._6SgoN {
   height: 100%;
   height: var(--rdp-cell-size);
   padding: 0;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-subtle);
   background: none;
   border: none;
 }
 
 ._X7MoW:not(._AeJUw) {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
   font-weight: 700;
 }
 
 ._AeJUw._AeJUw {
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-color-subtle);
 }
 
 ._2-bPm {
@@ -2037,31 +2063,35 @@ h5._6SgoN {
   height: var(--rdp-cell-size);
   padding: 0.25em;
   border-radius: 100%;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-disabled);
 }
 
 ._eK8pw._eK8pw._eK8pw._eK8pw:not(:disabled) {
-  background-color: var(--color-blackberry-200);
-  color: var(--color-blackberry-400);
+  background-color: var(--color-primary-container);
+  color: var(--color-primary-color);
   opacity: 1;
 }
 ._eK8pw._eK8pw._eK8pw._eK8pw:not(:disabled):hover {
-  background-color: var(--color-blackberry-400);
-  color: var(--color-white);
+  background-color: var(--color-primary-color);
+  color: var(--color-primary-on-color);
 }
 
 ._eK8pw[disabled] {
-  background-color: var(--color-blackberry-200);
-  color: var(--color-grey-400);
+  background-color: var(--color-primary-container);
+  color: var(--color-surface-on-container-disabled);
   opacity: 1;
 }
 ._QLSA6 {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-blackberry-200);
-  --rdp-background-color: var(--color-grey-100);
-  --rdp-accent-color-dark: var(--color-blackberry-400);
-  --rdp-background-color-dark: var(--color-grey-500);
+  --rdp-accent-color: var(--color-primary-container);
+  --rdp-background-color: color-mix(
+      in srgb,
+      var(--color-surface-color) 100%,
+      var(--color-surface-inverse) 5%
+  );
+  --rdp-accent-color-dark: var(--color-primary-color);
+  --rdp-background-color-dark: var(--color-surface-on-color);
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
   margin: 1em;
@@ -2072,7 +2102,7 @@ h5._6SgoN {
   max-width: calc(var(--rdp-cell-size) * 7);
   border-collapse: collapse;
   border: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._4ySMr {
@@ -2081,7 +2111,7 @@ h5._6SgoN {
   justify-content: space-between;
   padding: 0;
   text-align: left;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._2AoB4 {
@@ -2094,18 +2124,18 @@ h5._6SgoN {
   height: 100%;
   height: var(--rdp-cell-size);
   padding: 0;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-subtle);
   background: none;
   border: none;
 }
 
 ._Snv-V:not(._Zf-6C) {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
   font-weight: 700;
 }
 
 ._Zf-6C._Zf-6C {
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-color-subtle);
 }
 
 ._iOY4h {
@@ -2116,45 +2146,45 @@ h5._6SgoN {
   height: var(--rdp-cell-size);
   padding: 0.25em;
   border-radius: 100%;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-disabled);
 }
 
 ._e0lOH._e0lOH {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
   border-radius: 0;
 }
 ._e0lOH._e0lOH:hover {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
 }
 ._e0lOH._e0lOH:disabled {
-  background-color: var(--color-blackberry-100);
-  color: var(--color-grey-200);
+  background-color: var(--color-primary-container-variant);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._4N7l-._4N7l- {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
 }
 ._4N7l-._4N7l-:hover {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
 }
 ._4N7l-._4N7l-:disabled {
-  background-color: var(--color-blackberry-100);
-  color: var(--color-white);
+  background-color: var(--color-primary-container-variant);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._fMjHG._fMjHG {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
 }
 ._fMjHG._fMjHG:hover {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
 }
 ._fMjHG._fMjHG:disabled {
-  background-color: var(--color-blackberry-100);
-  color: var(--color-grey-200);
+  background-color: var(--color-primary-container-variant);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._GqE-5 {
@@ -2185,8 +2215,8 @@ h5._6SgoN {
   position: absolute;
   left: 0;
   z-index: var(--z-index-base);
-  background: var(--color-white);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  background: var(--color-surface-container);
+  box-shadow: 0 0 12px -3px var(--color-outline-variant);
 }
 ._Id4qm {
   position: relative;
@@ -2211,8 +2241,8 @@ h5._6SgoN {
   width: 14px;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid var(--color-grey-200);
-  box-shadow: inset 0 1px 4px -2px var(--color-grey-200);
+  border: 1px solid var(--color-outline);
+  box-shadow: inset 0 1px 4px -2px var(--color-outline);
 }
 ._kmvBP::after {
   position: absolute;
@@ -2220,11 +2250,11 @@ h5._6SgoN {
   opacity: 0;
 }
 input:checked ~ ._kmvBP {
-  background-color: #4d89f5;
+  background-color: var(--color-primary-color);
   border-radius: 4px;
   transform: rotate(0deg) scale(1);
   opacity: 1;
-  border: 1px solid #8cb5f4;
+  border: 1px solid var(--color-primary-color);
 }
 input:checked ~ ._kmvBP::after {
   opacity: 1;
@@ -2233,17 +2263,17 @@ input:checked ~ ._kmvBP::after {
   top: 1px;
   width: 4px;
   height: 8px;
-  border: solid var(--color-white);
+  border: solid var(--color-primary-on-color);
   border-width: 0 2px 2px 0;
   background-color: transparent;
   border-radius: 0;
 }
 input:focus-visible + ._kmvBP {
-  outline: var(--color-blackberry-400) solid 1px;
+  outline: var(--color-primary-color) solid 1px;
 }
 input:disabled + ._kmvBP {
-  background-color: var(--color-grey-100);
-  border: 1px solid var(--color-grey-200);
+  background-color: var(--color-surface-container-disabled);
+  border: 1px solid var(--color-outline);
 }
 input:disabled + ._kmvBP::after {
   box-shadow: none;
@@ -2251,10 +2281,10 @@ input:disabled + ._kmvBP::after {
   border-width: 0 2px 2px 0 !important;
 }
 ._NwD6V {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--color-grey-200);
+  box-shadow: 0 0 12px -3px var(--color-outline-variant);
+  border: 1px solid var(--color-outline);
   border-radius: 8px;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
   max-width: 446px;
   min-width: 390px;
   overflow: hidden;
@@ -2292,18 +2322,18 @@ input:disabled + ._kmvBP::after {
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-white);
+  color: var(--color-surface-on-inverse);
   padding: 16px;
   text-align: center;
 }
 ._zt-xK {
-  background-color: var(--color-blueberry-400);
+  background-color: var(--color-info-color);
 }
 ._rmUys {
-  background-color: var(--color-radish-400);
+  background-color: var(--color-danger-color);
 }
 ._UGrRR {
-  background-color: var(--color-eggplant-400);
+  background-color: var(--color-upsell-color);
 }
 ._UI0Fo {
   position: relative;
@@ -2321,24 +2351,24 @@ input:disabled + ._kmvBP::after {
   text-align: center;
   position: absolute;
   transform: translate(-50%, -50%);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._alBLB {
-  stroke: var(--color-grey-100);
+  stroke: var(--color-surface-container-high);
   fill: transparent;
 }
 ._VADa6 {
-  stroke: var(--color-mint-400);
+  stroke: var(--color-success-color);
   fill: transparent;
 }
 ._fWvQF {
-  background-color: var(--color-grey-100);
+  background-color: var(--color-surface-container-high);
   height: 12px;
   width: 100%;
   border-radius: 8px;
 }
 ._vd0xc {
-  background-color: var(--color-tangerine-400);
+  background-color: var(--color-secondary-color);
   height: 100%;
   border-radius: 8px;
 }
@@ -2347,7 +2377,7 @@ input:disabled + ._kmvBP::after {
   justify-content: space-around;
 }
 ._oDnLM {
-  background: var(--color-grey-100);
+  background: var(--color-surface-container-high);
   width: 100%;
   height: 13px;
   border-radius: 8px;
@@ -2365,7 +2395,7 @@ input:disabled + ._kmvBP::after {
   animation-delay: 3.5s;
   animation-duration: 1.6s;
   animation-iteration-count: infinite;
-  background: linear-gradient(90deg, rgba(var(--color-white-rgb), 0) 0, rgba(var(--color-white-rgb), 0.2) 20%, rgba(var(--color-white-rgb), 0.5) 60%, rgba(var(--color-white-rgb), 0));
+  background: linear-gradient(90deg, rgb(from var(--color-surface-color) r g b/0) 0, rgb(from var(--color-surface-color) r g b/0.2) 20%, rgb(from var(--color-surface-color) r g b/0.5) 60%, rgb(from var(--color-surface-color) r g b/0));
   content: "";
 }
 @keyframes _McmEv {
@@ -2411,7 +2441,7 @@ input:disabled + ._kmvBP::after {
   border-radius: 50%;
 }
 ._hhDnr:first-of-type > td {
-  border-top: 1px solid var(--color-grey-200);
+  border-top: 1px solid var(--color-outline);
 }
 ._hhDnr:focus:not(:focus-visible) {
   /* Remove the focus indicator on mouse-focus for browsers
@@ -2422,10 +2452,10 @@ input:disabled + ._kmvBP::after {
   cursor: pointer;
 }
 ._ej5Ke:not(._qDTAh):hover td {
-  background-color: var(--color-grey-100);
+  background-color: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
 }
 ._qDTAh td {
-  background-color: var(--color-blackberry-100);
+  background-color: var(--color-primary-container-variant);
 }
 ._ffXgN {
   white-space: nowrap;
@@ -2435,28 +2465,28 @@ input:disabled + ._kmvBP::after {
 }
 ._cp8xi {
   position: relative;
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: 1px solid var(--color-outline);
   padding: 16px;
   word-break: break-word;
   -webkit-hyphens: auto;
           hyphens: auto;
-  background: var(--color-white);
+  background: var(--color-surface-color);
 }
 ._cp8xi:first-of-type {
-  border-left: 1px solid var(--color-grey-200);
+  border-left: 1px solid var(--color-outline);
 }
 ._cp8xi:last-of-type {
-  border-right: 1px solid var(--color-grey-200);
+  border-right: 1px solid var(--color-outline);
 }
 ._gqbNb {
   padding: 0;
 }
 ._uHjkg:not(:last-child) {
-  border-right: 1px solid var(--color-grey-200);
+  border-right: 1px solid var(--color-outline);
 }
 ._ASOQd {
-  background: var(--color-radish-100);
-  color: var(--color-radish-400);
+  background: var(--color-danger-container-variant);
+  color: var(--color-danger-color);
 }
 ._HjPNI {
   height: 100%;
@@ -2500,16 +2530,17 @@ input:disabled + ._kmvBP::after {
   padding: 16px;
   width: 100%;
   border-radius: 0;
+  color: var(--color-surface-on-color);
 }
 ._jp9-G input:focus {
-  border-color: var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border-color: var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
   overflow: visible;
   z-index: var(--z-index-base);
 }
 ._jp9-G input:hover {
-  background: var(--color-grey-100);
+  background: color-mix(in srgb, var(--color-surface-color) 100%, var(--color-surface-inverse) 5%);
 }
 ._BzPeH {
   text-align: right;
@@ -2528,8 +2559,8 @@ input:disabled + ._kmvBP::after {
 
 ._5HRwe._5HRwe,
 ._5HRwe._5HRwe:hover {
-  border-color: var(--color-radish-400);
-  background: var(--color-radish-100);
+  border-color: var(--color-danger-color);
+  background: var(--color-danger-container-variant);
 }
 
 ._P--u2._P--u2 {
@@ -2575,11 +2606,11 @@ input:disabled + ._kmvBP::after {
   transform: translateZ(-1px);
   top: 0;
   animation: _b1-OB 1s;
-  box-shadow: -7px 12px 11px 3px #888;
+  box-shadow: -7px 12px 11px 3px var(--color-outline-variant);
   right: 0;
 }
 ._7dAEd._rR4W3 table tr > td:first-of-type {
-  border-right: 4px solid var(--color-grey-200);
+  border-right: 4px solid var(--color-outline);
 }
 ._qLE4I table thead tr th:first-of-type {
   position: sticky;
@@ -2589,7 +2620,7 @@ input:disabled + ._kmvBP::after {
   position: sticky;
   left: 0;
   z-index: 1;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
 }
 ._qLE4I table tfoot tr td:first-of-type {
   position: sticky;
@@ -2619,11 +2650,11 @@ input:disabled + ._kmvBP::after {
   transform: translateZ(-1px);
   top: 0;
   animation: _b1-OB 1s;
-  box-shadow: 7px 12px 11px 3px #888;
+  box-shadow: 7px 12px 11px 3px var(--color-outline-variant);
   left: 0;
 }
 ._B92Ir._rR4W3 table tr > td:last-of-type {
-  border-left: 4px solid var(--color-grey-200);
+  border-left: 4px solid var(--color-outline);
 }
 ._ONjpl table thead tr th:last-of-type {
   position: sticky;
@@ -2633,7 +2664,7 @@ input:disabled + ._kmvBP::after {
   position: sticky;
   right: 0;
   z-index: 1;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
 }
 ._ONjpl table tfoot tr td:last-of-type {
   position: sticky;
@@ -2720,7 +2751,7 @@ input:disabled + ._kmvBP::after {
   box-sizing: border-box;
 }
 ._k704p {
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   border-right: 0;
   border-bottom-left-radius: var(--border-radius-600);
   border-top-left-radius: var(--border-radius-600);
@@ -2754,7 +2785,7 @@ input:disabled + ._kmvBP::after {
   box-shadow: -6px 6px 0 0 var(--corner-background-color);
 }
 ._wOust {
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   border-left: 0;
   border-bottom-right-radius: var(--border-radius-600);
   border-top-right-radius: var(--border-radius-600);
@@ -2817,7 +2848,7 @@ input:disabled + ._kmvBP::after {
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   text-align: center;
   white-space: pre-line;
 }
@@ -2832,7 +2863,7 @@ input:disabled + ._kmvBP::after {
   }
 }
 ._8980Z {
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: 1px solid var(--color-outline);
   margin-top: 16px;
   padding-left: 16px;
   padding-right: 16px;
@@ -2872,18 +2903,18 @@ input:disabled + ._kmvBP::after {
   border-bottom: none;
 }
 ._058SP {
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   border-radius: 20px;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
 }
 ._pWke5 {
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   border-radius: var(--border-radius-600);
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
   overflow-y: auto;
 }
 ._pWke5 > *:not(:last-child) {
-  border-bottom: 1px solid var(--color-grey-200);
+  border-bottom: 1px solid var(--color-outline);
 }
 ._pWke5 > *:last-child {
   border-radius: 0 0 var(--border-radius-600) var(--border-radius-600);
@@ -2896,9 +2927,10 @@ input:disabled + ._kmvBP::after {
   border-bottom: none;
 }
 ._p8I7K {
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
   padding: 16px;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
+  font-weight: var(--p-font-weight-bold);
   position: sticky;
   top: 0;
   z-index: 2;
@@ -2912,10 +2944,10 @@ input:disabled + ._kmvBP::after {
 ._JnBey {
   width: 100%;
   height: 100%;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-color);
   border: none;
   padding: 16px;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   text-align: inherit;
   position: relative;
   z-index: 1;
@@ -2925,7 +2957,7 @@ input:disabled + ._kmvBP::after {
   padding-right: 48px;
 }
 ._DT13p p {
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-color-disabled);
 }
 ._So7nD {
   position: absolute;
@@ -2937,10 +2969,10 @@ input:disabled + ._kmvBP::after {
   transition: all ease-in-out 150ms;
 }
 ._G-7Pi:hover {
-  background-color: var(--color-grey-100);
+  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
 }
 ._G-7Pi:focus {
-  box-shadow: 0 0 8px var(--color-eggplant-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
   z-index: 2;
   outline: none;
 }
@@ -2958,7 +2990,7 @@ input:disabled + ._kmvBP::after {
 }
 
 ._mFLK9 {
-  border: solid var(--color-grey-200);
+  border: solid var(--color-outline);
   border-width: 1px 0 0 0;
   margin: 0;
 }
@@ -2982,20 +3014,20 @@ input:disabled + ._kmvBP::after {
   font-weight: var(--p-font-weight-normal);
   width: 200px;
   border-radius: 0px;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   padding-left: 13px;
   height: 38px;
-  background-color: var(--color-white);
-  border: 1px solid var(--color-grey-200);
+  background-color: var(--color-surface-container);
+  border: 1px solid var(--color-outline);
 }
 ._N37zE:not(._42Bvz) {
   cursor: pointer;
 }
 ._N37zE:not(._42Bvz):hover {
-  background-color: var(--color-grey-100);
+  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
 }
 ._N37zE:not(._42Bvz):focus {
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._h8n2w {
@@ -3007,15 +3039,15 @@ input:disabled + ._kmvBP::after {
 }
 ._9wFtw {
   height: 38px;
-  background-color: var(--color-white);
-  border: 1px solid var(--color-grey-200);
+  background-color: var(--color-surface-container);
+  border: 1px solid var(--color-outline);
   cursor: pointer;
 }
 ._9wFtw:hover {
-  background-color: var(--color-grey-100);
+  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
 }
 ._9wFtw:focus {
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._OrtcR, ._oYoUt {
@@ -3040,9 +3072,9 @@ input:disabled + ._kmvBP::after {
   font-weight: var(--p-font-weight-bold);
   position: relative;
   background-color: transparent;
-  color: var(--color-grey-600);
+  color: var(--color-surface-on-color-bold);
   border-style: solid;
-  border-color: var(--color-grey-200);
+  border-color: var(--color-outline);
   padding: 9px 12px;
   min-width: 38px;
   height: 38px;
@@ -3050,14 +3082,14 @@ input:disabled + ._kmvBP::after {
   display: inline-flex;
 }
 ._lehFG:not(._Fr5kb):hover {
-  background-color: var(--color-grey-100);
-  border-color: var(--color-grey-200);
+  background-color: color-mix(in srgb, var(--color-surface-container) 100%, var(--color-surface-inverse) 5%);
+  border-color: var(--color-outline);
 }
 ._Fr5kb {
-  background-color: var(--color-oat-100);
+  background-color: var(--color-surface-container-high);
 }
 ._lehFG:focus {
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
   text-decoration: none;
 }
@@ -3069,9 +3101,9 @@ input:disabled + ._kmvBP::after {
   content: "";
   height: 36px;
   width: 1px;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-outline);
   border-width: 1px 0px;
-  border-color: var(--color-grey-200);
+  border-color: var(--color-outline);
   border-style: solid;
   position: absolute;
   top: -1px;
@@ -3085,9 +3117,9 @@ input:disabled + ._kmvBP::after {
   content: "";
   height: 36px;
   width: 1px;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-outline);
   border-width: 1px 0px;
-  border-color: var(--color-grey-200);
+  border-color: var(--color-outline);
   border-style: solid;
   position: absolute;
   top: -1px;
@@ -3106,9 +3138,9 @@ input:disabled + ._kmvBP::after {
   content: "";
   height: 36px;
   width: 1px;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-outline);
   border-width: 1px 0px;
-  border-color: var(--color-grey-200);
+  border-color: var(--color-outline);
   border-style: solid;
   position: absolute;
   top: -1px;
@@ -3117,14 +3149,14 @@ input:disabled + ._kmvBP::after {
 ._GEqG9 {
   height: 38px;
   width: 1px;
-  background-color: var(--color-grey-200);
+  background-color: var(--color-outline);
 }
 ._8-Ykj {
   max-width: 500px;
 }
 ._3uYIj {
   margin-bottom: 12px;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._2WdOf {
   font-family: var(--font-family-heading);
@@ -3153,42 +3185,43 @@ input:disabled + ._kmvBP::after {
   border-radius: var(--border-radius-400);
   padding: 7px;
   box-shadow: none;
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 90px;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-container);
 }
 ._JaB08 textarea {
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   margin: 0;
   border: none;
   resize: none;
   width: auto;
   height: auto;
   padding: 0;
+  background-color: var(--color-surface-container);
 }
 ._JaB08 textarea:focus {
   outline: none;
 }
 ._JaB08 textarea:disabled {
-  background-color: var(--color-grey-100);
+  background-color: var(--color-surface-container-disabled);
 }
 ._62RIR {
-  border: 1px solid var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border: 1px solid var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._CDt23 {
-  background-color: var(--color-grey-100);
+  background-color: var(--color-surface-container-disabled);
 }
 ._wf4XP {
-  border-color: var(--color-radish-400) !important;
+  border-color: var(--color-danger-color) !important;
 }
 ._7xVsj {
   margin-top: 5px;
@@ -3217,6 +3250,7 @@ input:disabled + ._kmvBP::after {
   padding: 0;
   border: none;
   background: transparent;
+  color: var(--color-surface-on-color);
 }
 ._Yti6k input._dw-VP:focus, ._Yti6k input._dw-VP:focus-visible {
   outline: none;
@@ -3227,13 +3261,13 @@ input:disabled + ._kmvBP::after {
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   font-weight: var(--p-font-weight-bold);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-grey-100);
+  background-color: var(--color-surface-container-high);
   padding: 8px 16px;
-  border: 1px solid var(--color-grey-100);
+  border: 1px solid var(--color-surface-container-high);
   border-radius: 25px;
   min-height: 38px;
   min-width: 60px;
@@ -3252,7 +3286,7 @@ input:disabled + ._kmvBP::after {
 }
 ._ZxEwG {
   color: transparent;
-  border-color: var(--color-blackberry-400);
+  border-color: var(--color-primary-color);
 }
 ._Odw1V {
   padding: 0;
@@ -3261,46 +3295,49 @@ input:disabled + ._kmvBP::after {
   cursor: pointer;
   display: flex;
   z-index: calc(var(--z-index-base) + 1);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-width: 24px;
   min-height: 24px;
   align-items: center;
   justify-content: center;
   margin: -6px;
 }
-._Yti6k:hover > input ~ ._JXakU, ._Yti6k:hover > input ~ ._MsKVV {
-  background-color: var(--color-grey-200);
-  border-color: var(--color-grey-200);
+._Yti6k:hover > input:not(:disabled) ~ ._JXakU, ._Yti6k:hover > input:not(:disabled) ~ ._MsKVV {
+  background-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
+  border-color: color-mix(in srgb, var(--color-surface-container-high) 100%, var(--color-surface-inverse) 5%);
 }
-._Yti6k:hover > input:checked ~ ._JXakU {
-  background-color: var(--color-blackberry-100);
-  border-color: var(--color-blackberry-500);
-  color: var(--color-blackberry-500);
+._Yti6k:hover > input:not(:disabled):checked ~ ._JXakU {
+  background-color: color-mix(in srgb, var(--color-primary-container) 100%, var(--color-surface-inverse) 5%);
+  border-color: var(--color-primary-on-container);
+  color: var(--color-primary-on-container);
 }
-._Yti6k:hover > input:checked ~ ._JXakU ._Odw1V {
-  color: var(--color-blackberry-500);
+._Yti6k:hover > input:not(:disabled):checked ~ ._JXakU ._Odw1V {
+  color: var(--color-primary-on-container);
 }
 input:checked ~ ._JXakU {
-  background-color: var(--color-blackberry-100);
-  border-color: var(--color-blackberry-400);
-  color: var(--color-blackberry-400);
+  background-color: var(--color-primary-container);
+  border-color: var(--color-primary-on-container);
+  color: var(--color-primary-on-container);
 }
 input:checked ~ ._JXakU ._Odw1V {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-on-container);
 }
 input:disabled + ._JXakU {
-  background-color: var(--color-grey-100);
-  border-color: var(--color-grey-100);
-  color: var(--color-grey-300);
+  background-color: var(--color-surface-container-disabled);
+  border-color: var(--color-surface-container-disabled);
+  color: var(--color-surface-on-container-disabled);
+}
+input:disabled + ._JXakU ._Odw1V {
+  color: var(--color-surface-on-container-disabled);
 }
 input:disabled:checked + ._JXakU {
-  background-color: var(--color-blackberry-100);
-  border-color: var(--color-blackberry-300);
-  color: var(--color-blackberry-300);
+  background-color: var(--color-primary-container);
+  border-color: var(--color-outline-variant);
+  color: var(--color-outline-variant);
 }
 input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
-  border: 1px solid var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border: 1px solid var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._xzukU {
@@ -3312,7 +3349,7 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   padding: 0;
   width: auto;
   float: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-height: 16px;
 }
 
@@ -3327,7 +3364,7 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._2KvuU {
@@ -3339,7 +3376,7 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   padding: 0;
   width: auto;
   float: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-height: 16px;
 }
 ._ZeIOd {
@@ -3347,7 +3384,7 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._s7mjc {
   font-family: var(--font-family-body);
@@ -3358,7 +3395,7 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   padding: 0;
   width: auto;
   float: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-height: 16px;
 }
 
@@ -3373,14 +3410,14 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._IIX-P {
   display: block;
   text-align: center;
   height: 100%;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color);
   width: auto;
   padding: 0;
   float: none;
@@ -3397,13 +3434,13 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   position: absolute;
 }
 input:checked ~ ._P588B {
-  border-color: var(--color-blackberry-300);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border-color: var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   cursor: default;
 }
 ._P588B {
-  background: var(--color-white);
-  border: 1px solid var(--color-grey-200);
+  background: var(--color-surface-container);
+  border: 1px solid var(--color-outline);
   border-radius: var(--border-radius-600);
   padding: 16px;
   display: block;
@@ -3415,12 +3452,12 @@ input:checked ~ ._P588B {
   word-break: break-word;
 }
 ._P588B:hover {
-  box-shadow: 0 0 8px var(--color-grey-200);
+  box-shadow: 0 0 8px var(--color-outline);
 }
 ._Ir3Og {
-  background: var(--color-grey-100);
+  background: var(--color-surface-container-disabled);
   box-shadow: none;
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
   pointer-events: none;
 }
 ._U--9r {
@@ -3432,21 +3469,21 @@ input:checked ~ ._P588B {
   padding: 0;
   width: auto;
   float: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color-bold);
   min-height: 16px;
 }
 ._Lvxmy {
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 ._NC-bO {
   font-family: var(--font-family-body);
   font-size: var(--font-size-100);
   line-height: var(--font-line-height-100);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._04Cjp {
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-container-disabled);
 }
 ._7fVpn {
   position: relative;
@@ -3471,8 +3508,8 @@ input:checked ~ ._P588B {
   width: 14px;
   background-color: transparent;
   border-radius: 50%;
-  border: 1px solid var(--color-grey-200);
-  box-shadow: inset 0 1px 4px -2px var(--color-grey-200);
+  border: 1px solid var(--color-outline);
+  box-shadow: inset 0 1px 4px -2px var(--color-outline);
 }
 ._Yfxkl::after {
   position: absolute;
@@ -3480,11 +3517,11 @@ input:checked ~ ._P588B {
   opacity: 0;
 }
 input:checked ~ ._Yfxkl {
-  background-color: #4d89f5;
+  background-color: var(--color-primary-color);
   border-radius: 50%;
   transform: rotate(0deg) scale(1);
   opacity: 1;
-  border: 1px solid #8cb5f4;
+  border: 1px solid var(--color-primary-color);
 }
 input:checked ~ ._Yfxkl::after {
   opacity: 1;
@@ -3492,22 +3529,22 @@ input:checked ~ ._Yfxkl::after {
   top: 5px;
   width: 4px;
   height: 4px;
-  background-color: var(--color-white);
+  background-color: var(--color-primary-on-color);
   border: none;
   border-radius: 50%;
 }
 input:focus-visible + ._Yfxkl {
-  outline: var(--color-blackberry-400) solid 1px;
+  outline: var(--color-primary-color) solid 1px;
 }
 input:disabled + ._Yfxkl {
-  background-color: var(--color-grey-100);
-  border: 1px solid var(--color-grey-200);
+  background-color: var(--color-surface-container-disabled);
+  border: 1px solid var(--color-outline);
 }
 input:disabled + ._Yfxkl::after {
   box-shadow: none;
   border: solid #9f9f9f !important;
   border-width: 0 2px 2px 0 !important;
-  background-color: #9f9f9f;
+  background-color: var(--color-surface-on-container-disabled);
   left: 4px;
   top: 4px;
 }
@@ -3519,32 +3556,33 @@ input:disabled + ._Yfxkl::after {
   line-height: 22px;
   padding: 7px;
   border-radius: var(--border-radius-400);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   box-shadow: none;
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   margin: 0;
   flex: 1;
   min-width: 90px;
+  background-color: var(--color-surface-container);
 }
 ._6Of1F:focus {
-  border: 1px solid var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border: 1px solid var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._6Of1F:disabled {
-  background-color: var(--color-grey-100);
-  color: var(--color-grey-400);
+  background-color: var(--color-surface-container-disabled);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._NQPNK {
-  border-color: var(--color-radish-400) !important;
+  border-color: var(--color-danger-color) !important;
 }
 
 ._BpQWQ {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._cpYWb {
@@ -3569,18 +3607,22 @@ input:disabled + ._Yfxkl::after {
   cursor: inherit;
 }
 ._1ruWK {
-  color: var(--color-grey-200);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-100);
+  line-height: var(--font-line-height-100);
+  font-weight: var(--p-font-weight-normal);
+  color: var(--color-surface-on-color-disabled);
 }
 
 ._xR7tb {
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color);
 }
 ._cSkvD {
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -3594,32 +3636,33 @@ input:disabled + ._Yfxkl::after {
   line-height: 22px;
   padding: 7px;
   border-radius: var(--border-radius-400);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   box-shadow: none;
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   margin: 0;
   flex: 1;
   min-width: 90px;
+  background-color: var(--color-surface-container);
 }
 ._t-FNM:focus, ._7xqY4:focus {
-  border: 1px solid var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border: 1px solid var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._t-FNM:disabled, ._7xqY4:disabled {
-  background-color: var(--color-grey-100);
-  color: var(--color-grey-400);
+  background-color: var(--color-surface-container-disabled);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._tANT5, ._oq75Z {
-  border-color: var(--color-radish-400) !important;
+  border-color: var(--color-danger-color) !important;
 }
 
 ._rlqRc, ._fXM80 {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._uSKjx, ._eEMy6 {
@@ -3641,32 +3684,33 @@ input:disabled + ._Yfxkl::after {
   line-height: 22px;
   padding: 7px;
   border-radius: var(--border-radius-400);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   box-shadow: none;
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   margin: 0;
   flex: 1;
   min-width: 90px;
+  background-color: var(--color-surface-container);
 }
 ._6cH4X:focus, ._DMb6M input:focus, ._DMb6M:focus {
-  border: 1px solid var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border: 1px solid var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._6cH4X:disabled, ._DMb6M input:disabled, ._DMb6M:disabled {
-  background-color: var(--color-grey-100);
-  color: var(--color-grey-400);
+  background-color: var(--color-surface-container-disabled);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._eXIiZ {
-  border-color: var(--color-radish-400) !important;
+  border-color: var(--color-danger-color) !important;
 }
 
 ._Lc6QO {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._VWrJD {
@@ -3680,14 +3724,14 @@ input:disabled + ._Yfxkl::after {
   padding-top: 0px;
   display: flex;
   align-items: center;
-  background-color: var(--color-grey-100);
-  background-color: var(--color-white);
+  background-color: var(--color-surface-container-disabled);
+  background-color: var(--color-surface-container);
 }
 ._ZJ2A5 {
-  border-color: var(--color-radish-400) !important;
+  border-color: var(--color-danger-color) !important;
 }
 ._WkaJQ {
-  background-color: var(--color-grey-100);
+  background-color: var(--color-surface-container-disabled);
 }
 ._DMb6M input {
   border: none;
@@ -3697,7 +3741,7 @@ input:disabled + ._Yfxkl::after {
 }
 ._DMb6M input:focus {
   border: none;
-  box-shadow: inset 0 -2px 0 var(--color-blackberry-400);
+  box-shadow: inset 0 -2px 0 var(--color-primary-color);
   outline: none;
   border-radius: 0;
   border-top-right-radius: 4px;
@@ -3705,10 +3749,14 @@ input:disabled + ._Yfxkl::after {
 ._SsQ7L {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-blackberry-200);
-  --rdp-background-color: var(--color-grey-100);
-  --rdp-accent-color-dark: var(--color-blackberry-400);
-  --rdp-background-color-dark: var(--color-grey-500);
+  --rdp-accent-color: var(--color-primary-container);
+  --rdp-background-color: color-mix(
+      in srgb,
+      var(--color-surface-color) 100%,
+      var(--color-surface-inverse) 5%
+  );
+  --rdp-accent-color-dark: var(--color-primary-color);
+  --rdp-background-color-dark: var(--color-surface-on-color);
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
   margin: 1em;
@@ -3719,7 +3767,7 @@ input:disabled + ._Yfxkl::after {
   max-width: calc(var(--rdp-cell-size) * 7);
   border-collapse: collapse;
   border: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._Tp79k {
@@ -3728,7 +3776,7 @@ input:disabled + ._Yfxkl::after {
   justify-content: space-between;
   padding: 0;
   text-align: left;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 
 ._Ya6Zr {
@@ -3741,18 +3789,18 @@ input:disabled + ._Yfxkl::after {
   height: 100%;
   height: var(--rdp-cell-size);
   padding: 0;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-subtle);
   background: none;
   border: none;
 }
 
 ._lFzs7:not(._TjttB) {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
   font-weight: 700;
 }
 
 ._TjttB._TjttB {
-  color: var(--color-grey-300);
+  color: var(--color-surface-on-color-subtle);
 }
 
 ._cwiRM {
@@ -3763,41 +3811,41 @@ input:disabled + ._Yfxkl::after {
   height: var(--rdp-cell-size);
   padding: 0.25em;
   border-radius: 100%;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-color-disabled);
 }
 
 ._rJolM._rJolM {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
   border-radius: 0;
 }
 ._rJolM._rJolM:hover {
-  color: var(--color-blackberry-400);
+  color: var(--color-primary-color);
 }
 ._rJolM._rJolM:disabled {
-  background-color: var(--color-blackberry-100);
-  color: var(--color-grey-200);
+  background-color: var(--color-primary-container-variant);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._nVIPx._nVIPx {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  color: var(--color-white);
-  background-color: var(--color-blackberry-400);
+  color: var(--color-primary-on-color);
+  background-color: var(--color-primary-color);
 }
 ._nVIPx._nVIPx:disabled {
-  background-color: var(--color-blackberry-100);
-  color: var(--color-white);
+  background-color: var(--color-primary-container-variant);
+  color: var(--color-surface-on-color-disabled);
 }
 
 ._Y50yT._Y50yT:not(._nVIPx) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  color: var(--color-white);
-  background-color: var(--color-blackberry-400);
+  color: var(--color-primary-on-color);
+  background-color: var(--color-primary-color);
 }
 ._Y50yT._Y50yT:not(._nVIPx):disabled {
-  background-color: var(--color-blackberry-100);
-  color: var(--color-grey-200);
+  background-color: var(--color-primary-container-variant);
+  color: var(--color-surface-on-color-disabled);
 }
 ._yV-BZ, ._9i8Lj input, ._9i8Lj {
   font-family: var(--font-family-body);
@@ -3807,32 +3855,33 @@ input:disabled + ._Yfxkl::after {
   line-height: 22px;
   padding: 7px;
   border-radius: var(--border-radius-400);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
   box-shadow: none;
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   margin: 0;
   flex: 1;
   min-width: 90px;
+  background-color: var(--color-surface-container);
 }
 ._yV-BZ:focus, ._9i8Lj input:focus, ._9i8Lj:focus {
-  border: 1px solid var(--color-blackberry-400);
-  box-shadow: 0 0 8px var(--color-blackberry-300);
+  border: 1px solid var(--color-primary-color);
+  box-shadow: 0 0 8px var(--color-primary-color);
   outline: none;
 }
 ._yV-BZ:disabled, ._9i8Lj input:disabled, ._9i8Lj:disabled {
-  background-color: var(--color-grey-100);
-  color: var(--color-grey-400);
+  background-color: var(--color-surface-container-disabled);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._FJVdv {
-  border-color: var(--color-radish-400) !important;
+  border-color: var(--color-danger-color) !important;
 }
 
 ._B7q-i {
   border-left: 0 !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
-  color: var(--color-grey-400);
+  color: var(--color-surface-on-container-disabled);
 }
 
 ._DvCJW {
@@ -3846,16 +3895,16 @@ input:disabled + ._Yfxkl::after {
   padding: 0;
   align-items: center;
   flex-grow: 1;
-  background-color: var(--color-white);
+  background-color: var(--color-surface-container);
 }
 ._9i8Lj > div {
   width: 50%;
 }
 ._g2UhP {
-  border-color: var(--color-radish-400);
+  border-color: var(--color-danger-color);
 }
 ._Yn4T4 {
-  background-color: var(--color-grey-100);
+  background-color: var(--color-surface-container-disabled);
 }
 ._9i8Lj input {
   border: none;
@@ -3864,14 +3913,14 @@ input:disabled + ._Yfxkl::after {
 }
 ._9i8Lj > div:first-of-type input:focus {
   border: none;
-  box-shadow: inset 0 -2px 0 var(--color-blackberry-400);
+  box-shadow: inset 0 -2px 0 var(--color-primary-color);
   outline: none;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 ._9i8Lj > div:last-of-type input:focus {
   border: none;
-  box-shadow: inset 0 -2px 0 var(--color-blackberry-400);
+  box-shadow: inset 0 -2px 0 var(--color-primary-color);
   outline: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -3881,14 +3930,14 @@ input:disabled + ._Yfxkl::after {
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  background-color: var(--color-white);
+  background-color: var(--color-surface-container);
   position: absolute;
   height: 36px;
   margin-top: 1px;
   align-items: center;
   display: flex;
   pointer-events: none;
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._Q0GfJ {
   flex-grow: 1;
@@ -3906,12 +3955,12 @@ input._TEU6N {
   border-bottom-left-radius: 0;
 }
 ._VYs4A:not(._oSxxZ) > button:focus ._jlyd4 {
-  border: 1px solid var(--color-blackberry-400);
+  border: 1px solid var(--color-primary-color);
   margin-right: 0px;
   width: 44px;
 }
 ._oSxxZ > button:focus ._jlyd4 {
-  border: 1px solid var(--color-radish-400);
+  border: 1px solid var(--color-danger-color);
   border-right-color: transparent;
   margin-right: 0px;
   width: 44px;
@@ -3920,23 +3969,23 @@ input._TEU6N {
   pointer-events: none;
 }
 ._jlyd4 {
-  background-color: var(--color-white);
+  background-color: var(--color-surface-container);
   padding-left: 7px;
   padding-right: 7px;
   border-top-left-radius: var(--border-radius-400);
   border-bottom-left-radius: var(--border-radius-400);
-  border: 1px solid var(--color-grey-200);
+  border: 1px solid var(--color-outline);
   border-right-color: transparent;
   height: 36px;
   margin-right: -1px;
   width: 45px;
 }
 ._424HM {
-  border-color: var(--color-radish-400);
+  border-color: var(--color-danger-color);
   border-right-color: transparent;
 }
 ._0XOFf {
-  background-color: var(--color-grey-100);
+  background-color: var(--color-surface-container-disabled);
 }
 ._RfPa1 {
   font-size: var(--font-size-200);
@@ -4946,7 +4995,7 @@ input._TEU6N {
   justify-content: center;
   align-items: center;
   text-align: center;
-  color: var(--color-white);
+  color: var(--color-surface-on-inverse);
   border-radius: 50%;
   width: 20px;
   height: 20px;
@@ -4957,7 +5006,7 @@ input._TEU6N {
   position: relative;
 }
 ._V1U8v svg {
-  fill: var(--color-white);
+  fill: var(--color-surface-on-inverse);
 }
 ._V1U8v img {
   height: inherit;
@@ -5042,28 +5091,28 @@ input._TEU6N {
   flex-grow: 0;
 }
 ._b60R5 {
-  background-color: var(--color-tangerine-200);
-  color: var(--color-tangerine-600);
+  background-color: var(--color-secondary-container);
+  color: var(--color-secondary-on-container-variant);
 }
 ._ItVyo {
-  background-color: var(--color-mint-200);
-  color: var(--color-mint-600);
+  background-color: var(--color-success-container);
+  color: var(--color-success-on-container-variant);
 }
 ._iUCAH {
-  background-color: var(--color-eggplant-200);
-  color: var(--color-eggplant-600);
+  background-color: var(--color-upsell-container);
+  color: var(--color-upsell-on-container-variant);
 }
 ._RbXoR {
-  background-color: var(--color-banana-200);
-  color: var(--color-banana-600);
+  background-color: var(--color-warning-container);
+  color: var(--color-warning-on-container-variant);
 }
 ._NiP9z {
-  background-color: var(--color-blueberry-200);
-  color: var(--color-blueberry-600);
+  background-color: var(--color-info-container);
+  color: var(--color-info-on-container-variant);
 }
 ._2ltep {
-  background-color: var(--color-radish-200);
-  color: var(--color-radish-600);
+  background-color: var(--color-danger-container);
+  color: var(--color-danger-on-container-variant);
 }
 ._vOTWZ {
   font-family: var(--font-family-body);
@@ -5079,28 +5128,34 @@ input._TEU6N {
   display: inline-block;
   text-align: center;
   white-space: nowrap;
-  color: var(--color-grey-600);
+  color: var(--color-neutral-on-container);
 }
 ._vOTWZ::first-letter {
   text-transform: capitalize;
 }
 ._j2h8A {
-  background-color: var(--color-grey-200);
+  background-color: var(--color-neutral-container);
+  color: var(--color-neutral-on-container);
 }
 ._lFih- {
-  background-color: var(--color-mint-200);
+  background-color: var(--color-success-container);
+  color: var(--color-success-on-container);
 }
 ._sLhtK {
-  background-color: var(--color-radish-200);
+  background-color: var(--color-danger-container);
+  color: var(--color-danger-on-container);
 }
 ._DKrCl {
-  background-color: var(--color-banana-200);
+  background-color: var(--color-warning-container);
+  color: var(--color-warning-on-container);
 }
 ._8TTGV {
-  background-color: var(--color-blueberry-200);
+  background-color: var(--color-info-container);
+  color: var(--color-info-on-container);
 }
 ._0-TG8 {
-  background-color: var(--color-eggplant-200);
+  background-color: var(--color-upsell-container);
+  color: var(--color-upsell-on-container);
 }
 ._mhyqH {
   display: flex;
@@ -5130,7 +5185,7 @@ input._TEU6N {
   font-size: var(--font-size-200);
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
-  color: var(--color-grey-500);
+  color: var(--color-surface-on-color);
 }
 ._79QnQ {
   display: flex;