@servicetitan/design-system 11.7.0 → 12.1.0

package/dist/components/Input/Input.css

@@ -178,15 +178,15 @@
 }
 .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 {
@@ -202,13 +202,13 @@
   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;
@@ -225,7 +225,7 @@
   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;
 }
@@ -240,7 +240,7 @@
   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;

package/dist/components/Input/index.css

@@ -178,15 +178,15 @@
 }
 .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 {
@@ -202,13 +202,13 @@
   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;
@@ -225,7 +225,7 @@
   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;
 }
@@ -240,7 +240,7 @@
   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;

package/dist/components/Label/Label.css

@@ -21,14 +21,14 @@
 }
 
 .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;
 }

package/dist/components/Label/index.css

@@ -21,14 +21,14 @@
 }
 
 .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;
 }

package/dist/components/Link/Link.css

@@ -22,7 +22,7 @@
 }
 
 .Link--grey {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 
 .Link--disabled {

package/dist/components/Link/index.css

@@ -22,7 +22,7 @@
 }
 
 .Link--grey {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 
 .Link--disabled {

package/dist/components/Modal/Modal.d.ts

@@ -18,6 +18,8 @@ export interface ModalProps extends ModalHeaderProps, ModalWindowProps {
     size?: ModalSizes;
     /** Options passed into FocusTrap */
     focusTrapOptions?: FocusTrapProps;
+    /** Adds classnames to Modal's content wrapper */
+    contentClassName?: string;
 }
 export interface Modal extends FC<ModalProps> {
     /** Subcomponents */

package/dist/components/Modal/Modal.js

@@ -9,13 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import classnames from 'classnames';
 import React from 'react';
 import { ModalWindow, ModalHeader, ModalFooter, ModalContent, ModalSizes, } from './components';
 export const Modal = (_a) => {
-    var { children, footer, footerAlign, onClose, open, portal = true, scrollable = true, size, title, focusTrapOptions } = _a, rest = __rest(_a, ["children", "footer", "footerAlign", "onClose", "open", "portal", "scrollable", "size", "title", "focusTrapOptions"]);
+    var { children, footer, footerAlign, onClose, open, portal = true, scrollable = true, size, title, focusTrapOptions, contentClassName } = _a, rest = __rest(_a, ["children", "footer", "footerAlign", "onClose", "open", "portal", "scrollable", "size", "title", "focusTrapOptions", "contentClassName"]);
     return (React.createElement(ModalWindow, Object.assign({ onClose: onClose, size: size, focusTrapOptions: focusTrapOptions, open: open, portal: portal, "data-anvil-component": "Modal" }, rest),
         React.createElement(ModalHeader, { title: title, onClose: onClose }),
-        React.createElement(ModalContent, { className: "fs-3", scrollable: scrollable }, children),
+        React.createElement(ModalContent, { className: classnames('fs-3', contentClassName), scrollable: scrollable }, children),
         footer && React.createElement(ModalFooter, { align: footerAlign }, footer)));
 };
 Modal.Window = ModalWindow;

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,EACN,WAAW,EAEX,WAAW,EAEX,WAAW,EAEX,YAAY,EACZ,UAAU,GACV,MAAM,cAAc,CAAC;AAqCtB,MAAM,CAAC,MAAM,KAAK,GAAU,CAAC,EAY5B,EAAE,EAAE;QAZwB,EAC5B,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,EACJ,KAAK,EACL,gBAAgB,OAEhB,EADG,IAAI,cAXqB,qHAY5B,CADO;IACF,OAAA,CACL,oBAAC,WAAW,kBACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,0BACO,OAAO,IACxB,IAAI;QAER,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QAC/C,oBAAC,YAAY,IAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAE,UAAU,IACnD,QAAQ,CACK;QACd,MAAM,IAAI,oBAAC,WAAW,IAAC,KAAK,EAAE,WAAW,IAAG,MAAM,CAAe,CACrD,CACd,CAAA;CAAA,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAC7B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,EACN,WAAW,EAEX,WAAW,EAEX,WAAW,EAEX,YAAY,EACZ,UAAU,GACV,MAAM,cAAc,CAAC;AAwCtB,MAAM,CAAC,MAAM,KAAK,GAAU,CAAC,EAa5B,EAAE,EAAE;QAbwB,EAC5B,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,gBAAgB,OAEhB,EADG,IAAI,cAZqB,yIAa5B,CADO;IACF,OAAA,CACL,oBAAC,WAAW,kBACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,0BACO,OAAO,IACxB,IAAI;QAER,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QAC/C,oBAAC,YAAY,IACZ,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,EAC/C,UAAU,EAAE,UAAU,IAErB,QAAQ,CACK;QACd,MAAM,IAAI,oBAAC,WAAW,IAAC,KAAK,EAAE,WAAW,IAAG,MAAM,CAAe,CACrD,CACd,CAAA;CAAA,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAC7B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC"}

package/dist/components/MoreDetails/MoreDetails.css

@@ -2,7 +2,7 @@
   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;

package/dist/components/MoreDetails/index.css

@@ -2,7 +2,7 @@
   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;

package/dist/components/ProgressBar/ProgressBar.css

@@ -67,13 +67,13 @@
 }
 
 .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 {

package/dist/components/ProgressBar/index.css

@@ -67,13 +67,13 @@
 }
 
 .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 {

package/dist/components/ProgressTracker/ProgressTrackerStep.css

@@ -1,5 +1,5 @@
 .ProgressTrackerStep {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   display: flex;
   align-items: center;
   position: relative;

package/dist/components/ProgressTracker/index.css

@@ -27,7 +27,7 @@
 }
 
 .ProgressTrackerStep {
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
   display: flex;
   align-items: center;
   position: relative;

package/dist/components/Radio/Radio.css

@@ -44,8 +44,8 @@
 .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,
@@ -53,8 +53,8 @@
 .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;
 }
@@ -217,13 +217,13 @@
   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;
@@ -238,16 +238,16 @@
   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 {

package/dist/components/Radio/index.css

@@ -44,8 +44,8 @@
 .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,
@@ -53,8 +53,8 @@
 .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;
 }
@@ -217,13 +217,13 @@
   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;
@@ -238,16 +238,16 @@
   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 {

package/dist/components/Select/Select.css

@@ -26,20 +26,20 @@
 .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;
@@ -52,7 +52,7 @@
   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;

package/dist/components/Select/index.css

@@ -26,20 +26,20 @@
 .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;
@@ -52,7 +52,7 @@
   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;

package/dist/components/Tab/Tab.css

@@ -6,7 +6,7 @@
   /* 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;
@@ -28,7 +28,7 @@
   height: 100%;
   display: flex;
   align-items: center;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -63,7 +63,7 @@
 
 .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;
 }
 

package/dist/components/Tab/index.css

@@ -6,7 +6,7 @@
   /* 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;
@@ -28,7 +28,7 @@
   height: 100%;
   display: flex;
   align-items: center;
-  color: var(--colorsTextSubdued, #737475);
+  color: var(--colorsTextSubdued, #606162);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -63,7 +63,7 @@
 
 .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;
 }
 

package/dist/components/Table/Table.css

@@ -44,8 +44,8 @@
 .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,
@@ -53,8 +53,8 @@
 .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;
 }
@@ -219,7 +219,7 @@
   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);
@@ -231,20 +231,20 @@
   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);
 }
 
@@ -458,7 +458,7 @@ span.Popover {
   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 {

package/dist/components/Table/index.css

@@ -44,8 +44,8 @@
 .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,
@@ -53,8 +53,8 @@
 .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;
 }
@@ -219,7 +219,7 @@
   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);
@@ -231,20 +231,20 @@
   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);
 }
 
@@ -458,7 +458,7 @@ span.Popover {
   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 {

package/dist/components/Tag/Tag.css

@@ -22,7 +22,7 @@
   color: white;
 }
 .Tag.Tag--critical {
-  background-color: #e63717;
+  background-color: #e13212;
 }
 .Tag.Tag--warning {
   background-color: #df7600;