@servicetitan/design-system 11.8.0 → 12.2.0

package/dist/components/index.css

@@ -348,8 +348,8 @@ span.Popover {
 .Field.Field--error .Input > input,
 .Field.Field--error .TextArea {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
 }
 .Fields.Fields--error .Field .Input > input:focus,
@@ -357,8 +357,8 @@ span.Popover {
 .Field.Field--error .Input > input:focus,
 .Field.Field--error .TextArea:focus {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   -webkit-appearance: none;
 }
@@ -487,8 +487,8 @@ span.Popover {
   opacity: 0.4;
 }
 .Trigger.Trigger--error .Trigger__placeholder {
-  color: var(--colorsTextCritical, #e63717);
-  opacity: 0.6;
+  color: var(--colorsTextCritical, #bf2a00);
+  opacity: 0.4;
 }
 .Trigger .Trigger__clear.Button {
   border-radius: 100%;
@@ -514,21 +514,21 @@ span.Popover {
   border-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--open.Trigger--error {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 
 .Trigger--error {
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--error:focus, .Trigger--error:active {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Trigger--error .Trigger__value,
 .Trigger--error .Button {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 
 .Trigger--disabled {
@@ -540,7 +540,7 @@ span.Popover {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Trigger--disabled.Trigger--error .Trigger__clear.Button--disabled.Button--subtle {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Trigger--disabled .Trigger__clear.Button--disabled.Button--subtle {
   opacity: 1;
@@ -549,7 +549,7 @@ span.Popover {
 .Trigger__shortLabel {
   align-items: center;
   background: transparent;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   display: flex;
   margin: -7px 0 -7px -12px;
   z-index: 0;
@@ -562,8 +562,8 @@ span.Popover {
   margin-right: 11px;
 }
 .Trigger--error .Trigger__shortLabel {
-  color: var(--colorsTextCritical, #e63717);
-  border-color: var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .Trigger-open .Trigger__shortLabel, .Trigger:active .Trigger__shortLabel {
   border-color: var(--colorsBorderPrimary, #2270ee);
@@ -583,7 +583,7 @@ span.Popover {
   border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--error:active .Trigger__shortLabel--left, .Trigger--error.Trigger--open .Trigger__shortLabel--left {
-  border-right-color: var(--colorsBorderCritical, #e63717);
+  border-right-color: var(--colorsBorderCritical, #e13212);
 }
 
 .Trigger__shortLabel--right {
@@ -600,7 +600,7 @@ span.Popover {
   border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Trigger--error:active .Trigger__shortLabel--right, .Trigger--error.Trigger--open .Trigger__shortLabel--right {
-  border-right-color: var(--colorsBorderCritical, #e63717);
+  border-right-color: var(--colorsBorderCritical, #e13212);
 }
 
 .Trigger__controls {
@@ -612,10 +612,10 @@ span.Popover {
 
 .Trigger__arrow.a-Icon {
   align-self: center;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 .Trigger--error .Trigger__arrow.a-Icon {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 
 .Trigger__value {
@@ -912,6 +912,7 @@ span.Popover {
 }
 
 .Breadcrumb {
+  all: unset;
   /* Set color on root of component. It can be overridden after the @include */
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
@@ -924,7 +925,7 @@ span.Popover {
 
 .Breadcrumb-Link {
   align-items: center;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   display: inline-flex;
   line-height: 1.5;
   margin-top: 8px;
@@ -1106,7 +1107,7 @@ button.Button {
 }
 
 .Button--red {
-  background-color: var(--colorsSurfaceCritical, #e63717);
+  background-color: var(--colorsSurfaceCritical, #e13212);
   color: var(--colorsTextOnCritical, #ffffff);
 }
 .Button--red:hover::before {
@@ -1120,27 +1121,27 @@ button.Button {
 }
 .Button--red.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--outline:hover::before {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
 }
 .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 .Button--red.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Button--red.Button--subtle {
   background-color: transparent;
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--subtle:hover::before {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
 }
 .Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
 
 .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
@@ -1395,17 +1396,17 @@ button.Button--full {
   box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected .Button {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.1));
   color: var(--colorsTextCritical, #f94d32);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 var(--colorsBorderCritical, #e63717), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderCritical, #e13212), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--neutral .ButtonToggle__Item .Button,
@@ -1568,14 +1569,14 @@ button.Button--full {
   border-bottom-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--error > .CardSection {
-  border-left-color: var(--colorsBorderCritical, #e63717);
-  border-right-color: var(--colorsBorderCritical, #e63717);
+  border-left-color: var(--colorsBorderCritical, #e13212);
+  border-right-color: var(--colorsBorderCritical, #e13212);
 }
 .Card--error > .CardSection:first-child {
-  border-top-color: var(--colorsBorderCritical, #e63717);
+  border-top-color: var(--colorsBorderCritical, #e13212);
 }
 .Card--error > .CardSection:last-child {
-  border-bottom-color: var(--colorsBorderCritical, #e63717);
+  border-bottom-color: var(--colorsBorderCritical, #e13212);
 }
 .CardSection:first-child {
   border-top-left-radius: 6px;
@@ -1823,7 +1824,7 @@ button.Button--full {
   opacity: 1;
 }
 .Checkbox--error .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error .Checkbox--checked .Checkbox__box::before, .Checkbox--error .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--error .Checkbox--indeterminate .Checkbox__box {
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
@@ -1835,20 +1836,20 @@ button.Button--full {
   border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
   box-shadow: 0 0 0 16px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--error.Checkbox--checked:not(.Checkbox--disabled):hover .Checkbox__box::before, .Checkbox--error.Checkbox--indeterminate:not(.Checkbox--disabled):hover .Checkbox__box::before {
-  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e13212) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
   border-color: var(--colorsBorderPrimary, #2270ee);
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__box, .Checkbox--focus-visible.Checkbox--error:focus-within .Checkbox__input:checked + .Checkbox__box {
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
   box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
@@ -2429,7 +2430,7 @@ button.Button--full {
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
   font-size: 12px;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: block;
@@ -2768,7 +2769,7 @@ button.Button--full {
 }
 
 .FormField__errorText {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -2778,7 +2779,7 @@ button.Button--full {
 }
 
 .FormField__description {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -2807,23 +2808,23 @@ button.Button--full {
 
 /* Errors on Semantic Dropdown */
 .FormField--error .semantic-anvil-theme .ui.dropdown {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu {
-  border-color: var(--colorsBorderCritical, #e63717) !important;
+  border-color: var(--colorsBorderCritical, #e13212) !important;
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item:hover, .FormField--error .semantic-anvil-theme .ui.dropdown .menu > .item.selected:hover {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
-  color: var(--colorsTextCritical, #e63717);
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .FormField--error .semantic-anvil-theme .ui.dropdown:focus, .FormField--error .semantic-anvil-theme .ui.dropdown:focus-within {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
@@ -3009,10 +3010,10 @@ button.Button--full {
   color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
-  height: 100vh;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: calc(var(--frame-vh, 1vh) * 100);
+  min-height: calc(var(--frame-vh, 1vh) * 100);
 }
 
 .Frame__header {
@@ -7848,7 +7849,7 @@ button.a-Icon svg {
 }
 
 .InlineEdit__content--error {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 
 .InlineEdit__content--underline .InlineEdit__value::before {
@@ -7859,7 +7860,7 @@ button.a-Icon svg {
   border-bottom: 1px dashed currentColor;
 }
 .InlineEdit__content--underline.InlineEdit__content--error::before {
-  border-bottom-color: var(--colorsBorderCritical, #e63717);
+  border-bottom-color: var(--colorsBorderCritical, #e13212);
 }
 
 .InlineEdit__value--placeholder {
@@ -8103,15 +8104,15 @@ button.a-Icon svg {
 }
 .Input.Input--error > .Input__InnerWrapper {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .Input.Input--error > .Input__InnerWrapper > input {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   box-shadow: none;
   /* Error Placeholder */
 }
 .Input.Input--error > .Input__InnerWrapper > input::placeholder {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
 .Input.Input--error > .Input__InnerWrapper > input:autofill {
@@ -8127,13 +8128,13 @@ button.a-Icon svg {
   box-shadow: none !important;
 }
 .Input.Input--error > .Input__InnerWrapper > .InputAddon {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Input.Input--error:focus-within, .Input.Input--error.Input--focus {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .Input.Input--error .InputAddon .a-Icon {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .Input.Input--loading.Input--loading .Spinner {
   line-height: 1;
@@ -8150,7 +8151,7 @@ button.a-Icon svg {
   border-radius: 0 !important;
 }
 .Input > .Input__InnerWrapper .a-Icon {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   transition: opacity 0.3s ease;
   line-height: inherit;
 }
@@ -8165,7 +8166,7 @@ button.a-Icon svg {
   font-size: 16px;
   z-index: 0;
   /* Differ from Semantic UI */
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   height: auto;
   display: flex;
   align-items: center;
@@ -8292,14 +8293,14 @@ button.a-Icon svg {
 }
 
 .Label__optional {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   font-weight: 400;
   margin-left: 2px;
 }
 
 .Label__help {
   bottom: 2px;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   margin-left: 4px;
   position: relative;
 }
@@ -8468,7 +8469,7 @@ button.a-Icon svg {
 }
 
 .Link--grey {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 
 .Link--disabled {
@@ -8653,7 +8654,7 @@ button.a-Icon svg {
   display: inline-flex;
   background-color: var(--colorsSurfaceGrey, #eeeeee);
   border-radius: 50%;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   margin-left: 4px;
   font-family: "Nunito Sans", sans-serif;
   line-height: 1.5;
@@ -8751,40 +8752,36 @@ button.a-Icon svg {
 }
 
 /* Produces padding equal to the depth of the option. 8 is an arbitrary stopping point */
-[aria-level="0"].OptionList__option {
-  padding-left: 16px;
-}
-
 [aria-level="1"].OptionList__option {
-  padding-left: 36px;
+  padding-left: 16px;
 }
 
 [aria-level="2"].OptionList__option {
-  padding-left: 52px;
+  padding-left: 36px;
 }
 
 [aria-level="3"].OptionList__option {
-  padding-left: 68px;
+  padding-left: 52px;
 }
 
 [aria-level="4"].OptionList__option {
-  padding-left: 84px;
+  padding-left: 68px;
 }
 
 [aria-level="5"].OptionList__option {
-  padding-left: 100px;
+  padding-left: 84px;
 }
 
 [aria-level="6"].OptionList__option {
-  padding-left: 116px;
+  padding-left: 100px;
 }
 
 [aria-level="7"].OptionList__option {
-  padding-left: 132px;
+  padding-left: 116px;
 }
 
 [aria-level="8"].OptionList__option {
-  padding-left: 148px;
+  padding-left: 132px;
 }
 
 /* Button styling of expand/collapse next to option */
@@ -9149,13 +9146,13 @@ button.a-Icon svg {
 }
 
 .ProgressBar--red::-webkit-progress-value {
-  background: var(--colorsStatusCritical, #e63717);
+  background: var(--colorsStatusCritical, #e13212);
 }
 .ProgressBar--red::-moz-progress-bar {
-  background: var(--colorsStatusCritical, #e63717);
+  background: var(--colorsStatusCritical, #e13212);
 }
 .ProgressBar--red .ProgressBar__value {
-  background: var(--colorsStatusCritical, #e63717);
+  background: var(--colorsStatusCritical, #e13212);
 }
 
 .ProgressBar--yellow::-webkit-progress-value {
@@ -9252,7 +9249,7 @@ button.a-Icon svg {
 }
 
 .ProgressTrackerStep {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   display: flex;
   align-items: center;
   position: relative;
@@ -9483,13 +9480,13 @@ button.a-Icon svg {
   height: 8px;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box, .Radio--checked.Radio--error .Radio__box {
-  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e13212) inset;
 }
 .a-Radio .Radio--error .Radio__input:checked + .Radio__box .Radio__box::after, .a-Radio .Radio--checked.Radio--error .Radio__box::after {
   background-color: transparent;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box::before, .Radio--checked.Radio--error .Radio__box::before {
-  box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e13212) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__box {
   box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
@@ -9504,16 +9501,16 @@ button.a-Icon svg {
   box-shadow: 0 0 0 1px #f94d32 inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box {
-  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderCritical, #e13212) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__input:checked + .Radio__box::before, .Radio--error:not(.Radio--disabled).Radio--checked:hover .Radio__box::before {
-  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e13212) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
   box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset, 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .Radio--error.Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e13212) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Radio--disabled .Radio__box {
@@ -9706,20 +9703,20 @@ button.a-Icon svg {
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error {
   color: var(--colorsTextCritical, #f94d32);
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu {
-  border-color: var(--colorsBorderCritical, #e63717) !important;
+  border-color: var(--colorsBorderCritical, #e13212) !important;
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item {
   color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item.selected {
-  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.03));
+  background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.03));
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
-  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.08));
+  background-color: var(--colorsHoverCritical, rgba(225, 50, 18, 0.08));
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error:focus, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error:focus-within {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0) !important;
@@ -9732,7 +9729,7 @@ button.a-Icon svg {
   opacity: 0.4;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown > .dropdown.icon {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.loading .icon svg {
   display: none;
@@ -9864,6 +9861,7 @@ button.a-Icon svg {
 .Sidebar__content {
   transition: opacity 0.25s, visibility 0.25s;
   overflow: auto;
+  width: 239px;
 }
 
 .Sidebar,
@@ -9896,6 +9894,9 @@ button.a-Icon svg {
   width: 29px;
   transition: width 0.25s;
 }
+.Sidebar--collapsed .Sidebar__content-wrapper {
+  overflow-x: hidden;
+}
 .Sidebar--collapsed .Sidebar__content {
   visibility: hidden;
   overflow: hidden;
@@ -10544,7 +10545,7 @@ button.a-Icon svg {
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   cursor: pointer;
   line-height: 1;
   display: flex;
@@ -10566,7 +10567,7 @@ button.a-Icon svg {
   height: 100%;
   display: flex;
   align-items: center;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -10601,7 +10602,7 @@ button.a-Icon svg {
 
 .Tab--inactive:hover, .Tab--inactive--hover {
   box-shadow: 0 -2px 0 var(--colorsFocusRingPrimary, #a9d1ff) inset;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   text-decoration: none;
 }
 
@@ -10828,7 +10829,7 @@ button.a-Icon svg {
   bottom: 8px;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
 }
 .Table .k-grid-header .k-header .k-icon.k-i-more-vertical::before {
@@ -11035,7 +11036,7 @@ button.a-Icon svg {
   color: white;
 }
 .Tag.Tag--critical {
-  background-color: #e63717;
+  background-color: #e13212;
 }
 .Tag.Tag--warning {
   background-color: #df7600;
@@ -11483,16 +11484,16 @@ button.a-Icon svg {
 
 .TextArea.TextArea--error {
   background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
-  border-color: var(--colorsBorderCritical, #e63717);
-  color: var(--colorsTextCritical, #e63717);
+  border-color: var(--colorsBorderCritical, #e13212);
+  color: var(--colorsTextCritical, #bf2a00);
   /* Error Placeholder */
 }
 .TextArea.TextArea--error:focus-within, .TextArea.TextArea--error:focus {
   box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 .TextArea.TextArea--error::placeholder {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
 .TextArea.TextArea--error:autofill {
@@ -11618,6 +11619,7 @@ button.a-Icon svg {
   line-height: 1.5;
   padding: 24px;
   width: 375px;
+  max-width: 100%;
   position: relative;
 }
 
@@ -11730,6 +11732,7 @@ button.a-Icon svg {
   right: 16px;
   position: fixed;
   z-index: 1200;
+  max-width: calc(100% - 32px);
 }
 
 .Togglebox {
@@ -11788,7 +11791,7 @@ button.a-Icon svg {
   width: 100%;
 }
 .Togglebox__content--title .Togglebox__children {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 .Togglebox--radio .Togglebox__children {
   padding-left: 9px;