@servicetitan/design-system 11.3.0 → 11.4.1

package/dist/components/ProgressTracker/ProgressTrackerStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressTrackerStep.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerStep.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAoC/B,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EASjE,EAAE,EAAE;QAT6D,EACjE,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,UAAU,OAEV,EADG,KAAK,cARyD,kFASjE,CADQ;IAER,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,IAAI,SAAS;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC;QAC5C,IAAI,OAAO;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC;QACzC,OAAO,UAAU,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,0BAA0B,GAAG,UAAU,CAC5C,qBAAqB,EACrB,SAAS,EACT;QACC,6BAA6B,EAAE,MAAM;QACrC,+BAA+B,EAAE,SAAS;QAC1C,gCAAgC,EAC/B,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC;QAC3D,+BAA+B,EAAE,QAAQ;QACzC,8BAA8B,EAAE,OAAO;KACvC,CACD,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7C,OAAO,CACN,oBAAC,WAAW,kBACX,SAAS,EAAE,0BAA0B,EACrC,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IACxC,KAAK;QAET,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,EAAE,CAAO;QAC5D,KAAK,IAAI,6BAAK,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAO,CACtD,CACd,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"ProgressTrackerStep.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerStep.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAoC/B,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EASjE,EAAE,EAAE;QAT6D,EACjE,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,UAAU,OAEV,EADG,KAAK,cARyD,kFASjE,CADQ;IAER,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,IAAI,SAAS;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC;QAC5C,IAAI,OAAO;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC;QACzC,OAAO,UAAU,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,0BAA0B,GAAG,UAAU,CAC5C,qBAAqB,EACrB,SAAS,EACT;QACC,6BAA6B,EAAE,MAAM;QACrC,+BAA+B,EAAE,SAAS;QAC1C,gCAAgC,EAC/B,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC;QAC3D,+BAA+B,EAAE,QAAQ;QACzC,8BAA8B,EAAE,OAAO;KACvC,CACD,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7C,OAAO,CACN,oBAAC,WAAW,kBACX,SAAS,EAAE,0BAA0B,EACrC,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,0BACvB,qBAAqB,IACtC,KAAK;QAET,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,EAAE,CAAO;QAC5D,KAAK,IAAI,6BAAK,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAO,CACtD,CACd,CAAC;AACH,CAAC,CAAC"}

package/dist/components/ProgressTracker/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .ProgressTracker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;
@@ -23,11 +23,11 @@
   top: 50%;
   margin-top: -1px;
   height: 2px;
-  background-color: #dfe0e1;
+  background-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ProgressTrackerStep {
-  color: #949596;
+  color: var(--colorsTextSubdued, #737475);
   display: flex;
   align-items: center;
   position: relative;
@@ -46,7 +46,7 @@
 .ProgressTrackerStep:focus {
   outline: none;
   position: relative;
-  box-shadow: 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 /* Children */
@@ -54,8 +54,8 @@
   width: 1.8em;
   height: 1.8em;
   border-radius: 50%;
-  background: #bcbcbd;
-  color: #ffffff;
+  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
+  color: var(---colorsTextInverted, #ffffff);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -75,10 +75,10 @@
 }
 
 .ProgressTrackerStep--complete {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .ProgressTrackerStep--complete .ProgressTrackerStep__icon {
-  background-color: #1fbc70;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressTrackerStep--complete .a-Icon {
   font-size: 20px;
@@ -86,22 +86,18 @@
 
 .ProgressTrackerStep--editing,
 .ProgressTrackerStep--active {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressTrackerStep--disabled {
   pointer-events: none !important;
 }
 .ProgressTrackerStep--disabled, .ProgressTrackerStep--disabled:hover {
-  color: #949596;
   opacity: 0.6;
 }
-.ProgressTrackerStep--disabled .ProgressTrackerStep__icon, .ProgressTrackerStep--disabled:hover .ProgressTrackerStep__icon {
-  background-color: #bcbcbd;
-}
 
 /*# sourceMappingURL=index.css.map */

package/dist/components/ProgressTracker/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressTracker/ProgressTracker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/ProgressTracker/ProgressTrackerStep.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA;EACA;EACA;EACA,WE4Ha;EF3Hb,aE+FqB;;;AF5FtB;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBEgBiB;;;ACvCnB;EACC,ODwCkB;ECvClB;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA,YD+Fa;;;AC3Ff;AACA;EACC;EACA;EACA;EACA,YDSkB;ECRlB,ODhBa;ECiBb;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,aD8EW;;;AC3EZ;AACA;EACC;EACA,SD4DiB;;;ACzDlB;EACC,ODnCa;;ACqCb;EACC,kBDjCY;;ACoCb;EAAU,WD2EG;;;ACxEd;AAAA;EAEC,OD9Ca;;AC+Cb;AAAA;EAA6B,kBDlCb;;;ACqCjB;EACC;;AAEA;EAEC,OD/BiB;ECgCjB,SDoCiB;;ACnCjB;EAA6B,kBDlCZ","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressTracker/ProgressTracker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/ProgressTracker/ProgressTrackerStep.scss"],"names":[],"mappings":"AAAA;ACKA;ACJC;EACA;AAEA;EACA;EDGA;EACA;EACA;EACA,WE2Ha;EF1Hb,aE8FqB;;;AF3FtB;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAxBe;;;AGMjB;EACC,OARc;EASd;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA,YDyFa;;;ACrFf;AACA;EACC;EACA;EACA;EACA,YAnCc;EAoCd,OArCa;EAsCb;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,aDwEW;;;ACrEZ;AACA;EACC;EACA,SDsDiB;;;ACnDlB;EACC,OA1Da;;AA4Db;EACC,kBA1Da;;AA6Dd;EAAU,WDqEG;;;AClEd;AAAA;EAEC,OArEa;;AAsEb;AAAA;EAA6B,kBAlEf;;;AAqEf;EACC;;AAEA;EAEC,SD+BiB","file":"index.css"}

package/dist/components/Radio/Radio.css

@@ -64,11 +64,11 @@
 
 .a-Radio {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 27px;
 }
 .FormField .a-Radio {
@@ -142,9 +142,9 @@
 }
 
 .Radio__box {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
-  box-shadow: 0 0 0 1px #bcbcbd inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd) inset;
   display: inline-flex;
   flex-shrink: 0;
   margin-left: 1px;
@@ -173,7 +173,7 @@
   top: 7px;
 }
 .Radio__box::before {
-  box-shadow: 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
   border-radius: 100%;
   bottom: 0;
   content: "";
@@ -199,10 +199,10 @@
   width: 100%;
 }
 .Radio--error .Radio__box {
-  box-shadow: 0 0 0 1px #ffb2a0 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderCriticalSubdued, #ffb2a0) inset;
 }
 .Radio__input:checked + .Radio__box, .Radio--checked .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio .Radio__input:checked + .Radio__box::after, .a-Radio .Radio--checked .Radio__box::after {
   background-color: transparent;
@@ -220,37 +220,37 @@
   height: 8px;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box, .Radio--checked.Radio--error .Radio__box {
-  box-shadow: 0 0 0 2px #e63717 inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) 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 #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 1px #444445 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box::before, .Radio--checked:not(.Radio--disabled):hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__box {
   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 rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #f94d32 inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderCritical, #e63717) 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 rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset, 0 0 0 3px #a9d1ff;
+  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 #f94d32 inset, 0 0 0 3px #ffb2a0;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Radio--disabled .Radio__box {
@@ -258,7 +258,7 @@
   filter: grayscale(1);
 }
 .Radio--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Radio .Radio__label {

package/dist/components/Radio/Radio.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Radio/Radio.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCec;EDdd,cCkBc;EDjBd,OCiBc;EDhBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCOc;EDNd,cCUc;EDTd,OCSc;EDRd;EACA;;;AE3DF;ACtBC;EACA,OFiBa;AEfb;EACA;EDqBA;EACA,ODRa;ECgBb,aAjBe;;AAWf;EACC;EACA;;AAMD;EAAwB,aAnBT;;AAqBf;EAEC,aAxBc;;AA2Bf;EAEC,aA3Bc;;;AA+BhB;EACC;EACA;EACA;EACA;;AAEA;EAAkB;;AAClB;EAAkB;;AAElB;EAAqB;;;AAIrB;EAAW;;;AAIX;AAAA;EAEC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAIF;AACA;EHhFC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EGuEA;;AHrEA;EACC;IACC;IACA;;;;AGqEH;EACC,kBDtDiB;ECuDjB;EACA;EACA;EACA;EACA;EACA,cD2BW;EC1BX;EACA;EACA;EACA;EACA;EAGA,QAlGc;EAmGd,OAnGc;AAmJd;AAoCA;AAmCA;;AArHA;EACC,OAvGa;EAwGb,QAxGa;EAyGb;;AAGD;EACC,OA3Ga;EA4Gb,QA5Ga;EA6Gb;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAID;EAEC;;AAEA;EACC;;AAGD;EACC,OAzJgB;EA0JhB,QA1JgB;;AA4JhB;EACC,OA9Je;EA+Jf,QA/Je;;AAkKhB;EACC,OAjKe;EAkKf,QAlKe;;AAuKlB;EAEC;;AAEA;EACC;;AAGD;EAAY;;AAIb;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAKH;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAMH;EACC;;AAGD;EACC;;;AAKD;EACC,SD5HiB;EC6HjB;;AAGD;EACC,OD7NY;;;ACkOb;EACC,WDhHY;ECiHZ;EACA;EACA;;AAGD;EAAkB,WDvHL","file":"Radio.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Radio/Radio.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCgBc;EDfd,cCmBc;EDlBd,OCkBc;EDjBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCQc;EDPd,cCWc;EDVd,OCUc;EDTd;EACA;;;AEpDF;AC7BC;EACA;AAEA;EACA;ED4BA;EACA,OAfc;EAuBd,aA3Be;;AAqBf;EACC;EACA;;AAMD;EAAwB,aA7BT;;AA+Bf;EAEC,aAlCc;;AAqCf;EAEC,aArCc;;;AAyChB;EACC;EACA;EACA;EACA;;AAEA;EAAkB;;AAClB;EAAkB;;AAElB;EAAqB;;;AAIrB;EAAW;;;AAIX;AAAA;EAEC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAIF;AACA;EHvFC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EG8EA;;AH5EA;EACC;IACC;IACA;;;;AG4EH;EACC,kBA5EoB;EA6EpB;EACA;EACA;EACA;EACA;EACA,cDqBW;ECpBX;EACA;EACA;EACA;EACA;EAGA,QAzGc;EA0Gd,OA1Gc;AA0Jd;AAoCA;AAmCA;;AArHA;EACC,OA9Ga;EA+Gb,QA/Ga;EAgHb;;AAGD;EACC,OAlHa;EAmHb,QAnHa;EAoHb;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAID;EAEC;;AAEA;EACC;;AAGD;EACC,OAhKgB;EAiKhB,QAjKgB;;AAmKhB;EACC,OArKe;EAsKf,QAtKe;;AAyKhB;EACC,OAxKe;EAyKf,QAzKe;;AA8KlB;EAEC;;AAEA;EACC;;AAGD;EAAY;;AAIb;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAKH;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAMH;EACC;;AAGD;EACC;;;AAKD;EACC,SDlIiB;ECmIjB;;AAGD;EACC,OApOa;;;AAyOd;EACC,WDtHY;ECuHZ;EACA;EACA;;AAGD;EAAkB,WD7HL","file":"Radio.css"}

package/dist/components/Radio/Radio.js

@@ -52,7 +52,7 @@ export const Radio = React.forwardRef(function (props, ref) {
         'Radio--large': size === 'large',
         'Radio--focus-visible': isFocusVisible,
     });
-    return (React.createElement("div", Object.assign({ className: RadioClasses, onClick: handleClickEvent, ref: itemRef }, rest),
+    return (React.createElement("div", Object.assign({ className: RadioClasses, onClick: handleClickEvent, ref: itemRef, "data-anvil-component": "Radio" }, rest),
         React.createElement("label", { className: "Radio__html-label" },
             React.createElement("input", { checked: checked, className: "Radio__input", disabled: disabled, id: id, name: name, onChange: onChangeHandler, onClick: onClickHandler, role: "radio", type: "radio" }),
             React.createElement("span", { className: "Radio__box" }),

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"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"}

package/dist/components/Radio/index.css

@@ -64,11 +64,11 @@
 
 .a-Radio {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   margin-left: 27px;
 }
 .FormField .a-Radio {
@@ -142,9 +142,9 @@
 }
 
 .Radio__box {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 100%;
-  box-shadow: 0 0 0 1px #bcbcbd inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd) inset;
   display: inline-flex;
   flex-shrink: 0;
   margin-left: 1px;
@@ -173,7 +173,7 @@
   top: 7px;
 }
 .Radio__box::before {
-  box-shadow: 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
   border-radius: 100%;
   bottom: 0;
   content: "";
@@ -199,10 +199,10 @@
   width: 100%;
 }
 .Radio--error .Radio__box {
-  box-shadow: 0 0 0 1px #ffb2a0 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderCriticalSubdued, #ffb2a0) inset;
 }
 .Radio__input:checked + .Radio__box, .Radio--checked .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio .Radio__input:checked + .Radio__box::after, .a-Radio .Radio--checked .Radio__box::after {
   background-color: transparent;
@@ -220,37 +220,37 @@
   height: 8px;
 }
 .Radio--error .Radio__input:checked + .Radio__box .Radio__box, .Radio--checked.Radio--error .Radio__box {
-  box-shadow: 0 0 0 2px #e63717 inset;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) 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 #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 1px #444445 inset;
+  box-shadow: 0 0 0 1px var(--colorsBorderDefault, #444445) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box, .Radio--checked:not(.Radio--disabled):hover .Radio__box {
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #2270ee inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .a-Radio:not(.Radio--disabled):hover .Radio__input:checked + .Radio__box::before, .Radio--checked:not(.Radio--disabled):hover .Radio__box::before {
-  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #2270ee inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Radio--error:not(.Radio--disabled).a-Radio:hover .Radio__box {
   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 rgba(255, 255, 255, 0.16) inset, 0 0 0 2px #f94d32 inset;
+  box-shadow: 0 0 0 2px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 2px var(--colorsBorderCritical, #e63717) 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 rgba(255, 255, 255, 0.16) inset, 0 0 0 8px #f94d32 inset;
+  box-shadow: 0 0 0 8px var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16)) inset, 0 0 0 8px var(--colorsBorderCritical, #e63717) inset;
 }
 .Radio--focus-visible:focus-within .Radio__box {
-  box-shadow: 0 0 0 2px #2270ee inset, 0 0 0 3px #a9d1ff;
+  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 #f94d32 inset, 0 0 0 3px #ffb2a0;
+  box-shadow: 0 0 0 2px var(--colorsBorderCritical, #e63717) inset, 0 0 0 3px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Radio--disabled .Radio__box {
@@ -258,7 +258,7 @@
   filter: grayscale(1);
 }
 .Radio--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Radio .Radio__label {

package/dist/components/Radio/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Radio/Radio.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCec;EDdd,cCkBc;EDjBd,OCiBc;EDhBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCOc;EDNd,cCUc;EDTd,OCSc;EDRd;EACA;;;AE3DF;ACtBC;EACA,OFiBa;AEfb;EACA;EDqBA;EACA,ODRa;ECgBb,aAjBe;;AAWf;EACC;EACA;;AAMD;EAAwB,aAnBT;;AAqBf;EAEC,aAxBc;;AA2Bf;EAEC,aA3Bc;;;AA+BhB;EACC;EACA;EACA;EACA;;AAEA;EAAkB;;AAClB;EAAkB;;AAElB;EAAqB;;;AAIrB;EAAW;;;AAIX;AAAA;EAEC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAIF;AACA;EHhFC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EGuEA;;AHrEA;EACC;IACC;IACA;;;;AGqEH;EACC,kBDtDiB;ECuDjB;EACA;EACA;EACA;EACA;EACA,cD2BW;EC1BX;EACA;EACA;EACA;EACA;EAGA,QAlGc;EAmGd,OAnGc;AAmJd;AAoCA;AAmCA;;AArHA;EACC,OAvGa;EAwGb,QAxGa;EAyGb;;AAGD;EACC,OA3Ga;EA4Gb,QA5Ga;EA6Gb;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAID;EAEC;;AAEA;EACC;;AAGD;EACC,OAzJgB;EA0JhB,QA1JgB;;AA4JhB;EACC,OA9Je;EA+Jf,QA/Je;;AAkKhB;EACC,OAjKe;EAkKf,QAlKe;;AAuKlB;EAEC;;AAEA;EACC;;AAGD;EAAY;;AAIb;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAKH;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAMH;EACC;;AAGD;EACC;;;AAKD;EACC,SD5HiB;EC6HjB;;AAGD;EACC,OD7NY;;;ACkOb;EACC,WDhHY;ECiHZ;EACA;EACA;;AAGD;EAAkB,WDvHL","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Radio/Radio.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACGA;AAQA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AA+BA;AAOA;AAGC;AAAA;AAAA;AAAA;EAEC,kBCgBc;EDfd,cCmBc;EDlBd,OCkBc;EDjBd;;AAGD;AAAA;AAAA;AAAA;EAEC,kBCQc;EDPd,cCWc;EDVd,OCUc;EDTd;EACA;;;AEpDF;AC7BC;EACA;AAEA;EACA;ED4BA;EACA,OAfc;EAuBd,aA3Be;;AAqBf;EACC;EACA;;AAMD;EAAwB,aA7BT;;AA+Bf;EAEC,aAlCc;;AAqCf;EAEC,aArCc;;;AAyChB;EACC;EACA;EACA;EACA;;AAEA;EAAkB;;AAClB;EAAkB;;AAElB;EAAqB;;;AAIrB;EAAW;;;AAIX;AAAA;EAEC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAIF;AACA;EHvFC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EG8EA;;AH5EA;EACC;IACC;IACA;;;;AG4EH;EACC,kBA5EoB;EA6EpB;EACA;EACA;EACA;EACA;EACA,cDqBW;ECpBX;EACA;EACA;EACA;EACA;EAGA,QAzGc;EA0Gd,OA1Gc;AA0Jd;AAoCA;AAmCA;;AArHA;EACC,OA9Ga;EA+Gb,QA/Ga;EAgHb;;AAGD;EACC,OAlHa;EAmHb,QAnHa;EAoHb;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAID;EAEC;;AAEA;EACC;;AAGD;EACC,OAhKgB;EAiKhB,QAjKgB;;AAmKhB;EACC,OArKe;EAsKf,QAtKe;;AAyKhB;EACC,OAxKe;EAyKf,QAzKe;;AA8KlB;EAEC;;AAEA;EACC;;AAGD;EAAY;;AAIb;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAKH;EACC;;AAGD;EAEC,YACC;;AAGD;EACC,YACC;;AAMH;EACC;;AAGD;EACC;;;AAKD;EACC,SDlIiB;ECmIjB;;AAGD;EACC,OApOa;;;AAyOd;EACC,WDtHY;ECuHZ;EACA;EACA;;AAGD;EAAkB,WD7HL","file":"index.css"}

package/dist/components/Scroll/Scroll.css

@@ -19,7 +19,7 @@
 
 .Scroll__Scrollbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   position: relative;

package/dist/components/Scroll/Scroll.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACMA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACnBC;EACA,OCiBa;ADfb;EACA;EDkBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;;AAG5B;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QAvGkB;;AA0GnB;EAIC;EACA,OA/GkB;EAgHlB;;AAGD;EAIC;EACA;EACA,QAzHkB;;AA4HnB;EAIC;EACA,OAjIkB;EAkIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"Scroll.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACMA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACnBC;EACA;AAEA;EACA;EDkBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;;AAG5B;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QAvGkB;;AA0GnB;EAIC;EACA,OA/GkB;EAgHlB;;AAGD;EAIC;EACA;EACA,QAzHkB;;AA4HnB;EAIC;EACA,OAjIkB;EAkIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"Scroll.css"}

package/dist/components/Scroll/Scroll.js

@@ -36,7 +36,7 @@ export const Scroll = (_a) => {
         maxWidth,
         maxHeight,
     };
-    return (React.createElement(ScrollElement, { className: ScrollClasses, style: styles },
+    return (React.createElement(ScrollElement, { className: ScrollClasses, style: styles, "data-anvil-component": "Scroll" },
         scrollIndicator && shadows,
         React.createElement("div", Object.assign({ className: "Scroll__Scrollbar", ref: scrollbarRef }, props), children)));
 };

package/dist/components/Scroll/Scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scroll.js","sourceRoot":"","sources":["../../../src/components/Scroll/Scroll.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAmClE,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAWvC,EAAE,EAAE;QAXmC,EACvC,EAAE,EAAE,aAAa,GAAG,KAAK,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,QAAQ,EACf,UAAU,GAAG,MAAM,EACnB,QAAQ,GAAG,MAAM,EACjB,eAAe,GAAG,KAAK,EACvB,SAAS,OAET,EADG,KAAK,cAV+B,4GAWvC,CADQ;IAER,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,UAAU,CAAC,QAAQ,EAAE,SAAS,EAAE;QACrD,CAAC,gBAAgB,UAAU,EAAE,CAAC,EAAE,UAAU;QAC1C,CAAC,gBAAgB,QAAQ,EAAE,CAAC,EAAE,QAAQ;QACtC,wBAAwB,EAAE,GAAG;QAC7B,0BAA0B,EAAE,KAAK;QACjC,2BAA2B,EAAE,MAAM;QACnC,yBAAyB,EAAE,IAAI;QAC/B,0BAA0B,EAAE,SAAS,KAAK,QAAQ;QAClD,qBAAqB,EAAE,CAAC,SAAS;QACjC,oBAAoB,EAAE,CAAC,QAAQ;KAC/B,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CACf,6BAAK,SAAS,EAAC,iBAAiB;QAC/B,6BAAK,SAAS,EAAC,aAAa,GAAG;QAC/B,6BAAK,SAAS,EAAC,eAAe,GAAG;QACjC,6BAAK,SAAS,EAAC,gBAAgB,GAAG;QAClC,6BAAK,SAAS,EAAC,cAAc,GAAG,CAC3B,CACN,CAAC;IAEF,MAAM,MAAM,GAAwB;QACnC,QAAQ;QACR,SAAS;KACT,CAAC;IAEF,OAAO,CACN,oBAAC,aAAa,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM;QACpD,eAAe,IAAI,OAAO;QAC3B,2CAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,YAAY,IAAM,KAAK,GAC7D,QAAQ,CACJ,CACS,CAChB,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"Scroll.js","sourceRoot":"","sources":["../../../src/components/Scroll/Scroll.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAmClE,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAWvC,EAAE,EAAE;QAXmC,EACvC,EAAE,EAAE,aAAa,GAAG,KAAK,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,QAAQ,EACf,UAAU,GAAG,MAAM,EACnB,QAAQ,GAAG,MAAM,EACjB,eAAe,GAAG,KAAK,EACvB,SAAS,OAET,EADG,KAAK,cAV+B,4GAWvC,CADQ;IAER,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,UAAU,CAAC,QAAQ,EAAE,SAAS,EAAE;QACrD,CAAC,gBAAgB,UAAU,EAAE,CAAC,EAAE,UAAU;QAC1C,CAAC,gBAAgB,QAAQ,EAAE,CAAC,EAAE,QAAQ;QACtC,wBAAwB,EAAE,GAAG;QAC7B,0BAA0B,EAAE,KAAK;QACjC,2BAA2B,EAAE,MAAM;QACnC,yBAAyB,EAAE,IAAI;QAC/B,0BAA0B,EAAE,SAAS,KAAK,QAAQ;QAClD,qBAAqB,EAAE,CAAC,SAAS;QACjC,oBAAoB,EAAE,CAAC,QAAQ;KAC/B,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CACf,6BAAK,SAAS,EAAC,iBAAiB;QAC/B,6BAAK,SAAS,EAAC,aAAa,GAAG;QAC/B,6BAAK,SAAS,EAAC,eAAe,GAAG;QACjC,6BAAK,SAAS,EAAC,gBAAgB,GAAG;QAClC,6BAAK,SAAS,EAAC,cAAc,GAAG,CAC3B,CACN,CAAC;IAEF,MAAM,MAAM,GAAwB;QACnC,QAAQ;QACR,SAAS;KACT,CAAC;IAEF,OAAO,CACN,oBAAC,aAAa,IACb,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,MAAM,0BACQ,QAAQ;QAE5B,eAAe,IAAI,OAAO;QAC3B,2CAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,YAAY,IAAM,KAAK,GAC7D,QAAQ,CACJ,CACS,CAChB,CAAC;AACH,CAAC,CAAC"}

package/dist/components/Scroll/index.css

@@ -19,7 +19,7 @@
 
 .Scroll__Scrollbar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   position: relative;

package/dist/components/Scroll/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACMA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACnBC;EACA,OCiBa;ADfb;EACA;EDkBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;;AAG5B;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QAvGkB;;AA0GnB;EAIC;EACA,OA/GkB;EAgHlB;;AAGD;EAIC;EACA;EACA,QAzHkB;;AA4HnB;EAIC;EACA,OAjIkB;EAkIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACMA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACnBC;EACA;AAEA;EACA;EDkBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;;AAG5B;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QAvGkB;;AA0GnB;EAIC;EACA,OA/GkB;EAgHlB;;AAGD;EAIC;EACA;EACA,QAzHkB;;AA4HnB;EAIC;EACA,OAjIkB;EAkIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"index.css"}

package/dist/components/Select/Select.css

@@ -2,11 +2,58 @@
   position: relative;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   /*
    * Fix for collapsing trigger if no value been set, since newer
    * semantic-ui-react-v2.0.1 removes empty .text node form trigger in such scenario
    */
 }
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu {
+  border-color: var(--colorsBorderGrey, #dfe0e1) !important;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item.selected {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item:hover {
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error {
+  color: var(--colorsTextCritical, #f94d32);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu {
+  border-color: var(--colorsBorderCritical, #e63717) !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));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 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;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.visible > .text:not(.default) {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:not(.button) > .default.text {
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown > .dropdown.icon {
+  color: var(--colorsTextSubdued, #737475);
+}
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.loading .icon svg {
   display: none;
 }
@@ -76,13 +123,10 @@
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.active + .Select__clear-icon, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:hover + .Select__clear-icon {
   z-index: 10;
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #a9d1ff !important;
-}
-.error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #ffb2a0 !important;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff) !important;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown::before {
   content: "";
@@ -101,11 +145,11 @@
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon {
   position: absolute;
   right: 2em;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon:hover {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .text,
 .semantic-anvil-theme.Select-wrapper .group {

package/dist/components/Select/Select.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAaA;EACC;;AAEA;AAwGC;AAAA;AAAA;AAAA;;AAtGC;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCmGC;;ADjGZ;EAAQ;;AAER;EACC;EACA,aAlCmB;EAmCnB;EACA,gBApCmB;EAqCnB,cAtCoB;;AAwCpB;EACC;EACA;EACA;EACA,cA3CkB;;AA6ClB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAxDwB;EAyDxB;EACA,gBA1DwB;EA2DxB,cAhEoB;;AAkEpB;EACC;EACA;EACA;EACA,cArEkB;;AAwEnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OCpBY;;ADwBd;EAGC;;AAEA;EAAW;;AAOZ;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OChGiB;EDiGjB;;AAEA;EACC,OCvDa;;AD4Df;AAAA;EACS,aCRS","file":"Select.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AA4BA;EACC;;AAEA;EACC,kBA3BmB;EA4BnB,OA1Ba;EA2Bb,cAzBe;AA6Kf;AAAA;AAAA;AAAA;;AAlJA;EACC;EACA,kBAjCkB;;AAmClB;EACC,OAlCW;;AAoCX;EAAa,kBA/BQ;;AAgCrB;EAAU,kBAjCU;;AAqCtB;EACC,OAzCa;EA0Cb,kBA5CmB;EA6CnB,cAzCe;;AA2Cf;EACC;EACA,kBAjDkB;;AAmDlB;EACC,OAlDW;;AAoDX;EAAa,kBA9CgB;;AA+C7B;EAAU,kBAhDkB;;AAoD9B;EAGC;;AAIF;EAAkC,OAjErB;;AAmEb;EACC,OApEY;EAqEZ;;AAGD;EAAmB,OAhEN;;AAmEZ;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCoCC;;ADlCZ;EAAQ;;AAER;EACC;EACA,aAnFmB;EAoFnB;EACA,gBArFmB;EAsFnB,cAvFoB;;AAyFpB;EACC;EACA;EACA;EACA,cA5FkB;;AA8FlB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAzGwB;EA0GxB;EACA,gBA3GwB;EA4GxB,cAjHoB;;AAmHpB;EACC;EACA;EACA;EACA,cAtHkB;;AAyHnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OAzKU;;AA6KZ;EAGC;;AAOD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OAvMc;EAwMd;;AAEA;EACC,OA1MW;;AA+Mb;AAAA;EACS,aCrES","file":"Select.css"}

package/dist/components/Select/index.css

@@ -2,11 +2,58 @@
   position: relative;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown {
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextDefault, #141414);
+  border-color: var(--colorsBorderGrey, #dfe0e1);
   /*
    * Fix for collapsing trigger if no value been set, since newer
    * semantic-ui-react-v2.0.1 removes empty .text node form trigger in such scenario
    */
 }
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu {
+  border-color: var(--colorsBorderGrey, #dfe0e1) !important;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item.selected {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown .menu > .item:hover {
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error {
+  color: var(--colorsTextCritical, #f94d32);
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+  border-color: var(--colorsBorderCritical, #e63717);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu {
+  border-color: var(--colorsBorderCritical, #e63717) !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));
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.error .menu > .item:hover {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 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;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.visible > .text:not(.default) {
+  color: var(--colorsTextDefault, #141414);
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:not(.button) > .default.text {
+  color: var(--colorsTextDefault, #141414);
+  opacity: 0.4;
+}
+.semantic-anvil-theme.Select-wrapper .ui.selection.dropdown > .dropdown.icon {
+  color: var(--colorsTextSubdued, #737475);
+}
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.loading .icon svg {
   display: none;
 }
@@ -76,13 +123,10 @@
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown.active + .Select__clear-icon, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:hover + .Select__clear-icon {
   z-index: 10;
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #a9d1ff !important;
-}
-.error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus, .error .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown:focus-within {
-  box-shadow: 0 0 0 3px #ffb2a0 !important;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff) !important;
 }
 .semantic-anvil-theme.Select-wrapper .ui.selection.dropdown::before {
   content: "";
@@ -101,11 +145,11 @@
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon {
   position: absolute;
   right: 2em;
-  color: #949596;
+  color: var(--colorsTextOnGreySubdued, #949596);
   cursor: pointer;
 }
 .semantic-anvil-theme.Select-wrapper .Select__clear-icon:hover {
-  color: #f94d32;
+  color: var(--colorsTextCritical, #f94d32);
 }
 .semantic-anvil-theme.Select-wrapper .text,
 .semantic-anvil-theme.Select-wrapper .group {

package/dist/components/Select/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAaA;EACC;;AAEA;AAwGC;AAAA;AAAA;AAAA;;AAtGC;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCmGC;;ADjGZ;EAAQ;;AAER;EACC;EACA,aAlCmB;EAmCnB;EACA,gBApCmB;EAqCnB,cAtCoB;;AAwCpB;EACC;EACA;EACA;EACA,cA3CkB;;AA6ClB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAxDwB;EAyDxB;EACA,gBA1DwB;EA2DxB,cAhEoB;;AAkEpB;EACC;EACA;EACA;EACA,cArEkB;;AAwEnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OCpBY;;ADwBd;EAGC;;AAEA;EAAW;;AAOZ;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OChGiB;EDiGjB;;AAEA;EACC,OCvDa;;AD4Df;AAAA;EACS,aCRS","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/Select.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AA4BA;EACC;;AAEA;EACC,kBA3BmB;EA4BnB,OA1Ba;EA2Bb,cAzBe;AA6Kf;AAAA;AAAA;AAAA;;AAlJA;EACC;EACA,kBAjCkB;;AAmClB;EACC,OAlCW;;AAoCX;EAAa,kBA/BQ;;AAgCrB;EAAU,kBAjCU;;AAqCtB;EACC,OAzCa;EA0Cb,kBA5CmB;EA6CnB,cAzCe;;AA2Cf;EACC;EACA,kBAjDkB;;AAmDlB;EACC,OAlDW;;AAoDX;EAAa,kBA9CgB;;AA+C7B;EAAU,kBAhDkB;;AAoD9B;EAGC;;AAIF;EAAkC,OAjErB;;AAmEb;EACC,OApEY;EAqEZ;;AAGD;EAAmB,OAhEN;;AAmEZ;EACC;;AAIA;EACC;;AAKD;EACC;;AAKH;EAAW,WCoCC;;ADlCZ;EAAQ;;AAER;EACC;EACA,aAnFmB;EAoFnB;EACA,gBArFmB;EAsFnB,cAvFoB;;AAyFpB;EACC;EACA;EACA;EACA,cA5FkB;;AA8FlB;EACC;;AAGD;EACC;;AAIF;EACC;;AAIF;EACC,aAzGwB;EA0GxB;EACA,gBA3GwB;EA4GxB,cAjHoB;;AAmHpB;EACC;EACA;EACA;EACA,cAtHkB;;AAyHnB;EACC;;AAIF;EACC;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAIF;EACC;;AAKA;EACC;EACA,OAzKU;;AA6KZ;EAGC;;AAOD;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EAAqB;;AACrB;EAAmC;;AAGpC;EACC;EACA;EACA,OAvMc;EAwMd;;AAEA;EACC,OA1MW;;AA+Mb;AAAA;EACS,aCrES","file":"index.css"}

package/dist/components/SideNav/SideNav.css

@@ -1,11 +1,11 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .SideNav {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
 .SideNav .Tag {
@@ -17,9 +17,10 @@
 }
 
 .SideNav__title {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   margin: 0 16px;
   padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .SideNav__list {