@servicetitan/design-system 11.4.0 → 11.5.0

package/dist/components/DateRangePicker/DateRangePicker.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .DateRangePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   width: min-content;
@@ -22,15 +22,7 @@
 
 .DateRangePicker__actions {
   padding: 12px 16px;
-  border-top: 1px solid #dfe0e1;
-}
-
-.DateRangePicker__errorText {
-  color: #e63717;
-  font-size: 14px;
-  line-height: 1.25;
-  margin-top: 8px;
-  margin-bottom: 4px;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .DateRangePicker__fromTo {
@@ -40,7 +32,7 @@
 }
 
 .DateRangePicker__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
   display: flex;
   justify-content: center;
@@ -56,7 +48,7 @@
 }
 
 .DateRangePicker__options {
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 

package/dist/components/DateRangePicker/DateRangePicker.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/DateRangePicker/DateRangePicker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;;;AAIA;AAAA;EAEC;EACA;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC,OEsDe;EFrDf,WEiGa;EFhGb,aE0GqB;EFzGrB,YEoFW;EFnFX,eE2Fc;;;AFxFf;EACC;EACA;EACA;;;AAGD;EACC;EACA,SEyEW;EFxEX;EACA;EACA,gBE6Ec;EF5Ed;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA,SEyDW","file":"DateRangePicker.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/DateRangePicker/DateRangePicker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;;;AAIA;AAAA;EAEC;EACA;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA,SEiFW;EFhFX;EACA;EACA,gBEqFc;EFpFd;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA,SEiEW","file":"DateRangePicker.css"}

package/dist/components/DateRangePicker/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .DateRangePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   width: min-content;
@@ -22,15 +22,7 @@
 
 .DateRangePicker__actions {
   padding: 12px 16px;
-  border-top: 1px solid #dfe0e1;
-}
-
-.DateRangePicker__errorText {
-  color: #e63717;
-  font-size: 14px;
-  line-height: 1.25;
-  margin-top: 8px;
-  margin-bottom: 4px;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .DateRangePicker__fromTo {
@@ -40,7 +32,7 @@
 }
 
 .DateRangePicker__header {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
   display: flex;
   justify-content: center;
@@ -56,7 +48,7 @@
 }
 
 .DateRangePicker__options {
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/DateRangePicker/DateRangePicker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;;;AAIA;AAAA;EAEC;EACA;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC,OEsDe;EFrDf,WEiGa;EFhGb,aE0GqB;EFzGrB,YEoFW;EFnFX,eE2Fc;;;AFxFf;EACC;EACA;EACA;;;AAGD;EACC;EACA,SEyEW;EFxEX;EACA;EACA,gBE6Ec;EF5Ed;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA,SEyDW","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/DateRangePicker/DateRangePicker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACOA;ACNC;EACA;AAEA;EACA;EDKA;EACA;;;AAIA;AAAA;EAEC;EACA;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA,SEiFW;EFhFX;EACA;EACA,gBEqFc;EFpFd;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA,SEiEW","file":"index.css"}

package/dist/components/Divider/Divider.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Divider {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   color: var(--colorsBorderGrey, #dfe0e1);
@@ -14,7 +14,7 @@
 }
 .Divider .Divider__content {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex: 0 0 auto;

package/dist/components/Divider/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Divider {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   color: var(--colorsBorderGrey, #dfe0e1);
@@ -14,7 +14,7 @@
 }
 .Divider .Divider__content {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   flex: 0 0 auto;

package/dist/components/Drawer/Drawer.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Drawer {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background-color: var(--colorsSurfaceDefault, #ffffff);

package/dist/components/Drawer/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Drawer {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   background-color: var(--colorsSurfaceDefault, #ffffff);

package/dist/components/Eyebrow/Eyebrow.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Eyebrow {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 600;

package/dist/components/Eyebrow/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Eyebrow {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 600;

package/dist/components/FilePicker/FilePicker.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .FilePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -12,7 +12,7 @@
 
 .FilePicker__File {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;

package/dist/components/FilePicker/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .FilePicker {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }
@@ -12,7 +12,7 @@
 
 .FilePicker__File {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   -webkit-font-smoothing: antialiased;

package/dist/components/FilterButton/FilterButton.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .FilterButton {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;

package/dist/components/FilterButton/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .FilterButton {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: inline-flex;

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: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }

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: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
 }

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: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;

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: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;

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: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   height: 100vh;

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: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   height: 100vh;

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: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   display: flex;

package/dist/components/Grid/index.css

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

package/dist/components/Headline/Headline.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Headline {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 700;

package/dist/components/Headline/index.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Headline {
   /* Set color on root of component. It can be overridden after the @include */
-  color: var(--colorsTextDefault, #040404);
+  color: var(--colorsTextDefault, #141414);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   font-weight: 700;

package/dist/components/Icon/Icon.css

@@ -1,4 +1,306 @@
-.a-Icon {
+/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.Button {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #141414);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  align-items: center;
+  background-color: var(--colorsSurfaceGrey, #eeeeee);
+  border: 0;
+  border-radius: 3px;
+  box-sizing: border-box;
+  color: var(--colorsTextOnGrey, #444445);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 16px;
+  font-weight: 600;
+  justify-content: center;
+  line-height: 1;
+  margin: 0;
+  outline: none;
+  padding: 12px 16px;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
+  user-select: none;
+  position: relative;
+}
+.Button::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  top: 0;
+  left: 0;
+}
+.Button:hover {
+  text-decoration: none;
+}
+.Button:hover::before {
+  background-color: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
+}
+.Button:active::before, .Button.Button--selected::before {
+  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
+}
+.Button.Button--focus-visible:focus {
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.Button.Button--outline {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
+}
+.Button.Button--outline:hover::before {
+  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
+}
+.Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
+  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
+}
+.Button.Button--outline.Button--focus-visible:focus {
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.Button.Button--subtle {
+  background-color: transparent;
+}
+.Button.Button--subtle:hover::before {
+  background-color: var(--colorsHoverOnGrey, rgba(4, 4, 4, 0.08));
+}
+.Button.Button--subtle:active::before, .Button.Button--subtle.Button--selected::before {
+  background-color: var(--colorsActiveOnGrey, rgba(4, 4, 4, 0.16));
+}
+
+button.Button {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.Button.Button--icon-only {
+  padding: 8px;
+  line-height: 1.5;
+}
+.Button.Button--icon-only.Button--xsmall {
+  line-height: 0.8;
+}
+.Button.Button--icon-only.Button--xsmall svg {
+  height: 20px;
+  width: 20px;
+}
+
+.Button--icon-only svg,
+.Button--icon-only .Button__icon > :not(i) {
+  height: 24px;
+  width: 24px;
+  display: block;
+}
+
+.Button__content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  width: 100%;
+}
+
+.Button--grey:hover, .Button--grey:active, .Button--grey.Button--selected, .Button--grey:focus, .Button--grey:focus:active {
+  color: var(--colorsTextOnGrey, #444445);
+}
+
+.Button--blue {
+  background-color: var(--colorsSurfacePrimary, #2270ee);
+  color: var(--colorsTextOnPrimary, #ffffff);
+}
+.Button--blue:hover::before {
+  background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
+}
+.Button--blue:active::before, .Button--blue.Button--selected::before {
+  background-color: var(--colorsActiveOnPrimary, rgba(4, 4, 4, 0.08));
+}
+.Button--blue.Button--outline {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee);
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.Button--blue.Button--outline:hover::before {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Button--blue.Button--outline.Button--focus-visible:focus {
+  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #2270ee), 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
+  background-color: var(--colorsActivePrimary, rgba(0, 76, 195, 0.2));
+}
+.Button--blue.Button--subtle {
+  background-color: transparent;
+  color: var(--colorsTextPrimary, #2270ee);
+}
+.Button--blue.Button--subtle:hover::before {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+.Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
+  background-color: var(--colorsActivePrimary, rgba(0, 76, 195, 0.2));
+}
+
+.Button--red {
+  background-color: var(--colorsSurfaceCritical, #e63717);
+  color: var(--colorsTextOnCritical, #ffffff);
+}
+.Button--red:hover::before {
+  background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
+}
+.Button--red:active::before, .Button--red.Button--selected::before {
+  background-color: var(--colorsActiveOnCritical, rgba(4, 4, 4, 0.16));
+}
+.Button--red.Button--focus-visible:focus {
+  box-shadow: 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
+}
+.Button--red.Button--outline {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717);
+  color: var(--colorsTextCritical, #e63717);
+}
+.Button--red.Button--outline:hover::before {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+}
+.Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+}
+.Button--red.Button--outline.Button--focus-visible:focus {
+  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e63717), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
+}
+.Button--red.Button--subtle {
+  background-color: transparent;
+  color: var(--colorsTextCritical, #e63717);
+}
+.Button--red.Button--subtle:hover::before {
+  background-color: var(--colorsHoverCritical, rgba(230, 55, 23, 0.1));
+}
+.Button--red.Button--subtle:active::before, .Button--red.Button--subtle.Button--selected::before {
+  background-color: var(--colorsActiveCritical, rgba(230, 55, 23, 0.3));
+}
+
+.Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
+  background: var(--colorsSurfaceGrey, #eeeeee);
+  color: var(--colorsTextOnGrey, #444445);
+  opacity: 0.4;
+}
+.Button--disabled svg, .Button--disabled.Button--outline svg, .Button--disabled.Button--subtle svg {
+  opacity: 0.6;
+}
+.Button--disabled.Button--outline, .Button--disabled.Button--subtle {
+  background: transparent;
+}
+.Button--disabled.Button--outline {
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
+}
+
+.Button--inactive {
+  pointer-events: none;
+}
+
+.Button--xsmall {
+  font-size: 14px;
+  padding: 6px 12px;
+}
+.Button--xsmall.Button--icon-only {
+  font-size: 20px;
+  padding: 3px;
+}
+
+button.Button--xsmall {
+  font-size: 14px;
+}
+
+.Button--small {
+  padding: 8px 16px;
+}
+.Button--small.Button--icon-only {
+  padding: 4px;
+}
+
+.Button--large {
+  padding: 16px 20px;
+}
+.Button--large.Button--icon-only {
+  padding: 12px;
+}
+
+.Button--full {
+  display: block;
+}
+
+button.Button--full {
+  width: 100%;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.Button--loading {
+  opacity: 0.6;
+  pointer-events: none;
+  position: relative;
+}
+.Button--loading .Button__content {
+  opacity: 0;
+}
+
+.Button--loading::before {
+  content: "";
+  box-sizing: border-box;
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  border-radius: 50%;
+  border: 0.15em solid transparent;
+  border-top-color: currentColor;
+  animation: spin 0.6s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -0.4em;
+  margin-left: -0.4em;
+}
+
+.Button__icon--left {
+  padding-right: 8px;
+}
+
+.Button__icon--right {
+  padding-left: 8px;
+}
+
+.Button__icon-svg.a-Icon {
+  vertical-align: top;
+}
+
+.Button > .Button__content::before {
+  content: "";
+  height: 10px;
+}
+
+.Button.Button--xsmall > .Button__content::before {
+  height: 8px;
+}
+
+button.a-Icon {
+  all: unset;
+  cursor: pointer;
+  pointer-events: auto;
+}
+button.a-Icon:focus {
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
+  outline: 0;
+}
+
+.a-Icon,
+button.a-Icon {
   backface-visibility: hidden;
   color: inherit;
   display: inline-block;
@@ -10,7 +312,8 @@
   vertical-align: middle;
   width: auto;
 }
-.a-Icon svg {
+.a-Icon svg,
+button.a-Icon svg {
   vertical-align: bottom;
 }
 

package/dist/components/Icon/Icon.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Icon/Icon.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EAAM","file":"Icon.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Button/Button.scss","../../../src/utilities/_component-reset.scss","../../../src/utilities/_font-smoothing.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/components/Icon/Icon.scss"],"names":[],"mappings":"AAAA;AC0CA;ACzCC;EACA;AAEA;EACA;ECHC;EACA;EF2CD;EACA,kBArCoB;EAsCpB;EACA,eGzCiB;EH0CjB;EACA,OAhDc;EAiDd;EACA;EACA,WGiFa;EHhFb,aGoDsB;EHnDtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACC;EAED;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC,kBA1Da;;AAgEd;EACC,kBAzDc;;AA6DhB;EACC;EACA,YAjFc;;AAoFf;EACC;EACA;;AAGC;EACC,kBA5EY;;AAkFb;EACC,kBA3Ea;;AA+Ef;EAAgC;;AAGjC;EACC;;AAGC;EACC,kBA/FY;;AAqGb;EACC,kBA9Fa;;;AAsGjB;EACC,WGNa;EHOb;;;AAGD;EACC,SGvBW;EHwBX;;AAEA;EACC;;AAEA;EACC;EACA;;;AAKH;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKA;EAKC,OAlLa;;;AAsLf;EACC,kBA/KoB;EAgLpB,OApLiB;;AAuLhB;EACC,kBAhKgB;;AAsKjB;EACC,kBA/JiB;;AAmKnB;EACC;EACA;EACA,OAzMa;;AA4MZ;EACC,kBAtLY;;AA0Ld;EAAgC;;AAI/B;EACC,kBAvLa;;AA4LhB;EACC;EACA,OA7Na;;AAgOZ;EACC,kBA1MY;;AAgNb;EACC,kBAzMa;;;AA+MjB;EACC,kBAvOqB;EAwOrB,OA5OkB;;AA+OjB;EACC,kBAxNiB;;AA8NlB;EACC,kBAvNkB;;AA2NpB;EAAgC,YAjPhB;;AAmPhB;EACC;EACA;EACA,OAnQc;;AAsQb;EACC,kBAhPa;;AAsPd;EACC,kBA/Oc;;AAmPhB;EAAgC;;AAGjC;EACC;EACA,OAvRc;;AA0Rb;EACC,kBApQa;;AA0Qd;EACC,kBAnQc;;;AA2QjB;EAGC,YAxSmB;EAySnB,OAhTa;EAiTb;;AAEA;EACC,SGvMgB;;AH2MlB;EAEC;;AAGD;EACC;;;AAIF;EAAoB;;;AAGpB;EACC,WGnMa;EHoMb;;AAEA;EACC,WGrMY;EHsMZ;;;AAMF;EAAwB,WG9MV;;;AHgNd;EACC;;AACA;EAAsB,SGrNR;;;AHwNf;EACC;;AACA;EAAsB;;;AAIvB;EAAgB;;;AAGhB;EAAsB;;;AAItB;EACC;IAAK;;;AAGN;EACC,SG7PkB;EH8PlB;EACA;;AAEA;EAAmB;;;AAGpB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EAAsB,eG1QV;;;AH2QZ;EAAuB,cG3QX;;;AH6QZ;EAA2B;;;AAE3B;EACC;EACA;;;AAGD;EAAoD;;;AI5YpD;EACC;EACA;EACA;;AAEA;EACC,eDDgB;ECEhB;EACA;;;AAIF;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AAAA;EAAM","file":"Icon.css"}