@servicetitan/design-system 11.3.0 → 11.4.1

package/dist/components/ButtonToggle/index.css

@@ -21,7 +21,7 @@
   z-index: 2;
 }
 .ButtonToggle__Item .Button:hover {
-  background-color: rgba(20, 20, 20, 0.04);
+  background-color: var(--colorsHoverSubdued, rgba(20, 20, 20, 0.04));
 }
 
 .ButtonToggle__Item:not(:first-child) {
@@ -49,20 +49,20 @@
 }
 .ButtonToggle--primary .ButtonToggle__Item .Button,
 .ButtonToggle--primary .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected .Button {
-  background-color: rgba(34, 112, 238, 0.08);
-  color: #1360d9;
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px #56a4ff;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee);
 }
 .ButtonToggle--primary.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #1360d9, 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 .ButtonToggle--primary .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #56a4ff, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderPrimary, #2270ee), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--negative {
@@ -70,35 +70,35 @@
 }
 .ButtonToggle--negative .ButtonToggle__Item .Button,
 .ButtonToggle--negative .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected .Button {
-  background-color: rgba(230, 55, 23, 0.1);
-  color: #e63717;
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+  color: var(--colorsTextCritical, #f94d32);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item--selected .Button {
-  box-shadow: inset 0 0 0 1px #ff745f;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
 }
 .ButtonToggle--negative.ButtonToggle .ButtonToggle__Item .Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px #ff745f, 0 0 0 3px #ffb2a0;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
 }
 .ButtonToggle--negative .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #ff745f, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderCritical, #e63717), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 
 .ButtonToggle--neutral .ButtonToggle__Item .Button,
 .ButtonToggle--neutral .ButtonToggle__Item .Button:active {
-  box-shadow: inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--neutral .ButtonToggle__Item--selected .Button {
-  background-color: rgba(20, 20, 20, 0.08);
-  box-shadow: inset 0 0 0 1px #bcbcbd;
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
+  box-shadow: inset 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .ButtonToggle--neutral .ButtonToggle__Item--selected + .ButtonToggle__Item--not-selected .Button {
-  box-shadow: inset 1px 0 0 0 #bcbcbd, inset 0 0 0 1px #dfe0e1;
+  box-shadow: inset 1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd), inset 0 0 0 1px var(--colorsBorderGrey, #dfe0e1);
 }
 .ButtonToggle--neutral.ButtonToggle .Button--focus-visible:focus {
-  box-shadow: 0 0 0 1px #bcbcbd, 0 0 0 3px #a9d1ff;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
 .ButtonToggle--disabled {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ButtonToggle/ButtonToggle.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAKH;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;AACA;AAWC;;AAVA;AAAA;EAEC;;AAGD;EACC,kBA1DiB;EA2DjB,OCnCe;;ADuChB;EACC;;AAGD;EACC;;AAGD;EACC,YACC;;;AAKH;AAWC;;AAVA;AAAA;EAEC;;AAGD;EACC,kBApFkB;EAqFlB,OCNc;;ADUf;EACC;;AAGD;EACC,YACC;;AAIF;EACC,YACC;;;AAMF;AAAA;EAEC;;AAIA;EACC,kBApHc;EAqHd;;AAGD;EACC,YACC;;AAKH;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA,SCnCkB","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ButtonToggle/ButtonToggle.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACmBA;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC,kBA3Ba;;;AAgChB;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;AACA;AAWC;;AAVA;AAAA;EAEC;;AAGD;EACC,kBA9DiB;EA+DjB,OAxEa;;AA4Ed;EACC;;AAGD;EACC;;AAGD;EACC,YACC;;;AAKH;AAWC;;AAVA;AAAA;EAEC;;AAGD;EACC,kBAxFkB;EAyFlB,OAlGc;;AAsGf;EACC;;AAGD;EACC,YACC;;AAIF;EACC,YACC;;;AAMF;AAAA;EAEC;;AAIA;EACC,kBAxHc;EAyHd;;AAGD;EACC,YACC;;AAKH;EACC;;;AAIF;EACC;;;AAGD;EACC;EACA,SCzCkB","file":"index.css"}

package/dist/components/Card/Card.css

@@ -1,12 +1,12 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Card {
   /* 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;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   text-align: left;
 }
 
@@ -78,11 +78,11 @@
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 200ms 0ms;
 }
 .Card--placeholder:hover {
-  background-color: #ecf4fd;
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
   box-shadow: 0 0 0;
 }
 .Card--placeholder:hover.Card--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Card--placeholder > .CardSection {
   flex-grow: 1;

package/dist/components/Card/Card.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Card/Card.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,YEYa;EFXb,eEEiB;EFDjB,OEWa;EFVb;;;AAGD;AACA;EAAgB;;;AAChB;EAAc;;;AAEd;AACA;EAAe,eETG;;;AFWlB;AACA;EACC;EACA;EACA;EACA;EACA,YACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;AACA;EACC,SE0CkB;EFzClB;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEpDe;EFqDf,YE8Bc;;AF5Bd;EAAgB,kBECF;;AFEf;EACC;EACA;EACA;EACA;EACA;;AAGD;EAAc","file":"Card.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Card/Card.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQA;ACPC;EACA;AAEA;EACA;EDMA,YAPoB;EAQpB,eEHiB;EFIjB,OAVc;EAWd;;;AAGD;AACA;EAAgB;;;AAChB;EAAc;;;AAEd;AACA;EAAe,eEdG;;;AFgBlB;AACA;EACC;EACA;EACA;EACA;EACA,YACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;AACA;EACC,SEsCkB;EFrClB;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC,kBAjFwB;EAkFxB,YE0Bc;;AFxBd;EAAgB,kBAnFO;;AAsFxB;EACC;EACA;EACA;EACA;EACA;;AAGD;EAAc","file":"Card.css"}

package/dist/components/Card/Card.js

@@ -49,7 +49,7 @@ export const Card = (_a) => {
         'Card--light': light,
     });
     const CardElement = href ? 'a' : el;
-    return (React.createElement(CardElement, Object.assign({ className: CardClasses, href: href }, rest), wrapWithComponent(children, CardSection)));
+    return (React.createElement(CardElement, Object.assign({ className: CardClasses, href: href, "data-anvil-component": "Card" }, rest), wrapWithComponent(children, CardSection)));
 };
 Card.Section = CardSection;
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAmE5C,MAAM,CAAC,MAAM,IAAI,GAAS,CAAC,EAoB1B,EAAE,EAAE;QApBsB,EAC1B,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,EAAE,GAAG,KAAK,EACV,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,WAAW,EACX,MAAM,EACN,IAAI,EACJ,KAAK,EACL,MAAM,OAEN,EADG,IAAI,cAnBmB,wLAoB1B,CADO;IAEP,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QACxB,IAAI,MAAM;YAAE,OAAO,QAAQ,CAAC;QAC5B,OAAO,SAAS,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACvB,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QACxB,OAAO,OAAO,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK;YAAE,OAAO,OAAO,CAAC;QAC1B,IAAI,MAAM;YAAE,OAAO,QAAQ,CAAC;QAC5B,OAAO,MAAM,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE;QACjD,YAAY,EAAE,YAAY,EAAE,KAAK,MAAM;QACvC,cAAc,EAAE,YAAY,EAAE,KAAK,QAAQ;QAC3C,YAAY,EAAE,UAAU,EAAE,KAAK,MAAM;QACrC,kBAAkB,EAAE,UAAU,EAAE,KAAK,MAAM;QAC3C,cAAc,EAAE,SAAS,EAAE,KAAK,QAAQ;QACxC,aAAa,EAAE,SAAS,EAAE,KAAK,OAAO;QACtC,aAAa,EAAE,KAAK;QACpB,iBAAiB,EAAE,SAAS,IAAI,IAAI,IAAI,EAAE,KAAK,GAAG,IAAI,IAAI,CAAC,OAAO;QAClE,gBAAgB,EAAE,QAAQ;QAC1B,mBAAmB,EAAE,WAAW;QAChC,YAAY,EAAE,IAAI;QAClB,aAAa,EAAE,KAAK;KACpB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpC,OAAO,CACN,oBAAC,WAAW,kBAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,IAAM,IAAI,GACvD,iBAAiB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAC5B,CACd,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAmE5C,MAAM,CAAC,MAAM,IAAI,GAAS,CAAC,EAoB1B,EAAE,EAAE;QApBsB,EAC1B,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,EAAE,GAAG,KAAK,EACV,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,WAAW,EACX,MAAM,EACN,IAAI,EACJ,KAAK,EACL,MAAM,OAEN,EADG,IAAI,cAnBmB,wLAoB1B,CADO;IAEP,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QACxB,IAAI,MAAM;YAAE,OAAO,QAAQ,CAAC;QAC5B,OAAO,SAAS,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACvB,IAAI,IAAI;YAAE,OAAO,MAAM,CAAC;QACxB,OAAO,OAAO,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK;YAAE,OAAO,OAAO,CAAC;QAC1B,IAAI,MAAM;YAAE,OAAO,QAAQ,CAAC;QAC5B,OAAO,MAAM,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE;QACjD,YAAY,EAAE,YAAY,EAAE,KAAK,MAAM;QACvC,cAAc,EAAE,YAAY,EAAE,KAAK,QAAQ;QAC3C,YAAY,EAAE,UAAU,EAAE,KAAK,MAAM;QACrC,kBAAkB,EAAE,UAAU,EAAE,KAAK,MAAM;QAC3C,cAAc,EAAE,SAAS,EAAE,KAAK,QAAQ;QACxC,aAAa,EAAE,SAAS,EAAE,KAAK,OAAO;QACtC,aAAa,EAAE,KAAK;QACpB,iBAAiB,EAAE,SAAS,IAAI,IAAI,IAAI,EAAE,KAAK,GAAG,IAAI,IAAI,CAAC,OAAO;QAClE,gBAAgB,EAAE,QAAQ;QAC1B,mBAAmB,EAAE,WAAW;QAChC,YAAY,EAAE,IAAI;QAClB,aAAa,EAAE,KAAK;KACpB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpC,OAAO,CACN,oBAAC,WAAW,kBACX,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,IAAI,0BACW,MAAM,IACvB,IAAI,GAEP,iBAAiB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAC5B,CACd,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC"}

package/dist/components/Card/CardSection.css

@@ -1,6 +1,6 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .CardSection {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 24px;
   /* Remove bottom border for stacked sections */
   border-bottom-width: 0;
@@ -29,24 +29,24 @@
   padding: 0;
 }
 .Card--active > .CardSection {
-  border-left-color: #2270ee;
-  border-right-color: #2270ee;
+  border-left-color: var(--colorsBorderPrimary, #2270ee);
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:first-child {
-  border-top-color: #2270ee;
+  border-top-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:last-child {
-  border-bottom-color: #2270ee;
+  border-bottom-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--error > .CardSection {
-  border-left-color: #e63717;
-  border-right-color: #e63717;
+  border-left-color: var(--colorsBorderCritical, #e63717);
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:first-child {
-  border-top-color: #e63717;
+  border-top-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:last-child {
-  border-bottom-color: #e63717;
+  border-bottom-color: var(--colorsBorderCritical, #e63717);
 }
 .CardSection:first-child {
   border-top-left-radius: 6px;
@@ -90,8 +90,8 @@
 .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue), .Card--active > .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue).CardSection,
 .CardSection--dark,
 .Card--active > .CardSection--dark.CardSection {
-  background: #141414;
-  border-color: #141414;
+  background: #040404;
+  border-color: #040404;
 }
 
 .CardSection--blue {

package/dist/components/Card/CardSection.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Card/CardSection.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;EACC;EACA,SCuHW;ADrHX;EACA;AAEA;AASA;AAKA;AASA;AASA;AAEA;AAqBA;;AAtDA;EACC;EACA;;AAEA;EAAgB;;AAChB;EAAe;;AAIhB;EAAkB,SCuGP;;ADrGX;EAAwB,SCmGb;;ADhGX;EACC,mBCNW;EDOX,oBCPW;;ADSX;EAAgB,kBCTL;;ADUX;EAAe,qBCVJ;;ADcZ;EACC,mBCsDc;EDrDd,oBCqDc;;ADnDd;EAAgB,kBCmDF;;ADlDd;EAAe,qBCkDD;;AD5Cf;EACC,wBCrCgB;EDsChB,yBCtCgB;;ADwChB;EACC,wBC1Ce;ED2Cf,yBC3Ce;;AD+CjB;EACC,2BC/CgB;EDgDhB,4BChDgB;EDiDhB;;AAEA;EACC,2BCrDe;EDsDf,4BCtDe;;;AD4DlB;AAaA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC,OCtEa;;;ADyEd;AACA;AAAA;EACsB,YCxDH;;;AD0DnB;AAAA;AAzBC;;AACA;AAAA;AAAA;EAEC,YCtDY;EDuDZ,cCvDY;;;AD+Ed;AA5BC;;AACA;EAEC,YCrDW;EDsDX,cCtDW;;;AD+Eb;AA7BC;;AACA;EAEC,YC/Ca;EDgDb,cChDa;;;AD0Ef;AA9BC;;AACA;EAEC,YCjDY;EDkDZ,cClDY;;;AD6Ed;AA/BC;;AACA;EAEC,YC9CU;ED+CV,cC/CU;;;AD2EZ;AAhCC;;AACA;EAEC,YC3Ce;ED4Cf,cC5Ce","file":"CardSection.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Card/CardSection.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;EACC;EACA,SCoHW;ADlHX;EACA;AAEA;AASA;AAKA;AASA;AASA;AAEA;AAqBA;;AAtDA;EACC;EACA;;AAEA;EAAgB;;AAChB;EAAe;;AAIhB;EAAkB,SCoGP;;ADlGX;EAAwB,SCgGb;;AD7FX;EACC,mBA1Bc;EA2Bd,oBA3Bc;;AA6Bd;EAAgB,kBA7BF;;AA8Bd;EAAe,qBA9BD;;AAkCf;EACC,mBAlCa;EAmCb,oBAnCa;;AAqCb;EAAgB,kBArCH;;AAsCb;EAAe,qBAtCF;;AA4Cd;EACC,wBCzCgB;ED0ChB,yBC1CgB;;AD4ChB;EACC,wBC9Ce;ED+Cf,yBC/Ce;;ADmDjB;EACC,2BCnDgB;EDoDhB,4BCpDgB;EDqDhB;;AAEA;EACC,2BCzDe;ED0Df,4BC1De;;;ADgElB;AAaA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC,OC1Ea;;;AD6Ed;AACA;AAAA;EACsB,YC5DH;;;AD8DnB;AAAA;AAzBC;;AACA;AAAA;AAAA;EAEC,YC1DY;ED2DZ,cC3DY;;;ADmFd;AA5BC;;AACA;EAEC,YCzDW;ED0DX,cC1DW;;;ADmFb;AA7BC;;AACA;EAEC,YCnDa;EDoDb,cCpDa;;;AD8Ef;AA9BC;;AACA;EAEC,YCrDY;EDsDZ,cCtDY;;;ADiFd;AA/BC;;AACA;EAEC,YClDU;EDmDV,cCnDU;;;AD+EZ;AAhCC;;AACA;EAEC,YC/Ce;EDgDf,cChDe","file":"CardSection.css"}

package/dist/components/Card/CardSection.js

@@ -22,7 +22,7 @@ export const CardSection = (_a) => {
         'CardSection--red': red || color === 'red',
         'CardSection--lightblue': lightblue || color === 'lightblue',
     });
-    return React.createElement("div", Object.assign({ className: CardSectionClasses }, props));
+    return (React.createElement("div", Object.assign({ className: CardSectionClasses, "data-anvil-component": "CardSection" }, props)));
 };
 CardSection.displayName = 'CardSection';
 //# sourceMappingURL=CardSection.js.map

package/dist/components/Card/CardSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSection.js","sourceRoot":"","sources":["../../../src/components/Card/CardSection.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAyCpC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAWjD,EAAE,EAAE;QAX6C,EACjD,IAAI,EACJ,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,MAAM,EACN,GAAG,OAEH,EADG,KAAK,cAVyC,sFAWjD,CADQ;IAER,MAAM,kBAAkB,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE;QAC/D,mBAAmB,EAAE,IAAI,IAAI,KAAK,KAAK,MAAM;QAC7C,mBAAmB,EAAE,IAAI,IAAI,KAAK,KAAK,MAAM;QAC7C,oBAAoB,EAAE,KAAK,IAAI,KAAK,KAAK,OAAO;QAChD,oBAAoB,EAAE,KAAK,IAAI,KAAK,KAAK,OAAO;QAChD,qBAAqB,EAAE,MAAM,IAAI,KAAK,KAAK,QAAQ;QACnD,kBAAkB,EAAE,GAAG,IAAI,KAAK,KAAK,KAAK;QAC1C,wBAAwB,EAAE,SAAS,IAAI,KAAK,KAAK,WAAW;KAC5D,CAAC,CAAC;IAEH,OAAO,2CAAK,SAAS,EAAE,kBAAkB,IAAM,KAAK,EAAI,CAAC;AAC1D,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"CardSection.js","sourceRoot":"","sources":["../../../src/components/Card/CardSection.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAyCpC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAWjD,EAAE,EAAE;QAX6C,EACjD,IAAI,EACJ,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,MAAM,EACN,GAAG,OAEH,EADG,KAAK,cAVyC,sFAWjD,CADQ;IAER,MAAM,kBAAkB,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE;QAC/D,mBAAmB,EAAE,IAAI,IAAI,KAAK,KAAK,MAAM;QAC7C,mBAAmB,EAAE,IAAI,IAAI,KAAK,KAAK,MAAM;QAC7C,oBAAoB,EAAE,KAAK,IAAI,KAAK,KAAK,OAAO;QAChD,oBAAoB,EAAE,KAAK,IAAI,KAAK,KAAK,OAAO;QAChD,qBAAqB,EAAE,MAAM,IAAI,KAAK,KAAK,QAAQ;QACnD,kBAAkB,EAAE,GAAG,IAAI,KAAK,KAAK,KAAK;QAC1C,wBAAwB,EAAE,SAAS,IAAI,KAAK,KAAK,WAAW;KAC5D,CAAC,CAAC;IAEH,OAAO,CACN,2CACC,SAAS,EAAE,kBAAkB,0BACR,aAAa,IAC9B,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/components/Card/index.css

@@ -1,12 +1,12 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Card {
   /* 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;
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   text-align: left;
 }
 
@@ -78,11 +78,11 @@
   transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 200ms 0ms;
 }
 .Card--placeholder:hover {
-  background-color: #ecf4fd;
+  background-color: var(--colorsSurfacePrimarySubdued, #ecf4fd);
   box-shadow: 0 0 0;
 }
 .Card--placeholder:hover.Card--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 .Card--placeholder > .CardSection {
   flex-grow: 1;
@@ -96,7 +96,7 @@
 }
 
 .CardSection {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 24px;
   /* Remove bottom border for stacked sections */
   border-bottom-width: 0;
@@ -125,24 +125,24 @@
   padding: 0;
 }
 .Card--active > .CardSection {
-  border-left-color: #2270ee;
-  border-right-color: #2270ee;
+  border-left-color: var(--colorsBorderPrimary, #2270ee);
+  border-right-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:first-child {
-  border-top-color: #2270ee;
+  border-top-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--active > .CardSection:last-child {
-  border-bottom-color: #2270ee;
+  border-bottom-color: var(--colorsBorderPrimary, #2270ee);
 }
 .Card--error > .CardSection {
-  border-left-color: #e63717;
-  border-right-color: #e63717;
+  border-left-color: var(--colorsBorderCritical, #e63717);
+  border-right-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:first-child {
-  border-top-color: #e63717;
+  border-top-color: var(--colorsBorderCritical, #e63717);
 }
 .Card--error > .CardSection:last-child {
-  border-bottom-color: #e63717;
+  border-bottom-color: var(--colorsBorderCritical, #e63717);
 }
 .CardSection:first-child {
   border-top-left-radius: 6px;
@@ -186,8 +186,8 @@
 .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue), .Card--active > .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue).CardSection,
 .CardSection--dark,
 .Card--active > .CardSection--dark.CardSection {
-  background: #141414;
-  border-color: #141414;
+  background: #040404;
+  border-color: #040404;
 }
 
 .CardSection--blue {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Card/Card.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Card/CardSection.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA,YEYa;EFXb,eEEiB;EFDjB,OEWa;EFVb;;;AAGD;AACA;EAAgB;;;AAChB;EAAc;;;AAEd;AACA;EAAe,eETG;;;AFWlB;AACA;EACC;EACA;EACA;EACA;EACA,YACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;AACA;EACC,SE0CkB;EFzClB;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC,kBEpDe;EFqDf,YE8Bc;;AF5Bd;EAAgB,kBECF;;AFEf;EACC;EACA;EACA;EACA;EACA;;AAGD;EAAc;;;AG5Ff;EACC;EACA,SDuHW;ACrHX;EACA;AAEA;AASA;AAKA;AASA;AASA;AAEA;AAqBA;;AAtDA;EACC;EACA;;AAEA;EAAgB;;AAChB;EAAe;;AAIhB;EAAkB,SDuGP;;ACrGX;EAAwB,SDmGb;;AChGX;EACC,mBDNW;ECOX,oBDPW;;ACSX;EAAgB,kBDTL;;ACUX;EAAe,qBDVJ;;ACcZ;EACC,mBDsDc;ECrDd,oBDqDc;;ACnDd;EAAgB,kBDmDF;;AClDd;EAAe,qBDkDD;;AC5Cf;EACC,wBDrCgB;ECsChB,yBDtCgB;;ACwChB;EACC,wBD1Ce;EC2Cf,yBD3Ce;;AC+CjB;EACC,2BD/CgB;ECgDhB,4BDhDgB;ECiDhB;;AAEA;EACC,2BDrDe;ECsDf,4BDtDe;;;AC4DlB;AAaA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC,ODtEa;;;ACyEd;AACA;AAAA;EACsB,YDxDH;;;AC0DnB;AAAA;AAzBC;;AACA;AAAA;AAAA;EAEC,YDtDY;ECuDZ,cDvDY;;;AC+Ed;AA5BC;;AACA;EAEC,YDrDW;ECsDX,cDtDW;;;AC+Eb;AA7BC;;AACA;EAEC,YD/Ca;ECgDb,cDhDa;;;AC0Ef;AA9BC;;AACA;EAEC,YDjDY;ECkDZ,cDlDY;;;AC6Ed;AA/BC;;AACA;EAEC,YD9CU;EC+CV,cD/CU;;;AC2EZ;AAhCC;;AACA;EAEC,YD3Ce;EC4Cf,cD5Ce","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Card/Card.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Card/CardSection.scss"],"names":[],"mappings":"AAAA;ACQA;ACPC;EACA;AAEA;EACA;EDMA,YAPoB;EAQpB,eEHiB;EFIjB,OAVc;EAWd;;;AAGD;AACA;EAAgB;;;AAChB;EAAc;;;AAEd;AACA;EAAe,eEdG;;;AFgBlB;AACA;EACC;EACA;EACA;EACA;EACA,YACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAGD;EACC;;;AAIF;AACA;EACC,SEsCkB;EFrClB;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC,kBAjFwB;EAkFxB,YE0Bc;;AFxBd;EAAgB,kBAnFO;;AAsFxB;EACC;EACA;EACA;EACA;EACA;;AAGD;EAAc;;;AG7Ff;EACC;EACA,SDoHW;AClHX;EACA;AAEA;AASA;AAKA;AASA;AASA;AAEA;AAqBA;;AAtDA;EACC;EACA;;AAEA;EAAgB;;AAChB;EAAe;;AAIhB;EAAkB,SDoGP;;AClGX;EAAwB,SDgGb;;AC7FX;EACC,mBA1Bc;EA2Bd,oBA3Bc;;AA6Bd;EAAgB,kBA7BF;;AA8Bd;EAAe,qBA9BD;;AAkCf;EACC,mBAlCa;EAmCb,oBAnCa;;AAqCb;EAAgB,kBArCH;;AAsCb;EAAe,qBAtCF;;AA4Cd;EACC,wBDzCgB;EC0ChB,yBD1CgB;;AC4ChB;EACC,wBD9Ce;EC+Cf,yBD/Ce;;ACmDjB;EACC,2BDnDgB;ECoDhB,4BDpDgB;ECqDhB;;AAEA;EACC,2BDzDe;EC0Df,4BD1De;;;ACgElB;AAaA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC,OD1Ea;;;AC6Ed;AACA;AAAA;EACsB,YD5DH;;;AC8DnB;AAAA;AAzBC;;AACA;AAAA;AAAA;EAEC,YD1DY;EC2DZ,cD3DY;;;ACmFd;AA5BC;;AACA;EAEC,YDzDW;EC0DX,cD1DW;;;ACmFb;AA7BC;;AACA;EAEC,YDnDa;ECoDb,cDpDa;;;AC8Ef;AA9BC;;AACA;EAEC,YDrDY;ECsDZ,cDtDY;;;ACiFd;AA/BC;;AACA;EAEC,YDlDU;ECmDV,cDnDU;;;AC+EZ;AAhCC;;AACA;EAEC,YD/Ce;ECgDf,cDhDe","file":"index.css"}

package/dist/components/Checkbox/Checkbox.css

@@ -64,11 +64,11 @@
 
 .a-Checkbox {
   /* 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: 25px;
 }
 .FormField .a-Checkbox {
@@ -142,9 +142,9 @@
 }
 
 .Checkbox__box {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #bcbcbd;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
   box-sizing: border-box;
   display: inline-flex;
   flex-shrink: 0;
@@ -175,10 +175,10 @@
   margin-bottom: -6px;
 }
 .Checkbox--error .Checkbox__box {
-  border-color: #ffb2a0;
+  border-color: var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox__box::before {
-  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 #2270ee inset;
+  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, #ffffff), 0%), 0 0 0 0 var(--colorsBorderPrimary, #2270ee) inset;
   content: "";
   border-radius: 3px;
   height: calc(100% + 2px);
@@ -189,7 +189,7 @@
   top: -1px;
 }
 .Checkbox__box::after {
-  box-shadow: 0 -2px 0 0 white inset, -2px 0 0 0 white inset;
+  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, #ffffff) inset, -2px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   content: "";
   height: 11px;
   margin-left: 4px;
@@ -204,7 +204,7 @@
   margin-left: 3px;
 }
 .Checkbox--large .Checkbox__box::after {
-  box-shadow: 0 -2.5px 0 0 white inset, -2.5px 0 0 0 white inset;
+  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, #ffffff) inset, -2.5px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   height: 15px;
   margin-left: 6px;
   top: 0;
@@ -216,39 +216,39 @@
   transform: none;
 }
 .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked .Checkbox__box::before, .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox__input:checked + .Checkbox__box::after, .Checkbox--checked .Checkbox__box::after, .Checkbox--indeterminate .Checkbox__box::after {
   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 #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) 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 #ffb2a0;
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox--focus-visible:focus-within .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #a9d1ff;
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #444445;
+  border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .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 rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #2270ee inset;
+  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 rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 4px #a9d1ff;
+  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: #e63717;
-  box-shadow: 0 0 0 4px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Checkbox--disabled .Checkbox__box {
@@ -256,7 +256,7 @@
   filter: grayscale(1);
 }
 .Checkbox--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Checkbox .Checkbox__label {

package/dist/components/Checkbox/Checkbox.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/Checkbox/Checkbox.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;;;AE5DF;ACrBC;EACA,OFiBa;AEfb;EACA;EDoBA;EACA,ODsBmB;ECdnB,aAjBkB;;AAWlB;EACC;EACA;;AAMD;EAAwB,aAnBN;;AAqBlB;EAEC,aAxBiB;;AA2BlB;EAEC,aA3BiB;;;AA+BnB;EACC;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EAAqB;;AACrB;EAAqB;;AAErB;EAAwB;;;AAIzB;EH/EC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EGsEA;;AHpEA;EACC;IACC;IACA;;;;AGoEH;EACC,YDrDiB;ECsDjB,eDjFiB;ECkFjB;EACA;EACA;EACA;EACA,QAzFiB;EA0FjB,aAvFuB;EAwFvB,cD0BW;ECzBX;EACA;EACA,OA9FiB;EA+FjB,WA/FiB;EAgGjB;AAmEA;AAkBA;AA6BA;;AAhHA;EACC,OApGgB;EAqGhB,WArGgB;EAsGhB,QAtGgB;EAuGhB;;AAGD;EACC,OAzGgB;EA0GhB,WA1GgB;EA2GhB,QA3GgB;EA4GhB;EACA;EACA;;AAGD;EACC,cDlCc;;ACqCf;EACC,YACC;EAED;EACA,eDxHgB;ECyHhB;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAQD;EAAY;;AACZ;EAAW;;AAGV;EACC;;AAGD;EAA0C;;AAG3C;EAA0C,YAzKpB;;AA6KvB;EACC,cD9IkB;;ACiJnB;EACC,cDvGc;;AC6Gd;EACC,YACC;;AAQF;EACC,YACC;;AAMH;EAEC,cD1Le;EC2Lf,YA7MsB;;AAgNvB;EAEC,cDvIc;ECwId;;;AAKD;EACC,SDxHiB;ECyHjB;;AAGD;EACC,ODzNY;;;AC8Nb;EACC,WD5GY;EC6GZ;EACA;EACA;;AAGD;EAAqB,WDnHR","file":"Checkbox.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Checkbox/Checkbox.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;;;AErDF;AC5BC;EACA;AAEA;EACA;ED2BA;EACA,OAlBc;EA0Bd,aA9BkB;;AAwBlB;EACC;EACA;;AAMD;EAAwB,aAhCN;;AAkClB;EAEC,aArCiB;;AAwClB;EAEC,aAxCiB;;;AA4CnB;EACC;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EAAqB;;AACrB;EAAqB;;AAErB;EAAwB;;;AAIzB;EHtFC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EG6EA;;AH3EA;EACC;IACC;IACA;;;;AG2EH;EACC,YA9EoB;EA+EpB,eDxFiB;ECyFjB;EACA;EACA;EACA;EACA,QAhGiB;EAiGjB,aA9FuB;EA+FvB,cDoBW;ECnBX;EACA;EACA,OArGiB;EAsGjB,WAtGiB;EAuGjB;AAmEA;AAkBA;AA6BA;;AAhHA;EACC,OA3GgB;EA4GhB,WA5GgB;EA6GhB,QA7GgB;EA8GhB;;AAGD;EACC,OAhHgB;EAiHhB,WAjHgB;EAkHhB,QAlHgB;EAmHhB;EACA;EACA;;AAGD;EACC,cAxG4B;;AA2G7B;EACC,YACC;EAED;EACA,eD/HgB;ECgIhB;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAQD;EAAY;;AACZ;EAAW;;AAGV;EACC;;AAGD;EAA0C;;AAG3C;EAA0C,YArKpB;;AAyKvB;EACC,cA9KoC;;AAiLrC;EACC,cA/KkC;;AAqLlC;EACC,YACC;;AAQF;EACC,YACC;;AAMH;EAEC,cA3M6B;EA4M7B,YAzMsB;;AA4MvB;EAEC,cA/MkC;EAgNlC;;;AAKD;EACC,SD9HiB;EC+HjB;;AAGD;EACC,OApOa;;;AAyOd;EACC,WDlHY;ECmHZ;EACA;EACA;;AAGD;EAAqB,WDzHR","file":"Checkbox.css"}

package/dist/components/Checkbox/Checkbox.js

@@ -61,7 +61,7 @@ export const Checkbox = React.forwardRef(function (props, ref) {
     const indeterminateAttributes = indeterminate
         ? { 'indeterminate': 'true', 'aria-checked': 'mixed' }
         : { 'aria-checked': checked };
-    return (React.createElement("div", Object.assign({ className: CheckboxClasses, onClick: handleClickEvent, ref: itemRef }, rest),
+    return (React.createElement("div", Object.assign({ className: CheckboxClasses, onClick: handleClickEvent, ref: itemRef, "data-anvil-component": "Checkbox" }, rest),
         React.createElement("label", { className: "Checkbox__html-label", ref: labelRef },
             React.createElement("input", Object.assign({ tabIndex: tabIndex, checked: checked, className: "Checkbox__input", disabled: disabled, id: id, name: name, onChange: onChangeHandler, onClick: onClickHandler, role: "checkbox", type: "checkbox" }, indeterminateAttributes)),
             React.createElement("span", { className: "Checkbox__box" }),

package/dist/components/Checkbox/Checkbox.js.map

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

package/dist/components/Checkbox/index.css

@@ -64,11 +64,11 @@
 
 .a-Checkbox {
   /* 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: 25px;
 }
 .FormField .a-Checkbox {
@@ -142,9 +142,9 @@
 }
 
 .Checkbox__box {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 3px;
-  border: 1px solid #bcbcbd;
+  border: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
   box-sizing: border-box;
   display: inline-flex;
   flex-shrink: 0;
@@ -175,10 +175,10 @@
   margin-bottom: -6px;
 }
 .Checkbox--error .Checkbox__box {
-  border-color: #ffb2a0;
+  border-color: var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox__box::before {
-  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 #2270ee inset;
+  box-shadow: 0 0 0 0 rgba(var(--colorsTextInverted, #ffffff), 0%), 0 0 0 0 var(--colorsBorderPrimary, #2270ee) inset;
   content: "";
   border-radius: 3px;
   height: calc(100% + 2px);
@@ -189,7 +189,7 @@
   top: -1px;
 }
 .Checkbox__box::after {
-  box-shadow: 0 -2px 0 0 white inset, -2px 0 0 0 white inset;
+  box-shadow: 0 -2px 0 0 var(--colorsTextInverted, #ffffff) inset, -2px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   content: "";
   height: 11px;
   margin-left: 4px;
@@ -204,7 +204,7 @@
   margin-left: 3px;
 }
 .Checkbox--large .Checkbox__box::after {
-  box-shadow: 0 -2.5px 0 0 white inset, -2.5px 0 0 0 white inset;
+  box-shadow: 0 -2.5px 0 0 var(--colorsTextInverted, #ffffff) inset, -2.5px 0 0 0 var(--colorsTextInverted, #ffffff) inset;
   height: 15px;
   margin-left: 6px;
   top: 0;
@@ -216,39 +216,39 @@
   transform: none;
 }
 .Checkbox__input:checked + .Checkbox__box::before, .Checkbox--checked .Checkbox__box::before, .Checkbox--indeterminate .Checkbox__box::before {
-  box-shadow: 0 0 0 16px #2270ee inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderPrimary, #2270ee) inset;
 }
 .Checkbox__input:checked + .Checkbox__box::after, .Checkbox--checked .Checkbox__box::after, .Checkbox--indeterminate .Checkbox__box::after {
   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 #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsBorderCritical, #e63717) 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 #ffb2a0;
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 .Checkbox--focus-visible:focus-within .Checkbox__input:checked + .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--checked .Checkbox__box, .Checkbox--focus-visible:focus-within .Checkbox--indeterminate .Checkbox__box {
-  box-shadow: 0 0 0 4px #a9d1ff;
+  box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #a9d1ff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #444445;
+  border-color: var(--colorsBorderDefault, #444445);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: #e63717;
+  border-color: var(--colorsBorderCritical, #e63717);
 }
 .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 rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #2270ee inset;
+  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 rgba(255, 255, 255, 0.16) inset, 0 0 0 16px #e63717 inset;
+  box-shadow: 0 0 0 16px var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16)) inset, 0 0 0 16px var(--colorsBorderCritical, #e63717) inset;
 }
 .Checkbox--focus-visible:focus-within .Checkbox__box, .Checkbox--focus-visible:hover:focus-within .Checkbox__box {
-  border-color: #2270ee;
-  box-shadow: 0 0 0 4px #a9d1ff;
+  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: #e63717;
-  box-shadow: 0 0 0 4px #ffb2a0;
+  border-color: var(--colorsBorderCritical, #e63717);
+  box-shadow: 0 0 0 4px var(--colorsBorderCriticalSubdued, #ffb2a0);
 }
 
 .Checkbox--disabled .Checkbox__box {
@@ -256,7 +256,7 @@
   filter: grayscale(1);
 }
 .Checkbox--disabled .Label.Label--error {
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
 }
 
 .a-Checkbox .Checkbox__label {

package/dist/components/Checkbox/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/Checkbox/Checkbox.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;;;AE5DF;ACrBC;EACA,OFiBa;AEfb;EACA;EDoBA;EACA,ODsBmB;ECdnB,aAjBkB;;AAWlB;EACC;EACA;;AAMD;EAAwB,aAnBN;;AAqBlB;EAEC,aAxBiB;;AA2BlB;EAEC,aA3BiB;;;AA+BnB;EACC;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EAAqB;;AACrB;EAAqB;;AAErB;EAAwB;;;AAIzB;EH/EC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EGsEA;;AHpEA;EACC;IACC;IACA;;;;AGoEH;EACC,YDrDiB;ECsDjB,eDjFiB;ECkFjB;EACA;EACA;EACA;EACA,QAzFiB;EA0FjB,aAvFuB;EAwFvB,cD0BW;ECzBX;EACA;EACA,OA9FiB;EA+FjB,WA/FiB;EAgGjB;AAmEA;AAkBA;AA6BA;;AAhHA;EACC,OApGgB;EAqGhB,WArGgB;EAsGhB,QAtGgB;EAuGhB;;AAGD;EACC,OAzGgB;EA0GhB,WA1GgB;EA2GhB,QA3GgB;EA4GhB;EACA;EACA;;AAGD;EACC,cDlCc;;ACqCf;EACC,YACC;EAED;EACA,eDxHgB;ECyHhB;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAQD;EAAY;;AACZ;EAAW;;AAGV;EACC;;AAGD;EAA0C;;AAG3C;EAA0C,YAzKpB;;AA6KvB;EACC,cD9IkB;;ACiJnB;EACC,cDvGc;;AC6Gd;EACC,YACC;;AAQF;EACC,YACC;;AAMH;EAEC,cD1Le;EC2Lf,YA7MsB;;AAgNvB;EAEC,cDvIc;ECwId;;;AAKD;EACC,SDxHiB;ECyHjB;;AAGD;EACC,ODzNY;;;AC8Nb;EACC,WD5GY;EC6GZ;EACA;EACA;;AAGD;EAAqB,WDnHR","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/Checkbox/Checkbox.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;;;AErDF;AC5BC;EACA;AAEA;EACA;ED2BA;EACA,OAlBc;EA0Bd,aA9BkB;;AAwBlB;EACC;EACA;;AAMD;EAAwB,aAhCN;;AAkClB;EAEC,aArCiB;;AAwClB;EAEC,aAxCiB;;;AA4CnB;EACC;;AAEA;EACC;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EAAqB;;AACrB;EAAqB;;AAErB;EAAwB;;;AAIzB;EHtFC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EG6EA;;AH3EA;EACC;IACC;IACA;;;;AG2EH;EACC,YA9EoB;EA+EpB,eDxFiB;ECyFjB;EACA;EACA;EACA;EACA,QAhGiB;EAiGjB,aA9FuB;EA+FvB,cDoBW;ECnBX;EACA;EACA,OArGiB;EAsGjB,WAtGiB;EAuGjB;AAmEA;AAkBA;AA6BA;;AAhHA;EACC,OA3GgB;EA4GhB,WA5GgB;EA6GhB,QA7GgB;EA8GhB;;AAGD;EACC,OAhHgB;EAiHhB,WAjHgB;EAkHhB,QAlHgB;EAmHhB;EACA;EACA;;AAGD;EACC,cAxG4B;;AA2G7B;EACC,YACC;EAED;EACA,eD/HgB;ECgIhB;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAQD;EAAY;;AACZ;EAAW;;AAGV;EACC;;AAGD;EAA0C;;AAG3C;EAA0C,YArKpB;;AAyKvB;EACC,cA9KoC;;AAiLrC;EACC,cA/KkC;;AAqLlC;EACC,YACC;;AAQF;EACC,YACC;;AAMH;EAEC,cA3M6B;EA4M7B,YAzMsB;;AA4MvB;EAEC,cA/MkC;EAgNlC;;;AAKD;EACC,SD9HiB;EC+HjB;;AAGD;EACC,OApOa;;;AAyOd;EACC,WDlHY;ECmHZ;EACA;EACA;;AAGD;EAAqB,WDzHR","file":"index.css"}

package/dist/components/Collapsible/Collapsible.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Collapsible {
   /* 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;
 }