@servicetitan/design-system 11.3.1 → 11.4.2

package/dist/components/Stack/Stack.js.map

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

package/dist/components/Stack/StackItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.js","sourceRoot":"","sources":["../../../src/components/Stack/StackItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAkCpC,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAS7C,EAAE,EAAE;QATyC,EAC7C,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,OAEN,EADG,KAAK,cARqC,sEAS7C,CADQ;IAER,MAAM,gBAAgB,GAAQ;QAC7B,MAAM,EAAE,iBAAiB;QACzB,YAAY,EAAE,kBAAkB;QAChC,UAAU,EAAE,gBAAgB;QAC5B,QAAQ,EAAE,mBAAmB;QAC7B,UAAU,EAAE,qBAAqB;QACjC,SAAS,EAAE,oBAAoB;KAC/B,CAAC;IAEF,MAAM,cAAc,GAAG,UAAU,CAChC,WAAW,EACX,SAAS,EACT,gBAAgB,CAAC,SAAS,CAAC,EAC3B;QACC,iBAAiB,EAAE,IAAI;QACvB,CAAC,aAAa,IAAI,EAAE,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;QAC7C,CAAC,eAAe,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC;QACnD,CAAC,SAAS,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;KAC3C,CACD,CAAC;IAEF,MAAM,eAAe,GAAG;QACvB,SAAS,EAAE,KAAK;KAChB,CAAC;IAEF,OAAO,CACN,2CACC,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,eAAe,0BACD,WAAW,IAC5B,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/Stack/index.css

@@ -2,6 +2,15 @@
   display: flex;
 }
 
+.StackItem {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+.StackItem--fill {
+  flex: 1 1 auto;
+}
+
 /* Flex Direction */
 .Stack--direction-row {
   flex-direction: row;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Stack/Stack.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAGA;EAAS;;;AAET;AACA;EAAwB;;;AACxB;EAAgC;;;AAChC;EAA2B;;;AAC3B;EAAmC;;;AAEnC;AACA;EAAsB;;;AACtB;EAAoB;;;AACpB;EAA4B;;;AAE5B;AACA;EAAqC;;;AACrC;EAAmC;;;AACnC;EAAiC;;;AACjC;EAAwC;;;AACxC;EAAuC;;;AACvC;EAAuC;;;AAEvC;AACA;EAA8B;;;AAC9B;EAAiC;;;AACjC;EAA+B;;;AAC/B;EAA6B;;;AAC7B;EAA+B;;;AAE/B;AACA;EAAgC;;;AAChC;EAAmC;;;AACnC;EAAiC;;;AACjC;EAA+B;;;AAC/B;EAAsC;;;AACtC;EAAqC;;;AAErC;AACA;EACC;EACA;;AAIC;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAOF;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;;AAMD;AAAA;EAAyB,YCEd;;ADDX;AAAA;EAAyB,YCEd;;ADDX;AAAA;EAAyB,YCEd;;ADDX;AAAA;EAAyB,YCEd;;ADDX;AAAA;EAAyB,YCEd;;ADDX;AAAA;EAAyB,YCEd;;;ADCZ;AAAA;EAC4E","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Stack/Stack.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAGA;EAAS;;;AAET;EACC;EACA;EACA;;AAEA;EACC;;;AAIF;AACA;EAAwB;;;AACxB;EAAgC;;;AAChC;EAA2B;;;AAC3B;EAAmC;;;AAEnC;AACA;EAAsB;;;AACtB;EAAoB;;;AACpB;EAA4B;;;AAE5B;AACA;EAAqC;;;AACrC;EAAmC;;;AACnC;EAAiC;;;AACjC;EAAwC;;;AACxC;EAAuC;;;AACvC;EAAuC;;;AAEvC;AACA;EAA8B;;;AAC9B;EAAiC;;;AACjC;EAA+B;;;AAC/B;EAA6B;;;AAC7B;EAA+B;;;AAE/B;AACA;EAAgC;;;AAChC;EAAmC;;;AACnC;EAAiC;;;AACjC;EAA+B;;;AAC/B;EAAsC;;;AACtC;EAAqC;;;AAErC;AACA;EACC;EACA;;AAIC;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAOF;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;AAGD;AAAA;EACC;EACA;;;AAMD;AAAA;EAAyB,YCPd;;ADQX;AAAA;EAAyB,YCPd;;ADQX;AAAA;EAAyB,YCPd;;ADQX;AAAA;EAAyB,YCPd;;ADQX;AAAA;EAAyB,YCPd;;ADQX;AAAA;EAAyB,YCPd;;;ADUZ;AAAA;EAC4E","file":"index.css"}

package/dist/components/Stack/index.d.ts

@@ -1 +1,2 @@
 export * from './Stack';
+export * from './StackItem';

package/dist/components/Stack/index.js

@@ -1,2 +1,3 @@
 export * from './Stack';
+export * from './StackItem';
 //# sourceMappingURL=index.js.map

package/dist/components/Stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/components/StatusLight/StatusLight.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .StatusLight {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -23,7 +23,7 @@
   min-width: 12px;
   height: 12px;
   border-radius: 12px;
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
   margin: 8px;
 }
 .StatusLight .StatusLight__indicator::before {
@@ -41,16 +41,16 @@
   transition: width cubic-bezier(0, 0, 0.4, 1) 200ms 0ms, height cubic-bezier(0, 0, 0.4, 1) 200ms 0ms;
 }
 .StatusLight .StatusLight__indicator--info {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 .StatusLight .StatusLight__indicator--success {
-  background-color: #18a761;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .StatusLight .StatusLight__indicator--warning {
-  background-color: #ffc902;
+  background-color: var(--colorsStatusWarning, #ffbe00);
 }
 .StatusLight .StatusLight__indicator--critical {
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
 }
 
 @keyframes shadow-pulse {
@@ -76,7 +76,7 @@
   opacity: 0.4;
 }
 .StatusLight--disabled .StatusLight__indicator {
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
 }
 .StatusLight--disabled .StatusLight__indicator::before {
   animation: none;

package/dist/components/StatusLight/StatusLight.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/StatusLight/StatusLight.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;;AAGA;EACC,aE0GU;EFzGV,cEyGU;EFxGV;EACA;;AAID;EACC;EACA;EACA;EACA;EACA,OAzBe;EA0Bf,WA1Be;EA2Bf,QA3Be;EA4Bf,eA5Be;EA6Bf,kBEoBoB;EFnBpB,QEyFU;;AFtFV;EACC;EACA;EACA;EACA;EACA;EACA;EACA,OAxCc;EAyCd,QAzCc;EA0Cd,eA1Cc;EA2Cd;EACA;EACA;;AAKF;EAAgC,kBErBhB;;AFsBhB;EAAmC,kBEiBlB;;AFhBjB;EAAmC,kBESjB;;AFRlB;EAAoC,kBEgCrB;;;AFzBd;EACC;IACC,OA9Da;IA+Db,QA/Da;IAgEb,eAhEa;IAiEb;;EAGD;IACC,OAnES;IAoET,QApES;IAqET,eArES;IAsET;;;AAIF;EACC;;;AAMH;EACC;EACA;;AAEA;EACC,kBEvCoB;;AFyCpB;EACC;;;AASF;EACC;EACA;;AAIC;EACC,OA1GU;EA2GV,QA3GU;EA4GV,eA5GU;EA6GV;EACA;EACA;;;AAOJ;EACC;EACA;;;AAID;EACC;;;AAID;EACC","file":"StatusLight.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/StatusLight/StatusLight.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACaA;ACZC;EACA;AAEA;EACA;EDWA;EACA;EACA;;AAGA;EACC,aEqGU;EFpGV,cEoGU;EFnGV;EACA;;AAID;EACC;EACA;EACA;EACA;EACA,OA/Be;EAgCf,WAhCe;EAiCf,QAjCe;EAkCf,eAlCe;EAmCf,kBA3Be;EA4Bf,QEoFU;;AFjFV;EACC;EACA;EACA;EACA;EACA;EACA;EACA,OA9Cc;EA+Cd,QA/Cc;EAgDd,eAhDc;EAiDd;EACA;EACA;;AAKF;EAAgC,kBApDnB;;AAqDb;EAAmC,kBApDnB;;AAqDhB;EAAmC,kBApDnB;;AAqDhB;EAAoC,kBApDnB;;;AA2DhB;EACC;IACC,OApEa;IAqEb,QArEa;IAsEb,eAtEa;IAuEb;;EAGD;IACC,OAzES;IA0ET,QA1ES;IA2ET,eA3ES;IA4ET;;;AAIF;EACC;;;AAMH;EACC;EACA;;AAEA;EACC,kBAtFe;;AAwFf;EACC;;;AASF;EACC;EACA;;AAIC;EACC,OAhHU;EAiHV,QAjHU;EAkHV,eAlHU;EAmHV;EACA;EACA;;;AAOJ;EACC;EACA;;;AAID;EACC;;;AAID;EACC","file":"StatusLight.css"}

package/dist/components/StatusLight/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .StatusLight {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;
@@ -23,7 +23,7 @@
   min-width: 12px;
   height: 12px;
   border-radius: 12px;
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
   margin: 8px;
 }
 .StatusLight .StatusLight__indicator::before {
@@ -41,16 +41,16 @@
   transition: width cubic-bezier(0, 0, 0.4, 1) 200ms 0ms, height cubic-bezier(0, 0, 0.4, 1) 200ms 0ms;
 }
 .StatusLight .StatusLight__indicator--info {
-  background-color: #2270ee;
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 .StatusLight .StatusLight__indicator--success {
-  background-color: #18a761;
+  background-color: var(--colorsStatusSuccess, #18a761);
 }
 .StatusLight .StatusLight__indicator--warning {
-  background-color: #ffc902;
+  background-color: var(--colorsStatusWarning, #ffbe00);
 }
 .StatusLight .StatusLight__indicator--critical {
-  background-color: #f94d32;
+  background-color: var(--colorsStatusCritical, #f94d32);
 }
 
 @keyframes shadow-pulse {
@@ -76,7 +76,7 @@
   opacity: 0.4;
 }
 .StatusLight--disabled .StatusLight__indicator {
-  background-color: #8c9ca5;
+  background-color: var(--colorsStatusDefault, #8c9ca5);
 }
 .StatusLight--disabled .StatusLight__indicator::before {
   animation: none;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/StatusLight/StatusLight.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA,OCiBa;ADfb;EACA;EDKA;EACA;EACA;;AAGA;EACC,aE0GU;EFzGV,cEyGU;EFxGV;EACA;;AAID;EACC;EACA;EACA;EACA;EACA,OAzBe;EA0Bf,WA1Be;EA2Bf,QA3Be;EA4Bf,eA5Be;EA6Bf,kBEoBoB;EFnBpB,QEyFU;;AFtFV;EACC;EACA;EACA;EACA;EACA;EACA;EACA,OAxCc;EAyCd,QAzCc;EA0Cd,eA1Cc;EA2Cd;EACA;EACA;;AAKF;EAAgC,kBErBhB;;AFsBhB;EAAmC,kBEiBlB;;AFhBjB;EAAmC,kBESjB;;AFRlB;EAAoC,kBEgCrB;;;AFzBd;EACC;IACC,OA9Da;IA+Db,QA/Da;IAgEb,eAhEa;IAiEb;;EAGD;IACC,OAnES;IAoET,QApES;IAqET,eArES;IAsET;;;AAIF;EACC;;;AAMH;EACC;EACA;;AAEA;EACC,kBEvCoB;;AFyCpB;EACC;;;AASF;EACC;EACA;;AAIC;EACC,OA1GU;EA2GV,QA3GU;EA4GV,eA5GU;EA6GV;EACA;EACA;;;AAOJ;EACC;EACA;;;AAID;EACC;;;AAID;EACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/StatusLight/StatusLight.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACaA;ACZC;EACA;AAEA;EACA;EDWA;EACA;EACA;;AAGA;EACC,aEqGU;EFpGV,cEoGU;EFnGV;EACA;;AAID;EACC;EACA;EACA;EACA;EACA,OA/Be;EAgCf,WAhCe;EAiCf,QAjCe;EAkCf,eAlCe;EAmCf,kBA3Be;EA4Bf,QEoFU;;AFjFV;EACC;EACA;EACA;EACA;EACA;EACA;EACA,OA9Cc;EA+Cd,QA/Cc;EAgDd,eAhDc;EAiDd;EACA;EACA;;AAKF;EAAgC,kBApDnB;;AAqDb;EAAmC,kBApDnB;;AAqDhB;EAAmC,kBApDnB;;AAqDhB;EAAoC,kBApDnB;;;AA2DhB;EACC;IACC,OApEa;IAqEb,QArEa;IAsEb,eAtEa;IAuEb;;EAGD;IACC,OAzES;IA0ET,QA1ES;IA2ET,eA3ES;IA4ET;;;AAIF;EACC;;;AAMH;EACC;EACA;;AAEA;EACC,kBAtFe;;AAwFf;EACC;;;AASF;EACC;EACA;;AAIC;EACC,OAhHU;EAiHV,QAjHU;EAkHV,eAlHU;EAmHV;EACA;EACA;;;AAOJ;EACC;EACA;;;AAID;EACC;;;AAID;EACC","file":"index.css"}

package/dist/components/Tab/Tab.css

@@ -2,11 +2,11 @@
 .Tab {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   cursor: pointer;
   line-height: 1;
   display: flex;
@@ -28,7 +28,7 @@
   height: 100%;
   display: flex;
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -54,7 +54,7 @@
 .Tab.Tab--focus-visible:focus::after {
   position: absolute;
   content: "";
-  box-shadow: inset 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   top: 0;
   bottom: 0;
   left: 0;
@@ -62,8 +62,8 @@
 }
 
 .Tab--inactive:hover, .Tab--inactive--hover {
-  box-shadow: 0 -2px 0 #a9d1ff inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsFocusRingPrimary, #a9d1ff) inset;
+  color: var(--colorsTextSubdued, #737475);
   text-decoration: none;
 }
 
@@ -77,7 +77,7 @@
   padding: 12px 16px;
   margin-right: 1px;
   min-width: 64px;
-  box-shadow: 0 -1px 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 var(--colorsBorderGrey, #dfe0e1) inset;
   position: relative;
 }
 .TabGroup--index .Tab:hover, .TabGroup--index .Tab--hover {
@@ -93,7 +93,8 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceInvertedStrong, #141414);
+  opacity: 0.08;
 }
 .CardSection .TabGroup--index .Tab {
   box-shadow: none;
@@ -103,23 +104,23 @@
   padding: 16px;
 }
 .TabGroup--index .Tab--active {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .TabGroup--index .Tab--active:hover {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .CardSection .TabGroup--index .Tab--active {
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1, 1px 0 0 #dfe0e1, 0 1px 0 #ffffff;
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1), 1px 0 0 var(--colorsBorderGrey, #dfe0e1), 0 1px 0 var(--colorsSurfaceDefault, #ffffff);
 }
 
 .Tab--active {
-  box-shadow: 0 -2px 0 #2270ee inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
+  color: var(--colorsTextDefault, #141414);
 }
 .Tab--active:hover {
-  box-shadow: 0 -2px 0 #2270ee inset;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
 }
 
 .TabGroup--dark .Tab--active,
@@ -133,10 +134,10 @@
   box-shadow: none;
 }
 .TabGroup--dark .Tab:not(.Tab--active) {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
 }
 .TabGroup--dark .Tab:not(.Tab--active):hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
   box-shadow: none;
 }
 

package/dist/components/Tab/Tab.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tab/Tab.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;EACC;ACHA;EACA,OCiBa;ADfb;EACA;EDGA;EACA,OEmCkB;EFlClB;EACA;EACA;EACA;EACA;EACA,cE6GW;EF5GX;EACA,aEyFsB;EFxFtB,WE4GW;EF3GX;EACA;EACA;EACA;;AAEA;EAAO,aEkGI;;AFhGX;EACC;EACA;EACA;EACA,OEciB;;AFZjB;EACC;EACA;EACA,cE+FY;;AF3Fd;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA,YE2DkB;EF1DlB;EACA;EACA;EACA;;;AAMF;EAEC;EACA,OEvDY;EFwDZ;;;AAIF;EACC;EACA;;;AAIA;EACC;EACA;EACA;EACA,WEsCU;EFrCV;EACA;;AAEA;EAEC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAIF;EAAyB,SEMd;;AFJX;EACC,kBEtGY;EFuGZ;;AAEA;EACC,kBE1GW;EF2GX;;AAGD;EACC;;;AAKH;EACC;EACA,OErHa;;AFuHb;EAAU;;;AAIV;AAAA;AAAA;EAGC;;AAEA;AAAA;AAAA;EAAiB;;AAGlB;EACC,OErIY;;AFuIZ;EACC;EACA;;;AAOH;EACC","file":"Tab.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tab/Tab.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACgBA;EACC;AChBA;EACA;AAEA;EACA;EDgBA;EACA,OAlBe;EAmBf;EACA;EACA;EACA;EACA;EACA,cEiGW;EFhGX;EACA,aE6EsB;EF5EtB,WEgGW;EF/FX;EACA;EACA;EACA;;AAEA;EAAO,aEsFI;;AFpFX;EACC;EACA;EACA;EACA,OAvCc;;AAyCd;EACC;EACA;EACA,cEmFY;;AF/Ed;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA,YE+CkB;EF9ClB;EACA;EACA;EACA;;;AAMF;EAEC;EACA,OAnFc;EAoFd;;;AAIF;EACC;EACA;;;AAIA;EACC;EACA;EACA;EACA,WE0BU;EFzBV;EACA;;AAEA;EAEC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBA5GkB;EA6GlB;;AAIF;EACC;EACA;;AAIF;EAAyB,SEPd;;AFSX;EACC,kBA5HmB;EA6HnB;;AAEA;EACC,kBAhIkB;EAiIlB;;AAGD;EACC;;;AAKH;EACC;EACA,OAnJa;;AAqJb;EAAU;;;AAIV;AAAA;AAAA;EAGC;;AAEA;AAAA;AAAA;EAAiB;;AAGlB;EACC,OAhKc;;AAkKd;EACC,YA1JQ;EA2JR;;;AAOH;EACC","file":"Tab.css"}

package/dist/components/Tab/index.css

@@ -2,11 +2,11 @@
 .Tab {
   all: unset;
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
   cursor: pointer;
   line-height: 1;
   display: flex;
@@ -28,7 +28,7 @@
   height: 100%;
   display: flex;
   align-items: center;
-  color: #737475;
+  color: var(--colorsTextSubdued, #737475);
 }
 .Tab .a-Icon svg {
   width: 18px;
@@ -54,7 +54,7 @@
 .Tab.Tab--focus-visible:focus::after {
   position: absolute;
   content: "";
-  box-shadow: inset 0 0 0 3px #a9d1ff;
+  box-shadow: inset 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
   top: 0;
   bottom: 0;
   left: 0;
@@ -62,8 +62,8 @@
 }
 
 .Tab--inactive:hover, .Tab--inactive--hover {
-  box-shadow: 0 -2px 0 #a9d1ff inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsFocusRingPrimary, #a9d1ff) inset;
+  color: var(--colorsTextSubdued, #737475);
   text-decoration: none;
 }
 
@@ -77,7 +77,7 @@
   padding: 12px 16px;
   margin-right: 1px;
   min-width: 64px;
-  box-shadow: 0 -1px 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 var(--colorsBorderGrey, #dfe0e1) inset;
   position: relative;
 }
 .TabGroup--index .Tab:hover, .TabGroup--index .Tab--hover {
@@ -93,7 +93,8 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(20, 20, 20, 0.08);
+  background-color: var(--colorsSurfaceInvertedStrong, #141414);
+  opacity: 0.08;
 }
 .CardSection .TabGroup--index .Tab {
   box-shadow: none;
@@ -103,23 +104,23 @@
   padding: 16px;
 }
 .TabGroup--index .Tab--active {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .TabGroup--index .Tab--active:hover {
-  background-color: #ffffff;
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1 inset, 1px 0 0 #dfe0e1 inset;
+  background-color: var(--colorsSurfaceDefault, #ffffff);
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset, 1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 .CardSection .TabGroup--index .Tab--active {
-  box-shadow: 0 3px 0 #2270ee inset, -1px 0 0 #dfe0e1, 1px 0 0 #dfe0e1, 0 1px 0 #ffffff;
+  box-shadow: 0 3px 0 var(--colorsSurfacePrimary, #2270ee) inset, -1px 0 0 var(--colorsBorderGrey, #dfe0e1), 1px 0 0 var(--colorsBorderGrey, #dfe0e1), 0 1px 0 var(--colorsSurfaceDefault, #ffffff);
 }
 
 .Tab--active {
-  box-shadow: 0 -2px 0 #2270ee inset;
-  color: #141414;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
+  color: var(--colorsTextDefault, #141414);
 }
 .Tab--active:hover {
-  box-shadow: 0 -2px 0 #2270ee inset;
+  box-shadow: 0 -2px 0 var(--colorsSurfacePrimary, #2270ee) inset;
 }
 
 .TabGroup--dark .Tab--active,
@@ -133,10 +134,10 @@
   box-shadow: none;
 }
 .TabGroup--dark .Tab:not(.Tab--active) {
-  color: #ffffff;
+  color: var(--colorsTextInverted, #ffffff);
 }
 .TabGroup--dark .Tab:not(.Tab--active):hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
   box-shadow: none;
 }
 

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tab/Tab.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;EACC;ACHA;EACA,OCiBa;ADfb;EACA;EDGA;EACA,OEmCkB;EFlClB;EACA;EACA;EACA;EACA;EACA,cE6GW;EF5GX;EACA,aEyFsB;EFxFtB,WE4GW;EF3GX;EACA;EACA;EACA;;AAEA;EAAO,aEkGI;;AFhGX;EACC;EACA;EACA;EACA,OEciB;;AFZjB;EACC;EACA;EACA,cE+FY;;AF3Fd;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA,YE2DkB;EF1DlB;EACA;EACA;EACA;;;AAMF;EAEC;EACA,OEvDY;EFwDZ;;;AAIF;EACC;EACA;;;AAIA;EACC;EACA;EACA;EACA,WEsCU;EFrCV;EACA;;AAEA;EAEC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAIF;EAAyB,SEMd;;AFJX;EACC,kBEtGY;EFuGZ;;AAEA;EACC,kBE1GW;EF2GX;;AAGD;EACC;;;AAKH;EACC;EACA,OErHa;;AFuHb;EAAU;;;AAIV;AAAA;AAAA;EAGC;;AAEA;AAAA;AAAA;EAAiB;;AAGlB;EACC,OErIY;;AFuIZ;EACC;EACA;;;AAOH;EACC","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Tab/Tab.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACgBA;EACC;AChBA;EACA;AAEA;EACA;EDgBA;EACA,OAlBe;EAmBf;EACA;EACA;EACA;EACA;EACA,cEiGW;EFhGX;EACA,aE6EsB;EF5EtB,WEgGW;EF/FX;EACA;EACA;EACA;;AAEA;EAAO,aEsFI;;AFpFX;EACC;EACA;EACA;EACA,OAvCc;;AAyCd;EACC;EACA;EACA,cEmFY;;AF/Ed;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA,YE+CkB;EF9ClB;EACA;EACA;EACA;;;AAMF;EAEC;EACA,OAnFc;EAoFd;;;AAIF;EACC;EACA;;;AAIA;EACC;EACA;EACA;EACA,WE0BU;EFzBV;EACA;;AAEA;EAEC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBA5GkB;EA6GlB;;AAIF;EACC;EACA;;AAIF;EAAyB,SEPd;;AFSX;EACC,kBA5HmB;EA6HnB;;AAEA;EACC,kBAhIkB;EAiIlB;;AAGD;EACC;;;AAKH;EACC;EACA,OAnJa;;AAqJb;EAAU;;;AAIV;AAAA;AAAA;EAGC;;AAEA;AAAA;AAAA;EAAiB;;AAGlB;EACC,OAhKc;;AAkKd;EACC,YA1JQ;EA2JR;;;AAOH;EACC","file":"index.css"}

package/dist/components/TabGroup/TabGroup.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .TabGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   list-style: none;
@@ -21,7 +21,7 @@
 }
 
 .TabGroup--divider {
-  box-shadow: 0 -1px 0 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 
 .TabGroup__Item {
@@ -43,7 +43,7 @@
 }
 .TabGroup--verticallyDivided .Tab::before {
   box-shadow: -1px 0 0;
-  color: rgba(20, 20, 20, 0.3);
+  color: var(--colorsBorderGrey, #dfe0e1);
   content: "";
   height: 50%;
   position: absolute;
@@ -79,7 +79,7 @@
   box-shadow: 1px 0 0;
 }
 .TabGroup--verticallyDivided.TabGroup--dark .Tab--inactive::before {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--colorsTextInverted, #ffffff);
 }
 
 .TabGroup__action {

package/dist/components/TabGroup/TabGroup.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/TabGroup/TabGroup.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACMA;ACLC;EACA,OCiBa;ADfb;EACA;EEJA;EACA;EACA;EACA;EACA;EHKA,WE2Ha;EF1Hb;EACA;;AAEA;EACC;;AAEA;EAAgB;;;AAIlB;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;;AAGD;EACC,WA9Bc;;;AAoCf;EAAO;;AACP;EAAe;;AAEf;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAA2C;;AAG1C;EACC;EACA;;AACA;EAAU;;AAGX;EAAuB;;AACvB;EAAe;;AAGf;EAAyC;;AAIxC;AAAA;EAC2C;;AAC3C;EAAwD;;AAI1D;EAA0C;;;AAG3C;EACC;EACA;EACA;EACA;EACA;;AAEA;EACqB;;AAErB;EAAgB;;AAChB;EAAe","file":"TabGroup.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/TabGroup/TabGroup.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_list-unset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACWA;ACVC;EACA;AAEA;EACA;ECJA;EACA;EACA;EACA;EACA;EFUA,WGuHa;EHtHb;EACA;;AAEA;EACC;;AAEA;EAAgB;;;AAIlB;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;;AAGD;EACC,WAnCc;;;AAyCf;EAAO;;AACP;EAAe;;AAEf;EACC;EACA,OA3Ce;EA4Cf;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAA2C;;AAG1C;EACC;EACA;;AACA;EAAU;;AAGX;EAAuB;;AACvB;EAAe;;AAGf;EAAyC;;AAIxC;AAAA;EAC2C;;AAC3C;EAAwD;;AAI1D;EAA0C,OA1E3B;;;AA6EhB;EACC;EACA;EACA;EACA;EACA;;AAEA;EACqB;;AAErB;EAAgB;;AAChB;EAAe","file":"TabGroup.css"}

package/dist/components/TabGroup/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .TabGroup {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   list-style: none;
@@ -21,7 +21,7 @@
 }
 
 .TabGroup--divider {
-  box-shadow: 0 -1px 0 0 #dfe0e1 inset;
+  box-shadow: 0 -1px 0 0 var(--colorsBorderGrey, #dfe0e1) inset;
 }
 
 .TabGroup__Item {
@@ -43,7 +43,7 @@
 }
 .TabGroup--verticallyDivided .Tab::before {
   box-shadow: -1px 0 0;
-  color: rgba(20, 20, 20, 0.3);
+  color: var(--colorsBorderGrey, #dfe0e1);
   content: "";
   height: 50%;
   position: absolute;
@@ -79,7 +79,7 @@
   box-shadow: 1px 0 0;
 }
 .TabGroup--verticallyDivided.TabGroup--dark .Tab--inactive::before {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--colorsTextInverted, #ffffff);
 }
 
 .TabGroup__action {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/TabGroup/TabGroup.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACMA;ACLC;EACA,OCiBa;ADfb;EACA;EEJA;EACA;EACA;EACA;EACA;EHKA,WE2Ha;EF1Hb;EACA;;AAEA;EACC;;AAEA;EAAgB;;;AAIlB;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;;AAGD;EACC,WA9Bc;;;AAoCf;EAAO;;AACP;EAAe;;AAEf;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAA2C;;AAG1C;EACC;EACA;;AACA;EAAU;;AAGX;EAAuB;;AACvB;EAAe;;AAGf;EAAyC;;AAIxC;AAAA;EAC2C;;AAC3C;EAAwD;;AAI1D;EAA0C;;;AAG3C;EACC;EACA;EACA;EACA;EACA;;AAEA;EACqB;;AAErB;EAAgB;;AAChB;EAAe","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/TabGroup/TabGroup.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_list-unset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACWA;ACVC;EACA;AAEA;EACA;ECJA;EACA;EACA;EACA;EACA;EFUA,WGuHa;EHtHb;EACA;;AAEA;EACC;;AAEA;EAAgB;;;AAIlB;EACC;;;AAGD;EACC;;AAEA;EACC;EACA;;AAGD;EACC,WAnCc;;;AAyCf;EAAO;;AACP;EAAe;;AAEf;EACC;EACA,OA3Ce;EA4Cf;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAA2C;;AAG1C;EACC;EACA;;AACA;EAAU;;AAGX;EAAuB;;AACvB;EAAe;;AAGf;EAAyC;;AAIxC;AAAA;EAC2C;;AAC3C;EAAwD;;AAI1D;EAA0C,OA1E3B;;;AA6EhB;EACC;EACA;EACA;EACA;EACA;;AAEA;EACqB;;AAErB;EAAgB;;AAChB;EAAe","file":"index.css"}