@innovaccer/design-system 4.22.0 → 4.24.0

package/css/dist/index.css

@@ -23,42 +23,42 @@
   --color-blue-1200-16a: rgba(0, 62, 133, 0.16);
 
   /* Red */
-  --color-red-100: #fff2f0;
-  --color-red-200: #ffddd6;
-  --color-red-300: #ffccc2;
-  --color-red-400: #ffb7a8;
-  --color-red-500: #fe9e8b;
-  --color-red-600: #fb866f;
-  --color-red-700: #f86b4f;
-  --color-red-800: #f54f2e;
-  --color-red-900: #f5310a;
-  --color-red-1000: #d62400;
-  --color-red-1100: #ad1d00;
-  --color-red-1200: #851600;
-  --color-red-1300: #611000;
-  --color-red-1400: #470c00;
-  --color-red-1000-4a: rgba(214, 36, 0, 0.04);
-  --color-red-1000-16a: rgba(214, 36, 0, 0.16);
-  --color-red-1200-16a: rgba(133, 22, 0, 0.16);
+  --color-red-100: #fff7f5;
+  --color-red-200: #ffe1db;
+  --color-red-300: #ffd4cc;
+  --color-red-400: #fec0b4;
+  --color-red-500: #fcac9c;
+  --color-red-600: #f49480;
+  --color-red-700: #ed765e;
+  --color-red-800: #e45b3f;
+  --color-red-900: #df3011;
+  --color-red-1000: #bd1c00;
+  --color-red-1100: #9e200a;
+  --color-red-1200: #791a06;
+  --color-red-1300: #5c1305;
+  --color-red-1400: #3f0e03;
+  --color-red-1000-4a: rgba(189, 28, 0, 0.04);
+  --color-red-1000-16a: rgba(189, 28, 0, 0.16);
+  --color-red-1200-16a: rgba(121, 26, 6, 0.16);
 
   /* Green */
-  --color-green-100: #deffdb;
-  --color-green-200: #c4fcc0;
-  --color-green-300: #a0f69d;
-  --color-green-400: #88ee87;
-  --color-green-500: #6be16d;
-  --color-green-600: #4fcf55;
-  --color-green-700: #27b933;
-  --color-green-800: #07a61a;
-  --color-green-900: #008f11;
-  --color-green-1000: #007a0e;
-  --color-green-1100: #00660c;
-  --color-green-1200: #00520a;
-  --color-green-1300: #004208;
-  --color-green-1400: #002e05;
-  --color-green-1000-4a: rgba(0, 122, 14, 0.04);
-  --color-green-1000-16a: rgba(0, 122, 14, 0.16);
-  --color-green-1200-16a: rgba(0, 82, 10, 0.16);
+  --color-green-100: #f1f9f0;
+  --color-green-200: #dcf0db;
+  --color-green-300: #cbe8c9;
+  --color-green-400: #b6dfb3;
+  --color-green-500: #9dd49b;
+  --color-green-600: #7ec57d;
+  --color-green-700: #5eb55e;
+  --color-green-800: #3aa63c;
+  --color-green-900: #009900;
+  --color-green-1000: #008000;
+  --color-green-1100: #006b00;
+  --color-green-1200: #005200;
+  --color-green-1300: #003d04;
+  --color-green-1400: #002904;
+  --color-green-1000-4a: rgba(0, 128, 0, 0.04);
+  --color-green-1000-16a: rgba(0, 128, 0, 0.16);
+  --color-green-1200-16a: rgba(0, 82, 0, 0.16);
 
   /* Yellow */
   --color-yellow-100: #fff9e5;
@@ -81,138 +81,138 @@
   --color-yellow-1100-16a: rgba(173, 130, 0, 0.16);
 
   /* Orange */
-  --color-orange-100: #fff2db;
-  --color-orange-200: #ffeccc;
-  --color-orange-300: #ffe0ad;
-  --color-orange-400: #ffce85;
-  --color-orange-500: #ffba61;
-  --color-orange-600: #ffaf4d;
-  --color-orange-700: #ffa238;
-  --color-orange-800: #ff931f;
-  --color-orange-900: #ff8000;
-  --color-orange-1000: #e56f00;
-  --color-orange-1100: #cc5f00;
-  --color-orange-1200: #b24d00;
-  --color-orange-1300: #7a2f00;
-  --color-orange-1400: #5c2200;
-  --color-orange-1000-4a: rgba(229, 111, 0, 0.04);
-  --color-orange-1000-16a: rgba(229, 111, 0, 0.16);
+  --color-orange-100: #ffeed1;
+  --color-orange-200: #ffe8c2;
+  --color-orange-300: #ffdca3;
+  --color-orange-400: #ffca7a;
+  --color-orange-500: #ffb657;
+  --color-orange-600: #ffa333;
+  --color-orange-700: #ff9114;
+  --color-orange-800: #eb7900;
+  --color-orange-900: #d66c00;
+  --color-orange-1000: #bd5b00;
+  --color-orange-1100: #a34c00;
+  --color-orange-1200: #8a3b00;
+  --color-orange-1300: #6b2900;
+  --color-orange-1400: #4d1c00;
+  --color-orange-1000-4a: rgba(189, 91, 0, 0.04);
+  --color-orange-1000-16a: rgba(189, 91, 0, 0.16);
 
   /* Violet */
-  --color-violet-100: #f7f0ff;
-  --color-violet-200: #ebdbff;
-  --color-violet-300: #dec7ff;
-  --color-violet-400: #d3b4fd;
-  --color-violet-500: #c7a0fd;
-  --color-violet-600: #b689fb;
-  --color-violet-700: #a771f9;
-  --color-violet-800: #9657f4;
-  --color-violet-900: #823aee;
-  --color-violet-1000: #6f21e4;
-  --color-violet-1100: #601ec2;
-  --color-violet-1200: #531ba7;
-  --color-violet-1300: #3e0e8b;
-  --color-violet-1400: #2b0868;
-  --color-violet-1000-16a: rgba(111, 33, 228, 0.16);
+  --color-violet-100: #faf6fe;
+  --color-violet-200: #f0e7fd;
+  --color-violet-300: #e4d5fb;
+  --color-violet-400: #dcc7fa;
+  --color-violet-500: #cfb4f8;
+  --color-violet-600: #c0a0f3;
+  --color-violet-700: #ac87ee;
+  --color-violet-800: #9e72e9;
+  --color-violet-900: #8854e8;
+  --color-violet-1000: #6f47cd;
+  --color-violet-1100: #5b3ba5;
+  --color-violet-1200: #462d80;
+  --color-violet-1300: #322361;
+  --color-violet-1400: #211844;
+  --color-violet-1000-16a: rgba(111, 71, 205, 0.16);
 
   /* Indigo */
-  --color-indigo-100: #f2f3fd;
-  --color-indigo-200: #daddfb;
-  --color-indigo-300: #c8ccf9;
-  --color-indigo-400: #bbc0f7;
-  --color-indigo-500: #a8aff5;
-  --color-indigo-600: #919af2;
-  --color-indigo-700: #7d86ed;
-  --color-indigo-800: #6873e8;
-  --color-indigo-900: #5460e3;
-  --color-indigo-1000: #3b48de;
-  --color-indigo-1100: #1f2ed6;
-  --color-indigo-1200: #1422b8;
-  --color-indigo-1300: #0d1677;
-  --color-indigo-1400: #0b1365;
-  --color-indigo-1000-16a: rgba(59, 72, 222, 0.16);
+  --color-indigo-100: #f5f6ff;
+  --color-indigo-200: #e5e8ff;
+  --color-indigo-300: #d6daff;
+  --color-indigo-400: #c7ccff;
+  --color-indigo-500: #b3baff;
+  --color-indigo-600: #9faafe;
+  --color-indigo-700: #8993fa;
+  --color-indigo-800: #7380f7;
+  --color-indigo-900: #5a67f6;
+  --color-indigo-1000: #4256d7;
+  --color-indigo-1100: #2f4aac;
+  --color-indigo-1200: #223987;
+  --color-indigo-1300: #192b66;
+  --color-indigo-1400: #101c46;
+  --color-indigo-1000-16a: rgba(66, 86, 215, 0.16);
 
   /* Lime */
-  --color-lime-100: #ecffd1;
-  --color-lime-200: #defcb0;
-  --color-lime-300: #cbf98b;
-  --color-lime-400: #b9f466;
-  --color-lime-500: #a7ef43;
-  --color-lime-600: #9aeb28;
-  --color-lime-700: #8ce114;
-  --color-lime-800: #7ecf0c;
-  --color-lime-900: #70bc06;
-  --color-lime-1000: #62a701;
-  --color-lime-1100: #508901;
-  --color-lime-1200: #3e6b00;
-  --color-lime-1300: #294600;
-  --color-lime-1400: #1b2e00;
-  --color-lime-900-16a: rgba(112, 188, 6, 0.16);
-  --color-lime-1000-16a: rgba(98, 167, 1, 0.16);
+  --color-lime-100: #f5faed;
+  --color-lime-200: #e4efd3;
+  --color-lime-300: #d5e6bb;
+  --color-lime-400: #c5dc9e;
+  --color-lime-500: #b2d07d;
+  --color-lime-600: #9dc057;
+  --color-lime-700: #87b018;
+  --color-lime-800: #779d00;
+  --color-lime-900: #688900;
+  --color-lime-1000: #577400;
+  --color-lime-1100: #476000;
+  --color-lime-1200: #364900;
+  --color-lime-1300: #283800;
+  --color-lime-1400: #1a2700;
+  --color-lime-900-16a: rgba(104, 137, 0, 0.16);
+  --color-lime-1000-16a: rgba(87, 116, 0, 0.16);
 
   /* Cyan */
-  --color-cyan-100: #dbfaff;
-  --color-cyan-200: #bdf5ff;
-  --color-cyan-300: #99eeff;
-  --color-cyan-400: #8beafd;
-  --color-cyan-500: #7ee6fb;
-  --color-cyan-600: #68def8;
-  --color-cyan-700: #52d6f4;
-  --color-cyan-800: #31cbf2;
-  --color-cyan-900: #15c3ef;
-  --color-cyan-1000: #0fabd2;
-  --color-cyan-1100: #0589ad;
-  --color-cyan-1200: #006280;
-  --color-cyan-1300: #003f52;
-  --color-cyan-1400: #00232e;
+  --color-cyan-100: #eefafc;
+  --color-cyan-200: #cff1f7;
+  --color-cyan-300: #b6e8f2;
+  --color-cyan-400: #96dfee;
+  --color-cyan-500: #6ed3e7;
+  --color-cyan-600: #33c4e1;
+  --color-cyan-700: #00b2d6;
+  --color-cyan-800: #009fc7;
+  --color-cyan-900: #008cb3;
+  --color-cyan-1000: #007599;
+  --color-cyan-1100: #006080;
+  --color-cyan-1200: #004766;
+  --color-cyan-1300: #003952;
+  --color-cyan-1400: #002738;
 
   /* Sea */
-  --color-sea-100: #ddfdfa;
-  --color-sea-200: #c4f8f3;
-  --color-sea-300: #a5f3ec;
-  --color-sea-400: #8ceee7;
-  --color-sea-500: #73e7e0;
-  --color-sea-600: #5ce0d7;
-  --color-sea-700: #45d9cf;
-  --color-sea-800: #23d7cb;
-  --color-sea-900: #16c0b7;
-  --color-sea-1000: #0ca79f;
-  --color-sea-1100: #04867f;
-  --color-sea-1200: #00615c;
-  --color-sea-1300: #00423f;
-  --color-sea-1400: #002927;
+  --color-sea-100: #effaf9;
+  --color-sea-200: #cff2ef;
+  --color-sea-300: #b8eae5;
+  --color-sea-400: #98e2dc;
+  --color-sea-500: #6fd8d2;
+  --color-sea-600: #2fcac0;
+  --color-sea-700: #00b8ae;
+  --color-sea-800: #00a89d;
+  --color-sea-900: #008f88;
+  --color-sea-1000: #007a74;
+  --color-sea-1100: #00665f;
+  --color-sea-1200: #004d47;
+  --color-sea-1300: #003d3a;
+  --color-sea-1400: #002926;
 
   /* Magenta */
-  --color-magenta-100: #fff0f5;
-  --color-magenta-200: #ffdbe8;
-  --color-magenta-300: #ffc2d8;
-  --color-magenta-400: #ffadcb;
-  --color-magenta-500: #ff99c0;
-  --color-magenta-600: #ff85b4;
-  --color-magenta-700: #fe71a7;
-  --color-magenta-800: #fc5a98;
-  --color-magenta-900: #fa428c;
-  --color-magenta-1000: #f7267a;
-  --color-magenta-1100: #e40763;
-  --color-magenta-1200: #b00753;
-  --color-magenta-1300: #850040;
-  --color-magenta-1400: #520029;
+  --color-magenta-100: #fff5f9;
+  --color-magenta-200: #fee1eb;
+  --color-magenta-300: #fccfdf;
+  --color-magenta-400: #fabdd2;
+  --color-magenta-500: #f6a7c4;
+  --color-magenta-600: #ef8fb2;
+  --color-magenta-700: #e7739e;
+  --color-magenta-800: #de5487;
+  --color-magenta-900: #d62974;
+  --color-magenta-1000: #bb165b;
+  --color-magenta-1100: #991a44;
+  --color-magenta-1200: #751538;
+  --color-magenta-1300: #5a112d;
+  --color-magenta-1400: #3d0b20;
 
   /* Pink */
-  --color-pink-100: #fff0fd;
-  --color-pink-200: #ffe0fb;
-  --color-pink-300: #ffd1f9;
-  --color-pink-400: #ffc7f7;
-  --color-pink-500: #febdf7;
-  --color-pink-600: #fdaff5;
-  --color-pink-700: #fca1f6;
-  --color-pink-800: #f88cf2;
-  --color-pink-900: #f47cf2;
-  --color-pink-1000: #ed68ed;
-  --color-pink-1100: #d016d0;
-  --color-pink-1200: #ae09ae;
-  --color-pink-1300: #510151;
-  --color-pink-1400: #410c40;
+  --color-pink-100: #fdf6fc;
+  --color-pink-200: #f8e2f5;
+  --color-pink-300: #f3d3ef;
+  --color-pink-400: #efc2e9;
+  --color-pink-500: #e7ace1;
+  --color-pink-600: #dd92d5;
+  --color-pink-700: #d17acd;
+  --color-pink-800: #c55ec1;
+  --color-pink-900: #b83db8;
+  --color-pink-1000: #9d2d9f;
+  --color-pink-1100: #842a82;
+  --color-pink-1200: #651f64;
+  --color-pink-1300: #4e184d;
+  --color-pink-1400: #371036;
 
   /* Gray */
   --color-gray-100: #f7f7f7;
@@ -263,7 +263,7 @@
   /* Accent 2 (Violet) */
   --jamun: var(--color-violet-1000);
   --jamun-dark: var(--color-violet-1200);
-  --jamun-darker: var(--color-violet-1400);
+  --jamun-darker: var(--color-violet-1300);
   --jamun-light: var(--color-violet-700);
   --jamun-lighter: var(--color-violet-500);
   --jamun-lightest: var(--color-violet-200);
@@ -279,7 +279,7 @@
   /* Accent 3 (Indigo) */
   --neel: var(--color-indigo-1000);
   --neel-dark: var(--color-indigo-1200);
-  --neel-darker: var(--color-indigo-1400);
+  --neel-darker: var(--color-indigo-1300);
   --neel-light: var(--color-indigo-700);
   --neel-lighter: var(--color-indigo-500);
   --neel-lightest: var(--color-indigo-200);
@@ -299,8 +299,8 @@
   --night-lightest: var(--color-gray-700);
 
   /* Accent 4 (Lime) */
-  --nimbu: var(--color-lime-900);
-  --nimbu-dark: var(--color-lime-1100);
+  --nimbu: var(--color-lime-1000);
+  --nimbu-dark: var(--color-lime-1200);
   --nimbu-darker: var(--color-lime-1300);
   --nimbu-light: var(--color-lime-700);
   --nimbu-lighter: var(--color-lime-500);
@@ -345,6 +345,10 @@
   --accent2: var(--jamun);
   --accent3: var(--neel);
   --accent4: var(--nimbu);
+  --accent5: var(--color-cyan-1000);
+  --accent6: var(--color-magenta-1000);
+  --accent7: var(--color-sea-1000);
+  --accent8: var(--color-pink-1000);
   --inverse: var(--night);
 
   /* dark */
@@ -357,6 +361,10 @@
   --accent2-dark: var(--jamun-dark);
   --accent3-dark: var(--neel-dark);
   --accent4-dark: var(--nimbu-dark);
+  --accent5-dark: var(--color-cyan-1200);
+  --accent6-dark: var(--color-magenta-1200);
+  --accent7-dark: var(--color-sea-1200);
+  --accent8-dark: var(--color-pink-1200);
 
   /* darker */
   --primary-darker: var(--jal-darker);
@@ -367,6 +375,10 @@
   --accent2-darker: var(--jamun-darker);
   --accent3-darker: var(--neel-darker);
   --accent4-darker: var(--nimbu-darker);
+  --accent5-darker: var(--color-cyan-1300);
+  --accent6-darker: var(--color-magenta-1300);
+  --accent7-darker: var(--color-sea-1300);
+  --accent8-darker: var(--color-pink-1300);
 
   /* light */
   --primary-light: var(--jal-light);
@@ -378,6 +390,10 @@
   --accent2-light: var(--jamun-light);
   --accent3-light: var(--neel-light);
   --accent4-light: var(--nimbu-light);
+  --accent5-light: var(--color-cyan-700);
+  --accent6-light: var(--color-magenta-700);
+  --accent7-light: var(--color-sea-700);
+  --accent8-light: var(--color-pink-700);
   --inverse-light: var(--night-light);
 
   /* lighter */
@@ -390,6 +406,10 @@
   --accent2-lighter: var(--jamun-lighter);
   --accent3-lighter: var(--neel-lighter);
   --accent4-lighter: var(--nimbu-lighter);
+  --accent5-lighter: var(--color-cyan-500);
+  --accent6-lighter: var(--color-magenta-500);
+  --accent7-lighter: var(--color-sea-500);
+  --accent8-lighter: var(--color-pink-500);
   --inverse-lighter: var(--night-lighter);
 
   /* lightest */
@@ -402,6 +422,10 @@
   --accent2-lightest: var(--jamun-lightest);
   --accent3-lightest: var(--neel-lightest);
   --accent4-lightest: var(--nimbu-lightest);
+  --accent5-lightest: var(--color-cyan-200);
+  --accent6-lightest: var(--color-magenta-200);
+  --accent7-lightest: var(--color-sea-200);
+  --accent8-lightest: var(--color-pink-200);
   --inverse-lightest: var(--night-lightest);
 
   /* Focus */
@@ -417,27 +441,118 @@
   --accent2-ultra-light: var(--color-violet-100);
   --accent3-ultra-light: var(--color-indigo-100);
   --accent4-ultra-light: var(--color-lime-100);
+  --accent5-ultra-light: var(--color-cyan-100);
+  --accent6-ultra-light: var(--color-magenta-100);
+  --accent7-ultra-light: var(--color-sea-100);
+  --accent8-ultra-light: var(--color-pink-100);
 
-  /* Avatar specific color for the time being */
+  /* Numeric semantic steps */
   --primary-300: var(--color-blue-300);
+  --primary-400: var(--color-blue-400);
+  --primary-600: var(--color-blue-600);
+  --primary-800: var(--color-blue-800);
+  --primary-900: var(--color-blue-900);
+  --primary-1100: var(--color-blue-1100);
+  --primary-1400: var(--color-blue-1400);
   --success-300: var(--color-green-300);
+  --success-400: var(--color-green-400);
+  --success-600: var(--color-green-600);
+  --success-800: var(--color-green-800);
+  --success-900: var(--color-green-900);
+  --success-1100: var(--color-green-1100);
+  --success-1400: var(--color-green-1400);
   --alert-300: var(--color-red-300);
+  --alert-400: var(--color-red-400);
+  --alert-600: var(--color-red-600);
+  --alert-800: var(--color-red-800);
+  --alert-900: var(--color-red-900);
+  --alert-1100: var(--color-red-1100);
+  --alert-1400: var(--color-red-1400);
   --warning-300: var(--color-yellow-300);
+  --warning-400: var(--color-yellow-400);
+  --warning-600: var(--color-yellow-600);
+  --warning-800: var(--color-yellow-800);
+  --warning-1000: var(--color-yellow-1000);
+  --warning-1200: var(--color-yellow-1200);
+  --warning-1400: var(--color-yellow-1400);
   --accent1-300: var(--color-orange-300);
+  --accent1-400: var(--color-orange-400);
+  --accent1-600: var(--color-orange-600);
+  --accent1-800: var(--color-orange-800);
+  --accent1-900: var(--color-orange-900);
+  --accent1-1100: var(--color-orange-1100);
+  --accent1-1400: var(--color-orange-1400);
   --accent2-300: var(--color-violet-300);
+  --accent2-400: var(--color-violet-400);
+  --accent2-600: var(--color-violet-600);
+  --accent2-800: var(--color-violet-800);
+  --accent2-900: var(--color-violet-900);
+  --accent2-1100: var(--color-violet-1100);
+  --accent2-1400: var(--color-violet-1400);
   --accent3-300: var(--color-indigo-300);
+  --accent3-400: var(--color-indigo-400);
+  --accent3-600: var(--color-indigo-600);
+  --accent3-800: var(--color-indigo-800);
+  --accent3-900: var(--color-indigo-900);
+  --accent3-1100: var(--color-indigo-1100);
+  --accent3-1400: var(--color-indigo-1400);
   --accent4-300: var(--color-lime-300);
+  --accent4-400: var(--color-lime-400);
+  --accent4-600: var(--color-lime-600);
+  --accent4-800: var(--color-lime-800);
+  --accent4-900: var(--color-lime-900);
+  --accent4-1100: var(--color-lime-1100);
+  --accent4-1400: var(--color-lime-1400);
+  --accent5-300: var(--color-cyan-300);
+  --accent5-400: var(--color-cyan-400);
+  --accent5-600: var(--color-cyan-600);
+  --accent5-800: var(--color-cyan-800);
+  --accent5-900: var(--color-cyan-900);
+  --accent5-1100: var(--color-cyan-1100);
+  --accent5-1400: var(--color-cyan-1400);
+  --accent6-300: var(--color-magenta-300);
+  --accent6-400: var(--color-magenta-400);
+  --accent6-600: var(--color-magenta-600);
+  --accent6-800: var(--color-magenta-800);
+  --accent6-900: var(--color-magenta-900);
+  --accent6-1100: var(--color-magenta-1100);
+  --accent6-1400: var(--color-magenta-1400);
+  --accent7-300: var(--color-sea-300);
+  --accent7-400: var(--color-sea-400);
+  --accent7-600: var(--color-sea-600);
+  --accent7-800: var(--color-sea-800);
+  --accent7-900: var(--color-sea-900);
+  --accent7-1100: var(--color-sea-1100);
+  --accent7-1400: var(--color-sea-1400);
+  --accent8-300: var(--color-pink-300);
+  --accent8-400: var(--color-pink-400);
+  --accent8-600: var(--color-pink-600);
+  --accent8-800: var(--color-pink-800);
+  --accent8-900: var(--color-pink-900);
+  --accent8-1100: var(--color-pink-1100);
+  --accent8-1400: var(--color-pink-1400);
+
+  /* Neutral semantic steps */
+  --secondary-600: var(--color-gray-600);
+  --inverse-800: var(--color-gray-800);
+  --inverse-1000: var(--color-gray-1000);
+  --inverse-1200: var(--color-gray-1200);
+  --inverse-1300: var(--color-gray-1300);
 
   /* shadow */
   --primary-shadow: rgba(0, 96, 214, 0.16);
   --secondary-shadow: rgba(212, 212, 212, 0.16);
-  --success-shadow: rgba(0, 122, 14, 0.16);
-  --alert-shadow: rgba(214, 36, 0, 0.16);
+  --success-shadow: rgba(0, 128, 0, 0.16);
+  --alert-shadow: rgba(189, 28, 0, 0.16);
   --warning-shadow: rgba(245, 186, 10, 0.16);
-  --accent1-shadow: rgba(229, 111, 0, 0.16);
-  --accent2-shadow: rgba(111, 33, 228, 0.16);
-  --accent3-shadow: rgba(59, 72, 222, 0.16);
-  --accent4-shadow: rgba(112, 188, 6, 0.16);
+  --accent1-shadow: rgba(189, 91, 0, 0.16);
+  --accent2-shadow: rgba(111, 71, 205, 0.16);
+  --accent3-shadow: rgba(66, 86, 215, 0.16);
+  --accent4-shadow: rgba(87, 116, 0, 0.16);
+  --accent5-shadow: rgba(0, 117, 153, 0.16);
+  --accent6-shadow: rgba(187, 22, 91, 0.16);
+  --accent7-shadow: rgba(0, 122, 116, 0.16);
+  --accent8-shadow: rgba(157, 45, 159, 0.16);
   --inverse-shadow: rgba(26, 26, 26, 0.16);
 
   /* Text colors */
@@ -834,29 +949,6 @@ body {
   animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
 }
 
-::-webkit-scrollbar {
-  width: 16px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--secondary-dark);
-  border-radius: 8px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--inverse-lightest);
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: var(--inverse-lighter);
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
 /* Text */
 .Text {
   margin: 0;
@@ -1001,6 +1093,18 @@ body {
   color: var(--text-disabled);
 }
 
+.Label-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .Label-requiredIndicator {
   height: var(--spacing-15);
   width: var(--spacing-15);
@@ -1419,6 +1523,13 @@ body {
   pointer-events: auto !important;
 }
 
+@media (forced-colors: active) {
+  .AvatarGroup-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 /* Selection avatar group */
 .SelectionAvatarGroup {
   box-sizing: border-box;
@@ -1615,6 +1726,28 @@ body {
   box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
 }
 
+@media (forced-colors: active) {
+  .SelectionAvatarGroup-item--selected:focus,
+  .SelectionAvatarGroup-item--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-2-5);
+    box-shadow: none !important;
+  }
+
+  .SelectionAvatarCount--selected:focus,
+  .SelectionAvatarCount--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-2-5);
+    box-shadow: none !important;
+  }
+
+  /* The inner search input uses outline:none !important — restore it in forced-colors mode */
+  .SelectionAvatar-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 @keyframes backdrop-open {
   from {
     opacity: 0;
@@ -1712,7 +1845,7 @@ body {
 }
 
 .Badge--accent1 {
-  background: var(--accent1-dark);
+  background: var(--accent1);
   color: var(--white);
 }
 
@@ -1728,7 +1861,7 @@ body {
 
 .Badge--accent4 {
   background: var(--accent4);
-  color: var(--accent4-darker);
+  color: var(--white);
 }
 
 .Badge--subtle-primary {
@@ -1753,7 +1886,7 @@ body {
 
 .Badge--subtle-warning {
   color: var(--warning-darker);
-  background: var(--warning-lightest);
+  background: var(--warning-300);
 }
 
 .Badge--subtle-accent1 {
@@ -1847,11 +1980,11 @@ body {
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Button:disabled {
+.Button--disabled {
   cursor: not-allowed;
 }
 
-.Button:focus {
+.Button:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -1931,13 +2064,6 @@ body {
   margin-left: var(--spacing-15);
 }
 
-.Button--tiny .Button-icon--left {
-  margin-right: var(--spacing-10);
-}
-.Button--tiny .Button-icon--right {
-  margin-left: var(--spacing-10);
-}
-
 .Button--basic {
   background: var(--secondary-light);
   color: var(--inverse);
@@ -1951,7 +2077,7 @@ body {
   background: var(--secondary-dark);
 }
 
-.Button--basic:disabled {
+.Button--basic-disabled {
   background: var(--secondary-lighter);
   color: var(--inverse-lightest);
 }
@@ -1968,10 +2094,14 @@ body {
   background: var(--primary-darker);
 }
 
-.Button--primary:disabled {
+.Button--primary-disabled {
   background: var(--primary-lighter);
 }
 
+.Button-infoIcon--primary {
+  color: var(--text-link);
+}
+
 .Button--success {
   background: var(--primary);
 }
@@ -1984,10 +2114,14 @@ body {
   background: var(--primary-darker);
 }
 
-.Button--success:disabled {
+.Button--success-disabled {
   background: var(--primary-lighter);
 }
 
+.Button-infoIcon--success {
+  color: var(--text-link);
+}
+
 .Button--alert {
   background: var(--alert);
 }
@@ -2000,10 +2134,14 @@ body {
   background: var(--alert-darker);
 }
 
-.Button--alert:disabled {
+.Button--alert-disabled {
   background: var(--alert-lighter);
 }
 
+.Button-infoIcon--alert {
+  color: var(--alert);
+}
+
 .Button--transparent {
   background: transparent;
   color: var(--inverse);
@@ -2017,11 +2155,11 @@ body {
   background: var(--secondary-dark);
 }
 
-.Button--transparent:focus:active {
+.Button--transparent:focus-visible:active {
   background: var(--secondary-dark);
 }
 
-.Button--transparent:disabled {
+.Button--transparent-disabled {
   background: transparent;
   color: var(--inverse-lightest);
 }
@@ -2048,21 +2186,21 @@ body {
   box-shadow: inset 0 0 0 2px var(--primary-dark);
 }
 
-.Button--selected:focus {
+.Button--selected:focus-visible {
   background: var(--primary-ultra-light);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
 }
 
-.Button--selected:focus:active {
+.Button--selected:focus-visible:active {
   background: var(--primary-lighter);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
-.Button--selected:disabled {
+.Button--selected-disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -2078,6 +2216,63 @@ body {
   text-overflow: ellipsis;
 }
 
+.Button-infoIconWrapper {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: var(--border-width-2-5) solid var(--secondary-lightest);
+  pointer-events: none;
+}
+
+.Button-infoIconWrapper--transparent {
+  border: none;
+  background: transparent;
+  top: var(--spacing-2-5);
+  right: var(--spacing-2-5);
+}
+
+.Button-infoIconWrapper--iconOnly-transparent {
+  top: var(--spacing-2-5);
+  right: var(--spacing-2-5);
+}
+
+.Button-infoIconWrapper-outlined--basic {
+  background: var(--secondary-lightest);
+}
+
+.Button-infoIconWrapper-outlined--primary {
+  background: var(--primary-ultra-light);
+}
+
+.Button-infoIconWrapper-outlined--alert {
+  background: var(--alert-ultra-light);
+}
+
+.Button-infoIconWrapper--basic {
+  background: var(--secondary-lighter);
+}
+
+.Button-infoIconWrapper--primary,
+.Button-infoIconWrapper--success {
+  background: var(--primary-lightest);
+}
+
+.Button-infoIconWrapper--alert {
+  background: var(--alert-lightest);
+}
+
+.Button-infoIcon {
+  color: var(--text-subtle);
+}
+
 /* outlined button styles */
 
 .Button-outlined--basic {
@@ -2096,13 +2291,13 @@ body {
   box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
-.Button-outlined--basic:focus {
+.Button-outlined--basic:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
 }
 
-.Button-outlined--basic:disabled {
+.Button-outlined--basic-disabled {
   color: var(--inverse-lightest);
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--secondary);
@@ -2125,14 +2320,14 @@ body {
   box-shadow: inset 0 0 0 2px var(--primary-dark);
 }
 
-.Button-outlined--selected:focus {
+.Button-outlined--selected:focus-visible {
   color: var(--primary-dark);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
 }
 
-.Button-outlined--selected:focus:active {
+.Button-outlined--selected:focus-visible:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
   outline: var(--border-width-05) solid var(--primary-focus);
@@ -2140,7 +2335,7 @@ body {
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
-.Button-outlined--selected:disabled {
+.Button-outlined--selected-disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -2164,18 +2359,22 @@ body {
   color: var(--primary-dark);
 }
 
-.Button-outlined--primary:focus {
+.Button-outlined--primary:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
 }
 
-.Button-outlined--primary:disabled {
+.Button-outlined--primary-disabled {
   background: transparent;
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 1px var(--primary-lighter);
 }
 
+.Button-infoIcon-outlined--primary {
+  color: var(--text-link);
+}
+
 .Button-outlined--alert {
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--alert);
@@ -2194,18 +2393,121 @@ body {
   color: var(--alert-dark);
 }
 
-.Button-outlined--alert:focus {
+.Button-outlined--alert:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
 }
 
-.Button-outlined--alert:disabled {
+.Button-outlined--alert-disabled {
   background: transparent;
   color: var(--alert-lighter);
   box-shadow: inset 0 0 0 1px var(--alert-lighter);
 }
 
+.Button-infoIcon-outlined--alert {
+  color: var(--alert);
+}
+
+.Button-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .Button--basic,
+  .Button--primary,
+  .Button--success,
+  .Button--alert,
+  .Button--transparent {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  .Button--basic-disabled,
+  .Button--primary-disabled,
+  .Button--success-disabled,
+  .Button--alert-disabled,
+  .Button--transparent-disabled {
+    border: var(--border-width-2-5) solid GrayText;
+  }
+
+  /* Selected state: inset box-shadow acts as the visible border */
+  .Button--selected,
+  .Button--selected:hover,
+  .Button--selected:active,
+  .Button--selected-disabled {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button--selected:focus-visible,
+  .Button--selected:focus-visible:active {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  /* Outlined variants: inset box-shadow is the only visible border */
+  .Button-outlined--basic,
+  .Button-outlined--basic:hover,
+  .Button-outlined--basic:active,
+  .Button-outlined--basic-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--basic:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--selected,
+  .Button-outlined--selected:hover,
+  .Button-outlined--selected:active,
+  .Button-outlined--selected-disabled {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--selected:focus-visible,
+  .Button-outlined--selected:focus-visible:active {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--primary,
+  .Button-outlined--primary:hover,
+  .Button-outlined--primary:active,
+  .Button-outlined--primary-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--primary:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--alert,
+  .Button-outlined--alert:hover,
+  .Button-outlined--alert:active,
+  .Button-outlined--alert-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--alert:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+}
+
 /* calendar */
 
 .Calendar-wrapper {
@@ -2352,6 +2654,13 @@ body {
   position: relative;
 }
 
+.Calendar-monthValueWrapper,
+.Calendar-yearValueWrapper {
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
 .Calendar-valueWrapper--inRange {
   background: var(--primary-ultra-light);
 }
@@ -2410,13 +2719,13 @@ body {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  box-sizing: border-box;
   border-radius: var(--spacing-10);
   border: var(--border-width-2-5) solid transparent;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 
   /* Button reset (used on <button> for a11y) */
   background: transparent;
-  border: none;
   padding: 0;
   margin: 0;
   font-family: inherit;
@@ -2517,25 +2826,6 @@ body {
   width: var(--spacing-80);
 }
 
-
-.Calendar-valueWrapper--active-dummy .Calendar-value {
-  border: none;
-}
-
-.Calendar-valueWrapper--active-dummy .Calendar-value--active {
-  background: var(--primary-lighter);
-}
-
-.Calendar-valueWrapper--active-dummy .Calendar-value--active:hover {
-  background: var(--primary-light);
-  color: var(--inverse);
-}
-
-.Calendar-valueWrapper--active-dummy .Calendar-value--active:active {
-  background: var(--primary-dark);
-  color: var(--white);
-}
-
 .Calendar-valueWrapper--active-dummy .Calendar-value--startError,
 .Calendar-valueWrapper--active-dummy .Calendar-value--endError {
   background: var(--alert-lightest);
@@ -2547,6 +2837,10 @@ body {
   border-color: transparent;
 }
 
+.Calendar-valueWrapper--disabled {
+  opacity: var(--opacity-10);
+}
+
 .Calendar-value--disabled {
   pointer-events: none;
 }
@@ -2615,6 +2909,55 @@ body {
   border-color: transparent;
 }
 
+@media (forced-colors: active) {
+  .Calendar-valueWrapper--start,
+  .Calendar-valueWrapper--end,
+  .Calendar-valueWrapper--hoverDate,
+  .Calendar-valueWrapper--hoverEndDate,
+  .Calendar-valueWrapper--inStartRange,
+  .Calendar-valueWrapper--inEndRange,
+  .Calendar-valueWrapper--inRange,
+  .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
+    background: Highlight;
+  }
+
+  .Calendar-valueWrapper--startError,
+  .Calendar-valueWrapper--endError,
+  .Calendar-valueWrapper--inRangeError {
+    background: Mark;
+  }
+
+  /* Active/selected date cell */
+  .Calendar-value--active,
+  .Calendar-value--active:hover,
+  .Calendar-value--active:active {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    border-color: transparent;
+  }
+
+  /* Today's date marker ring */
+  .Calendar-value--currDateMonthYear {
+    border-color: ButtonText;
+  }
+
+  /* Event dot: use system color so it stays visible */
+  .Calendar-eventsIndicator {
+    background-color: ButtonText;
+  }
+
+  .Calendar-eventsIndicator--active {
+    background-color: HighlightText;
+  }
+
+  /* Disabled dates use opacity — switch to GrayText */
+  .Calendar-valueWrapper--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+}
+
 /* badge */
 
 .Card {
@@ -2670,6 +3013,20 @@ body {
   border-top: var(--border-width-2-5) solid var(--secondary-light);
 }
 
+@media (forced-colors: active) {
+  /* box-shadow is stripped in forced-colors; add a real border so the card boundary is visible */
+  .Card--default,
+  .Card--light,
+  .Card--medium,
+  .Card--dark,
+  .Card--shadow10,
+  .Card--shadow20,
+  .Card--shadow30 {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}
+
 .CardSubdued {
   background: var(--card-subdued-bg);
   padding: var(--spacing-40);
@@ -2739,7 +3096,7 @@ body {
   height: var(--spacing-10);
   border-radius: var(--border-radius-full);
   margin: 0 var(--spacing-20);
-  background: var(--inverse-lightest);
+  background: var(--inverse-lighter);
 }
 
 .ChatBubble-box--noSuccess {
@@ -2784,17 +3141,24 @@ body {
   flex: 0 0 auto;
 }
 
+.ChatBubble-actionBarWrapper--hidden {
+  width: 0;
+  overflow: hidden;
+}
+
 .ChatInput {
   display: flex;
   flex-direction: row;
   align-items: center;
-  border: var(--border-width-2-5) solid var(--secondary);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
   padding: var(--spacing-20);
   border-radius: var(--border-radius-10);
   background: var(--white);
   max-width: 100%;
   min-width: var(--spacing-640);
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: background-color var(--duration--slow-01) var(--standard-productive-curve),
+    border-color var(--duration--slow-01) var(--standard-productive-curve),
+    outline var(--duration--slow-01) var(--standard-productive-curve);
   max-height: var(--spacing-440);
   position: relative;
   box-sizing: border-box;
@@ -2864,7 +3228,8 @@ body {
 .ChatInput-actions {
   display: flex;
   flex-shrink: 0;
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: margin var(--duration--slow-01) var(--standard-productive-curve),
+    width var(--duration--slow-01) var(--standard-productive-curve);
   margin-left: var(--spacing-20);
   align-items: center;
 }
@@ -2876,6 +3241,14 @@ body {
   margin-left: 0;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .ChatInput,
+  .ChatInput-actions,
+  .ChatInput-textarea {
+    transition: none;
+  }
+}
+
 .Chat-UnreadMessage {
   border-radius: var(--border-radius-40);
   padding: var(--spacing-05) var(--spacing-30) var(--spacing-05) var(--spacing-20);
@@ -3245,8 +3618,7 @@ body {
   background: var(--secondary);
 }
 
-.Chip--input:focus-visible,
-.Chip--input:focus {
+.Chip--input:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -3263,7 +3635,8 @@ body {
 }
 
 .Chip-icon--right:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-focus);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip-icon--right:hover {
@@ -3283,7 +3656,8 @@ body {
 }
 
 .Chip-icon--selected:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-focus);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip-icon--selected:hover {
@@ -3305,6 +3679,40 @@ body {
   padding-right: 0;
 }
 
+@media (forced-colors: active) {
+  /* Action chips: border:0 makes them invisible — add a real border */
+  .Chip--action {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Input chips: border:0 makes them invisible — add a real border */
+  .Chip--input {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Selected state uses inset box-shadow as a double border on top of the existing border-color */
+  .Chip-selection--selected,
+  .Chip-selection--selected:hover,
+  .Chip-selection--selected:active,
+  .Chip-selection--selectedDisabled {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+
+  .Chip-action--disabled,
+  .Chip-input--disabled {
+    opacity: 1;
+    color: GrayText;
+    border: var(--border-width-2-5) solid GrayText;
+  }
+
+  .Chip-selection--disabled {
+    opacity: 1;
+    color: GrayText;
+    border-color: GrayText;
+  }
+}
+
 .ChipGroup {
   display: inline-flex;
 }
@@ -3323,6 +3731,7 @@ body {
 
 .ChipInput {
   display: flex;
+  box-sizing: border-box;
   border-radius: var(--border-radius-10);
   box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
   background: var(--white);
@@ -3332,23 +3741,19 @@ body {
 
 .ChipInput--regular {
   padding-left: 10px;
-  padding-right: 10px;
+  padding-right: var(--spacing-15);
 }
 
 .ChipInput--small {
+  align-items: center;
+  min-height: var(--spacing-60);
   padding-left: var(--spacing-20);
-  padding-right: var(--spacing-20);
-}
-
-.ChipInput:focus,
-.ChipInput:focus-visible {
-  outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-05);
+  padding-right: var(--spacing-10);
 }
 
 .ChipInput:hover {
   background: var(--secondary-lighter);
-  border-color: var(--secondary-dark);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
 }
 
 .ChipInput:focus-within {
@@ -3357,12 +3762,12 @@ body {
 
 .ChipInput--disabled {
   background: var(--secondary-lightest);
-  border-color: var(--secondary-light);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-light);
   pointer-events: none;
 }
 
 .ChipInput--withChips {
-  padding-right: var(--spacing-20);
+  padding-right: 0;
 }
 
 .ChipInput--error {
@@ -3376,15 +3781,18 @@ body {
   flex-wrap: wrap;
 }
 
-.ChipInput-border:focus-within {
+.ChipInput--small .ChipInput-wrapper {
+  min-height: var(--spacing-60);
+}
+
+.ChipInput-border--focusRing {
   border-radius: var(--border-radius-10);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.ChipInput-border--error:focus-within {
-  outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-05);
+.ChipInput-border--error.ChipInput-border--focusRing {
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .ChipInput-input {
@@ -3428,8 +3836,9 @@ body {
 }
 
 .ChipInput-icon--small {
+  flex-shrink: 0;
+  align-self: center;
   margin-left: var(--spacing-15);
-  margin-top: var(--spacing-15);
   height: var(--spacing-30);
 }
 
@@ -3449,7 +3858,8 @@ body {
 
 .ChipInput-icon:focus,
 .ChipInput-icon:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ChoiceList {
@@ -3975,6 +4385,10 @@ body {
 
 .Dropdown-input {
   min-width: unset !important;
+  background: transparent;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  height: 36px;
 }
 
 .Dropdown-input,
@@ -3984,6 +4398,10 @@ body {
   outline: none !important;
 }
 
+.Dropdown-input:hover {
+  background-color: var(--secondary-lightest);
+}
+
 .Dropdown-section {
   display: flex;
   justify-content: space-between;
@@ -4017,6 +4435,8 @@ body {
 .Option {
   display: flex;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
+  color: var(--text);
+  cursor: pointer;
 }
 
 .Option,
@@ -4042,25 +4462,28 @@ body {
   padding-bottom: var(--spacing-15);
 }
 
-.Option--active,
-.Option-checkbox--active {
+.Option--interactive:hover,
+.Option-checkbox--interactive:hover {
   background-color: var(--secondary-lightest);
-  cursor: pointer;
 }
 
-.Option--active:hover,
-.Option-checkbox--active:hover {
-  background-color: var(--secondary-lighter);
+.Option--interactive:hover:active,
+.Option-checkbox--interactive:hover:active {
+  background-color: var(--secondary-light);
 }
 
-.Option--active:active,
-.Option-checkbox--active:active {
-  background-color: var(--secondary-light);
-  cursor: pointer;
+.Option:focus,
+.Option:focus-visible,
+.Option-checkbox:focus,
+.Option-checkbox:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
-.Option--active {
-  transition: var(--standard-productive-curve);
+.OptionWrapper:focus,
+.OptionWrapper:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Option-loading {
@@ -4071,11 +4494,17 @@ body {
   background-color: var(--primary-lightest);
 }
 
-.Option--selected:hover {
+.Option--selected:focus,
+.Option--selected:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
+}
+
+.Option--selected.Option--interactive:hover {
   background-color: var(--primary-lighter);
 }
 
-.Option--selected:active {
+.Option--selected.Option--interactive:active {
   background-color: var(--primary-lighter);
   color: var(--primary-darker);
 }
@@ -4095,6 +4524,16 @@ body {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.Option-checkIcon {
+  display: flex;
+  flex-shrink: 0;
+  align-self: center;
+  margin-left: auto;
+  padding-left: var(--spacing-20);
 }
 
 .OptionCheckbox .Checkbox-label {
@@ -4131,6 +4570,13 @@ body {
   line-height: var(--font-height);
 }
 
+@media (forced-colors: active) {
+  .Dropdown-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 .DropdownButton {
   width: 100%;
   justify-content: space-between;
@@ -4179,7 +4625,7 @@ body {
 }
 
 .DropdownButton--placeholder {
-  color: var(--text-subtle);
+  color: var(--text);
 }
 
 .DropdownButton:hover {
@@ -4187,9 +4633,11 @@ body {
   color: var(--text);
 }
 
-.DropdownButton:focus {
+.DropdownButton:focus-visible {
   background-color: var(--secondary-light);
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  box-shadow: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .DropdownButton:active,
@@ -4214,6 +4662,18 @@ body {
   border: var(--border-width-2-5) solid var(--alert);
 }
 
+.Dropzone-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .Dropzone {
   display: flex;
   align-items: center;
@@ -4394,20 +4854,58 @@ body {
   fill: var(--alert);
 }
 
+@media (forced-colors: active) {
+  .Dropzone {
+    border: var(--border-width-05) dashed ButtonText;
+    background-image: none;
+    background-color: Canvas;
+  }
+
+  .Dropzone--active {
+    border: var(--border-width-05) dashed Highlight;
+    background-image: none;
+    background-color: Canvas;
+  }
+
+  .Dropzone--error {
+    border: var(--border-width-05) dashed ButtonText;
+    background-image: none;
+  }
+
+  .Dropzone--disabled {
+    border: var(--border-width-05) dashed GrayText;
+    background-image: none;
+  }
+}
+
 .EditableChipInput {
   position: relative;
   width: 100%;
 }
+
+.EditableChipInput:focus-visible {
+  outline: none;
+}
 .EditableChipInput-default {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   padding-left: var(--spacing-30);
   border-left: var(--border-width-2-5) solid transparent;
   min-height: var(--spacing-80);
   flex-wrap: wrap;
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+}
+
+.EditableChipInput-default--small {
+  min-height: var(--spacing-60);
+  padding-left: var(--spacing-20);
 }
 
 .EditableChipInput-defaultWithChips {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   padding-left: var(--spacing-20);
@@ -4416,17 +4914,50 @@ body {
   padding-bottom: var(--spacing-2-5);
   max-width: calc(100% - 28px);
   flex-wrap: wrap;
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+}
+
+.EditableChipInput-defaultWithChips--small {
+  min-height: var(--spacing-60);
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .EditableChipInput-defaultWithChips:hover,
 .EditableChipInput-default:hover {
-  background-color: var(--secondary-lightest);
+  background-color: var(--secondary-lighter);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
+}
+
+.EditableChipInput:focus-visible .EditableChipInput-default,
+.EditableChipInput:focus-visible .EditableChipInput-defaultWithChips {
+  background: var(--white);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
 }
 
 .EditableChipInput-chipInput {
   padding-left: var(--spacing-20);
 }
 
+.EditableChipInput-chip--regular {
+  margin: var(--spacing-05);
+}
+
+.EditableChipInput-chip--small {
+  margin-left: var(--spacing-05);
+  margin-right: var(--spacing-05);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.EditableChipInput-placeholder--small {
+  padding-top: 0;
+}
+
 .EditableChipInput-actions {
   position: absolute;
   display: flex;
@@ -4439,12 +4970,65 @@ body {
   width: 100%;
 }
 
+.EditableDropdown:focus-visible {
+  outline: none;
+}
+
 .EditableDropdown-default {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   box-sizing: border-box;
   height: var(--spacing-80);
   padding-left: var(--spacing-30);
+  padding-right: var(--spacing-20);
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+  border: var(--border-width-2-5) solid transparent;
+}
+
+.EditableDropdown-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  align-items: center;
+}
+
+.EditableDropdown-text {
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text);
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+  font-weight: var(--font-weight-normal);
+}
+
+.EditableDropdown-text--subtle {
+  color: var(--text-subtle);
+}
+
+.EditableDropdown-icon {
+  visibility: hidden;
+}
+
+.EditableDropdown-default:hover .EditableDropdown-icon,
+.EditableDropdown:focus-visible .EditableDropdown-icon {
+  visibility: visible;
+}
+
+.EditableDropdown-default:hover {
+  background: var(--secondary);
+}
+
+.EditableDropdown:focus-visible .EditableDropdown-default {
+  background: var(--secondary-light);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  border-radius: var(--border-radius-10);
 }
 
 .EditableInput {
@@ -4454,6 +5038,10 @@ body {
   width: 100%;
 }
 
+.EditableInput:focus-visible {
+  outline: none;
+}
+
 .EditableInput-actions {
   position: absolute;
   display: flex;
@@ -4476,6 +5064,21 @@ body {
   white-space: nowrap;
   display: flex;
   align-items: center;
+  border-radius: var(--border-radius-10);
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  cursor: pointer;
+}
+
+.EditableInput-default:hover {
+  background: var(--secondary-lighter);
+  border-color: var(--secondary-dark);
+}
+
+.EditableInput:focus-visible .EditableInput-default {
+  background: var(--white);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  border-color: transparent;
 }
 
 .EditableInput-default--regular {
@@ -4500,6 +5103,18 @@ body {
   width: 100%;
 }
 
+.EditableInput-errorIcon--regular {
+  margin-right: var(--spacing-20);
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
+}
+
+.EditableInput-errorIcon--tiny {
+  margin-right: var(--spacing-10);
+  margin-top: var(--spacing-05);
+  margin-bottom: var(--spacing-05);
+}
+
 .EmptyState {
   display: flex;
   flex-direction: column;
@@ -4910,6 +5525,7 @@ body {
   z-index: 5;
   overflow-x: hidden;
   -ms-overflow-style: none;
+  scrollbar-width: none;
   border-right: var(--border-width-7-5) solid var(--secondary);
 }
 
@@ -4961,6 +5577,8 @@ body {
   display: flex;
   flex: 0 0 auto;
   overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   border-bottom: var(--border);
 }
 
@@ -4992,7 +5610,11 @@ body {
   flex-direction: column;
   flex-grow: 1;
   overflow-x: auto;
-  overflow-y: overlay;
+  overflow-y: auto;
+}
+
+.Grid-rowGroup {
+  display: contents;
 }
 
 .Grid-rowWrapper {
@@ -5128,12 +5750,20 @@ body {
   overflow: hidden;
 }
 
+.Grid-cell--head .Grid-cellContent:focus-visible {
+  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-focus);
+  border-radius: var(--border-radius-10);
+}
+
 .Grid-cellResize {
   position: absolute;
   right: 0;
   width: var(--spacing-10);
   cursor: ew-resize;
   height: 100%;
+  padding-right: var(--spacing-60);
+  margin-right: calc(-1 * var(--spacing-60));
+  box-sizing: content-box;
 }
 
 .Grid-cellSortIcon {
@@ -5150,6 +5780,11 @@ body {
   background: var(--primary);
 }
 
+.Grid-cellResize:focus-visible {
+  background: var(--primary);
+  outline: none;
+}
+
 .Grid-reorderHighlighter {
   position: absolute;
   height: 100%;
@@ -5369,9 +6004,10 @@ body {
   background: var(--secondary-lighter);
 }
 
-.Grid--resource .Grid-row--body:focus {
+.Grid--resource .Grid-row--body:focus-visible {
   box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--spacing-05));
 }
 
 /* Selected States */
@@ -5388,8 +6024,9 @@ body {
   background: var(--primary-lighter) !important;
 }
 
-.Grid-row--selected:focus {
-  outline: none;
+.Grid-row--selected:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--spacing-05));
   box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
 }
 
@@ -5410,9 +6047,8 @@ body {
   background: var(--secondary-lighter);
 }
 
-.Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
+.Grid--resource .Grid-row--body:focus-visible .Grid-cellWrapper--pinned {
   box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
-  outline: none;
 }
 
 /* Pinned Columns Selected State */
@@ -5429,8 +6065,7 @@ body {
   background: var(--primary-lighter) !important;
 }
 
-.Grid-row--selected:focus .Grid-cellWrapper--pinned {
-  outline: none;
+.Grid-row--selected:focus-visible .Grid-cellWrapper--pinned {
   box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
 }
 
@@ -5441,7 +6076,7 @@ body {
 
 .Grid-row--head .Grid-cellGroup--pinned-left {
   border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-right-width: 4px;
   -o-border-image: linear-gradient(
       to right,
@@ -5463,7 +6098,7 @@ body {
 
 .Grid-row--head .Grid-cellGroup--pinned-right {
   border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-left-width: 4px;
   -o-border-image: linear-gradient(
       to left,
@@ -5487,7 +6122,7 @@ body {
 
 .Grid-cellWrapper--pinned-left {
   border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-right-width: 4px;
   -o-border-image: linear-gradient(
       to right,
@@ -5509,7 +6144,7 @@ body {
 
 .Grid-cellWrapper--pinned-right {
   border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left: var(--spacing-2-5) solid rgba(224, 224, 224, 0.12);
   border-left-width: 4px;
   -o-border-image: linear-gradient(
       to left,
@@ -5581,7 +6216,7 @@ body {
 .HorizontalNav-menu--active:focus {
   background-color: var(--primary-ultra-light);
   outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-05);
+  outline-offset: var(--spacing-10);
 }
 
 .HorizontalNav-menu--active:hover {
@@ -5627,6 +6262,21 @@ body {
   opacity: var(--opacity-10);
 }
 
+@media (forced-colors: active) {
+  /* Active nav item uses box-shadow as its visible ring — replace with a real border */
+  .HorizontalNav-menu--active {
+    border: var(--border-width-2-5) solid Highlight;
+    box-shadow: none;
+  }
+
+  .HorizontalNav-menu--active:active,
+  .HorizontalNav-menu--active:focus-visible:active,
+  .HorizontalNav-menu--active:focus:active {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+}
+
 /* Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, 
  * we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px. 
  * https://google.github.io/material-design-icons/
@@ -5911,7 +6561,6 @@ body {
 
 .Input--error:focus-within {
   border-color: var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Input--error:focus-within .Input-icon--left {
@@ -6054,12 +6703,24 @@ body {
 .Link {
   text-decoration: none;
   font-weight: var(--font-weight-medium);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
+  transition: color var(--duration--fast-01) var(--standard-productive-curve),
+    border-color var(--duration--fast-01) var(--standard-productive-curve);
   box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Link {
+    transition: none;
+  }
+}
+
+.Link-text {
+  display: inline-flex;
+  vertical-align: middle;
   border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
-.Link:focus {
+.Link:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);
@@ -6085,24 +6746,42 @@ body {
   border-bottom-color: transparent;
 }
 
+.Link-text--subtle {
+  border-bottom-color: transparent;
+}
+
 .Link--default:hover {
-  border-bottom: var(--border-width-2-5) solid var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Link--subtle:hover {
-  border-bottom: var(--border-width-2-5) solid var(--inverse-light);
   color: var(--inverse-light);
 }
 
+.Link--subtle:hover .Link-text--subtle {
+  border-bottom-color: currentColor;
+}
+
 .Link--default:active {
   color: var(--primary-darker);
-  border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
 .Link--subtle:active {
   color: var(--inverse);
-  border-bottom: var(--border-width-2-5) solid transparent;
+}
+
+.Link--subtle:active .Link-text--subtle {
+  border-bottom-color: transparent;
+}
+
+.Link--button-reset {
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
 }
 
 .Link--default-disabled {
@@ -6115,6 +6794,39 @@ body {
   pointer-events: none;
 }
 
+.Link-infoIconWrapper {
+  display: inline-flex;
+  vertical-align: middle;
+  transform: translateY(calc(-1 * var(--spacing-15)));
+  margin-left: var(--spacing-2-5);
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+}
+
+.Link-infoIcon {
+  color: var(--text-subtle);
+  pointer-events: none;
+}
+
+.Link-infoIcon--default {
+  color: var(--primary);
+}
+
+.Link-infoIcon--subtle {
+  color: var(--inverse-light);
+}
+
+.Link-tooltip--disabled {
+  pointer-events: auto;
+  cursor: not-allowed;
+}
+
 .LinkButton {
   display: flex;
   flex-direction: row;
@@ -6165,7 +6877,8 @@ body {
   font-size: var(--font-size-s);
 }
 
-.LinkButton--default {
+.LinkButton--default,
+.LinkButton--default-disabled {
   color: var(--primary);
 }
 
@@ -6177,21 +6890,25 @@ body {
   color: var(--primary-darker);
 }
 
-.LinkButton--default:focus,
-.LinkButton--default:focus-visible {
+.LinkButton--default:focus-visible,
+.LinkButton--default-disabled:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.LinkButton--default:disabled {
+.LinkButton--default-disabled {
   cursor: not-allowed;
-  pointer-events: none;
   color: var(--primary-lighter);
 }
 
+.LinkButton-infoIcon--default {
+  color: var(--text-link);
+}
+
 /* Subtle Appearance */
 
-.LinkButton--subtle {
+.LinkButton--subtle,
+.LinkButton--subtle-disabled {
   color: var(--inverse-lighter);
 }
 
@@ -6203,18 +6920,85 @@ body {
   color: var(--inverse);
 }
 
-.LinkButton--subtle:focus,
-.LinkButton--subtle:focus-visible {
+.LinkButton--subtle:focus-visible,
+.LinkButton--subtle-disabled:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.LinkButton--subtle:disabled {
+.LinkButton--subtle-disabled {
   cursor: not-allowed;
-  pointer-events: none;
   color: var(--inverse-lightest);
 }
 
+.LinkButton-infoIcon--subtle {
+  color: var(--inverse-light);
+}
+
+.LinkButton-infoIconWrapper {
+  position: absolute;
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-30));
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: none;
+  background: transparent;
+  pointer-events: none;
+}
+
+.LinkButton-infoIconWrapper--tiny {
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-30));
+}
+
+.LinkButton-infoIconWrapper--regularIcon {
+  top: 0px;
+  right: calc(-1 * var(--spacing-05));
+}
+
+.LinkButton-infoIconWrapper--tinyIcon {
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-05));
+}
+
+.LinkButton-withInfo {
+  padding-right: var(--spacing-20);
+}
+
+.LinkButton-infoIconWrapper--withChildren {
+  right: calc(-1 * var(--spacing-30) + var(--spacing-20));
+}
+
+.LinkButton-infoIconWrapper--iconOnly {
+  right: calc(-1 * var(--spacing-10) + var(--spacing-20));
+}
+
+.LinkButton-infoIconWrapper--tinyIcon {
+  right: calc(-1 * var(--spacing-05) + var(--spacing-20));
+}
+
+.LinkButton-infoIcon {
+  color: inherit;
+}
+
+.LinkButton-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .List {
   display: flex;
   flex-grow: 1;
@@ -6281,7 +7065,6 @@ body {
   background-color: var(--secondary-lightest);
 }
 
-.Listbox-item--option:focus,
 .Listbox-item--option:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -6292,14 +7075,30 @@ body {
 }
 
 .Listbox-item--selected {
+  position: relative;
   background: rgba(214, 238, 255, 0.48);
 }
 
+.Listbox-item--selected::before {
+  content: '';
+  position: absolute;
+  top: var(--spacing-10);
+  left: var(--spacing-10);
+  width: var(--spacing-20);
+  height: var(--spacing-20);
+  background-color: var(--primary);
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+}
+
+.Listbox-item--tight.Listbox-item--selected::before {
+  top: var(--spacing-05);
+  left: var(--spacing-05);
+}
+
 .Listbox-item--selected:hover {
   background: rgba(139, 202, 254, 0.48);
 }
 
-.Listbox-item--selected:focus,
 .Listbox-item--selected:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -6319,7 +7118,6 @@ body {
   background-color: var(--secondary-lightest);
 }
 
-.Listbox-item--resource:focus,
 .Listbox-item--resource:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
@@ -6330,12 +7128,28 @@ body {
 }
 
 .Listbox-item--activated {
+  position: relative;
   background: var(--primary-lightest);
 }
 
+.Listbox-item--activated::before {
+  content: '';
+  position: absolute;
+  top: var(--spacing-10);
+  left: var(--spacing-10);
+  width: var(--spacing-20);
+  height: var(--spacing-20);
+  background-color: var(--primary);
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+}
+
+.Listbox-item--tight.Listbox-item--activated::before {
+  top: var(--spacing-05);
+  left: var(--spacing-05);
+}
+
 /* Listbox type - description  */
 
-.Listbox-item--description:focus,
 .Listbox-item--description:focus-visible {
   outline: none;
 }
@@ -6349,22 +7163,96 @@ body {
 
 /* Listbox type - draggable  */
 
-.Listbox-item--draggable:focus {
+.Listbox-item--draggable:hover {
+  background-color: var(--secondary-lightest);
+}
+
+.Listbox-item--draggable:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: calc(-1 * var(--border-width-05));
 }
 
-.Listbox-item--drag-icon {
-  cursor: grab;
-  margin-right: var(--spacing-20);
+.Listbox-item--drag-icon {
+  cursor: grab;
+  padding: var(--spacing-10);
+  margin-right: calc(var(--spacing-20) - var(--spacing-10));
+  margin-left: calc(-1 * var(--spacing-10));
+  border-radius: var(--border-radius-10);
+  transition: background-color var(--duration--moderate-01) var(--standard-productive-curve),
+    color var(--duration--moderate-01) var(--standard-productive-curve),
+    box-shadow var(--duration--moderate-01) var(--standard-productive-curve);
+}
+
+.Listbox-item--drag-icon:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
+.Listbox-item--drag-icon:hover {
+  background-color: var(--secondary);
+  color: var(--inverse);
+}
+
+.Listbox-item--drag-icon:active {
+  background-color: var(--secondary-dark);
+  color: var(--primary);
+}
+
+/* Drag and reorder interaction states */
+
+.Listbox-item--sticky-picked,
+.Listbox-item--drag-picked {
+  background-color: var(--text-white);
+  box-shadow: var(--shadow-l);
+  rotate: 0.5deg;
+  cursor: grabbing;
+  z-index: 1000;
+  position: relative;
+}
+
+.Listbox-item--sticky-picked .Listbox-item--selected,
+.Listbox-item--drag-picked .Listbox-item--selected {
+  background-color: rgba(214, 238, 255, 0.48);
+}
+
+.Listbox-item--sticky-picked .Listbox-item--drag-icon {
+  background-color: var(--primary);
+  color: var(--text-white);
+}
+
+.Listbox-item--drag-picked .Listbox-item--drag-icon {
+  background-color: var(--primary-ultra-light);
+  color: var(--primary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
 }
 
-.Listbox-item--drag-icon:hover {
-  color: var(--inverse);
+.Listbox-aria-live {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.Listbox-item--drag-icon:active {
-  color: var(--primary);
+@media (forced-colors: active) {
+  .Listbox-item--description:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: calc(-1 * var(--border-width-05));
+  }
+
+  .Listbox-item--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .Listbox-item--selected::before,
+  .Listbox-item--activated::before {
+    background-color: Highlight;
+  }
 }
 
 /* MdsGrid */
@@ -6829,12 +7717,12 @@ body {
 
 .Message--alert {
   border-color: var(--alert);
-  background-color: rgba(214, 36, 0, 0.04);
+  background-color: rgba(189, 28, 0, 0.04);
 }
 
 .Message--success {
   border-color: var(--success);
-  background-color: rgba(0, 122, 14, 0.04);
+  background-color: rgba(0, 128, 0, 0.04);
 }
 
 .Message--info {
@@ -6844,7 +7732,7 @@ body {
 
 .Message--warning {
   border-color: var(--accent1);
-  background-color: rgba(229, 111, 0, 0.04);
+  background-color: rgba(189, 91, 0, 0.04);
 }
 
 .Message-icon--regular {
@@ -7011,25 +7899,21 @@ body {
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--border-radius-10);
-  border: var(--border);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
   background: var(--white);
-  overflow: hidden;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MetricInput--regular {
   height: var(--spacing-80);
-  padding-left: var(--spacing-30);
 }
 
 .MetricInput--large {
   height: 40px;
-  padding-left: var(--spacing-40);
 }
 
 .MetricInput--small {
   height: var(--spacing-60);
-  padding-left: var(--spacing-20);
 }
 
 .MetricInput:hover {
@@ -7039,9 +7923,12 @@ body {
 
 .MetricInput:focus-within {
   background: var(--white);
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
+}
+
+.MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
   outline: var(--border-width-05) solid var(--primary-focus);
-  outline-offset: var(--spacing-2-5);
+  outline-offset: var(--spacing-05);
 }
 
 .MetricInput:focus-within .MetricInput-icon {
@@ -7050,13 +7937,13 @@ body {
 
 .MetricInput--disabled {
   background: var(--secondary-lightest);
-  border-color: var(--secondary-light);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary-light);
   pointer-events: none;
 }
 
 .MetricInput--readOnly {
   background: var(--secondary-lightest);
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
   pointer-events: none;
 }
 
@@ -7067,19 +7954,46 @@ body {
 .MetricInput--error,
 .MetricInput--error:hover {
   background: var(--white);
-  border-color: var(--alert);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
 }
 
 .MetricInput--error:focus-within {
-  border-color: var(--secondary);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
+}
+
+.MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
   outline: var(--border-width-05) solid var(--alert);
-  outline-offset: var(--spacing-2-5);
+  outline-offset: var(--spacing-05);
 }
 
 .MetricInput--error:focus-within .MetricInput-icon {
   color: var(--alert);
 }
 
+/* Content wrapper — holds icon, prefix, input, suffix */
+.MetricInput-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.MetricInput-content--regular {
+  padding: var(--spacing-15) var(--spacing-15);
+  gap: var(--spacing-05);
+}
+
+.MetricInput-content--large {
+  padding: var(--spacing-20) var(--spacing-15);
+  gap: var(--spacing-15);
+}
+
+.MetricInput-content--small {
+  padding: var(--spacing-10) var(--spacing-15);
+  gap: var(--spacing-05);
+}
+
 .MetricInput-input {
   display: flex;
   width: 100%;
@@ -7151,23 +8065,14 @@ body {
   margin: 0;
 }
 
-.MetricInput-arrowIcons {
-  border-left: var(--border);
-  box-sizing: border-box;
-  border-radius: 0;
-  background: transparent;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
+/* Arrow buttons (decrement on left, increment on right) */
 .MetricInput-arrowButton {
-  height: 50%;
-  border: none;
+  flex-shrink: 0;
+  align-self: stretch;
+  width: var(--spacing-60);
   background: var(--secondary-light);
   color: var(--inverse);
+  border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7177,7 +8082,16 @@ body {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  overflow: hidden;
+}
+
+.MetricInput-arrowButton--left {
+  border-right: var(--border);
+  border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
+}
+
+.MetricInput-arrowButton--right {
+  border-left: var(--border);
+  border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .MetricInput-arrowButton:hover {
@@ -7190,16 +8104,44 @@ body {
 
 .MetricInput-arrowButton:focus {
   outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
-.MetricInput-arrowIcons--small,
-.MetricInput-arrowIcons--regular {
-  width: 20px;
+.MetricInput-arrowButton:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
-.MetricInput-arrowIcons--large {
-  width: var(--spacing-60);
+@media (forced-colors: active) {
+  /* box-shadow is stripped — restore a real border for the wrapper boundary */
+  .MetricInput {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .MetricInput--disabled {
+    border-color: GrayText;
+  }
+
+  /* Wrapper focus rings */
+  .MetricInput:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  .MetricInput--error:focus-within:not(:has(.MetricInput-arrowButton:focus-visible)) {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  /* Arrow button states */
+  .MetricInput-arrowButton:disabled {
+    color: GrayText;
+  }
+
+  .MetricInput-arrowButton:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
 }
 
 @keyframes modal-open {
@@ -7293,6 +8235,22 @@ body {
   padding-bottom: var(--spacing-40);
 }
 
+.Modal:focus {
+  outline: none;
+}
+
+.Modal-header [tabindex='-1']:focus {
+  outline: none;
+}
+
+@media (forced-colors: active) {
+  /* box-shadow is the only visual boundary; add a real border so the modal is visible */
+  .Modal {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}
+
 /* Navigation */
 
 .Navigation {
@@ -7411,6 +8369,22 @@ body {
   border-top: var(--border);
 }
 
+.Navigation-footerButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.Navigation-footerButton:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
 .Navigation--collapsed .Navigation-menuIcon--footer {
   transform: rotate(180deg);
 }
@@ -8187,7 +9161,7 @@ body {
   outline: none;
 }
 
-.SegmentedControl-segment:focus-visible:not(.SegmentedControl-segment--selected) {
+.SegmentedControl-segment:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);
@@ -8406,7 +9380,7 @@ body {
   color: var(--text);
 }
 
-.Select-trigger--filled:focus {
+.Select-trigger--filled:focus-visible {
   background-color: var(--secondary-light);
 }
 
@@ -8511,10 +9485,11 @@ body {
   cursor: pointer;
   border-radius: var(--border-radius-full);
   padding: var(--spacing-05);
+  border: none;
+  background: transparent;
 }
 
-.Select-crossButton:focus-visible,
-.Select-crossButton:focus {
+.Select-crossButton:focus-visible {
   outline: var(--spacing-05) solid var(--primary-focus);
 }
 
@@ -8557,6 +9532,13 @@ body {
   border: var(--border-width-2-5) solid var(--alert) !important;
 }
 
+@media (forced-colors: active) {
+  .Select-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}
+
 .Selection-card {
   border-radius: var(--border-radius-10);
   position: relative;
@@ -8657,6 +9639,44 @@ body {
   opacity: var(--opacity-10);
 }
 
+@media (forced-colors: active) {
+  /* All states use inset box-shadow as the sole border — replace with real borders */
+  .Selection-card--default,
+  .Selection-card--default:hover,
+  .Selection-card--default:active,
+  .Selection-card--default-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  /* Interactive selected states — use Highlight to signal selection */
+  .Selection-card--selected,
+  .Selection-card--selected:hover,
+  .Selection-card--selected:active {
+    border: var(--border-width-2-5) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Selection-card--selected-disabled {
+    border: var(--border-width-2-5) solid GrayText;
+    box-shadow: none;
+  }
+
+  .Selection-card--default:focus,
+  .Selection-card--default:focus-visible,
+  .Selection-card--selected:focus,
+  .Selection-card--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+    box-shadow: none;
+  }
+
+  /* Disabled: suppress the focus indicator */
+  .Selection-card--disabled {
+    outline: none;
+  }
+}
+
 @keyframes sidesheet-open {
   from {
     right: -100%;
@@ -8768,6 +9788,22 @@ body {
   animation: fadeIn var(--duration--fast-02) var(--standard-expressive-curve);
 }
 
+.Sidesheet:focus {
+  outline: none;
+}
+
+.Sidesheet-header [tabindex='-1']:focus {
+  outline: none;
+}
+
+@media (forced-colors: active) {
+  /* box-shadow is the only visual boundary; add a real left border so the panel edge is visible */
+  .Sidesheet {
+    border-left: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}
+
 .Slider {
   width: 100%;
 }
@@ -8905,6 +9941,27 @@ body {
   box-shadow: none;
 }
 
+@media (forced-colors: active) {
+  /* Handle elevation comes from box-shadow only — add a real border so it stays visible */
+  .Slider-handle {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  /* Restore focus ring on the handle (outline:none is set unconditionally) */
+  .Slider-handle:focus,
+  .Slider-handle:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+  }
+
+  /* Filled portion of the track */
+  .Slider-progress--inRange {
+    forced-color-adjust: none;
+    background: Highlight;
+  }
+}
+
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -9238,6 +10295,45 @@ body {
   border-color: transparent;
 }
 
+@media (forced-colors: active) {
+  .Switch-wrapper {
+    outline: var(--border-width-2-5) solid ButtonText;
+    outline-offset: calc(-1 * var(--border-width-2-5));
+    box-shadow: none;
+  }
+
+  /* Checked (enabled) track: use Highlight to distinguish on-state */
+  .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled) {
+    background-color: Highlight;
+  }
+
+  .Switch-wrapper--checkedDisabled {
+    background-color: ButtonFace;
+    outline-color: GrayText;
+  }
+
+  /* Thumb: box-shadow is removed in forced-colors mode — ensure the existing border is visible */
+  .Switch-wrapper:before {
+    box-shadow: none;
+    border-color: ButtonText;
+  }
+
+  /* In the checked (enabled) state the thumb border is transparent — make it contrast against the track */
+  .Switch-wrapper--checked:not(.Switch-wrapper--checkedDisabled):before {
+    border-color: HighlightText;
+  }
+
+  /* Checked-disabled thumb: use GrayText so it reads as disabled */
+  .Switch-wrapper--checkedDisabled:before {
+    border-color: GrayText;
+  }
+
+  /* Unchecked-disabled thumb */
+  .Switch-wrapper--disabled:before {
+    border-color: GrayText;
+  }
+}
+
 .Table {
   display: flex;
   flex-grow: 1;
@@ -9268,8 +10364,9 @@ body {
 }
 
 .Table-Header-Label--hide {
-  animation: fadeOut var(--duration--fast-02) var(--exit-productive-curve);
+  animation: tableHeaderFadeOut var(--duration--fast-02) var(--exit-productive-curve);
   animation-fill-mode: forwards;
+  pointer-events: none;
 }
 
 .Table-Header-Label--show {
@@ -9277,6 +10374,36 @@ body {
   animation-fill-mode: forwards;
 }
 
+@keyframes tableHeaderFadeOut {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Table-Header-Label--hide,
+  .Table-Header-Label--show {
+    animation-duration: 0.001ms;
+  }
+}
+
+.Table-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* tabs */
 
 .TabsWrapper {
@@ -9462,6 +10589,26 @@ body {
   box-sizing: border-box;
 }
 
+@media (forced-colors: active) {
+  /* Dismissible tab close icons have outline:none unconditionally — restore focus ring in forced-colors mode */
+  .DismissibleRegularTab-icon--right:focus-visible,
+  .DismissibleSmallTab-icon--right:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+  }
+
+  .Tab--active::after {
+    background-color: transparent;
+    border-top: var(--spacing-05) solid Highlight;
+    box-sizing: border-box;
+  }
+
+  /* Disabled tab pills use opacity — use GrayText instead */
+  .Tab-pills--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+}
+
 /* Textarea */
 
 .Textarea {
@@ -9531,6 +10678,11 @@ body {
   line-height: var(--font-height-s);
 }
 
+.TimePicker-trigger {
+  width: calc(var(--spacing-40) * 20);
+  min-width: calc(var(--spacing-40) * 16);
+}
+
 /* toast */
 
 .Toast {
@@ -9588,6 +10740,8 @@ body {
   padding-left: var(--spacing-10);
   height: var(--spacing-60);
   box-sizing: initial;
+  background: transparent;
+  border: none;
 }
 
 .Toast-icon--info,
@@ -9601,6 +10755,13 @@ body {
   color: var(--warning-darker);
 }
 
+.Toast-closeButton {
+  background: transparent;
+  border: none;
+  color: inherit;
+  padding: 0;
+}
+
 .Toast-close-icon:focus,
 .Toast-close-icon:focus-visible {
   outline: none;
@@ -9721,6 +10882,16 @@ body {
   color: var(--text-white);
 }
 
+@media (forced-colors: active) {
+  /* Close icon focus ring is conveyed via box-shadow only — replace with outline */
+  .Toast-close-icon:focus,
+  .Toast-close-icon:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    outline-offset: var(--spacing-05);
+    box-shadow: none;
+  }
+}
+
 .Tooltip {
   max-width: var(--spacing-640);
   padding: var(--spacing-10) var(--spacing-20);
@@ -9738,6 +10909,7 @@ body {
 }
 
 .Tooltip-text {
+  white-space: pre-wrap;
   word-break: break-word;
   -webkit-hyphens: auto;
           hyphens: auto;
@@ -9954,20 +11126,24 @@ body {
   background: var(--secondary-dark);
 }
 
-.MenuItem:focus {
+.MenuItem:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
-.MenuItem--expanded:focus {
+.MenuItem:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.MenuItem--expanded:focus-visible {
   clip-path: inset(-6px -6px -6px 0);
 }
 
-.MenuItem--expandedRounded:focus {
+.MenuItem--expandedRounded:focus-visible {
   clip-path: inset(-6px);
 }
 
-.MenuItem--disabled:focus {
+.MenuItem--disabled:focus-visible {
   outline: none;
 }
 
@@ -10010,11 +11186,15 @@ body {
   color: var(--primary-darker);
 }
 
-.MenuItem--active:focus {
+.MenuItem--active:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
 
+.MenuItem--active:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .MenuItem--rounded {
   border-radius: var(--border-radius-40);
 }
@@ -10057,41 +11237,21 @@ body {
   display: flex;
   align-items: center;
   color: var(--inverse);
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.15) 0%,
-    rgba(231, 56, 79, 0.24) 28%,
-    rgba(240, 125, 0, 0.15) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIButton:hover {
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.2) 0%,
-    rgba(231, 56, 79, 0.32) 28%,
-    rgba(240, 125, 0, 0.2) 100%
-  );
+  background: linear-gradient(116deg, #fbe1c9 14.17%, #f8c5c6 50.06%, #f9cbdc 85.01%);
 }
 
 .AIButton:active {
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.31) 0%,
-    rgba(231, 56, 79, 0.48) 28%,
-    rgba(240, 125, 0, 0.31) 100%
-  );
+  background: linear-gradient(106deg, #fad1ae 20.06%, #f5aea9 44.48%, #f4a0ad 67.83%, #f6b3ce 86.55%);
 }
 
 .AIButton:disabled {
   cursor: not-allowed;
   opacity: var(--opacity-10);
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.15) 0%,
-    rgba(231, 56, 79, 0.24) 28%,
-    rgba(240, 125, 0, 0.15) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIButton:focus {
@@ -10147,30 +11307,16 @@ body {
   width: -moz-fit-content;
   width: fit-content;
   border: 0;
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  position: relative;
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip:hover {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.32) 0%,
-    rgba(231, 56, 79, 0.32) 19.79%,
-    rgba(240, 125, 0, 0.32) 100%
-  );
+  background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);
 }
 
 .AIChip:active {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.48) 0%,
-    rgba(231, 56, 79, 0.48) 19.79%,
-    rgba(240, 125, 0, 0.48) 100%
-  );
+  background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);
 }
 
 .AIChip:focus,
@@ -10200,12 +11346,7 @@ body {
 /* Disabled Chip */
 
 .AIChip--disabled {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip-icon--disabled {
@@ -10220,12 +11361,13 @@ body {
 
 .AIChip:disabled {
   cursor: not-allowed;
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
+}
+
+.AIChip-AIIcon {
+  position: absolute;
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-05));
 }
 
 .AIIconButton {
@@ -10250,22 +11392,12 @@ body {
 }
 
 .AIIconButton:hover {
-  background: linear-gradient(
-    315deg,
-    rgba(227, 28, 121, 0.2) 0%,
-    rgba(231, 56, 79, 0.32) 19.79%,
-    rgba(240, 125, 0, 0.32) 100%
-  );
+  background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);
   color: var(--secondary) !important;
 }
 
 .AIIconButton:active {
-  background: linear-gradient(
-    315deg,
-    rgba(227, 28, 121, 0.31) 0%,
-    rgba(231, 56, 79, 0.48) 19.79%,
-    rgba(240, 125, 0, 0.48) 100%
-  );
+  background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);
   color: var(--secondary-dark) !important;
 }
 
@@ -12511,6 +13643,10 @@ body {
   white-space: pre;
 }
 
+.white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .bottom-0 {
   bottom: 0;
 }