@servicetitan/design-system 11.3.0 → 11.4.1

package/dist/components/FlowCard/index.css

@@ -35,7 +35,7 @@
   content: "";
   width: 6px;
   height: 100%;
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -43,10 +43,10 @@
   top: 0;
 }
 .FlowCardStep--active.FlowCardStep--error::before {
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
 }
 .FlowCardStep--active.FlowCardStep--saved::before {
-  background-color: #1fbc70;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .FlowCardStep--active .FlowCardStep__header {
   border-bottom: none;
@@ -59,7 +59,7 @@
   content: "";
   width: 6px;
   height: 100%;
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
   position: absolute;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
@@ -94,31 +94,48 @@
   font-size: 14px;
 }
 .FlowCardStep__status.FlowCardStep__status--active {
-  background-color: #2270ee;
-  color: white;
+  background-color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep__status.FlowCardStep__status--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
 }
 
 .FlowCardStep--ordered .FlowCardStep__status {
-  background-color: #bcbcbd;
-  color: white;
+  background-color: var(--colorsSurfaceGreyStronger, #bcbcbd);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--active {
-  background-color: #2270ee;
-  color: white;
+  background-color: var(--colorsStatusInfo, #2270ee);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--custom {
   background-color: inherit;
   color: inherit;
 }
 .FlowCardStep--ordered .FlowCardStep__status--saved {
-  background-color: #ffffff;
-  color: white;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextInverted, #ffffff);
 }
 .FlowCardStep--ordered .FlowCardStep__status--error {
-  background-color: #ffece9;
+  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
+}
+
+.FlowCardStep__icon-active {
+  color: var(--colorsTextInverted, #ffffff);
+}
+
+.FlowCardStep .FlowCardStep__indicator-active {
+  color: var(--colorsStatusSuccess, #18a761);
+}
+.FlowCardStep .FlowCardStep__indicator-complete {
+  color: var(--colorsStatusSuccess, #18a761);
+}
+.FlowCardStep .FlowCardStep__indicator-disabled {
+  color: var(--colorsSurfaceGreyStronger, #bcbcbd);
+}
+.FlowCardStep .FlowCardStep__indicator-error {
+  color: var(--colorsStatusCritical, #f94d32);
 }
 
 /*# sourceMappingURL=index.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FlowCard/FlowCardStep.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;EACC;EACA,eCqHW;;ADnHX;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC,aCyGS;EDxGT,gBCwGS;EDvGT,eCwGS;EDvGT;EACA;EACA;;AAGD;EACC,SCiGS;EDhGT,gBC+FS;;AD3FX;EACC,SC2FU;;;ADvFZ;EACC;;AAEA;EACC;EACA;EACA;EACA,kBCZe;EDaf;EACA,wBCrCgB;EDsChB,2BCtCgB;EDuChB;EACA;;AAIA;EACC,kBCkCa;;AD7Bd;EACC,kBCUe;;ADNjB;EACC;;AAIA;EACC;;;AAMF;EACC;EACA;EACA;EACA,kBCQc;EDPd;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC,cCwBW;EDvBX,OCyBW;EDxBX,QCwBW;EDvBX;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,kBCpFe;EDqFf;;AAGD;EACC,kBCpCc;;;ADyCf;EACC,kBCrFiB;EDsFjB;;AAGD;EACC,kBCpGe;EDqGf;;AAGD;EACC;EACA;;AAGD;EACC,kBC5HY;ED6HZ;;AAGD;EACC,kBC9Dc","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FlowCard/FlowCardStep.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;EACC;EACA,eC6GW;;AD3GX;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC,aCiGS;EDhGT,gBCgGS;ED/FT,eCgGS;ED/FT;EACA;EACA;;AAGD;EACC,SCyFS;EDxFT,gBCuFS;;ADnFX;EACC,SCmFU;;;AD/EZ;EACC;;AAEA;EACC;EACA;EACA;EACA,kBAjDY;EAkDZ;EACA,wBC9CgB;ED+ChB,2BC/CgB;EDgDhB;EACA;;AAIA;EACC,kBA1DU;;AA+DX;EACC,kBA/Da;;AAmEf;EACC;;AAIA;EACC;;;AAMF;EACC;EACA;EACA;EACA,kBApFW;EAqFX;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC,cCgBW;EDfX,OCiBW;EDhBX,QCgBW;EDfX;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,kBAzHY;EA0HZ,OAvHmB;;AA0HpB;EACC,kBAzHsB;;;AA8HvB;EACC,kBArIwB;EAsIxB,OAlImB;;AAqIpB;EACC,kBAzIY;EA0IZ,OAvImB;;AA0IpB;EACC;EACA;;AAGD;EACC,kBA/IyB;EAgJzB,OAjJmB;;AAoJpB;EACC,kBAnJsB;;;AAwJvB;EAAW,OA1JS;;;AA8JpB;EAAW,OA/JI;;AAgKf;EAAa,OAhKE;;AAiKf;EAAa,OApKY;;AAqKzB;EAAU,OAnKE","file":"index.css"}

package/dist/components/Form/Form.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAGA;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","file":"Form.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAGA;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","file":"Form.css"}

package/dist/components/Form/Form.js

@@ -24,10 +24,9 @@ export const Form = (_a) => {
         if (onSubmit) {
             onSubmit(e, Object.assign(Object.assign({}, props), args));
         }
-        // _.invoke(this.props, 'onSubmit', e, this.props, ...args)
     };
     const FormClasses = classnames('Form', className, `Form--${size}`);
-    return (React.createElement(Element, Object.assign({}, props, { className: FormClasses, onSubmit: handleSubmit }), children));
+    return (React.createElement(Element, Object.assign({}, props, { className: FormClasses, onSubmit: handleSubmit, "data-anvil-component": "Form" }), children));
 };
 Form.Checkbox = FormCheckbox;
 Form.Radio = FormRadio;

package/dist/components/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACN,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,cAAc,GACd,MAAM,iBAAiB,CAAC;AAqDzB,MAAM,CAAC,MAAM,IAAI,GAAS,CAAC,EAQ1B,EAAE,EAAE;QARsB,EAC1B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,OAEf,EADG,KAAK,cAPkB,6DAQ1B,CADQ;IAER,MAAM,YAAY,GAAG,CACpB,CAAqC,EACrC,GAAG,IAAS,EACX,EAAE;QACH,8GAA8G;QAC9G,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;SACnB;QAED,IAAI,QAAQ,EAAE;YACb,QAAQ,CAAC,CAAC,kCAAO,KAAK,GAAK,IAAI,EAAG,CAAC;SACnC;QACD,2DAA2D;IAC5D,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC;IAEnE,OAAO,CACN,oBAAC,OAAO,oBAAK,KAAK,IAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,KAChE,QAAQ,CACA,CACV,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAE7B,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC;AACjC,IAAI,CAAC,eAAe,GAAG,mBAAmB,CAAC;AAC3C,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;AAC/B,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC"}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACN,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,cAAc,EACd,mBAAmB,EACnB,YAAY,EACZ,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,cAAc,GACd,MAAM,iBAAiB,CAAC;AAqDzB,MAAM,CAAC,MAAM,IAAI,GAAS,CAAC,EAQ1B,EAAE,EAAE;QARsB,EAC1B,MAAM,EACN,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,OAEf,EADG,KAAK,cAPkB,6DAQ1B,CADQ;IAER,MAAM,YAAY,GAAG,CACpB,CAAqC,EACrC,GAAG,IAAS,EACX,EAAE;QACH,8GAA8G;QAC9G,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;SACnB;QAED,IAAI,QAAQ,EAAE;YACb,QAAQ,CAAC,CAAC,kCAAO,KAAK,GAAK,IAAI,EAAG,CAAC;SACnC;IACF,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC;IAEnE,OAAO,CACN,oBAAC,OAAO,oBACH,KAAK,IACT,SAAS,EAAE,WAAW,EACtB,QAAQ,EAAE,YAAY,0BACD,MAAM,KAE1B,QAAQ,CACA,CACV,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAE7B,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC;AACjC,IAAI,CAAC,eAAe,GAAG,mBAAmB,CAAC;AAC3C,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;AACvB,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC;AAC/B,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrC,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAGA;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","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAGA;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","file":"index.css"}

package/dist/components/FormField/FormField.css

@@ -146,7 +146,7 @@
 
 .FormField__helpers {
   /* 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;
 }

package/dist/components/FormField/FormField.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/FormField/FormField.scss","../../../src/utilities/SemanticUtils/_widths.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;;;AE9EF;AAEA;EACC;EACA;EACA;;AAEA;EAAe;;;ACJd;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;ADUtC;EACC,ODuEe;ECtEf,WDkHa;ECjHb,aD2HqB;EC1HrB,YDqGW;;ACnGX;EAA4B,YD2Gd;;;ACxGf;EACC,ODiBkB;EChBlB,WDyGa;ECxGb,aDkHqB;ECjHrB,YD4FW;;AC1FX;EAA6B,YDkGf;;;AC/Ff;EACC,eDsFW;;;ACnFZ;AEtCC;EACA,OHiBa;AGfb;EACA;;;AFoCD;EACC;;AAEA;EAAsB,SDmEJ;;;AChEnB;AAAA;AAAA;AAGA;AAkBC;AAOA;;AAvBA;AAAA;EAEC,kBD+Bc;EC9Bd,ODkCc;;AC/Bf;AAAA;AAAA;EAGC,cD4Bc;;ACzBf;EACC,kBDoBc;;AChBf;AAAA;EAEC;EACA;;AAID;EACC;;;AAIF;AACA;EACC;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;EACA,eDeW;ECdX,WDyBa;ECxBb,aDFkB;;;ACKnB;AACA;EACC;;AAEA;EAAY","file":"FormField.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/FormField/FormField.scss","../../../src/utilities/SemanticUtils/_widths.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;;;AE9EF;AAEA;EACC;EACA;EACA;;AAEA;EAAe;;;ACJd;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;ADUtC;EACC,ODwEe;ECvEf,WDmHa;EClHb,aD4HqB;EC3HrB,YDsGW;;ACpGX;EAA4B,YD4Gd;;;ACzGf;EACC,ODiBkB;EChBlB,WD0Ga;ECzGb,aDmHqB;EClHrB,YD6FW;;AC3FX;EAA6B,YDmGf;;;AChGf;EACC,eDuFW;;;ACpFZ;AEtCC;EACA;AAEA;EACA;;;AFoCD;EACC;;AAEA;EAAsB,SDoEJ;;;ACjEnB;AAAA;AAAA;AAGA;AAkBC;AAOA;;AAvBA;AAAA;EAEC,kBDgCc;EC/Bd,ODmCc;;AChCf;AAAA;AAAA;EAGC,cD6Bc;;AC1Bf;EACC,kBDqBc;;ACjBf;AAAA;EAEC;EACA;;AAID;EACC;;;AAIF;AACA;EACC;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;EACA,eDgBW;ECfX,WD0Ba;ECzBb,aDDkB;;;ACInB;AACA;EACC;;AAEA;EAAY","file":"FormField.css"}

package/dist/components/FormField/FormField.js

@@ -101,7 +101,7 @@ export const FormField = React.forwardRef((_a, ref) => {
         [`FormField--width-${width}`]: width,
     });
     const FormFieldElement = el;
-    return (React.createElement(FormFieldElement, Object.assign({ className: FormFieldClasses }, FormFieldProps),
+    return (React.createElement(FormFieldElement, Object.assign({ className: FormFieldClasses, "data-anvil-component": "FormField" }, FormFieldProps),
         React.createElement("div", { className: "FormField__wrapper" },
             getControl(),
             React.createElement("div", { className: "FormField__helpers" },

package/dist/components/FormField/FormField.js.map

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

package/dist/components/FormField/FormField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FormField/FormField.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Form } from '../Form/';
+import { Input } from '../Input/';
+const MultipleTogglebox = () => {
+    const [value, setValue] = React.useState(1);
+    const handleChange = (value) => setValue(value);
+    return (React.createElement(Form, null,
+        React.createElement(Form.Field, { label: "FormField1", required: true, width: "3" },
+            React.createElement(Form.Togglebox, { control: "radio", label: "Togglebox1", onClick: () => handleChange(1), checked: value === 1, className: "tb1" }),
+            React.createElement(Form.Togglebox, { control: "radio", label: "Togglebox2", onClick: () => handleChange(2), checked: value === 2, className: "tb2" }))));
+};
+describe('test multiple Form.Togglebox inside one Form.Field', () => {
+    beforeEach(() => jest.spyOn(console, 'error'));
+    it('it should be checked on click', () => {
+        const { container } = render(React.createElement(MultipleTogglebox, null));
+        const tbi1 = container.querySelector('.tb1 input');
+        const tbi2 = container.querySelector('.tb2 input');
+        expect(tbi1.checked).toEqual(true);
+        expect(tbi2.checked).toEqual(false);
+        userEvent.click(tbi2);
+        expect(tbi1.checked).toEqual(false);
+        expect(tbi2.checked).toEqual(true);
+        userEvent.click(tbi1);
+        expect(tbi1.checked).toEqual(true);
+        expect(tbi2.checked).toEqual(false);
+    });
+});
+const MultipleInput = () => {
+    return (React.createElement(Form, null,
+        React.createElement(Form.Field, { label: "Label", width: "3" },
+            React.createElement(Input, { placeholder: "First", className: "input1" }),
+            React.createElement(Input, { placeholder: "Last", className: "input2" }))));
+};
+describe('test focus on label clock multiple Inputs inside one Form.Field', () => {
+    beforeEach(() => jest.spyOn(console, 'error'));
+    it('it should be focused on Label click', () => {
+        const { container } = render(React.createElement(MultipleInput, null));
+        const label = container.querySelector('.Label');
+        const i1 = container.querySelector('.input1 input');
+        const i2 = container.querySelector('.input2 input');
+        expect(i1).not.toHaveFocus();
+        expect(i2).not.toHaveFocus();
+        userEvent.click(label);
+        expect(i1).toHaveFocus();
+        expect(i2).not.toHaveFocus();
+        userEvent.click(i2);
+        expect(i1).not.toHaveFocus();
+        expect(i2).toHaveFocus();
+    });
+});
+//# sourceMappingURL=FormField.test.js.map

package/dist/components/FormField/FormField.test.js.map

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

package/dist/components/FormField/index.css

@@ -146,7 +146,7 @@
 
 .FormField__helpers {
   /* 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;
 }

package/dist/components/FormField/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/FormField/FormField.scss","../../../src/utilities/SemanticUtils/_widths.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;;;AE9EF;AAEA;EACC;EACA;EACA;;AAEA;EAAe;;;ACJd;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;ADUtC;EACC,ODuEe;ECtEf,WDkHa;ECjHb,aD2HqB;EC1HrB,YDqGW;;ACnGX;EAA4B,YD2Gd;;;ACxGf;EACC,ODiBkB;EChBlB,WDyGa;ECxGb,aDkHqB;ECjHrB,YD4FW;;AC1FX;EAA6B,YDkGf;;;AC/Ff;EACC,eDsFW;;;ACnFZ;AEtCC;EACA,OHiBa;AGfb;EACA;;;AFoCD;EACC;;AAEA;EAAsB,SDmEJ;;;AChEnB;AAAA;AAAA;AAGA;AAkBC;AAOA;;AAvBA;AAAA;EAEC,kBD+Bc;EC9Bd,ODkCc;;AC/Bf;AAAA;AAAA;EAGC,cD4Bc;;ACzBf;EACC,kBDoBc;;AChBf;AAAA;EAEC;EACA;;AAID;EACC;;;AAIF;AACA;EACC;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;EACA,eDeW;ECdX,WDyBa;ECxBb,aDFkB;;;ACKnB;AACA;EACC;;AAEA;EAAY","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/FormField/FormField.scss","../../../src/utilities/SemanticUtils/_widths.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;;;AE9EF;AAEA;EACC;EACA;EACA;;AAEA;EAAe;;;ACJd;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;ADUtC;EACC,ODwEe;ECvEf,WDmHa;EClHb,aD4HqB;EC3HrB,YDsGW;;ACpGX;EAA4B,YD4Gd;;;ACzGf;EACC,ODiBkB;EChBlB,WD0Ga;ECzGb,aDmHqB;EClHrB,YD6FW;;AC3FX;EAA6B,YDmGf;;;AChGf;EACC,eDuFW;;;ACpFZ;AEtCC;EACA;AAEA;EACA;;;AFoCD;EACC;;AAEA;EAAsB,SDoEJ;;;ACjEnB;AAAA;AAAA;AAGA;AAkBC;AAOA;;AAvBA;AAAA;EAEC,kBDgCc;EC/Bd,ODmCc;;AChCf;AAAA;AAAA;EAGC,cD6Bc;;AC1Bf;EACC,kBDqBc;;ACjBf;AAAA;EAEC;EACA;;AAID;EACC;;;AAIF;AACA;EACC;;;AAGD;EACC;;;AAGD;AACA;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;EACA,eDgBW;ECfX,WD0Ba;ECzBb,aDDkB;;;ACInB;AACA;EACC;;AAEA;EAAY","file":"index.css"}

package/dist/components/FormGroup/FormGroup.css

@@ -3,7 +3,7 @@
 .FormGroup {
   /* stylelint-enable */
   /* 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;

package/dist/components/FormGroup/FormGroup.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FormGroup/FormGroup.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/SemanticUtils/_widths.scss"],"names":[],"mappings":"AAAA;ACKA;AACA;AACC;ACNA;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;;AACA;EAAe;;AAEf;EACC;EACA;EACA;EACA,cEwGU;EFvGV,eEuGU;;AFpGX;EAjBD;IAkBE;;EAEA;IACC,cE+FS;IF9FT,eE8FS;;;;AFzFZ;AACA;EACC;EACA;;AAEA;EAAe;;AAEf;EACC;EACA,eEgFU;;AF7EX;EACC;EACA;EACA;;AAEA;EAAe;;;AAIjB;AACA;EACC;;AAEA;EACC;EACA;EACA;;;AG/CA;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AHsDtC;AACA;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;EACA,cE4CU;EF3CV;;AAGD;EACC;EACA;;AAGD;EAIC;EACA;EACA;EACA;EACA;EACA","file":"FormGroup.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FormGroup/FormGroup.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/SemanticUtils/_widths.scss"],"names":[],"mappings":"AAAA;ACKA;AACA;AACC;ACNA;EACA;AAEA;EACA;EDKA;EACA;EACA;;AACA;EAAe;;AAEf;EACC;EACA;EACA;EACA,cEyGU;EFxGV,eEwGU;;AFrGX;EAjBD;IAkBE;;EAEA;IACC,cEgGS;IF/FT,eE+FS;;;;AF1FZ;AACA;EACC;EACA;;AAEA;EAAe;;AAEf;EACC;EACA,eEiFU;;AF9EX;EACC;EACA;EACA;;AAEA;EAAe;;;AAIjB;AACA;EACC;;AAEA;EACC;EACA;EACA;;;AG/CA;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AHsDtC;AACA;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;EACA,cE6CU;EF5CV;;AAGD;EACC;EACA;;AAGD;EAIC;EACA;EACA;EACA;EACA;EACA","file":"FormGroup.css"}

package/dist/components/FormGroup/FormGroup.js

@@ -19,7 +19,7 @@ export const FormGroup = (_a) => {
         'FormGroup--equal-width': widths === 'equal',
         [`FormGroup--widths-${widths}`]: widths && widths !== 'equal',
     });
-    return React.createElement(Element, Object.assign({}, props, { className: FormGroupClasses }));
+    return (React.createElement(Element, Object.assign({ className: FormGroupClasses, "data-anvil-component": "FormGroup" }, props)));
 };
 FormGroup.displayName = 'FormGroup';
 //# sourceMappingURL=FormGroup.js.map

package/dist/components/FormGroup/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAyBpC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAO7C,EAAE,EAAE;QAPyC,EAC7C,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,OAAO,EACP,MAAM,EACN,MAAM,OAEN,EADG,KAAK,cANqC,kDAO7C,CADQ;IAER,MAAM,gBAAgB,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE;QAC3D,oBAAoB,EAAE,OAAO;QAC7B,mBAAmB,EAAE,MAAM;QAC3B,wBAAwB,EAAE,MAAM,KAAK,OAAO;QAC5C,CAAC,qBAAqB,MAAM,EAAE,CAAC,EAAE,MAAM,IAAI,MAAM,KAAK,OAAO;KAC7D,CAAC,CAAC;IAEH,OAAO,oBAAC,OAAO,oBAAK,KAAK,IAAE,SAAS,EAAE,gBAAgB,IAAI,CAAC;AAC5D,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAyBpC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAO7C,EAAE,EAAE;QAPyC,EAC7C,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,OAAO,EACP,MAAM,EACN,MAAM,OAEN,EADG,KAAK,cANqC,kDAO7C,CADQ;IAER,MAAM,gBAAgB,GAAG,UAAU,CAAC,WAAW,EAAE,SAAS,EAAE;QAC3D,oBAAoB,EAAE,OAAO;QAC7B,mBAAmB,EAAE,MAAM;QAC3B,wBAAwB,EAAE,MAAM,KAAK,OAAO;QAC5C,CAAC,qBAAqB,MAAM,EAAE,CAAC,EAAE,MAAM,IAAI,MAAM,KAAK,OAAO;KAC7D,CAAC,CAAC;IAEH,OAAO,CACN,oBAAC,OAAO,kBACP,SAAS,EAAE,gBAAgB,0BACN,WAAW,IAC5B,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/components/FormGroup/index.css

@@ -3,7 +3,7 @@
 .FormGroup {
   /* stylelint-enable */
   /* 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;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FormGroup/FormGroup.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/SemanticUtils/_widths.scss"],"names":[],"mappings":"AAAA;ACKA;AACA;AACC;ACNA;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;;AACA;EAAe;;AAEf;EACC;EACA;EACA;EACA,cEwGU;EFvGV,eEuGU;;AFpGX;EAjBD;IAkBE;;EAEA;IACC,cE+FS;IF9FT,eE8FS;;;;AFzFZ;AACA;EACC;EACA;;AAEA;EAAe;;AAEf;EACC;EACA,eEgFU;;AF7EX;EACC;EACA;EACA;;AAEA;EAAe;;;AAIjB;AACA;EACC;;AAEA;EACC;EACA;EACA;;;AG/CA;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AHsDtC;AACA;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;EACA,cE4CU;EF3CV;;AAGD;EACC;EACA;;AAGD;EAIC;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/FormGroup/FormGroup.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/SemanticUtils/_widths.scss"],"names":[],"mappings":"AAAA;ACKA;AACA;AACC;ACNA;EACA;AAEA;EACA;EDKA;EACA;EACA;;AACA;EAAe;;AAEf;EACC;EACA;EACA;EACA,cEyGU;EFxGV,eEwGU;;AFrGX;EAjBD;IAkBE;;EAEA;IACC,cEgGS;IF/FT,eE+FS;;;;AF1FZ;AACA;EACC;EACA;;AAEA;EAAe;;AAEf;EACC;EACA,eEiFU;;AF9EX;EACC;EACA;EACA;;AAEA;EAAe;;;AAIjB;AACA;EACC;;AAEA;EACC;EACA;EACA;;;AG/CA;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AAApC;EAAoC;;;AHsDtC;AACA;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;EACA,cE6CU;EF5CV;;AAGD;EACC;EACA;;AAGD;EAIC;EACA;EACA;EACA;EACA;EACA","file":"index.css"}

package/dist/components/Frame/Frame.css

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

package/dist/components/Frame/Frame.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Frame/Frame.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA;EACA;EACA;EACA;;;AAGD;EACC,SEsIoB;;;AFnIrB;EACC;EACA;EACA;EACA","file":"Frame.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Frame/Frame.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA;AAEA;EACA;EDCA;EACA;EACA;EACA;;;AAGD;EACC,SEuIoB;;;AFpIrB;EACC;EACA;EACA;EACA","file":"Frame.css"}

package/dist/components/Frame/Frame.js

@@ -17,7 +17,7 @@ export const Frame = (_a) => {
         document.body.classList.add('of-hidden');
         return () => document.body.classList.remove('of-hidden');
     }, []);
-    return (React.createElement(El, Object.assign({ className: classnames('Frame', className) }, props),
+    return (React.createElement(El, Object.assign({ className: classnames('Frame', className), "data-anvil-component": "Frame" }, props),
         header && React.createElement("div", { className: "Frame__header" }, header),
         React.createElement("div", { className: "Frame__content" }, children)));
 };

package/dist/components/Frame/Frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.js","sourceRoot":"","sources":["../../../src/components/Frame/Frame.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAiBpC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAMrC,EAAE,EAAE;QANiC,EACrC,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,MAAM,OAEN,EADG,KAAK,cAL6B,yCAMrC,CADQ;IAER,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,oBAAC,EAAE,kBAAC,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,IAAM,KAAK;QACtD,MAAM,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC5C,CACL,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"Frame.js","sourceRoot":"","sources":["../../../src/components/Frame/Frame.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAiBpC,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAMrC,EAAE,EAAE;QANiC,EACrC,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,MAAM,OAEN,EADG,KAAK,cAL6B,yCAMrC,CADQ;IAER,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,oBAAC,EAAE,kBACF,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,0BACpB,OAAO,IACxB,KAAK;QAER,MAAM,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC5C,CACL,CAAC;AACH,CAAC,CAAC"}

package/dist/components/Frame/index.css

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

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Frame/Frame.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA,OCiBa;ADfb;EACA;EDCA;EACA;EACA;EACA;;;AAGD;EACC,SEsIoB;;;AFnIrB;EACC;EACA;EACA;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Frame/Frame.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACFC;EACA;AAEA;EACA;EDCA;EACA;EACA;EACA;;;AAGD;EACC,SEuIoB;;;AFpIrB;EACC;EACA;EACA;EACA","file":"index.css"}

package/dist/components/Grid/Grid.css

@@ -9,7 +9,7 @@
 
 .Grid {
   /* 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;
@@ -72,7 +72,7 @@
   margin-bottom: 0 !important;
 }
 .Grid.Grid--divided:not(.Grid--vertically-divided) > .GridColumn:not(.GridRow), .Grid.Grid--divided:not(.Grid--vertically-divided) > .GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--vertically-divided > .GridColumn:not(.GridRow), .Grid.Grid--vertically-divided > .GridRow > .GridColumn {
   margin-top: 8px;
@@ -87,7 +87,7 @@
   margin-top: 0;
 }
 .Grid > .GridRow--divided.GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid > .GridRow--divided.GridRow > .GridColumn:first-child {
   box-shadow: none;
@@ -105,7 +105,7 @@
   width: calc(100% - 16px);
   height: 1px;
   margin: 0% 8px;
-  box-shadow: 0 -1px 0 0 #bcbcbd;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--horizontally-padded--divided.Grid, .Grid.Grid--padded.Grid--divided:not(.Grid--vertically-divided):not(.Grid--horizontally-divided) {
   width: 100%;
@@ -126,16 +126,16 @@
 .Grid.Grid--celled {
   width: 100%;
   margin: 1em 0;
-  box-shadow: 0 0 0 1px #bcbcbd;
+  box-shadow: 0 0 0 1px var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--celled > .GridRow {
   width: 100% !important;
   margin: 0;
   padding: 0;
-  box-shadow: 0 -1px 0 0 #bcbcbd;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
 }
 .Grid.Grid--celled > .GridColumn:not(.GridRow), .Grid.Grid--celled > .GridRow > .GridColumn {
-  box-shadow: -1px 0 0 0 #bcbcbd;
+  box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   padding: 1em;
 }
 .Grid.Grid--celled > .GridColumn:first-child, .Grid.Grid--celled > .GridRow > .GridColumn:first-child {

package/dist/components/Grid/Grid.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Grid/GridVariables.scss","../../../src/components/Grid/Grid.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;ACEA;AAEA;AAAA;AAAA;EAGC;;;AAGD;ACZC;EACA,OCiBa;ADfb;EACA;EDiBA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAYA;AAKA;AAYA;AAeA;AAMA;AASA;AAMA;AAKA;AASA;AAkBA;AAMA;AAKA;AAaA;AAmCA;;AA5KA;AAAA;AAAA;EAGC;;AAeD;EACC;EACA;;AAGD;EACC;EACA;;AAID;EACC,YDtB0B;;AC0B3B;EAEC;EACA;;AAGD;EAEC;;AAID;EACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAID;EAEC,YDjDe;;ACqDhB;EAEC;EACA;EACA;EACA;;AAID;EAEC;;AAID;EACC;;AAID;EACC,YD1Ee;;AC6EhB;EACC;;AAID;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YD/F0B;;ACmG3B;EAEC;;AAID;EACC;;AAID;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAID;EACC;EACA,QDzHc;EC0Hd,YDlHoB;;ACqHrB;EACC;EACA;EACA;EACA,YDxHmB;;AC2HpB;EAEC,YD5HsB;EC6HtB,SDnIe;;ACsIhB;EAEC;;AAGD;EAEC,SD5IuB;;AC+IxB;EAEC,SDhJ4B;;ACoJ7B;EACC;EACA;;AAGD;EACC;;AAGD;EACC","file":"Grid.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Grid/GridVariables.scss","../../../src/components/Grid/Grid.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACGA;ACEA;AAEA;AAAA;AAAA;EAGC;;;AAGD;ACZC;EACA;AAEA;EACA;EDiBA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAYA;AAKA;AAYA;AAeA;AAMA;AASA;AAMA;AAKA;AASA;AAkBA;AAMA;AAKA;AAaA;AAmCA;;AA5KA;AAAA;AAAA;EAGC;;AAeD;EACC;EACA;;AAGD;EACC;EACA;;AAID;EACC,YDtB0B;;AC0B3B;EAEC;EACA;;AAGD;EAEC;;AAID;EACC;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAID;EAEC,YDnDe;;ACuDhB;EAEC;EACA;EACA;EACA;;AAID;EAEC;;AAID;EACC;;AAID;EACC,YD5Ee;;AC+EhB;EACC;;AAID;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YDjG0B;;ACqG3B;EAEC;;AAID;EACC;;AAID;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAID;EACC;EACA,QD7Hc;EC8Hd,YDtHoB;;ACyHrB;EACC;EACA;EACA;EACA,YD5HmB;;AC+HpB;EAEC,YDhIsB;ECiItB,SDvIe;;AC0IhB;EAEC;;AAGD;EAEC,SDhJuB;;ACmJxB;EAEC,SDpJ4B;;ACwJ7B;EACC;EACA;;AAGD;EACC;;AAGD;EACC","file":"Grid.css"}

package/dist/components/Grid/Grid.js

@@ -45,7 +45,7 @@ export const Grid = (_a) => {
         [`Grid--text-align-${textAlign}`]: textAlign,
         [`Grid--vertical-align-${verticalAlign}`]: verticalAlign,
     });
-    return (React.createElement(GridElement, Object.assign({ className: GridClasses }, props), children));
+    return (React.createElement(GridElement, Object.assign({ className: GridClasses, "data-anvil-component": "Grid" }, props), children));
 };
 Grid.Column = GridColumn;
 Grid.Row = GridRow;

package/dist/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EACN,gBAAgB,GAEhB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAqEnC,MAAM,CAAC,MAAM,IAAI,GAAS,CAAC,EAiB1B,EAAE,EAAE;QAjBsB,EAC1B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,uBAAuB,EACjC,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,WAAW,GAAG,KAAK,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,OAEb,EADG,KAAK,cAhBkB,gLAiB1B,CADQ;IAER,2CAA2C;IAC3C,MAAM,WAAW,GAAG,IAAI,GAAG,CAC1B,OAAO,QAAQ,KAAK,QAAQ;QAC3B,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5C,CAAC,CAAC,EAAE,CACL,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;SACrD,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SAC3C,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CACf,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC;QAC5B,CAAC,CAAC,SAAS,MAAM,sBAAsB;QACvC,CAAC,CAAC,SAAS,MAAM,WAAW,CAC7B,CAAC;IAEH,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE;QAClE,cAAc,EAAE,MAAM;QACtB,yBAAyB,EAAE,MAAM,KAAK,YAAY;QAClD,gBAAgB,EAAE,QAAQ;QAC1B,CAAC,SAAS,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,EAC7C,gBAAgB,CAAC,OAAO,CAAC;QAC1B,CAAC,2BAA2B,gBAAgB,CAC3C,uBAAuB,CACvB,UAAU,CAAC,EAAE,OAAO,KAAK,OAAO;QACjC,eAAe,EAAE,OAAO;QACxB,0BAA0B,EAAE,OAAO,KAAK,YAAY;QACpD,gBAAgB,EAAE,QAAQ;QAC1B,cAAc,EAAE,MAAM;QACtB,yBAAyB,EAAE,MAAM,KAAK,YAAY;QAClD,2BAA2B,EAAE,MAAM,KAAK,cAAc;QACtD,eAAe,EAAE,OAAO;QACxB,oBAAoB,EAAE,OAAO,KAAK,MAAM;QACxC,iBAAiB,EAAE,SAAS;QAC5B,iBAAiB,EAAE,SAAS;QAC5B,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;QAC5C,CAAC,wBAAwB,aAAa,EAAE,CAAC,EAAE,aAAa;KACxD,CAAC,CAAC;IAEH,OAAO,CACN,oBAAC,WAAW,kBAAC,SAAS,EAAE,WAAW,IAAM,KAAK,GAC5C,QAAQ,CACI,CACd,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC"}
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EACN,gBAAgB,GAEhB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAqEnC,MAAM,CAAC,MAAM,IAAI,GAAS,CAAC,EAiB1B,EAAE,EAAE;QAjBsB,EAC1B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,uBAAuB,EACjC,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,WAAW,GAAG,KAAK,EACvB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,OAEb,EADG,KAAK,cAhBkB,gLAiB1B,CADQ;IAER,2CAA2C;IAC3C,MAAM,WAAW,GAAG,IAAI,GAAG,CAC1B,OAAO,QAAQ,KAAK,QAAQ;QAC3B,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5C,CAAC,CAAC,EAAE,CACL,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC;SACrD,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;SAC3C,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CACf,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC;QAC5B,CAAC,CAAC,SAAS,MAAM,sBAAsB;QACvC,CAAC,CAAC,SAAS,MAAM,WAAW,CAC7B,CAAC;IAEH,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE;QAClE,cAAc,EAAE,MAAM;QACtB,yBAAyB,EAAE,MAAM,KAAK,YAAY;QAClD,gBAAgB,EAAE,QAAQ;QAC1B,CAAC,SAAS,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,EAC7C,gBAAgB,CAAC,OAAO,CAAC;QAC1B,CAAC,2BAA2B,gBAAgB,CAC3C,uBAAuB,CACvB,UAAU,CAAC,EAAE,OAAO,KAAK,OAAO;QACjC,eAAe,EAAE,OAAO;QACxB,0BAA0B,EAAE,OAAO,KAAK,YAAY;QACpD,gBAAgB,EAAE,QAAQ;QAC1B,cAAc,EAAE,MAAM;QACtB,yBAAyB,EAAE,MAAM,KAAK,YAAY;QAClD,2BAA2B,EAAE,MAAM,KAAK,cAAc;QACtD,eAAe,EAAE,OAAO;QACxB,oBAAoB,EAAE,OAAO,KAAK,MAAM;QACxC,iBAAiB,EAAE,SAAS;QAC5B,iBAAiB,EAAE,SAAS;QAC5B,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAAE,SAAS;QAC5C,CAAC,wBAAwB,aAAa,EAAE,CAAC,EAAE,aAAa;KACxD,CAAC,CAAC;IAEH,OAAO,CACN,oBAAC,WAAW,kBACX,SAAS,EAAE,WAAW,0BACD,MAAM,IACvB,KAAK,GAER,QAAQ,CACI,CACd,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC"}

package/dist/components/Grid/GridBreakpoints.css

@@ -4181,19 +4181,19 @@
     flex-direction: column-reverse;
   }
   .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--mobile-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--mobile-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--mobile-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--mobile-reversed"].Grid--Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--mobile-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -4214,19 +4214,19 @@
     flex-direction: column-reverse;
   }
   .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--tablet-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--tablet-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--tablet-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--tablet-reversed"].Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--tablet-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -4247,19 +4247,19 @@
     flex-direction: column-reverse;
   }
   .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:first-child, .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridColumn:last-child, .Grid[class*="--desktop-reversed"].Grid--divided:not([class*="--vertically-divided"]) > .GridRow > .GridColumn:last-child {
     box-shadow: none;
   }
   .Grid[class*="--vertically-divided"][class*="--desktop-vertically-reversed"] > .GridRow:first-child::before {
-    box-shadow: 0 -1px 0 0 #bcbcbd;
+    box-shadow: 0 -1px 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--vertically-divided"][class*="--desktop-vertically-reversed"] > .GridRow:last-child::before {
     box-shadow: none;
   }
   .Grid[class*="--desktop-reversed"].Grid--celled > .GridRow > .GridColumn:first-child {
-    box-shadow: -1px 0 0 0 #bcbcbd;
+    box-shadow: -1px 0 0 0 var(--colorsBorderGreyStrong, #bcbcbd);
   }
   .Grid[class*="--desktop-reversed"].Grid--celled > .GridRow > .GridColumn:last-child {
     box-shadow: none;
@@ -4409,7 +4409,7 @@
     border-top: none !important;
   }
   .Grid.Grid--stackable.Grid--celled > .GridColumn:not(.GridRow), .Grid.Grid--stackable.Grid--celled > .GridRow > .GridColumn, .Grid.Grid--stackable.Grid--divided:not([class*=-vertically-divided]) > .GridRow > .GridColumn, .Grid.Grid--stackable.Grid--divided:not([class*=-vertically-divided]) > .GridColumn:not(.GridRow) {
-    border-top: 1px solid #bcbcbd;
+    border-top: 1px solid var(--colorsBorderGreyStrong, #bcbcbd);
     box-shadow: none !important;
     padding-top: 16px !important;
     padding-bottom: 16px !important;