@servicetitan/design-system 11.9.0 → 12.2.1

package/dist/system.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 html {
-  --anvil-version: "11.9.0";
+  --anvil-version: "12.2.1";
 }
 
 /*
@@ -67,8 +67,8 @@ a:focus {
 .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,
@@ -76,8 +76,8 @@ a:focus {
 .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;
 }
@@ -242,7 +242,7 @@ a:focus {
   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);
@@ -254,20 +254,20 @@ a:focus {
   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);
 }
 
@@ -16693,8 +16693,8 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   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%;
@@ -16720,21 +16720,21 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   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 {
@@ -16746,7 +16746,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   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;
@@ -16755,7 +16755,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 .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;
@@ -16768,8 +16768,8 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   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);
@@ -16789,7 +16789,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   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 {
@@ -16806,7 +16806,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
   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 {
@@ -16818,10 +16818,10 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .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 {
@@ -17118,6 +17118,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .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 */
@@ -17130,7 +17131,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 
 .Breadcrumb-Link {
   align-items: center;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   display: inline-flex;
   line-height: 1.5;
   margin-top: 8px;
@@ -17315,7 +17316,7 @@ button.Button {
 }
 
 .Button--red {
-  background-color: var(--colorsSurfaceCritical, #e63717);
+  background-color: var(--colorsSurfaceCritical, #e13212);
   color: var(--colorsTextOnCritical, #ffffff);
 }
 .Button--red:hover::before {
@@ -17329,27 +17330,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 {
@@ -17611,17 +17612,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,
@@ -17784,14 +17785,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;
@@ -18438,7 +18439,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;
@@ -18777,7 +18778,7 @@ button.Button--full {
 }
 
 .FormField__errorText {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -18787,7 +18788,7 @@ button.Button--full {
 }
 
 .FormField__description {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   font-size: 14px;
   line-height: 1.25;
   margin-top: 8px;
@@ -18816,23 +18817,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;
@@ -19018,10 +19019,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 {
@@ -23864,7 +23865,7 @@ button.a-Icon svg {
 }
 
 .InlineEdit__content--error {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
 }
 
 .InlineEdit__content--underline .InlineEdit__value::before {
@@ -23875,7 +23876,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 {
@@ -24135,23 +24136,23 @@ 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::-moz-placeholder {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
 .Input.Input--error > .Input__InnerWrapper > input:-ms-input-placeholder {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
 .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 {
@@ -24167,13 +24168,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;
@@ -24190,7 +24191,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;
 }
@@ -24205,7 +24206,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;
@@ -24341,14 +24342,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;
 }
@@ -24517,7 +24518,7 @@ button.a-Icon svg {
 }
 
 .Link--grey {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 
 .Link--disabled {
@@ -24702,7 +24703,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;
@@ -24800,40 +24801,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 */
@@ -25075,6 +25072,7 @@ button.a-Icon svg {
   position: sticky;
   z-index: 990;
   bottom: 0;
+  flex-shrink: 0;
 }
 @media (min-width: 480px) {
   .Page__footer {
@@ -25205,13 +25203,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 {
@@ -25320,7 +25318,7 @@ button.a-Icon svg {
 }
 
 .ProgressTrackerStep {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   display: flex;
   align-items: center;
   position: relative;
@@ -25551,13 +25549,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;
@@ -25572,16 +25570,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 {
@@ -25774,20 +25772,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;
@@ -25800,7 +25798,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;
@@ -25932,6 +25930,7 @@ button.a-Icon svg {
 .Sidebar__content {
   transition: opacity 0.25s, visibility 0.25s;
   overflow: auto;
+  width: 239px;
 }
 
 .Sidebar,
@@ -25964,6 +25963,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;
@@ -26667,7 +26669,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;
@@ -26692,7 +26694,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;
@@ -26727,7 +26729,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;
 }
 
@@ -26954,7 +26956,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 {
@@ -27167,7 +27169,7 @@ button.a-Icon svg {
   color: white;
 }
 .Tag.Tag--critical {
-  background-color: #e63717;
+  background-color: #e13212;
 }
 .Tag.Tag--warning {
   background-color: #df7600;
@@ -27631,24 +27633,24 @@ 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::-moz-placeholder {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
 .TextArea.TextArea--error:-ms-input-placeholder {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
 .TextArea.TextArea--error::placeholder {
-  color: var(--colorsTextCritical, #e63717);
+  color: var(--colorsTextCritical, #bf2a00);
   opacity: 0.4;
 }
 .TextArea.TextArea--error:autofill {
@@ -27778,6 +27780,7 @@ button.a-Icon svg {
   line-height: 1.5;
   padding: 24px;
   width: 375px;
+  max-width: 100%;
   position: relative;
 }
 
@@ -27890,6 +27893,7 @@ button.a-Icon svg {
   right: 16px;
   position: fixed;
   z-index: 1200;
+  max-width: calc(100% - 32px);
 }
 
 .Togglebox {
@@ -27948,7 +27952,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;
@@ -28745,11 +28749,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .bg-red-500 {
-  background-color: #e63717;
+  background-color: #e13212;
 }
 
 .bg-red-500-i {
-  background-color: #e63717 !important;
+  background-color: #e13212 !important;
 }
 
 .bg-red-600 {
@@ -29689,11 +29693,11 @@ _:-ms-lang(x), .Tooltip__body {
 }
 
 .c-red-500 {
-  color: #e63717;
+  color: #e13212;
 }
 
 .c-red-500-i {
-  color: #e63717 !important;
+  color: #e13212 !important;
 }
 
 .c-red-600 {