@servicetitan/design-system 11.3.1 → 11.4.0

package/dist/components/Page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EACN,aAAa,EAEb,KAAK,GAEL,MAAM,cAAc,CAAC;AAwCtB,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAenC,EAAE,EAAE;;QAf+B,EACnC,KAAK,GAAG,QAAQ,EAChB,eAAe,GAAG,YAAY,EAC9B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,MAAM,EACN,QAAQ,GAAG,SAAS,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,aAAa,EACb,KAAK,OAEL,EADG,KAAK,cAd2B,gKAenC,CADQ;IAER,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,EAAE,EAAE;QAC1E,oBAAoB,EAAE,KAAK,KAAK,QAAQ;QACxC,kBAAkB,EAAE,OAAO,KAAK,MAAM;QACtC,eAAe,EAAE,OAAO,KAAK,SAAS;QACtC,YAAY,EAAE,QAAQ,KAAK,MAAM;QACjC,cAAc,EAAE,QAAQ,KAAK,QAAQ;QACrC,iBAAiB,EAAE,QAAQ;KAC3B,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,cAAc,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,OAAO,CAAC;IAEjD,OAAO,CACN,2CAAK,SAAS,EAAE,WAAW,0BAAuB,MAAM,IAAK,KAAK;QAChE,OAAO,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,OAAO,CAAO;QAC1D,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,SAAS,IAAI,oBAAC,aAAa,oBAAK,aAAa,EAAI;YAClD,oBAAC,kBAAkB,IAClB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAChD;gBAEA,OAAO,IAAI,aAAa,KAAK,MAAM,IAAI,CACvC,oBAAC,KAAK,oBAAK,KAAK,EAAI,CACpB;gBACD,6BAAK,SAAS,EAAC,YAAY;oBACzB,MAAM,IAAI,6BAAK,SAAS,EAAC,cAAc,IAAE,MAAM,CAAO;oBACvD,6BAAK,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAO,CAC1C;gBACL,OAAO,IAAI,aAAa,KAAK,OAAO,IAAI,CACxC,oBAAC,KAAK,oBAAK,KAAK,EAAI,CACpB,CACmB;YACpB,MAAM,IAAI,6BAAK,SAAS,EAAC,cAAc,IAAE,MAAM,CAAO,CAClD,CACD,CACN,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EACN,aAAa,EAEb,KAAK,GAEL,MAAM,cAAc,CAAC;AAwCtB,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAenC,EAAE,EAAE;;QAf+B,EACnC,KAAK,GAAG,QAAQ,EAChB,eAAe,GAAG,SAAS,EAC3B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,MAAM,EACN,QAAQ,GAAG,SAAS,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,aAAa,EACb,KAAK,OAEL,EADG,KAAK,cAd2B,gKAenC,CADQ;IAER,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE;QACjD,CAAC,MAAM,eAAe,EAAE,CAAC,EAAE,eAAe,KAAK,SAAS;QACxD,oBAAoB,EAAE,KAAK,KAAK,QAAQ;QACxC,kBAAkB,EAAE,OAAO,KAAK,MAAM;QACtC,eAAe,EAAE,OAAO,KAAK,SAAS;QACtC,YAAY,EAAE,QAAQ,KAAK,MAAM;QACjC,cAAc,EAAE,QAAQ,KAAK,QAAQ;QACrC,iBAAiB,EAAE,QAAQ;KAC3B,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,cAAc,CAAC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,mCAAI,OAAO,CAAC;IAEjD,OAAO,CACN,2CAAK,SAAS,EAAE,WAAW,0BAAuB,MAAM,IAAK,KAAK;QAChE,OAAO,IAAI,6BAAK,SAAS,EAAC,eAAe,IAAE,OAAO,CAAO;QAC1D,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,SAAS,IAAI,oBAAC,aAAa,oBAAK,aAAa,EAAI;YAClD,oBAAC,kBAAkB,IAClB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CACtB,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAChD;gBAEA,OAAO,IAAI,aAAa,KAAK,MAAM,IAAI,CACvC,oBAAC,KAAK,oBAAK,KAAK,EAAI,CACpB;gBACD,6BAAK,SAAS,EAAC,YAAY;oBACzB,MAAM,IAAI,6BAAK,SAAS,EAAC,cAAc,IAAE,MAAM,CAAO;oBACvD,6BAAK,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAO,CAC1C;gBACL,OAAO,IAAI,aAAa,KAAK,OAAO,IAAI,CACxC,oBAAC,KAAK,oBAAK,KAAK,EAAI,CACpB,CACmB;YACpB,MAAM,IAAI,6BAAK,SAAS,EAAC,cAAc,IAAE,MAAM,CAAO,CAClD,CACD,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/Page/index.css

@@ -1,9 +1,10 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Page {
   /* 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-color: var(--colorsAppBackground, #fcfcfc);
   display: flex;
   flex-grow: 1;
   position: relative;
@@ -98,8 +99,8 @@
 .Page__actionToolbar {
   min-height: 56px;
   padding: 12px 24px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #dfe0e1;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
   align-items: center;
@@ -117,9 +118,9 @@
 }
 
 .Panel {
-  background-color: #ffffff;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
   width: 0;
-  border-left: 1px solid #dfe0e1;
+  border-left: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -132,7 +133,7 @@
   opacity: 1;
 }
 .Panel--left {
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-left: none;
 }
 .Panel .Panel__content {
@@ -154,8 +155,8 @@
 .Page__footer {
   min-height: 56px;
   padding: 16px 24px;
-  background-color: #ffffff;
-  border-top: 1px solid #dfe0e1;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   width: 100%;
   box-sizing: border-box;
   align-items: center;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Page/Page.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACQA;ACPC;EACA,OCiBa;ADfb;EACA;EDMA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC,SEoEW;;AFlEX;EAHD;IAIE;;EAEA;IAAgB,eEiEN;;;AF9DX;EATD;IAUE;;;;AAIF;AAAA;EAEC,WAjEgB;;AAmEhB;AAAA;EACC;;AAGD;AAAA;EACC,WAvEsB;;AA0EvB;AAAA;EACC;EACA;;AAGD;AAAA;EACC,WAjFe;EAkFf;;AAGD;AAAA;EACC,WArFsB;;;AAyFxB;EAAgB,eE4BJ;;;AF1BZ;EACC;EACA;EACA,kBElFa;EFmFb;EACA;EACA;EACA;EACA;EACA;;AAEA;EAXD;IAYE;;;AAGD;EACC;EACA;;;AAIF;EACC,kBErGa;EFsGb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA,SEpBU;EFqBV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA,kBEhJa;EFiJb;EACA;EACA;EACA;EACA;EACA;EACA,SEtBoB;EFuBpB;;AAEA;EAbD;IAcE","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Page/Page.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACYA;ACXC;EACA;AAEA;EACA;EDUA,kBANoB;EAOpB;EACA;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC,SEgEW;;AF9DX;EAHD;IAIE;;EAEA;IAAgB,eE6DN;;;AF1DX;EATD;IAUE;;;;AAIF;AAAA;EAEC,WAtEgB;;AAwEhB;AAAA;EACC;;AAGD;AAAA;EACC,WA5EsB;;AA+EvB;AAAA;EACC;EACA;;AAGD;AAAA;EACC,WAtFe;EAuFf;;AAGD;AAAA;EACC,WA1FsB;;;AA8FxB;EAAgB,eEwBJ;;;AFtBZ;EACC;EACA;EACA,kBA/F0B;EAgG1B;EACA;EACA;EACA;EACA;EACA;;AAEA;EAXD;IAYE;;;AAGD;EACC;EACA;;;AAIF;EACC,kBAlH0B;EAmH1B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGC;EACC;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA,SExBU;EFyBV;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA,kBA7J0B;EA8J1B;EACA;EACA;EACA;EACA;EACA;EACA,SE1BoB;EF2BpB;;AAEA;EAbD;IAcE","file":"index.css"}

package/dist/components/Popover/Popover.css

@@ -17,12 +17,12 @@ span.Popover {
 
 .Popover__body {
   /* 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: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -118,7 +118,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -126,14 +126,14 @@ span.Popover {
 }
 
 .Popover__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 
 .Popover__divider {
   width: 100%;
   height: 1px;
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /* For inline Popovers, override generated inline width

package/dist/components/Popover/Popover.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Popover/Popover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAe;;;AAEf;AC1BC;EACA,OCiBa;ADfb;EACA;EDyBA;EACA,eEtBiB;EFuBjB;EACA;EACA;EACA;;AAEA;EACiB;;AAEjB;EACC;;;AAIF;EAAwB,eErCN;;;AFuClB;AACA;EACC;;;AAGD;EAAiB,WA/CM;;;AAgDvB;EAAgB,WA/CM;;;AAgDtB;EAAgB,WA/CM;;;AAgDtB;EAAgB,WA/CM;;;AAiDtB;EACC;EACA;;;AAGD;AAOC;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAO/B;AACA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EAAa;;;AAGd;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EAAgC","file":"Popover.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Popover/Popover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAYA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAe;;;AAEf;AC3BC;EACA;AAEA;EACA;ED0BA,YArB0B;EAsB1B,eEvBiB;EFwBjB;EACA;EACA;EACA;;AAEA;EACiB;;AAEjB;EACC;;;AAIF;EAAwB,eEtCN;;;AFwClB;AACA;EACC;;;AAGD;EAAiB,WAhDM;;;AAiDvB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAkDtB;EACC;EACA;;;AAGD;AAOC;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAO/B;AACA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EAAa;;;AAGd;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EAAgC","file":"Popover.css"}

package/dist/components/Popover/Popover.js

@@ -43,7 +43,7 @@ export const Popover = React.forwardRef((_a, ref) => {
         'Popover--portal': portal,
         'Popover--open': open,
     });
-    return (React.createElement(Popper, Object.assign({ className: PopoverClasses, bodyClassName: PopoverBodyClasses, width: widthSwitch(), portal: portal, ref: ref, open: open, offset: offset, focusTrapOptions: focusTrapOptions, "data-anvil-component": "Popover" }, props),
+    return (React.createElement(Popper, Object.assign({ className: PopoverClasses, bodyClassName: PopoverBodyClasses, width: widthSwitch(), portal: portal, ref: ref, open: open, offset: offset, focusTrapOptions: focusTrapOptions, "data-anvil-component": "Popover", "data-portal-popover": open && portal ? 'open' : undefined }, props),
         header && (React.createElement(PopoverHeader, { noPadding: headerNoPadding, align: headerAlign }, header)),
         React.createElement(PopoverContent, { contentScrollHeight: scrollHeight, noPadding: contentNoPadding, className: popoverContentClassName }, children),
         footer && (React.createElement(PopoverFooter, { align: footerAlign }, footer))));

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,EAAe,MAAM,uBAAuB,CAAC;AAC5D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EACN,cAAc,EAEd,cAAc,EACd,aAAa,EAEb,aAAa,GAEb,MAAM,cAAc,CAAC;AAyGtB,MAAM,CAAC,MAAM,OAAO,GAAY,KAAK,CAAC,UAAU,CAC/C,CACC,EAoBC,EACD,GAAyB,EACxB,EAAE;QAtBH,EACC,KAAK,GAAG,GAAG,EACX,OAAO,GAAG,GAAG,EACb,MAAM,GAAG,KAAK,EACd,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,MAAM,EACN,WAAW,EACX,eAAe,EACf,uBAAuB,EACvB,YAAY,EACZ,KAAK,EACL,gBAAgB,EAChB,IAAI,EACJ,gBAAgB,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,EACrC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,OAErC,EADG,KAAK,cAnBT,8PAoBC,CADQ;IAIT,MAAM,gBAAgB,GAAG,EAAE,CAAC;IAE5B,MAAM,WAAW,GAAG,GAAG,EAAE;QACxB,QAAQ,KAAK,EAAE;YACd,KAAK,GAAG;gBACP,OAAO,gBAAgB,GAAG,EAAE,CAAC;YAC9B,KAAK,GAAG;gBACP,OAAO,gBAAgB,GAAG,EAAE,CAAC;YAC9B,KAAK,GAAG;gBACP,OAAO,gBAAgB,GAAG,EAAE,CAAC;YAC9B,KAAK,IAAI;gBACR,OAAO,gBAAgB,GAAG,EAAE,CAAC;YAC9B,KAAK,KAAK;gBACT,OAAO,KAAK,CAAC;YACd;gBACC,OAAO,MAAM,CAAC;SACf;IACF,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,SAAS,EAAE;QACjE,CAAC,cAAc,OAAO,EAAE,CAAC,EAAE,OAAO;QAClC,CAAC,iBAAiB,CAAC,EAAE,KAAK,KAAK,MAAM;QACrC,sBAAsB,EAAE,KAAK;QAC7B,uBAAuB,EAAE,MAAM;QAC/B,qBAAqB,EAAE,IAAI;KAC3B,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE,gBAAgB,EAAE;QAC9D,iBAAiB,EAAE,MAAM;QACzB,eAAe,EAAE,IAAI;KACrB,CAAC,CAAC;IAEH,OAAO,CACN,oBAAC,MAAM,kBACN,SAAS,EAAE,cAAc,EACzB,aAAa,EAAE,kBAAkB,EACjC,KAAK,EAAE,WAAW,EAAE,EACpB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,0BACb,SAAS,IAC1B,KAAK;QAER,MAAM,IAAI,CACV,oBAAC,aAAa,IACb,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,WAAW,IAEjB,MAAM,CACQ,CAChB;QACD,oBAAC,cAAc,IACd,mBAAmB,EAAE,YAAY,EACjC,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,uBAAuB,IAEjC,QAAQ,CACO;QAChB,MAAM,IAAI,CACV,oBAAC,aAAa,IAAC,KAAK,EAAE,WAAW,IAAG,MAAM,CAAiB,CAC3D,CACO,CACT,CAAC;AACH,CAAC,CACU,CAAC;AAEb,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC;AAC/B,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC;AAC/B,OAAO,CAAC,OAAO,GAAG,cAAc,CAAC;AACjC,OAAO,CAAC,OAAO,GAAG,cAAc,CAAC"}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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"}

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

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

package/dist/components/Popover/Popover.test.js

@@ -0,0 +1,73 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button, Popover } from '../';
+window.ResizeObserver = class ResizeObserver {
+    observe() { }
+    disconnect() { }
+};
+const NestedPortalPopovers = () => {
+    const PopoverButton = (props) => {
+        const [open, setOpen] = React.useState(false);
+        return (React.createElement(Popover, { direction: "r", onClickOutside: () => setOpen(false), open: open, portal: true, trigger: React.createElement(Button, { el: "span", onClick: () => setOpen(true), className: props.className }, props.text) },
+            React.createElement("div", { className: "d-ib" }, props.children)));
+    };
+    return (React.createElement("div", { className: "d-ib" },
+        React.createElement(PopoverButton, { className: "btn1", text: "Button1" },
+            React.createElement(PopoverButton, { className: "btn2", text: "Button2" },
+                React.createElement(PopoverButton, { className: "btn3", text: "Button3" },
+                    React.createElement("i", null, "Test"),
+                    ". Most deeply nested popover."))),
+        React.createElement(Button, { className: "btn0 m-y-1" }, "Button")));
+};
+describe('test nested portaled Popovers for onClickOutside() suppression', () => {
+    beforeEach(() => jest.spyOn(console, 'error'));
+    it('one nested popover should be closed per click', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(NestedPortalPopovers, null));
+        const { queryByText: query } = screen;
+        expect(query('Button')).not.toBeNull(); // Button which is outside all popovers
+        expect(query('Button1')).not.toBeNull();
+        expect(query('Button2')).toBeNull();
+        expect(query('Button3')).toBeNull();
+        expect(query('Test')).toBeNull(); // Element inside most deeply nested popover
+        userEvent.click(query('Button1')); // Open popover1
+        yield waitFor(() => { });
+        expect(query('Button2')).not.toBeNull(); // Popover1 is open
+        expect(query('Button3')).toBeNull();
+        userEvent.click(query('Button2')); // Open popover2
+        yield waitFor(() => { });
+        expect(query('Button3')).not.toBeNull(); // Popover2 is open
+        expect(query('Test')).toBeNull();
+        userEvent.click(query('Button3')); // Open popover3
+        yield waitFor(() => { });
+        expect(query('Test')).not.toBeNull(); // Popover3 is open
+        userEvent.click(query('Button')); // Should close popover3 only
+        yield waitFor(() => { });
+        expect(query('Button1')).not.toBeNull();
+        expect(query('Button2')).not.toBeNull();
+        expect(query('Button3')).not.toBeNull();
+        expect(query('Test2')).toBeNull(); // Popover3 is closed
+        userEvent.click(query('Button')); // Should close popover2 only
+        yield waitFor(() => { });
+        expect(query('Button1')).not.toBeNull();
+        expect(query('Button2')).not.toBeNull();
+        expect(query('Button3')).toBeNull(); // Test popover2 is closed
+        expect(query('Test')).toBeNull();
+        userEvent.click(query('Button')); // Should close popover1 only
+        yield waitFor(() => { });
+        expect(query('Button1')).not.toBeNull();
+        expect(query('Button2')).toBeNull(); // Popover1 is closed
+        expect(query('Button3')).toBeNull();
+        expect(query('Test')).toBeNull();
+    }));
+});
+//# sourceMappingURL=Popover.test.js.map

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

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

package/dist/components/Popover/index.css

@@ -17,12 +17,12 @@ span.Popover {
 
 .Popover__body {
   /* 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: #fff;
+  background: var(--colorsSurfaceDefault, #ffffff);
   border-radius: 6px;
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
   box-sizing: border-box;
   width: 90vw;
@@ -118,7 +118,7 @@ span.Popover {
 }
 
 .Popover__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 .Popover__header.Headline {
@@ -126,14 +126,14 @@ span.Popover {
 }
 
 .Popover__footer {
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   display: flex;
 }
 
 .Popover__divider {
   width: 100%;
   height: 1px;
-  border-top: 1px solid #dfe0e1;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 /* For inline Popovers, override generated inline width

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Popover/Popover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAWA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAe;;;AAEf;AC1BC;EACA,OCiBa;ADfb;EACA;EDyBA;EACA,eEtBiB;EFuBjB;EACA;EACA;EACA;;AAEA;EACiB;;AAEjB;EACC;;;AAIF;EAAwB,eErCN;;;AFuClB;AACA;EACC;;;AAGD;EAAiB,WA/CM;;;AAgDvB;EAAgB,WA/CM;;;AAgDtB;EAAgB,WA/CM;;;AAgDtB;EAAgB,WA/CM;;;AAiDtB;EACC;EACA;;;AAGD;AAOC;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAO/B;AACA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EAAa;;;AAGd;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EAAgC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Popover/Popover.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;AAYA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAe;;;AAEf;AC3BC;EACA;AAEA;EACA;ED0BA,YArB0B;EAsB1B,eEvBiB;EFwBjB;EACA;EACA;EACA;;AAEA;EACiB;;AAEjB;EACC;;;AAIF;EAAwB,eEtCN;;;AFwClB;AACA;EACC;;;AAGD;EAAiB,WAhDM;;;AAiDvB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAiDtB;EAAgB,WAhDM;;;AAkDtB;EACC;EACA;;;AAGD;AAOC;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAb9B;AAAA;AAAA;EAGC;;AAGD;AAAA;EAEC;EACA;EACA;;AAGD;EAA8B;;;AAO/B;AACA;EACC;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EAAa;;;AAGd;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAIA;EAAgC","file":"index.css"}

package/dist/components/ProgressBar/ProgressBar.css

@@ -1,9 +1,10 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 /** @define ProgressBar */
+/** Color Variants */
 .ProgressBar {
   /* Reset the default appearance */
   appearance: none;
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
   border-radius: 6px;
   display: block;
@@ -18,7 +19,7 @@
 }
 
 .ProgressBar::-webkit-progress-bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar::-webkit-progress-value {
@@ -38,62 +39,61 @@
 }
 
 .ProgressBar__bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar__value {
   background: #08bfdf;
 }
 
-/** Color Variants */
 .ProgressBar--blue::-webkit-progress-value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue::-moz-progress-bar {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue .ProgressBar__value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressBar--green::-webkit-progress-value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green::-moz-progress-bar {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green .ProgressBar__value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 
 .ProgressBar--red::-webkit-progress-value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red::-moz-progress-bar {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red .ProgressBar__value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 
 .ProgressBar--yellow::-webkit-progress-value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow::-moz-progress-bar {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow .ProgressBar__value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressBar--blue-grey::-webkit-progress-value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey::-moz-progress-bar {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey .ProgressBar__value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 
 /** Size Variants */

package/dist/components/ProgressBar/ProgressBar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressBar/ProgressBar.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACIA;AAUA;AACC;EACA;EACA,YCgCqB;ED/BrB;EACA,eCViB;EDWjB;EACA,QAZoB;EAapB;;;AAGD;AAAA;EAEC,eClBiB;EDmBjB;;;AAED;EAAqC,YCmBf;;;ADlBtB;EAAuC,YC6CtB;;;AD1CjB;EACC,YCyCgB;EDxChB,eC3BiB;ED4BjB;;;AAID;AAAA;EAEC,eClCiB;EDmCjB,QAnCoB;;;AAqCrB;EAAoB,YCGE;;;ADFtB;EAAsB,YC6BL;;;AD3BjB;AAQC;EAA4B,YCzBZ;;AD0BhB;EAAuB,YC1BP;;AD2BhB;EAAsB,YC3BN;;;ADyBhB;EAA4B,YCaX;;ADZjB;EAAuB,YCYN;;ADXjB;EAAsB,YCWL;;;ADbjB;EAA4B,YC+Bb;;AD9Bf;EAAuB,YC8BR;;AD7Bf;EAAsB,YC6BP;;;AD/Bf;EAA4B,YCOV;;ADNlB;EAAuB,YCML;;ADLlB;EAAsB,YCKJ;;;ADPlB;EAA4B,YCLP;;ADMrB;EAAuB,YCNF;;ADOrB;EAAsB,YCPD;;;ADgBtB;AAIC;AAAA;AAAA;EAGC,QAN0B;;;AAU5B;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,WA5EsB;;;AAgFxB;EACC;IACC;IACA;;EAGD;IAEC;IACA;;;AAKF;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA","file":"ProgressBar.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressBar/ProgressBar.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACIA;AAIA;AAYA;AACC;EACA;EACA,YAdgB;EAehB;EACA,eChBiB;EDiBjB;EACA,QArBoB;EAsBpB;;;AAGD;AAAA;EAEC,eCxBiB;EDyBjB;;;AAED;EAAqC,YA3BpB;;;AA4BjB;EAAuC,YCwCtB;;;ADrCjB;EACC,YCoCgB;EDnChB,eCjCiB;EDkCjB;;;AAID;AAAA;EAEC,eCxCiB;EDyCjB,QA5CoB;;;AA8CrB;EAAoB,YA3CH;;;AA4CjB;EAAsB,YCwBL;;;ADrBhB;EAA4B,YA7CL;;AA8CvB;EAAuB,YA9CA;;AA+CvB;EAAsB,YA/CC;;;AA6CvB;EAA4B,YA5CJ;;AA6CxB;EAAuB,YA7CC;;AA8CxB;EAAsB,YA9CE;;;AA4CxB;EAA4B,YA3CN;;AA4CtB;EAAuB,YA5CD;;AA6CtB;EAAsB,YA7CA;;;AA2CtB;EAA4B,YA1CH;;AA2CzB;EAAuB,YA3CE;;AA4CzB;EAAsB,YA5CG;;;AA0CzB;EAA4B,YAzCA;;AA0C5B;EAAuB,YA1CK;;AA2C5B;EAAsB,YA3CM;;;AAoD7B;AAIC;AAAA;AAAA;EAGC,QAN0B;;;AAU5B;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,WArEsB;;;AAyExB;EACC;IACC;IACA;;EAGD;IAEC;IACA;;;AAKF;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA","file":"ProgressBar.css"}

package/dist/components/ProgressBar/index.css

@@ -1,9 +1,10 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 /** @define ProgressBar */
+/** Color Variants */
 .ProgressBar {
   /* Reset the default appearance */
   appearance: none;
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
   border-radius: 6px;
   display: block;
@@ -18,7 +19,7 @@
 }
 
 .ProgressBar::-webkit-progress-bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar::-webkit-progress-value {
@@ -38,62 +39,61 @@
 }
 
 .ProgressBar__bar {
-  background: #eaeff2;
+  background: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressBar__value {
   background: #08bfdf;
 }
 
-/** Color Variants */
 .ProgressBar--blue::-webkit-progress-value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue::-moz-progress-bar {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressBar--blue .ProgressBar__value {
-  background: #2270ee;
+  background: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressBar--green::-webkit-progress-value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green::-moz-progress-bar {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressBar--green .ProgressBar__value {
-  background: #1fbc70;
+  background: var(--colorsStatusSuccess, #18a761);
 }
 
 .ProgressBar--red::-webkit-progress-value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red::-moz-progress-bar {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 .ProgressBar--red .ProgressBar__value {
-  background: #f94d32;
+  background: var(--colorsStatusCritical, #e63717);
 }
 
 .ProgressBar--yellow::-webkit-progress-value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow::-moz-progress-bar {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 .ProgressBar--yellow .ProgressBar__value {
-  background: #ffc902;
+  background: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressBar--blue-grey::-webkit-progress-value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey::-moz-progress-bar {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 .ProgressBar--blue-grey .ProgressBar__value {
-  background: #8c9ca5;
+  background: var(--colorsStatusDefault, #8c9ca5);
 }
 
 /** Size Variants */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressBar/ProgressBar.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACIA;AAUA;AACC;EACA;EACA,YCgCqB;ED/BrB;EACA,eCViB;EDWjB;EACA,QAZoB;EAapB;;;AAGD;AAAA;EAEC,eClBiB;EDmBjB;;;AAED;EAAqC,YCmBf;;;ADlBtB;EAAuC,YC6CtB;;;AD1CjB;EACC,YCyCgB;EDxChB,eC3BiB;ED4BjB;;;AAID;AAAA;EAEC,eClCiB;EDmCjB,QAnCoB;;;AAqCrB;EAAoB,YCGE;;;ADFtB;EAAsB,YC6BL;;;AD3BjB;AAQC;EAA4B,YCzBZ;;AD0BhB;EAAuB,YC1BP;;AD2BhB;EAAsB,YC3BN;;;ADyBhB;EAA4B,YCaX;;ADZjB;EAAuB,YCYN;;ADXjB;EAAsB,YCWL;;;ADbjB;EAA4B,YC+Bb;;AD9Bf;EAAuB,YC8BR;;AD7Bf;EAAsB,YC6BP;;;AD/Bf;EAA4B,YCOV;;ADNlB;EAAuB,YCML;;ADLlB;EAAsB,YCKJ;;;ADPlB;EAA4B,YCLP;;ADMrB;EAAuB,YCNF;;ADOrB;EAAsB,YCPD;;;ADgBtB;AAIC;AAAA;AAAA;EAGC,QAN0B;;;AAU5B;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,WA5EsB;;;AAgFxB;EACC;IACC;IACA;;EAGD;IAEC;IACA;;;AAKF;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressBar/ProgressBar.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACIA;AAIA;AAYA;AACC;EACA;EACA,YAdgB;EAehB;EACA,eChBiB;EDiBjB;EACA,QArBoB;EAsBpB;;;AAGD;AAAA;EAEC,eCxBiB;EDyBjB;;;AAED;EAAqC,YA3BpB;;;AA4BjB;EAAuC,YCwCtB;;;ADrCjB;EACC,YCoCgB;EDnChB,eCjCiB;EDkCjB;;;AAID;AAAA;EAEC,eCxCiB;EDyCjB,QA5CoB;;;AA8CrB;EAAoB,YA3CH;;;AA4CjB;EAAsB,YCwBL;;;ADrBhB;EAA4B,YA7CL;;AA8CvB;EAAuB,YA9CA;;AA+CvB;EAAsB,YA/CC;;;AA6CvB;EAA4B,YA5CJ;;AA6CxB;EAAuB,YA7CC;;AA8CxB;EAAsB,YA9CE;;;AA4CxB;EAA4B,YA3CN;;AA4CtB;EAAuB,YA5CD;;AA6CtB;EAAsB,YA7CA;;;AA2CtB;EAA4B,YA1CH;;AA2CzB;EAAuB,YA3CE;;AA4CzB;EAAsB,YA5CG;;;AA0CzB;EAA4B,YAzCA;;AA0C5B;EAAuB,YA1CK;;AA2C5B;EAAsB,YA3CM;;;AAoD7B;AAIC;AAAA;AAAA;EAGC,QAN0B;;;AAU5B;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,WArEsB;;;AAyExB;EACC;IACC;IACA;;EAGD;IAEC;IACA;;;AAKF;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA","file":"index.css"}

package/dist/components/ProgressCircle/ProgressCircle.css

@@ -8,7 +8,7 @@
 .ProgressCircle__background {
   fill: transparent;
   transform-origin: 50% 50%;
-  stroke: #eeeeee;
+  stroke: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressCircle__circle {
@@ -21,16 +21,16 @@
   stroke: #08bfdf;
 }
 .ProgressCircle--blue .ProgressCircle__circle {
-  stroke: #2270ee;
+  stroke: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressCircle--red .ProgressCircle__circle {
-  stroke: #f94d32;
+  stroke: var(--colorsStatusCritical, #f94d32);
 }
 .ProgressCircle--green .ProgressCircle__circle {
-  stroke: #1fbc70;
+  stroke: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressCircle--yellow .ProgressCircle__circle {
-  stroke: #ffc902;
+  stroke: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressCircle__svg {

package/dist/components/ProgressCircle/ProgressCircle.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAUA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,QCoBkB;;;ADjBnB;EACC;EACA;EACA;EACA;EACA;EACA;EACA,QC8CgB;;AD5ChB;EAA0B;;AAC1B;EAAyB,QCuDV;;ADtDf;EAA2B,QCoCV;;ADnCjB;EAA4B,QC6BV;;;AD1BnB;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"ProgressCircle.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAUA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,QAjBgC;;;AAoBjC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,QC+CgB;;AD7ChB;EAA0B,QA5BA;;AA6B1B;EAAyB,QA3BA;;AA4BzB;EAA2B,QA7BA;;AA8B3B;EAA4B,QA5BA;;;AA+B7B;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"ProgressCircle.css"}

package/dist/components/ProgressCircle/index.css

@@ -8,7 +8,7 @@
 .ProgressCircle__background {
   fill: transparent;
   transform-origin: 50% 50%;
-  stroke: #eeeeee;
+  stroke: var(--colorsSurfaceGrey, #eeeeee);
 }
 
 .ProgressCircle__circle {
@@ -21,16 +21,16 @@
   stroke: #08bfdf;
 }
 .ProgressCircle--blue .ProgressCircle__circle {
-  stroke: #2270ee;
+  stroke: var(--colorsStatusInfo, #2270ee);
 }
 .ProgressCircle--red .ProgressCircle__circle {
-  stroke: #f94d32;
+  stroke: var(--colorsStatusCritical, #f94d32);
 }
 .ProgressCircle--green .ProgressCircle__circle {
-  stroke: #1fbc70;
+  stroke: var(--colorsStatusSuccess, #18a761);
 }
 .ProgressCircle--yellow .ProgressCircle__circle {
-  stroke: #ffc902;
+  stroke: var(--colorsStatusWarning, #ffbe00);
 }
 
 .ProgressCircle__svg {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAUA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,QCoBkB;;;ADjBnB;EACC;EACA;EACA;EACA;EACA;EACA;EACA,QC8CgB;;AD5ChB;EAA0B;;AAC1B;EAAyB,QCuDV;;ADtDf;EAA2B,QCoCV;;ADnCjB;EAA4B,QC6BV;;;AD1BnB;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAUA;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,QAjBgC;;;AAoBjC;EACC;EACA;EACA;EACA;EACA;EACA;EACA,QC+CgB;;AD7ChB;EAA0B,QA5BA;;AA6B1B;EAAyB,QA3BA;;AA4BzB;EAA2B,QA7BA;;AA8B3B;EAA4B,QA5BA;;;AA+B7B;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"}

package/dist/components/ProgressTracker/ProgressTracker.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,7 +23,7 @@
   top: 50%;
   margin-top: -1px;
   height: 2px;
-  background-color: #dfe0e1;
+  background-color: var(--colorsBorderGrey, #dfe0e1);
 }
 
 /*# sourceMappingURL=ProgressTracker.css.map */

package/dist/components/ProgressTracker/ProgressTracker.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"],"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","file":"ProgressTracker.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"],"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","file":"ProgressTracker.css"}