@innovaccer/design-system 5.0.0-21 → 5.0.0-23

package/css/dist/index.css

@@ -1,67 +1,333 @@
-/**** Colors ****/
+/**** Color Primitives ****/
 :root {
-  --haldi: #ffc208;
-  --haldi-dark: #b78707;
-  --haldi-darker: #6b4a06;
-  --haldi-light: #ffd462;
-  --haldi-lighter: #ffe597;
-  --haldi-lightest: #fff5c7;
-  --jal: #0070dd;
-  --jal-dark: #00509f;
-  --jal-darker: #003365;
-  --jal-light: #4f9de7;
-  --jal-lighter: #97c5f0;
-  --jal-lightest: #dcecf9;
-  --jamun: #7a53b2;
-  --jamun-dark: #644491;
-  --jamun-darker: #4e3572;
-  --jamun-light: #9d7ec6;
-  --jamun-lighter: #bfaada;
-  --jamun-lightest: #e0d8ee;
-  --mirch: #d93737;
-  --mirch-dark: #9c2828;
-  --mirch-darker: #631919;
-  --mirch-light: #eb776c;
-  --mirch-lighter: #f7ada5;
-  --mirch-lightest: #f9e2e2;
-  --neel: #3d51d4;
-  --neel-dark: #2c3a98;
-  --neel-darker: #1c2561;
-  --neel-light: #7583e1;
-  --neel-lighter: #abb4ed;
-  --neel-lightest: #e2e5f9;
-  --neem: #2ea843;
-  --neem-dark: #227934;
-  --neem-darker: #154d26;
-  --neem-light: #71c077;
-  --neem-lighter: #a5d8aa;
-  --neem-lightest: #d7efdf;
-  --night: #1f1f1f;
-  --night-light: #494949;
-  --night-lighter: #707070;
-  --night-lightest: #a6a6a6;
-  --nimbu: #82c91e;
-  --nimbu-dark: #578715;
-  --nimbu-darker: #304a0b;
-  --nimbu-light: #a6d763;
-  --nimbu-lighter: #c6e599;
-  --nimbu-lightest: #e3f3ce;
+  /* Blue */
+  --color-blue-100: #f0f9ff;
+  --color-blue-200: #d6eeff;
+  --color-blue-300: #c2e4ff;
+  --color-blue-400: #a8d8ff;
+  --color-blue-500: #8bcafe;
+  --color-blue-600: #6fb7fb;
+  --color-blue-700: #4fa3f8;
+  --color-blue-800: #2e8ef5;
+  --color-blue-900: #0a74f5;
+  --color-blue-1000: #0060d6;
+  --color-blue-1100: #0051ad;
+  --color-blue-1200: #003e85;
+  --color-blue-1300: #003066;
+  --color-blue-1400: #002147;
+  --color-blue-1000-4a: rgba(0, 96, 214, 0.04);
+  --color-blue-1000-12a: rgba(0, 96, 214, 0.12);
+  --color-blue-1000-16a: rgba(0, 96, 214, 0.16);
+  --color-blue-200-48a: rgba(214, 238, 255, 0.48);
+  --color-blue-500-48a: rgba(139, 202, 254, 0.48);
+  --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);
+
+  /* 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);
+
+  /* Yellow */
+  --color-yellow-100: #fff9e5;
+  --color-yellow-200: #fff5d6;
+  --color-yellow-300: #fff0c2;
+  --color-yellow-400: #ffe9a8;
+  --color-yellow-500: #fee18b;
+  --color-yellow-600: #fbd86f;
+  --color-yellow-700: #f8cd4f;
+  --color-yellow-800: #f5c32e;
+  --color-yellow-900: #f5ba0a;
+  --color-yellow-1000: #d6a100;
+  --color-yellow-1100: #ad8200;
+  --color-yellow-1200: #856300;
+  --color-yellow-1300: #664d00;
+  --color-yellow-1400: #473600;
+  --color-yellow-900-4a: rgba(245, 186, 10, 0.04);
+  --color-yellow-900-16a: rgba(245, 186, 10, 0.16);
+  --color-yellow-1000-16a: rgba(214, 161, 0, 0.16);
+  --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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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);
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* 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;
+
+  /* Gray */
+  --color-gray-100: #f7f7f7;
+  --color-gray-200: #ebebeb;
+  --color-gray-300: #e0e0e0;
+  --color-gray-400: #d4d4d4;
+  --color-gray-500: #c4c4c4;
+  --color-gray-600: #b5b5b5;
+  --color-gray-700: #a3a3a3;
+  --color-gray-800: #858585;
+  --color-gray-900: #636363;
+  --color-gray-1000: #575757;
+  --color-gray-1100: #424242;
+  --color-gray-1200: #333333;
+  --color-gray-1300: #242424;
+  --color-gray-1400: #1a1a1a;
+  --color-gray-100-40a: rgba(247, 247, 247, 0.4);
+  --color-gray-400-16a: rgba(212, 212, 212, 0.16);
+  --color-gray-1400-16a: rgba(26, 26, 26, 0.16);
+  --color-gray-1400-48a: rgba(26, 26, 26, 0.48);
+  --color-gray-1400-64a: rgba(26, 26, 26, 0.64);
+  --color-gray-1400-80a: rgba(26, 26, 26, 0.8);
+
+  /* Defaults */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-white-48a: rgba(255, 255, 255, 0.48);
+  --color-white-80a: rgba(255, 255, 255, 0.8);
+
+  /**** Semantic Colors (mapped to primitives) ****/
+
+  /* Warning (Yellow) */
+  --haldi: var(--color-yellow-900);
+  --haldi-dark: var(--color-yellow-1100);
+  --haldi-darker: var(--color-yellow-1300);
+  --haldi-light: var(--color-yellow-700);
+  --haldi-lighter: var(--color-yellow-500);
+  --haldi-lightest: var(--color-yellow-200);
+
+  /* Primary (Blue) */
+  --jal: var(--color-blue-1000);
+  --jal-dark: var(--color-blue-1200);
+  --jal-darker: var(--color-blue-1300);
+  --jal-light: var(--color-blue-700);
+  --jal-lighter: var(--color-blue-500);
+  --jal-lightest: var(--color-blue-200);
+
+  /* Accent 2 (Violet) */
+  --jamun: var(--color-violet-1000);
+  --jamun-dark: var(--color-violet-1200);
+  --jamun-darker: var(--color-violet-1400);
+  --jamun-light: var(--color-violet-700);
+  --jamun-lighter: var(--color-violet-500);
+  --jamun-lightest: var(--color-violet-200);
+
+  /* Alert (Red) */
+  --mirch: var(--color-red-1000);
+  --mirch-dark: var(--color-red-1200);
+  --mirch-darker: var(--color-red-1300);
+  --mirch-light: var(--color-red-700);
+  --mirch-lighter: var(--color-red-500);
+  --mirch-lightest: var(--color-red-200);
+
+  /* Accent 3 (Indigo) */
+  --neel: var(--color-indigo-1000);
+  --neel-dark: var(--color-indigo-1200);
+  --neel-darker: var(--color-indigo-1400);
+  --neel-light: var(--color-indigo-700);
+  --neel-lighter: var(--color-indigo-500);
+  --neel-lightest: var(--color-indigo-200);
+
+  /* Success (Green) */
+  --neem: var(--color-green-1000);
+  --neem-dark: var(--color-green-1200);
+  --neem-darker: var(--color-green-1300);
+  --neem-light: var(--color-green-700);
+  --neem-lighter: var(--color-green-500);
+  --neem-lightest: var(--color-green-200);
+
+  /* Neutral (Gray) */
+  --night: var(--color-gray-1400);
+  --night-light: var(--color-gray-1100);
+  --night-lighter: var(--color-gray-900);
+  --night-lightest: var(--color-gray-700);
+
+  /* Accent 4 (Lime) */
+  --nimbu: var(--color-lime-900);
+  --nimbu-dark: var(--color-lime-1100);
+  --nimbu-darker: var(--color-lime-1300);
+  --nimbu-light: var(--color-lime-700);
+  --nimbu-lighter: var(--color-lime-500);
+  --nimbu-lightest: var(--color-lime-200);
+
+  /* Shadows */
   --shadow-0: #ffffff;
   --shadow-10: #ffffff;
   --shadow-20: #ffffff;
   --shadow-30: #ffffff;
-  --stone: #d5d5d5;
-  --stone-dark: #c5c5c5;
-  --stone-light: #e5e5e5;
-  --stone-lighter: #ececec;
-  --stone-lightest: #f4f4f4;
-  --tawak: #f07d00;
-  --tawak-dark: #b35f13;
-  --tawak-darker: #743208;
-  --tawak-light: #feac5f;
-  --tawak-lighter: #ffc998;
-  --tawak-lightest: #fde6ce;
-  --white: #ffffff;
+
+  /* Secondary (Gray) */
+  --stone: var(--color-gray-400);
+  --stone-dark: var(--color-gray-500);
+  --stone-light: var(--color-gray-300);
+  --stone-lighter: var(--color-gray-200);
+  --stone-lightest: var(--color-gray-100);
+
+  /* Accent 1 (Orange) */
+  --tawak: var(--color-orange-1000);
+  --tawak-dark: var(--color-orange-1200);
+  --tawak-darker: var(--color-orange-1300);
+  --tawak-light: var(--color-orange-700);
+  --tawak-lighter: var(--color-orange-500);
+  --tawak-lightest: var(--color-orange-200);
+
+  --white: var(--color-white);
 
   /**** Fonts ****/
 } /* close :root */
@@ -138,37 +404,41 @@
   --accent4-lightest: var(--nimbu-lightest);
   --inverse-lightest: var(--night-lightest);
 
+  /* Focus */
+  --primary-focus: var(--primary-dark);
+  --inverse-focus: var(--night);
+
   /* Ultra Light */
-  --primary-ultra-light: #eef6fc;
-  --success-ultra-light: #ecf7f0;
-  --alert-ultra-light: #fcf1f1;
-  --warning-ultra-light: #fffae4;
-  --accent1-ultra-light: #fef3e7;
-  --accent2-ultra-light: #f0ecf7;
-  --accent3-ultra-light: #f1f3fc;
-  --accent4-ultra-light: #f2f9e7;
+  --primary-ultra-light: var(--color-blue-100);
+  --success-ultra-light: var(--color-green-100);
+  --alert-ultra-light: var(--color-red-100);
+  --warning-ultra-light: var(--color-yellow-100);
+  --accent1-ultra-light: var(--color-orange-100);
+  --accent2-ultra-light: var(--color-violet-100);
+  --accent3-ultra-light: var(--color-indigo-100);
+  --accent4-ultra-light: var(--color-lime-100);
 
   /* Avatar specific color for the time being */
-  --primary-300: #c9e1f5;
-  --success-300: #caeacd;
-  --alert-300: #fad1cd;
-  --warning-300: #ffebad;
-  --accent1-300: #fcd9b6;
-  --accent2-300: #d7cae8;
-  --accent3-300: #cbd1f5;
-  --accent4-300: #d3ebb2;
+  --primary-300: var(--color-blue-300);
+  --success-300: var(--color-green-300);
+  --alert-300: var(--color-red-300);
+  --warning-300: var(--color-yellow-300);
+  --accent1-300: var(--color-orange-300);
+  --accent2-300: var(--color-violet-300);
+  --accent3-300: var(--color-indigo-300);
+  --accent4-300: var(--color-lime-300);
 
   /* shadow */
-  --primary-shadow: rgba(0, 112, 221, 0.16);
-  --secondary-shadow: rgba(213, 213, 213, 0.16);
-  --success-shadow: rgba(46, 168, 67, 0.16);
-  --alert-shadow: rgba(217, 55, 55, 0.16);
-  --warning-shadow: rgba(255, 194, 8, 0.16);
-  --accent1-shadow: rgba(240, 125, 0, 0.16);
-  --accent2-shadow: rgba(122, 83, 178, 0.16);
-  --accent3-shadow: rgba(61, 81, 212, 0.16);
-  --accent4-shadow: rgba(130, 201, 30, 0.16);
-  --inverse-shadow: rgba(31, 31, 31, 0.16);
+  --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);
+  --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);
+  --inverse-shadow: rgba(26, 26, 26, 0.16);
 
   /* Text colors */
   --text: var(--night);
@@ -571,20 +841,20 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #c5c5c5;
+  background: var(--secondary-dark);
   border-radius: 8px;
   border: 2px solid transparent;
   background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #a6a6a6;
+  background: var(--inverse-lightest);
   border: 2px solid transparent;
   background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: #707070;
+  background: var(--inverse-lighter);
   border: 2px solid transparent;
   background-clip: content-box;
 }
@@ -598,6 +868,7 @@ body {
 .Text--small {
   font-size: var(--font-size-s);
   line-height: var(--font-height-normal);
+  font-weight: var(--font-weight-medium);
 }
 
 .Text--regular {
@@ -804,7 +1075,7 @@ body {
 
 .ActionButton:focus-visible,
 .ActionButton:focus {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .ActionButton:hover {
@@ -832,9 +1103,8 @@ body {
 
 .ActionCard--default:focus,
 .ActionCard--default:focus-visible {
-  outline: none;
-  border: var(--border-width-2-5) solid var(--secondary-dark);
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ActionCard--default:active {
@@ -874,10 +1144,28 @@ body {
   position: relative;
 }
 
-.Avatar--default:focus,
-.Avatar--default:focus-visible {
-  outline: 3px solid var(--primary-shadow);
-  outline-offset: 3px;
+.Avatar-wrapper:has(.Avatar:focus-visible)::after {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--spacing-20));
+  bottom: calc(-1 * var(--spacing-20));
+  left: calc(-1 * var(--spacing-10));
+  right: calc(-1 * var(--spacing-10));
+  border: var(--border-width-05) solid var(--primary-focus);
+  border-radius: var(--border-radius-10);
+  pointer-events: none;
+}
+
+.Avatar:focus-visible {
+  /* Fallback focus ring for browsers without :has support */
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
+@supports selector(.Avatar-wrapper:has(.Avatar:focus-visible)) {
+  .Avatar:focus-visible {
+    outline: none;
+  }
 }
 
 .Avatar-wrapper--square {
@@ -885,6 +1173,10 @@ body {
   box-sizing: border-box;
 }
 
+.Avatar-wrapper {
+  position: relative;
+}
+
 .Avatar--square {
   width: 100%;
   height: 100%;
@@ -1055,6 +1347,11 @@ body {
 
 .AvatarGroup-item--tiny {
   height: var(--spacing-60);
+  margin-right: 0;
+}
+
+.AvatarGroup-item--micro {
+  margin-right: var(--spacing-10);
 }
 
 .AvatarGroup-Popper {
@@ -1076,10 +1373,20 @@ body {
   align-items: center;
 }
 
-.AvatarCount-wrapper:focus,
 .AvatarCount-wrapper:focus-visible {
-  outline: 3px solid var(--primary-shadow);
-  outline-offset: 3px;
+  outline: none;
+}
+
+.AvatarCount-wrapper:focus-visible::after {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--spacing-20));
+  bottom: calc(-1 * var(--spacing-20));
+  left: calc(-1 * var(--spacing-10));
+  right: calc(-1 * var(--spacing-10));
+  border: var(--border-width-05) solid var(--primary-focus);
+  border-radius: var(--border-radius-10);
+  pointer-events: none;
 }
 
 .AvatarGroup-inputWrapper {
@@ -1102,6 +1409,7 @@ body {
 .AvatarGroup-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .AvatarGroup-input:hover {
@@ -1130,8 +1438,12 @@ body {
   position: relative;
 }
 
-.SelectionAvatarGroup-item--square {
-  border-radius: var(--border-radius-10);
+.SelectionAvatarGroup-item--tiny {
+  margin-right: 0;
+}
+
+.SelectionAvatarGroup-item--micro {
+  margin-right: var(--spacing-10);
 }
 
 .SelectionAvatarGroup-item--active:focus,
@@ -1225,10 +1537,11 @@ body {
 .SelectionAvatar-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .SelectionAvatar-input:hover {
-  background-color: #f4f4f4;
+  background-color: var(--secondary-lightest);
 }
 
 /* Selection Avatar Count */
@@ -1237,6 +1550,10 @@ body {
   border-radius: var(--border-radius-full);
 }
 
+.SelectionAvatarCount-wrapper--micro {
+  margin-right: 0;
+}
+
 .SelectionAvatarCount:hover {
   background: var(--secondary);
 }
@@ -1249,10 +1566,24 @@ body {
   background: var(--secondary-dark) !important;
 }
 
-.SelectionAvatarCount-wrapper:focus,
+.SelectionAvatarCount-wrapper:focus {
+  outline: none;
+}
+
 .SelectionAvatarCount-wrapper:focus-visible {
-  outline: 3px solid var(--primary-shadow);
-  outline-offset: 3px;
+  outline: none;
+}
+
+.SelectionAvatarCount-wrapper:focus-visible::after {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--spacing-20));
+  bottom: calc(-1 * var(--spacing-20));
+  left: calc(-1 * var(--spacing-10));
+  right: calc(-1 * var(--spacing-10));
+  border: var(--border-width-05) solid var(--primary-focus);
+  border-radius: var(--border-radius-10);
+  pointer-events: none;
 }
 
 .SelectionAvatarCount--selected {
@@ -1311,7 +1642,7 @@ body {
 }
 
 .Backdrop {
-  background-color: rgba(31, 31, 31, 0.64);
+  background-color: rgba(26, 26, 26, 0.64);
   height: 100vh;
   width: 100vw;
   position: fixed;
@@ -1389,7 +1720,7 @@ body {
 }
 
 .Badge--accent1 {
-  background: var(--accent1);
+  background: var(--accent1-dark);
   color: var(--white);
 }
 
@@ -1492,7 +1823,8 @@ body {
 }
 
 .Breadcrumbs-Button:focus {
-  background: var(--secondary) !important;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button {
@@ -1528,7 +1860,8 @@ body {
 }
 
 .Button:focus {
-  outline: 0;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--iconAlign-right {
@@ -1609,6 +1942,7 @@ body {
 .Button--tiny .Button-icon--left {
   margin-right: var(--spacing-10);
 }
+
 .Button--tiny .Button-icon--right {
   margin-left: var(--spacing-10);
 }
@@ -1626,10 +1960,6 @@ body {
   background: var(--secondary-dark);
 }
 
-.Button--basic:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-}
-
 .Button--basic:disabled {
   background: var(--secondary-lighter);
   color: var(--inverse-lightest);
@@ -1647,10 +1977,6 @@ body {
   background: var(--primary-darker);
 }
 
-.Button--primary:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-}
-
 .Button--primary:disabled {
   background: var(--primary-lighter);
 }
@@ -1667,10 +1993,6 @@ body {
   background: var(--primary-darker);
 }
 
-.Button--success:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-}
-
 .Button--success:disabled {
   background: var(--primary-lighter);
 }
@@ -1687,10 +2009,6 @@ body {
   background: var(--alert-darker);
 }
 
-.Button--alert:focus {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-}
-
 .Button--alert:disabled {
   background: var(--alert-lighter);
 }
@@ -1704,10 +2022,6 @@ body {
   background: var(--secondary);
 }
 
-.Button--transparent:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-}
-
 .Button--transparent:active {
   background: var(--secondary-dark);
 }
@@ -1728,31 +2042,39 @@ body {
 }
 
 .Button--selected {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
   color: var(--primary-dark);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button--selected:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
 }
 
 .Button--selected:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
+  box-shadow: inset 0 0 0 2px var(--primary-dark);
 }
 
 .Button--selected:focus {
-  background: var(--primary-lightest);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  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 {
   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 {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
   color: var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary-lightest);
 }
 
 .Button-text--hidden {
@@ -1768,119 +2090,129 @@ body {
 /* outlined button styles */
 
 .Button-outlined--basic {
-  border: var(--border);
   color: var(--inverse);
   background: transparent;
+  box-shadow: inset 0 0 0 1px var(--secondary);
 }
 
 .Button-outlined--basic:hover {
   background: var(--secondary-lighter);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
 .Button-outlined--basic:active {
   background: var(--secondary);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
 .Button-outlined--basic:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  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 {
   color: var(--inverse-lightest);
   background: transparent;
-  border: var(--border-width-2-5) solid var(--secondary);
+  box-shadow: inset 0 0 0 1px var(--secondary);
 }
 
 .Button-outlined--selected {
   background: var(--primary-ultra-light);
   color: var(--primary-dark);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:hover {
   background: var(--primary-lightest);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
-  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: inset 0 0 0 2px var(--primary-dark);
 }
 
 .Button-outlined--selected:focus {
   color: var(--primary-dark);
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  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 {
+  background: var(--primary-lighter);
+  color: var(--primary-darker);
+  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-outlined--selected:disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
-  border: var(--border-width-2-5) solid var(--primary-lightest);
+  box-shadow: inset 0 0 0 2px var(--primary-lightest);
 }
 
 .Button-outlined--primary {
   background: transparent;
-  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
   color: var(--primary);
-  mix-blend-mode: multiply;
 }
 
 .Button-outlined--primary:hover {
   background: var(--primary-ultra-light);
-  border: var(--border-width-2-5) solid var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Button-outlined--primary:active {
   background: var(--primary-lightest);
-  border: var(--border-width-2-5) solid var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Button-outlined--primary:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  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 {
   background: transparent;
   color: var(--primary-lighter);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 1px var(--primary-lighter);
 }
 
 .Button-outlined--alert {
   background: transparent;
-  border: var(--border-width-2-5) solid var(--alert);
+  box-shadow: inset 0 0 0 1px var(--alert);
   color: var(--alert);
-  mix-blend-mode: multiply;
 }
 
 .Button-outlined--alert:hover {
   background: var(--alert-ultra-light);
-  border: var(--border-width-2-5) solid var(--alert-dark);
+  box-shadow: inset 0 0 0 1px var(--alert-dark);
   color: var(--alert-dark);
 }
 
 .Button-outlined--alert:active {
   background: var(--alert-lightest);
-  border: var(--border-width-2-5) solid var(--alert-dark);
+  box-shadow: inset 0 0 0 1px var(--alert-dark);
   color: var(--alert-dark);
 }
 
 .Button-outlined--alert:focus {
-  border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  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 {
   background: transparent;
   color: var(--alert-lighter);
-  border: var(--border-width-2-5) solid var(--alert-lighter);
+  box-shadow: inset 0 0 0 1px var(--alert-lighter);
 }
 
 /* calendar */
@@ -1980,6 +2312,34 @@ body {
           user-select: none;
 }
 
+.Calendar-headerButton {
+  /* Reset button aesthetics */
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  /* Maintain the existing Flexbox layout structure */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /* Rounded corners for better focus outline appearance */
+  border-radius: var(--border-radius-10);
+}
+
+.Calendar-headerButton:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 1px;
+}
+
+.Calendar-headerButton:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .Calendar-body {
   display: flex;
   flex-direction: column;
@@ -2002,15 +2362,17 @@ body {
 }
 
 .Calendar-valueWrapper--inRange {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
 }
 
 .Calendar-valueWrapper--inRange .Calendar-inRangeValue:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
+  border-color: transparent;
 }
 
 .Calendar-valueWrapper--inRange .Calendar-inRangeValue:active {
-  background: var(--primary-light);
+  background: var(--primary-lighter);
+  border-color: transparent;
 }
 
 .Calendar-valueWrapper--inRangeError {
@@ -2018,7 +2380,7 @@ body {
 }
 
 .Calendar-valueWrapper--start {
-  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+  background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 50%);
   border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
 }
 
@@ -2027,17 +2389,17 @@ body {
 }
 
 .Calendar-valueWrapper--end {
-  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+  background: linear-gradient(90deg, var(--primary-ultra-light) 50%, white 50%);
   border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .Calendar-valueWrapper--hoverDate {
-  background: linear-gradient(90deg, var(--primary-lightest) 10%, white 50%);
+  background: linear-gradient(90deg, var(--primary-ultra-light) 10%, white 50%);
   border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .Calendar-valueWrapper--hoverEndDate {
-  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 10%);
+  background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 10%);
 }
 
 .Calendar-valueWrapper--endError {
@@ -2058,34 +2420,52 @@ body {
      -moz-user-select: none;
           user-select: none;
   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;
+  color: inherit;
+}
+
+.Calendar-value:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 1px;
+}
+
+.Calendar-value:focus:not(:focus-visible) {
+  outline: none;
 }
 
 .Calendar-value:hover {
   background: var(--secondary-light);
+  border-color: var(--secondary-dark);
 }
 
 .Calendar-value:active {
   background: var(--secondary);
-}
-
-.Calendar-value:active .Calendar-value--currDate {
-  color: var(--primary-dark);
+  border-color: var(--secondary-dark);
 }
 
 .Calendar-value--start:hover,
 .Calendar-value--end:hover {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
+  border-color: transparent;
 }
 
 .Calendar-value--startError:hover,
 .Calendar-value--endError:hover {
   background: var(--alert-lightest);
+  border-color: transparent;
 }
 
 .Calendar-value--start,
 .Calendar-value--end {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
 }
 
 .Calendar-value--startError,
@@ -2094,32 +2474,34 @@ body {
 }
 
 .Calendar-value--currDateMonthYear {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
+  border-color: var(--primary);
 }
 
 .Calendar-value--currDateMonthYear:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
+  border-color: var(--primary);
 }
 
 .Calendar-value--currDateMonthYear:active {
   background: var(--primary-lighter);
-}
-
-.Calendar-value--currDate:active {
-  color: var(--primary-dark);
+  border-color: var(--primary-darker);
 }
 
 .Calendar-value--active {
   background: var(--primary);
   font-weight: var(--font-weight-bold);
+  border-color: transparent;
 }
 
 .Calendar-value--active:hover {
   background: var(--primary-dark);
+  border-color: transparent;
 }
 
 .Calendar-value--active:active {
   background: var(--primary-darker);
+  border-color: transparent;
 }
 
 .Calendar-yearValue--small,
@@ -2144,16 +2526,33 @@ body {
   width: var(--spacing-80);
 }
 
-.Calendar-valueWrapper--dummy {
-  opacity: var(--opacity-20);
+.Calendar-valueWrapper--active-dummy .Calendar-value {
+  border: none;
 }
 
-.Calendar-valueWrapper--disabled {
-  opacity: var(--opacity-10);
+.Calendar-valueWrapper--active-dummy .Calendar-value--active {
+  background: var(--primary-lighter);
 }
 
-.Calendar-valueWrapper--active-dummy {
-  opacity: var(--opacity-16);
+.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);
+}
+
+.Calendar-valueWrapper--active-dummy .Calendar-value--startError:hover,
+.Calendar-valueWrapper--active-dummy .Calendar-value--endError:hover {
+  background: var(--alert-lightest);
+  border-color: transparent;
 }
 
 .Calendar-value--disabled {
@@ -2176,6 +2575,14 @@ body {
 
 .Calendar-dayValues .Calendar-value {
   padding: 0;
+  cursor: default;
+  border-color: transparent;
+}
+
+.Calendar-dayValues .Calendar-value:hover,
+.Calendar-dayValues .Calendar-value:active {
+  background: transparent;
+  border-color: transparent;
 }
 
 .Calendar-eventsIndicator {
@@ -2186,32 +2593,36 @@ body {
   background-color: var(--alert);
   border-radius: var(--border-radius-full);
 }
+
 .Calendar-eventsIndicator--small {
   width: 3px;
   height: 3px;
 }
+
 .Calendar-eventsIndicator--active {
   background-color: var(--white);
 }
 
 .Calendar-valueWrapper--inStartRange {
-  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+  background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 50%);
 }
 
 .Calendar-valueWrapper--inEndRange {
-  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+  background: linear-gradient(90deg, var(--primary-ultra-light) 50%, white 50%);
 }
 
 .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
 }
 
 .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
+  border-color: transparent;
 }
 
 .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:active {
-  background: var(--primary-light);
+  background: var(--primary-lighter);
+  border-color: transparent;
 }
 
 /* badge */
@@ -2418,6 +2829,7 @@ body {
 .ChatInput:focus,
 .ChatInput:focus-visible {
   outline: none;
+  background: var(--white);
   border: var(--border-width-2-5) solid var(--primary);
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
@@ -2529,6 +2941,8 @@ body {
 .Checkbox-label {
   display: flex;
   cursor: pointer;
+  margin-left: calc(-1 * var(--spacing-20));
+  padding-left: var(--spacing-20);
 }
 
 .Checkbox-label--tiny {
@@ -2570,22 +2984,23 @@ body {
   outline: 0;
 }
 
-.Checkbox-input ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--secondary-dark);
-  background-color: var(--shadow-0);
+.Checkbox-input:focus ~ .Checkbox-wrapper {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
-.Checkbox-input:focus ~ .Checkbox-wrapper--default {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+.Checkbox-input ~ .Checkbox-wrapper--default {
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
+  background-color: var(--shadow-0);
 }
 
 .Checkbox-input:hover ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
-  background-color: var(--shadow-0);
+  border: var(--border-width-2-5) solid var(--inverse-light);
+  background-color: var(--secondary-lighter);
 }
 
 .Checkbox-input:active ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-light);
   background-color: var(--secondary-light);
 }
 
@@ -2594,7 +3009,7 @@ body {
 }
 
 .Checkbox--disabled .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary);
   background-color: var(--secondary-lightest);
 }
 
@@ -2608,7 +3023,6 @@ body {
 
 .Checkbox-input--checked:focus ~ .Checkbox-wrapper,
 .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
   background-color: var(--primary);
   border: 0;
 }
@@ -2637,10 +3051,6 @@ body {
   border: var(--border-width-2-5) solid var(--alert);
 }
 
-.Checkbox-input:focus ~ .Checkbox-wrapper--error {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-}
-
 .Checkbox-input:hover ~ .Checkbox-wrapper--error {
   border: var(--border-width-2-5) solid var(--alert-dark);
 }
@@ -2665,7 +3075,6 @@ body {
 .Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
 .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
   border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Checkbox-input--checked:hover ~ .Checkbox-wrapper--error,
@@ -2727,7 +3136,16 @@ body {
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius-full);
-  margin-left: var(--spacing-05);
+}
+
+.Chip-icon--rightSmall {
+  width: var(--spacing-60);
+  height: var(--spacing-60);
+  box-sizing: border-box;
+  padding: var(--spacing-15);
+  margin-left: calc(var(--spacing-05) * -1);
+  margin-right: calc((var(--spacing-05) + var(--spacing-2-5)) * -1);
+  flex-shrink: 0;
 }
 
 .Chip--action {
@@ -2741,8 +3159,8 @@ body {
 }
 
 .Chip--action:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip--action:active {
@@ -2769,8 +3187,8 @@ body {
 }
 
 .Chip--selection:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip--selection:active {
@@ -2786,23 +3204,26 @@ body {
 }
 
 .Chip-selection--selected {
-  background: rgba(220, 236, 249, 0.48);
-  border-color: var(--primary-lighter);
+  background: var(--primary-ultra-light);
+  border-color: var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
 }
 
 .Chip-selection--selected:hover {
-  background: rgba(151, 197, 240, 0.48);
-  border-color: var(--primary-light);
+  background: var(--primary-lightest);
+  border-color: var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
 }
 
 .Chip-selection--selected:focus-visible {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip-selection--selected:active {
   background: var(--primary-lighter);
   border-color: var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
 }
 
 .Chip-selection--selected:active .Chip-icon,
@@ -2819,8 +3240,10 @@ body {
 }
 
 .Chip-selection--selectedDisabled {
-  background: rgba(220, 236, 249, 0.48);
-  border-color: var(--primary-lighter);
+  background: var(--primary-ultra-light);
+  border-color: var(--primary-lightest);
+  box-shadow: inset 0 0 0 1px var(--primary-lightest);
+  opacity: 1;
 }
 
 .Chip--input {
@@ -2835,8 +3258,8 @@ body {
 
 .Chip--input:focus-visible,
 .Chip--input:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip--input:active {
@@ -2851,7 +3274,7 @@ body {
 }
 
 .Chip-icon--right:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Chip-icon--right:hover {
@@ -2871,7 +3294,7 @@ body {
 }
 
 .Chip-icon--selected:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Chip-icon--selected:hover {
@@ -2890,7 +3313,7 @@ body {
 }
 
 .Chip-icon--clear {
-  padding-right: var(--spacing-05);
+  padding-right: 0;
 }
 
 .ChipGroup {
@@ -2930,7 +3353,8 @@ body {
 
 .ChipInput:focus,
 .ChipInput:focus-visible {
-  outline: var(--spacing-2-5) var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ChipInput:hover {
@@ -2939,7 +3363,6 @@ body {
 }
 
 .ChipInput:focus-within {
-  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--primary);
   background: var(--white);
 }
 
@@ -2953,8 +3376,7 @@ body {
   padding-right: var(--spacing-20);
 }
 
-.ChipInput--error,
-.ChipInput--error:focus-within {
+.ChipInput--error {
   box-shadow: inset 0 0 0 var(--spacing-2-5) var(--alert);
 }
 
@@ -2967,11 +3389,13 @@ body {
 
 .ChipInput-border:focus-within {
   border-radius: var(--border-radius-10);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ChipInput-border--error:focus-within {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ChipInput-input {
@@ -3113,8 +3537,8 @@ body {
 
 .Collapsible-footer:focus,
 .Collapsible-footer:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Collapsible-footer:active {
@@ -3568,6 +3992,7 @@ body {
 .Dropdown-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .Dropdown-section {
@@ -4968,18 +5393,18 @@ body {
 }
 
 .Grid--resource .Grid-row--body:focus {
-  box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);
+  box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
   outline: none;
 }
 
 /* Selected States */
 
 .Grid-row--selected {
-  background: rgba(220, 236, 249, 0.48);
+  background: rgba(214, 238, 255, 0.48);
 }
 
 .Grid-row--selected:hover {
-  background: rgba(151, 197, 240, 0.48) !important;
+  background: rgba(139, 202, 254, 0.48) !important;
 }
 
 .Grid-row--selected:active {
@@ -4988,7 +5413,7 @@ body {
 
 .Grid-row--selected:focus {
   outline: none;
-  box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);
+  box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
 }
 
 /* Activated States */
@@ -5009,18 +5434,18 @@ body {
 }
 
 .Grid--resource .Grid-row--body:focus .Grid-cellWrapper--pinned {
-  box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);
+  box-shadow: var(--shadow-spread) rgba(212, 212, 212, 0.16);
   outline: none;
 }
 
 /* Pinned Columns Selected State */
 
 .Grid-row--selected .Grid-cellWrapper--pinned {
-  background: rgba(220, 236, 249, 0.48);
+  background: rgba(214, 238, 255, 0.48);
 }
 
 .Grid-row--selected:hover .Grid-cellWrapper--pinned {
-  background: rgba(151, 197, 240, 0.48) !important;
+  background: rgba(139, 202, 254, 0.48) !important;
 }
 
 .Grid-row--selected:active .Grid-cellWrapper--pinned {
@@ -5029,7 +5454,7 @@ body {
 
 .Grid-row--selected:focus .Grid-cellWrapper--pinned {
   outline: none;
-  box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);
+  box-shadow: var(--shadow-spread) rgba(0, 96, 214, 0.16);
 }
 
 /* Grid header */
@@ -5045,16 +5470,16 @@ body {
       to right,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
      border-image: linear-gradient(
       to right,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
 }
@@ -5067,16 +5492,16 @@ body {
       to left,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
      border-image: linear-gradient(
       to left,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
 }
@@ -5091,16 +5516,16 @@ body {
       to right,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
      border-image: linear-gradient(
       to right,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
 }
@@ -5113,16 +5538,16 @@ body {
       to left,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
      border-image: linear-gradient(
       to left,
       var(--secondary-light),
       var(--secondary-light) 25%,
-      rgba(213, 213, 213, 0.1) 25%,
-      rgba(213, 213, 213, 0.1)
+      rgba(212, 212, 212, 0.1) 25%,
+      rgba(212, 212, 212, 0.1)
     )
     1 100%;
 }
@@ -5136,6 +5561,10 @@ body {
   display: flex;
   align-items: center;
   cursor: pointer;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-decoration: none;
   height: var(--spacing-80);
   padding-right: var(--spacing-30);
   padding-left: var(--spacing-30);
@@ -5154,8 +5583,8 @@ body {
 
 .HorizontalNav-menu--default:focus-visible,
 .HorizontalNav-menu--default:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .HorizontalNav-menu--default:hover {
@@ -5167,29 +5596,37 @@ body {
 }
 
 .HorizontalNav-menu--active {
-  background-color: var(--primary-lightest);
+  background-color: var(--primary-ultra-light);
+  box-shadow: 0 0 0 var(--border-width-05) var(--primary);
 }
 
 .HorizontalNav-menu--active:focus-visible,
 .HorizontalNav-menu--active:focus {
-  background-color: var(--primary-lightest);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  background-color: var(--primary-ultra-light);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .HorizontalNav-menu--active:hover {
-  background-color: var(--primary-lighter);
+  background-color: var(--primary-lightest);
 }
 
 .HorizontalNav-menu--active:active {
   background-color: var(--primary-lighter);
   color: var(--primary-darker);
+  box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
 .HorizontalNav-menu--active:active .HorizontalNav-menuText {
   color: var(--primary-darker);
 }
 
+.HorizontalNav-menu--active:focus-visible:active,
+.HorizontalNav-menu--active:focus:active {
+  background-color: var(--primary-lighter);
+  box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);
+}
+
 .HorizontalNav-menuText {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5422,7 +5859,7 @@ body {
 
 .InlineMessage-text--warning,
 .InlineMessage-icon--warning {
-  color: var(--accent1);
+  color: var(--accent1-dark);
 }
 
 .InlineMessage-text--alert {
@@ -5451,8 +5888,6 @@ body {
   box-sizing: border-box;
   border-radius: var(--border-radius-10);
   border: var(--border);
-  padding-right: var(--spacing-30);
-  padding-left: var(--spacing-30);
   background: var(--white);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
@@ -5462,19 +5897,23 @@ body {
   padding-top: var(--spacing-10);
   padding-bottom: var(--spacing-10);
   padding-left: var(--spacing-20);
-  padding-right: var(--spacing-20);
+  padding-right: var(--spacing-10);
 }
 
 .Input--regular {
   height: var(--font-height-l);
-  padding-top: var(--spacing-15);
-  padding-bottom: var(--spacing-15);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
+  padding-right: var(--spacing-15);
+  padding-left: var(--spacing-20);
 }
 
 .Input--large {
   height: 40px;
   padding-top: var(--spacing-20);
   padding-bottom: var(--spacing-20);
+  padding-right: var(--spacing-15);
+  padding-left: var(--spacing-20);
 }
 
 .Input:hover {
@@ -5485,8 +5924,8 @@ body {
 
 .Input:focus-within {
   background: var(--white);
-  border-color: var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Input:focus-within .Input-icon--left {
@@ -5598,11 +6037,11 @@ body {
 }
 
 .Input-iconWrapper--right:focus-visible .Input-icon--right {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Input-icon--right:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
   border-radius: var(--border-radius-full);
 }
 
@@ -5640,11 +6079,13 @@ body {
   font-weight: var(--font-weight-medium);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
   box-sizing: border-box;
-  border-bottom: var(--border-width-2-5) solid transparent;
+  border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
-.Link:focus-visible {
-  outline: none;
+.Link:focus {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  border-radius: var(--border-radius-10);
 }
 
 .Link--regular {
@@ -5664,6 +6105,7 @@ body {
 
 .Link--subtle {
   color: var(--inverse-lighter);
+  border-bottom-color: transparent;
 }
 
 .Link--default:hover {
@@ -5678,22 +6120,12 @@ body {
 
 .Link--default:active {
   color: var(--primary-darker);
-  border: none;
+  border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
 .Link--subtle:active {
   color: var(--inverse);
-  border: none;
-}
-
-.Link--default:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  border-radius: var(--border-radius-10);
-}
-
-.Link--subtle:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  border-radius: var(--border-radius-10);
+  border-bottom: var(--border-width-2-5) solid transparent;
 }
 
 .Link--default-disabled {
@@ -5770,8 +6202,8 @@ body {
 
 .LinkButton--default:focus,
 .LinkButton--default:focus-visible {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .LinkButton--default:disabled {
@@ -5796,8 +6228,8 @@ body {
 
 .LinkButton--subtle:focus,
 .LinkButton--subtle:focus-visible {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .LinkButton--subtle:disabled {
@@ -5874,7 +6306,8 @@ body {
 
 .Listbox-item--option:focus,
 .Listbox-item--option:focus-visible {
-  outline: 3px auto var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--option:active {
@@ -5882,16 +6315,17 @@ body {
 }
 
 .Listbox-item--selected {
-  background: rgba(220, 236, 249, 0.48);
+  background: rgba(214, 238, 255, 0.48);
 }
 
 .Listbox-item--selected:hover {
-  background: rgba(151, 197, 240, 0.48);
+  background: rgba(139, 202, 254, 0.48);
 }
 
 .Listbox-item--selected:focus,
 .Listbox-item--selected:focus-visible {
-  outline: 3px auto rgba(0, 112, 221, 0.16);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--selected:active {
@@ -5910,7 +6344,8 @@ body {
 
 .Listbox-item--resource:focus,
 .Listbox-item--resource:focus-visible {
-  outline: 3px auto var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--resource:active {
@@ -5938,7 +6373,8 @@ body {
 /* Listbox type - draggable  */
 
 .Listbox-item--draggable:focus {
-  outline: 3px auto var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--drag-icon {
@@ -6416,22 +6852,22 @@ body {
 
 .Message--alert {
   border-color: var(--alert);
-  background-color: rgba(217, 55, 55, 0.04);
+  background-color: rgba(214, 36, 0, 0.04);
 }
 
 .Message--success {
   border-color: var(--success);
-  background-color: rgba(46, 168, 67, 0.04);
+  background-color: rgba(0, 122, 14, 0.04);
 }
 
 .Message--info {
   border-color: var(--primary);
-  background-color: rgba(0, 112, 221, 0.04);
+  background-color: rgba(0, 96, 214, 0.04);
 }
 
 .Message--warning {
   border-color: var(--accent1);
-  background-color: rgba(240, 125, 0, 0.04);
+  background-color: rgba(229, 111, 0, 0.04);
 }
 
 .Message-icon--regular {
@@ -6626,8 +7062,9 @@ body {
 
 .MetricInput:focus-within {
   background: var(--white);
-  border-color: var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  border-color: var(--secondary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-2-5);
 }
 
 .MetricInput:focus-within .MetricInput-icon {
@@ -6657,8 +7094,9 @@ body {
 }
 
 .MetricInput--error:focus-within {
-  border-color: var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-color: var(--secondary);
+  outline: var(--border-width-05) solid var(--alert);
+  outline-offset: var(--spacing-2-5);
 }
 
 .MetricInput--error:focus-within .MetricInput-icon {
@@ -7469,7 +7907,7 @@ body {
 }
 
 .Radio-defaultWrapper {
-  border: var(--border);
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Radio-errorWrapper {
@@ -7506,6 +7944,8 @@ body {
 .Radio-Label {
   display: flex;
   cursor: pointer;
+  margin-left: calc(-1 * var(--spacing-20));
+  padding-left: var(--spacing-20);
 }
 
 .Radio-wrapper {
@@ -7528,13 +7968,13 @@ body {
 }
 
 .Radio:hover .Radio-wrapper {
-  border: var(--border-width-2-5) solid var(--secondary-dark);
+  border: var(--border-width-2-5) solid var(--inverse-light);
   background-color: var(--secondary-lighter);
 }
 
 .Radio:active .Radio-wrapper {
   background-color: var(--secondary-light);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-light);
 }
 
 .Radio:hover .Radio-errorWrapper {
@@ -7550,29 +7990,27 @@ body {
 }
 
 .Radio:focus-within .Radio-wrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  border-radius: var(--border-radius-full);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-errorWrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-  border-radius: var(--border-radius-full);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-input:checked ~ .Radio-wrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-input:checked ~ .Radio-errorWrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio--disabled .Radio-wrapper {
-  border: var(--border-width-2-5) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary);
   background-color: var(--secondary-lightest);
 }
 
@@ -7662,11 +8100,11 @@ body {
 }
 
 .Radio--disabled .Radio-input ~ .Radio-wrapper:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .Radio--disabled .Radio-input ~ .Radio-errorWrapper:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .SegmentedControl {
@@ -7719,7 +8157,7 @@ body {
   left: 0;
   box-sizing: border-box;
   background-color: var(--primary-ultra-light);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  border: var(--border-width-05) solid var(--primary);
   border-radius: var(--border-radius-10);
   pointer-events: none;
   z-index: 2;
@@ -7775,9 +8213,9 @@ body {
 }
 
 .SegmentedControl-segment:focus-visible:not(.SegmentedControl-segment--selected) {
-  border-color: var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
   z-index: 100;
   position: relative;
 }
@@ -7954,10 +8392,11 @@ body {
 .Select-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .Select-input:hover {
-  background-color: #f4f4f4;
+  background-color: var(--secondary-lightest);
 }
 
 .Select-trigger {
@@ -7993,9 +8432,7 @@ body {
 }
 
 .Select-trigger--filled:focus {
-  border: var(--border-width-2-5) solid var(--primary);
   background-color: var(--secondary-light);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 /* styleType Outlined */
@@ -8012,11 +8449,6 @@ body {
   border: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
-.Select-trigger--outlined:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-}
-
 .Select-trigger--outlined:active,
 .Select-trigger--outlinedOpen {
   color: var(--inverse) !important;
@@ -8108,7 +8540,7 @@ body {
 
 .Select-crossButton:focus-visible,
 .Select-crossButton:focus {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Select-crossButton:hover {
@@ -8148,7 +8580,6 @@ body {
 
 .Select-trigger--error {
   border: var(--border-width-2-5) solid var(--alert) !important;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Selection-card {
@@ -8169,10 +8600,9 @@ body {
 
 .Selection-card--default:focus,
 .Selection-card--default:focus-visible {
-  outline: none;
-  box-shadow:
-    var(--shadow-spread) var(--secondary-shadow),
-    inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
+  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-dark);
 }
 
 .Selection-card--default:active {
@@ -8201,10 +8631,9 @@ body {
 
 .Selection-card--selected:focus,
 .Selection-card--selected:focus-visible {
-  outline: none;
-  box-shadow:
-    var(--shadow-spread) var(--primary-shadow),
-    inset 0 0 0 var(--spacing-05) var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);
 }
 
 .Selection-card--selected:active {
@@ -8384,6 +8813,7 @@ body {
   display: flex;
   align-items: center;
   overflow: hidden;
+  padding-bottom: var(--spacing-20);
 }
 
 .Slider-progress {
@@ -8401,6 +8831,10 @@ body {
   border: var(--border);
 }
 
+.Slider-axis {
+  margin-top: calc(-1 * var(--spacing-20));
+}
+
 .Slider-label {
   margin-top: var(--spacing-10);
   transform: translate(-50%, 0px);
@@ -8456,6 +8890,18 @@ body {
     background-color var(--duration--fast-01) var(--standard-productive-curve);
 }
 
+.Slider-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--spacing-60);
+  height: var(--spacing-60);
+  background-color: transparent;
+  border-radius: var(--border-radius-full);
+}
+
 .Slider-handle:hover {
   background-color: var(--primary-lightest);
 }
@@ -8465,8 +8911,13 @@ body {
 }
 
 .Slider-handle:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
+.Slider-handle:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Slider-handle--disabled {
@@ -8476,6 +8927,7 @@ body {
 }
 
 .Slider-handle--disabled:focus {
+  outline: none;
   box-shadow: none;
 }
 
@@ -8535,11 +8987,11 @@ body {
 }
 
 .Circle--primary {
-  stroke: var(--primary);
+  stroke: var(--primary-dark);
 }
 
 .Circle--secondary {
-  stroke: var(--secondary-dark);
+  stroke: var(--inverse-lighter);
 }
 
 .Circle--white {
@@ -8547,7 +8999,7 @@ body {
 }
 
 .Circle--alert {
-  stroke: var(--alert);
+  stroke: var(--alert-dark);
 }
 
 .StatusHint {
@@ -8610,8 +9062,8 @@ body {
 
 .Step:focus,
 .Step:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 /* Completed State */
@@ -8630,8 +9082,8 @@ body {
 
 .Step--completed:focus,
 .Step--completed:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 /* Active State */
@@ -8640,6 +9092,7 @@ body {
   background-color: var(--primary-lightest);
   color: var(--primary-dark);
   transition-delay: var(--duration--fast-02);
+  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
 }
 
 .Step--active:hover {
@@ -8649,8 +9102,8 @@ body {
 .Step--active:focus,
 .Step--active:focus-visible {
   background-color: var(--primary-lightest);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Step--active:active {
@@ -8719,12 +9172,14 @@ body {
 }
 
 .Switch-input:focus ~ .Switch-wrapper {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   background-color: var(--secondary-light);
 }
 
 .Switch-input:focus ~ .Switch-wrapper--checked {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   background-color: var(--primary);
 }
 
@@ -8744,6 +9199,14 @@ body {
   background-color: var(--primary-darker);
 }
 
+.Switch-input:active ~ .Switch-wrapper:before {
+  border-color: var(--inverse-light);
+}
+
+.Switch-input:active ~ .Switch-wrapper--checked:before {
+  border-color: transparent;
+}
+
 .Switch-wrapper--tiny {
   border-radius: var(--border-radius-full);
 }
@@ -8765,6 +9228,7 @@ body {
   border-radius: var(--border-radius-full);
   box-sizing: border-box;
   transition-duration: 80ms;
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Switch-wrapper--checked {
@@ -8777,6 +9241,7 @@ body {
 .Switch-wrapper--checked:before {
   transform: translateX(100%);
   transition-duration: 80ms;
+  border-color: transparent;
 }
 
 .Switch--disabled {
@@ -8787,10 +9252,18 @@ body {
   background-color: var(--secondary-lighter);
 }
 
+.Switch-wrapper--disabled:before {
+  border-color: var(--secondary-dark);
+}
+
 .Switch-wrapper--checkedDisabled {
   background-color: var(--primary-lighter);
 }
 
+.Switch-wrapper--checkedDisabled:before {
+  border-color: transparent;
+}
+
 .Table {
   display: flex;
   flex-grow: 1;
@@ -8867,6 +9340,22 @@ body {
   padding: var(--spacing-30) var(--spacing-30) var(--spacing-40);
 }
 
+.Tab--withIconRegular {
+  padding-top: calc(var(--spacing-20) + var(--spacing-05));
+  padding-bottom: calc(var(--spacing-20) + var(--spacing-15));
+  padding-right: var(--spacing-15);
+  padding-left: calc(var(--spacing-40) + var(--spacing-05));
+  align-items: center;
+}
+
+.Tab--withIconSmall {
+  padding-top: var(--spacing-15);
+  padding-bottom: calc(var(--spacing-20) + var(--spacing-05));
+  padding-right: var(--spacing-15);
+  padding-left: calc(var(--spacing-40) + var(--spacing-05));
+  align-items: center;
+}
+
 .Tab:last-child {
   margin-right: 0;
 }
@@ -8884,6 +9373,10 @@ body {
   border-top-right-radius: var(--border-radius-2-5);
 }
 
+.Tab--withDismissIcon::after {
+  margin-left: calc(var(--spacing-40) + var(--spacing-05));
+}
+
 .Tab:hover::after {
   background-color: var(--inverse-lighter);
 }
@@ -8897,10 +9390,9 @@ body {
 }
 
 .Tab:focus {
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 0;
   border-radius: var(--border-radius-10);
-  /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Tab--active:hover .Tab-selected {
@@ -8912,7 +9404,8 @@ body {
 }
 
 .Tab:active:focus {
-  box-shadow: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 0;
 }
 
 .Tab--disabled {
@@ -8920,7 +9413,7 @@ body {
 }
 
 .Tab--disabled:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .Tab--disabled:hover::after {
@@ -8954,15 +9447,20 @@ body {
   cursor: not-allowed;
 }
 
-.DismissibleTab-icon--right {
-  padding: var(--spacing-05);
-  margin-left: var(--spacing-05);
+.DismissibleRegularTab-icon--right {
+  padding: var(--spacing-10);
+  outline: none;
+  border-radius: var(--border-radius-full);
+}
+
+.DismissibleSmallTab-icon--right {
+  padding: var(--spacing-15);
   outline: none;
   border-radius: var(--border-radius-full);
 }
 
 .DismissibleTab-icon--default:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .DismissibleTab-icon--default:hover {
@@ -8974,7 +9472,7 @@ body {
 }
 
 .DismissibleTab-icon--selected:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .DismissibleTab-icon--selected:hover {
@@ -9022,9 +9520,9 @@ body {
 }
 
 .Textarea:focus-within {
-  outline: none;
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  border-color: var(--secondary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-2-5);
 }
 
 .Textarea:disabled {
@@ -9044,8 +9542,9 @@ body {
 }
 
 .Textarea--error:focus-within {
-  border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-color: var(--alert);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-2-5);
 }
 
 .Textarea--resize {
@@ -9128,10 +9627,10 @@ body {
   color: var(--warning-darker);
 }
 
-.Toast-close-icon--warning:focus,
-.Toast-close-icon--warning:focus-visible {
+.Toast-close-icon:focus,
+.Toast-close-icon:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) rgba(183, 135, 7, 0.16);
+  box-shadow: var(--shadow-spread) var(--inverse-focus);
 }
 
 .Toast-close-icon--warning:hover,
@@ -9139,34 +9638,16 @@ body {
   background: var(--warning-dark);
 }
 
-.Toast-close-icon--success:focus,
-.Toast-close-icon--success:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);
-}
-
 .Toast-close-icon--success:hover,
 .Toast-close-icon--success:active {
   background: var(--success-dark);
 }
 
-.Toast-close-icon--info:focus,
-.Toast-close-icon--info:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);
-}
-
 .Toast-close-icon--info:hover,
 .Toast-close-icon--info:active {
   background: var(--primary-dark);
 }
 
-.Toast-close-icon--alert:focus,
-.Toast-close-icon--alert:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-spread) rgba(156, 40, 40, 0.16);
-}
-
 .Toast-close-icon--alert:hover,
 .Toast-close-icon--alert:active {
   background: var(--alert-dark);
@@ -9206,10 +9687,19 @@ body {
   margin-right: var(--spacing-20);
 }
 
+.Toast-actionButton:focus {
+  outline: var(--border-width-05) solid var(--inverse-focus);
+  outline-offset: var(--spacing-05);
+}
+
 .Toast-actionButton:last-child {
   margin-right: 0;
 }
 
+.Toast-actionButton-label {
+  color: inherit;
+}
+
 .Toast-actionButton--default {
   background: var(--inverse-light);
 }
@@ -9219,10 +9709,6 @@ body {
   background: var(--inverse);
 }
 
-.Toast-actionButton--default:focus {
-  box-shadow: var(--shadow-spread) rgba(112, 112, 112, 0.16);
-}
-
 .Toast-actionButton--info {
   background: var(--primary-dark);
 }
@@ -9232,10 +9718,6 @@ body {
   background: var(--primary-darker);
 }
 
-.Toast-actionButton--info:focus {
-  box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);
-}
-
 .Toast-actionButton--success {
   background: var(--success-dark);
 }
@@ -9245,10 +9727,6 @@ body {
   background: var(--success-darker);
 }
 
-.Toast-actionButton--success:focus {
-  box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);
-}
-
 .Toast-actionButton--alert {
   background: var(--alert-dark);
 }
@@ -9258,21 +9736,15 @@ body {
   background: var(--alert-darker);
 }
 
-.Toast-actionButton--alert:focus {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-}
-
 .Toast-actionButton--warning {
   background: var(--warning-dark);
+  color: var(--text);
 }
 
 .Toast-actionButton--warning:hover,
 .Toast-actionButton--warning:active {
   background: var(--warning-darker);
-}
-
-.Toast-actionButton--warning:focus {
-  box-shadow: var(--shadow-spread) var(--warning-shadow);
+  color: var(--text-white);
 }
 
 .Tooltip {
@@ -9509,25 +9981,57 @@ body {
 }
 
 .MenuItem:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
+.MenuItem--expanded:focus {
+  clip-path: inset(-6px -6px -6px 0);
+}
+
+.MenuItem--expandedRounded:focus {
+  clip-path: inset(-6px);
 }
 
 .MenuItem--disabled:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .MenuItem--active {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
+}
+
+.MenuItem--activeExpanded {
+  box-shadow:
+    inset 0 var(--border-width-2-5) 0 0 var(--primary),
+    inset calc(-1 * var(--border-width-2-5)) 0 0 0 var(--primary),
+    inset 0 calc(-1 * var(--border-width-2-5)) 0 0 var(--primary);
+}
+
+.MenuItem--activeExpandedRounded {
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
 }
 
 .MenuItem--active:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
 }
 
 .MenuItem--active:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary-dark);
+}
+
+.MenuItem--activeExpanded:active {
+  box-shadow:
+    inset 0 var(--border-width-2-5) 0 0 var(--primary-dark),
+    inset calc(-1 * var(--border-width-2-5)) 0 0 0 var(--primary-dark),
+    inset 0 calc(-1 * var(--border-width-2-5)) 0 0 var(--primary-dark);
+}
+
+.MenuItem--activeExpandedRounded:active {
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary-dark);
 }
 
 .MenuItem--active:active .MenuItem-Text {
@@ -9535,8 +10039,8 @@ body {
 }
 
 .MenuItem--active:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .MenuItem--rounded {
@@ -9619,8 +10123,8 @@ body {
 }
 
 .AIButton:focus {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 /* Button Icon */
@@ -9658,19 +10162,6 @@ body {
   flex-wrap: wrap;
 }
 
-.AIResponse-button {
-  opacity: var(--opacity-12);
-}
-
-.AIResponse-box:hover .AIResponse-button,
-.AIResponse-box--glow:hover .AIResponse-button {
-  opacity: 1;
-}
-
-.AIResponse-button--selected {
-  opacity: 1;
-}
-
 .AIResponse-metaData {
   margin-left: calc(var(--spacing-80) + var(--spacing-20));
 }
@@ -9713,8 +10204,9 @@ body {
 
 .AIChip:focus,
 .AIChip:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-dark);
+  outline-offset: var(--spacing-05);
+  border-radius: var(--border-radius-full);
 }
 
 .AIChip-icon {
@@ -9806,10 +10298,9 @@ body {
   color: var(--secondary-dark) !important;
 }
 
-.AIIconButton:focus,
-.AIIconButton:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+.AIIconButton:focus {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .AIIconButton:disabled {