@innovaccer/design-system 4.19.2 → 4.21.0

package/dist/index.umd.css

@@ -138,6 +138,9 @@
   --accent4-lightest: var(--nimbu-lightest);
   --inverse-lightest: var(--night-lightest);
 
+  /* Focus */
+  --primary-focus: var(--jal-dark);
+
   /* Ultra Light */
   --primary-ultra-light: #eef6fc;
   --success-ultra-light: #ecf7f0;
@@ -3029,6 +3032,7 @@ body {
 .AvatarGroup-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .AvatarGroup-input:hover {
@@ -3307,7 +3311,8 @@ body {
 }
 
 .Breadcrumbs-Button:focus {
-  background: var(--secondary) !important;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button {
@@ -3343,7 +3348,8 @@ body {
 }
 
 .Button:focus {
-  outline: 0;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--iconAlign-right {
@@ -3442,7 +3448,8 @@ body {
 }
 
 .Button--basic:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--basic:disabled {
@@ -3463,7 +3470,8 @@ body {
 }
 
 .Button--primary:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--primary:disabled {
@@ -3483,7 +3491,8 @@ body {
 }
 
 .Button--success:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--success:disabled {
@@ -3503,7 +3512,8 @@ body {
 }
 
 .Button--alert:focus {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--alert:disabled {
@@ -3520,7 +3530,8 @@ body {
 }
 
 .Button--transparent:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--transparent:active {
@@ -3543,31 +3554,36 @@ 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);
 }
 
 .Button--selected:focus:active {
   background: var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px 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 {
@@ -3583,119 +3599,128 @@ 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);
 }
 
 .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 2px var(--primary);
+}
+
+.Button-outlined--selected:focus:active {
+  background: var(--primary-lighter);
+  color: var(--primary-darker);
+  box-shadow: inset 0 0 0 2px 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);
+  box-shadow: inset 0 0 0 1px var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .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);
+  box-shadow: inset 0 0 0 1px var(--alert);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .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 */
@@ -3817,15 +3842,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 {
@@ -3833,7 +3860,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);
 }
 
@@ -3842,17 +3869,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 {
@@ -3873,34 +3900,35 @@ 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);
 }
 
 .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,
@@ -3909,32 +3937,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,
@@ -3959,16 +3989,55 @@ body {
   width: var(--spacing-80);
 }
 
-.Calendar-valueWrapper--dummy {
-  opacity: var(--opacity-20);
+.Calendar-valueWrapper--dummy .Calendar-value {
+  border: none;
+}
+
+.Calendar-valueWrapper--dummy .Calendar-value:hover {
+  background: var(--secondary-lightest);
+}
+
+.Calendar-valueWrapper--dummy .Calendar-value:active {
+  background: var(--secondary-lighter);
+}
+
+.Calendar-valueWrapper--dummy.Calendar-valueWrapper--inRange .Calendar-inRangeValue:hover,
+.Calendar-valueWrapper--dummy.Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:hover {
+  background: var(--primary-lightest);
+  color: var(--inverse-light);
 }
 
 .Calendar-valueWrapper--disabled {
   opacity: var(--opacity-10);
 }
 
-.Calendar-valueWrapper--active-dummy {
-  opacity: var(--opacity-16);
+.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);
+}
+
+.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 {
@@ -3991,6 +4060,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 {
@@ -4010,23 +4087,25 @@ body {
 }
 
 .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 */
@@ -4392,7 +4471,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 {
@@ -4406,8 +4494,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 {
@@ -4434,8 +4522,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 {
@@ -4451,23 +4539,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,
@@ -4484,8 +4575,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 {
@@ -4500,8 +4593,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 {
@@ -4516,7 +4609,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 {
@@ -4536,7 +4629,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 {
@@ -4555,7 +4648,7 @@ body {
 }
 
 .Chip-icon--clear {
-  padding-right: var(--spacing-05);
+  padding-right: 0;
 }
 
 .ChipGroup {
@@ -4604,6 +4697,8 @@ body {
 .Checkbox-label {
   display: flex;
   cursor: pointer;
+  margin-left: calc(-1 * var(--spacing-20));
+  padding-left: var(--spacing-20);
 }
 
 .Checkbox-label--tiny {
@@ -4645,22 +4740,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);
 }
 
@@ -4669,7 +4765,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);
 }
 
@@ -4683,7 +4779,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;
 }
@@ -4712,10 +4807,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);
 }
@@ -4740,7 +4831,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,
@@ -4785,6 +4875,7 @@ body {
 .Dropdown-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .Dropdown-section {
@@ -6365,7 +6456,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 {
@@ -6390,8 +6481,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);
 }
@@ -6401,19 +6490,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 {
@@ -6424,8 +6517,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 {
@@ -6537,11 +6630,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);
 }
 
@@ -6615,8 +6708,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 {
@@ -6646,8 +6740,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 {
@@ -6930,11 +7025,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 {
@@ -6954,6 +7051,7 @@ body {
 
 .Link--subtle {
   color: var(--inverse-lighter);
+  border-bottom-color: transparent;
 }
 
 .Link--default:hover {
@@ -6968,22 +7066,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 {
@@ -7645,6 +7733,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);
 }
@@ -7654,8 +7754,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 {
@@ -7665,6 +7770,7 @@ body {
 }
 
 .Slider-handle--disabled:focus {
+  outline: none;
   box-shadow: none;
 }
 
@@ -7870,7 +7976,7 @@ body {
 }
 
 .Radio-defaultWrapper {
-  border: var(--border);
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Radio-errorWrapper {
@@ -7907,6 +8013,8 @@ body {
 .Radio-Label {
   display: flex;
   cursor: pointer;
+  margin-left: calc(-1 * var(--spacing-20));
+  padding-left: var(--spacing-20);
 }
 
 .Radio-wrapper {
@@ -7929,13 +8037,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 {
@@ -7951,29 +8059,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);
 }
 
@@ -8063,11 +8169,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;
 }
 
 .StatusHint {
@@ -8182,11 +8288,11 @@ body {
 }
 
 .Circle--primary {
-  stroke: var(--primary);
+  stroke: var(--primary-dark);
 }
 
 .Circle--secondary {
-  stroke: var(--secondary-dark);
+  stroke: var(--inverse-lighter);
 }
 
 .Circle--white {
@@ -8194,7 +8300,7 @@ body {
 }
 
 .Circle--alert {
-  stroke: var(--alert);
+  stroke: var(--alert-dark);
 }
 
 /* Subheading */
@@ -8267,12 +8373,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);
 }
 
@@ -8292,6 +8400,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);
 }
@@ -8313,6 +8429,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 {
@@ -8325,6 +8442,7 @@ body {
 .Switch-wrapper--checked:before {
   transform: translateX(100%);
   transition-duration: 80ms;
+  border-color: transparent;
 }
 
 .Switch--disabled {
@@ -8335,10 +8453,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;
+}
+
 /* Textarea */
 
 .Textarea {
@@ -8371,9 +8497,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 {
@@ -8393,8 +8519,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 {
@@ -8861,25 +8988,55 @@ 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 {
@@ -8887,8 +9044,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 {
@@ -8930,6 +9087,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);
@@ -8948,8 +9109,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 {
@@ -8961,29 +9122,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;
@@ -9358,8 +9527,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 {
@@ -9644,8 +9813,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 */
@@ -9664,8 +9833,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 */
@@ -9674,6 +9843,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 {
@@ -9683,8 +9853,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 {
@@ -9780,6 +9950,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;
 }
@@ -9797,6 +9983,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);
 }
@@ -9810,10 +10000,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 {
@@ -9825,7 +10014,8 @@ body {
 }
 
 .Tab:active:focus {
-  box-shadow: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 0;
 }
 
 .Tab--disabled {
@@ -9833,7 +10023,7 @@ body {
 }
 
 .Tab--disabled:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .Tab--disabled:hover::after {
@@ -9867,15 +10057,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 {
@@ -9887,7 +10082,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 {
@@ -10516,8 +10711,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 {
@@ -10542,8 +10737,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 {
@@ -10569,9 +10764,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 {
@@ -10614,8 +10808,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 {
@@ -10644,8 +10839,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 {
@@ -10747,7 +10943,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 {
@@ -10764,7 +10961,8 @@ body {
 
 .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 {
@@ -10783,7 +10981,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 {
@@ -10811,7 +11010,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 {
@@ -10936,10 +11136,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 */
@@ -11012,10 +11213,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 {
@@ -11051,9 +11253,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 */
@@ -11070,11 +11270,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;
@@ -11166,7 +11361,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 {
@@ -11206,7 +11401,6 @@ body {
 
 .Select-trigger--error {
   border: var(--border-width-2-5) solid var(--alert) !important;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Menu {
@@ -11359,6 +11553,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);
 }
@@ -11506,7 +11701,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;
@@ -11560,9 +11755,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;
 }
@@ -11777,8 +11972,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 */
@@ -11828,10 +12023,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 {
@@ -11914,8 +12108,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 {
@@ -11994,19 +12189,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));
 }