@servicetitan/design-system 14.0.0 → 14.0.1

package/dist/components/AnvilSelect/components/Trigger.css

@@ -193,6 +193,7 @@
   border-radius: 100%;
   margin-top: 1px;
   padding: 1px 4px;
+  background: transparent;
 }
 .Trigger .Trigger__clear.Button::before {
   border-radius: 100%;

package/dist/components/AnvilSelect/components/Trigger.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/utilities/_visually-hidden.scss","../../../../src/components/Form/Form.scss","../../../../src/components/AnvilSelect/AnvilSelect.scss","../../../../src/utilities/_component-reset.scss","../../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../../src/components/AnvilSelect/components/Trigger.scss"],"names":[],"mappings":"AAAA;ACIA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AAOC;AAAA;AAAA;AAAA;EAEC,kBAPiB;EAQjB,cAPa;EAQb,OAVW;EAWX;;AAGD;AAAA;AAAA;AAAA;EAEC,kBAfiB;EAgBjB,cAfa;EAgBb,OAlBW;EAmBX;EACA;;;ACrCF;AACA;ACFC;EACA;AAEA;EACA;;;ADIC;EACC;;AAEA;EAAiB;;;AAKpB;EACC;;;AAGD;EACC;EACA,OE6Gc;EF5Gd,KE4Gc;;AF1Gd;EACC;;AAGD;EACC,eETuB;EFUvB;EACA;;AAEA;EACC,eEdsB;;AFiBvB;EAAoB;;;AAItB;EACC,eEkFW;;;AF/EZ;EACC;;AAEA;EACC,WEoFY;EFnFZ,aEgFa;EF/Eb,gBE+Ea;;AF5Ed;EACC,aEoEU;;;AFhEZ;EACC;;AAEA;EACC,YE4DU;;;AFxDZ;EACC,WEiEa;;AF/Db;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAEA;EAAwB,aEgDX;;AF7Cd;EAAmB;;;AAKnB;AAAA;EAA8B;;AAE9B;AAAA;EACC;;AAGD;AAAA;EACC;;;AG3EF;AFvBC;EACA;AAEA;EACA;EEsBA;EACA;EACA,YAxBoB;EAyBpB;EACA,eDZiB;ECajB,OA7Bc;EA8Bd;EACA;EACA;;AAEA;EAEC,cA7Ba;EA8Bb,YDiFa;EChFb;;AAGD;EAAY;;AAEZ;EAAO;;AAEP;EACC,aD6FiB;EC5FjB,SD+DoB;;AC5DrB;EACC,OAlDW;EAmDX,SD0DoB;;ACvDrB;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EAAoB;;;AAItB;EAAoB;;;AACpB;EAAoB;;;AAEpB;EACC,cAjEc;;AAkEd;EAAmB,cAnEL;;;AAsEf;EACC,cAvEc;EAwEd,OA7EY;EA8EZ,kBA5EkB;;AA8ElB;EAEC,cA7Ea;EA8Eb;;AAGD;AAAA;EACU,OAvFE;;;AA0Fb;EACC;EACA,SDgBkB;ECflB,kBA1FqB;;AA4FrB;EACC,kBA9FiB;;AAgGjB;EACC,OAnGU;;AAuGZ;EACC;;;AAIF;EACC;EACA;EACA,OAvGe;EAwGf;EACA;EACA;EACA;;AAEA;EAAsB,cAnGN;;AAoGhB;EAAsB,cAvGN;;AAyGhB;EACC,OAzHW;EA0HX,cArHa;;AAwHd;EAEC,cAzHa;;;AA6Hf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAtIa;;AAyId;EAEC,oBA5Ia;;;AAgJf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAxJa;;AA2Jd;EAEC,oBA9Ja;;;AAkKf;EACC;EACA;EACA;EACA,cDnDW;;;ACsDZ;EACC;EACA,OAxKe;;AA0Kf;EAAoB,OAlLR;;;AAqLb;EACC","file":"Trigger.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../src/utilities/_visually-hidden.scss","../../../../src/components/Form/Form.scss","../../../../src/components/AnvilSelect/AnvilSelect.scss","../../../../src/utilities/_component-reset.scss","../../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../../src/components/AnvilSelect/components/Trigger.scss"],"names":[],"mappings":"AAAA;ACIA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AAOC;AAAA;AAAA;AAAA;EAEC,kBAPiB;EAQjB,cAPa;EAQb,OAVW;EAWX;;AAGD;AAAA;AAAA;AAAA;EAEC,kBAfiB;EAgBjB,cAfa;EAgBb,OAlBW;EAmBX;EACA;;;ACrCF;AACA;ACFC;EACA;AAEA;EACA;;;ADIC;EACC;;AAEA;EAAiB;;;AAKpB;EACC;;;AAGD;EACC;EACA,OE6Gc;EF5Gd,KE4Gc;;AF1Gd;EACC;;AAGD;EACC,eETuB;EFUvB;EACA;;AAEA;EACC,eEdsB;;AFiBvB;EAAoB;;;AAItB;EACC,eEkFW;;;AF/EZ;EACC;;AAEA;EACC,WEoFY;EFnFZ,aEgFa;EF/Eb,gBE+Ea;;AF5Ed;EACC,aEoEU;;;AFhEZ;EACC;;AAEA;EACC,YE4DU;;;AFxDZ;EACC,WEiEa;;AF/Db;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAEA;EAAwB,aEgDX;;AF7Cd;EAAmB;;;AAKnB;AAAA;EAA8B;;AAE9B;AAAA;EACC;;AAGD;AAAA;EACC;;;AG3EF;AFvBC;EACA;AAEA;EACA;EEsBA;EACA;EACA,YAxBoB;EAyBpB;EACA,eDZiB;ECajB,OA7Bc;EA8Bd;EACA;EACA;;AAEA;EAEC,cA7Ba;EA8Bb,YDiFa;EChFb;;AAGD;EAAY;;AAEZ;EAAO;;AAEP;EACC,aD6FiB;EC5FjB,SD+DoB;;AC5DrB;EACC,OAlDW;EAmDX,SD0DoB;;ACvDrB;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAAoB;;;AAItB;EAAoB;;;AACpB;EAAoB;;;AAEpB;EACC,cAlEc;;AAmEd;EAAmB,cApEL;;;AAuEf;EACC,cAxEc;EAyEd,OA9EY;EA+EZ,kBA7EkB;;AA+ElB;EAEC,cA9Ea;EA+Eb;;AAGD;AAAA;EACU,OAxFE;;;AA2Fb;EACC;EACA,SDekB;ECdlB,kBA3FqB;;AA6FrB;EACC,kBA/FiB;;AAiGjB;EACC,OApGU;;AAwGZ;EACC;;;AAIF;EACC;EACA;EACA,OAxGe;EAyGf;EACA;EACA;EACA;;AAEA;EAAsB,cApGN;;AAqGhB;EAAsB,cAxGN;;AA0GhB;EACC,OA1HW;EA2HX,cAtHa;;AAyHd;EAEC,cA1Ha;;;AA8Hf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAvIa;;AA0Id;EAEC,oBA7Ia;;;AAiJf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAzJa;;AA4Jd;EAEC,oBA/Ja;;;AAmKf;EACC;EACA;EACA;EACA,cDpDW;;;ACuDZ;EACC;EACA,OAzKe;;AA2Kf;EAAoB,OAnLR;;;AAsLb;EACC","file":"Trigger.css"}

package/dist/components/AnvilSelect/index.css

@@ -193,6 +193,7 @@
   border-radius: 100%;
   margin-top: 1px;
   padding: 1px 4px;
+  background: transparent;
 }
 .Trigger .Trigger__clear.Button::before {
   border-radius: 100%;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../src/components/AnvilSelect/AnvilSelect.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/AnvilSelect/components/Trigger.scss","../../../src/components/AnvilSelect/components/DrillIn.scss"],"names":[],"mappings":"AAAA;ACIA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AAOC;AAAA;AAAA;AAAA;EAEC,kBAPiB;EAQjB,cAPa;EAQb,OAVW;EAWX;;AAGD;AAAA;AAAA;AAAA;EAEC,kBAfiB;EAgBjB,cAfa;EAgBb,OAlBW;EAmBX;EACA;;;ACrCF;AACA;ACFC;EACA;AAEA;EACA;;;ADIC;EACC;;AAEA;EAAiB;;;AAKpB;EACC;;;AAGD;EACC;EACA,OE6Gc;EF5Gd,KE4Gc;;AF1Gd;EACC;;AAGD;EACC,eETuB;EFUvB;EACA;;AAEA;EACC,eEdsB;;AFiBvB;EAAoB;;;AAItB;EACC,eEkFW;;;AF/EZ;EACC;;AAEA;EACC,WEoFY;EFnFZ,aEgFa;EF/Eb,gBE+Ea;;AF5Ed;EACC,aEoEU;;;AFhEZ;EACC;;AAEA;EACC,YE4DU;;;AFxDZ;EACC,WEiEa;;AF/Db;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAEA;EAAwB,aEgDX;;AF7Cd;EAAmB;;;AAKnB;AAAA;EAA8B;;AAE9B;AAAA;EACC;;AAGD;AAAA;EACC;;;AG3EF;AFvBC;EACA;AAEA;EACA;EEsBA;EACA;EACA,YAxBoB;EAyBpB;EACA,eDZiB;ECajB,OA7Bc;EA8Bd;EACA;EACA;;AAEA;EAEC,cA7Ba;EA8Bb,YDiFa;EChFb;;AAGD;EAAY;;AAEZ;EAAO;;AAEP;EACC,aD6FiB;EC5FjB,SD+DoB;;AC5DrB;EACC,OAlDW;EAmDX,SD0DoB;;ACvDrB;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EAAoB;;;AAItB;EAAoB;;;AACpB;EAAoB;;;AAEpB;EACC,cAjEc;;AAkEd;EAAmB,cAnEL;;;AAsEf;EACC,cAvEc;EAwEd,OA7EY;EA8EZ,kBA5EkB;;AA8ElB;EAEC,cA7Ea;EA8Eb;;AAGD;AAAA;EACU,OAvFE;;;AA0Fb;EACC;EACA,SDgBkB;ECflB,kBA1FqB;;AA4FrB;EACC,kBA9FiB;;AAgGjB;EACC,OAnGU;;AAuGZ;EACC;;;AAIF;EACC;EACA;EACA,OAvGe;EAwGf;EACA;EACA;EACA;;AAEA;EAAsB,cAnGN;;AAoGhB;EAAsB,cAvGN;;AAyGhB;EACC,OAzHW;EA0HX,cArHa;;AAwHd;EAEC,cAzHa;;;AA6Hf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAtIa;;AAyId;EAEC,oBA5Ia;;;AAgJf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAxJa;;AA2Jd;EAEC,oBA9Ja;;;AAkKf;EACC;EACA;EACA;EACA,cDnDW;;;ACsDZ;EACC;EACA,OAxKe;;AA0Kf;EAAoB,OAlLR;;;AAqLb;EACC;;;ACtLD;EACC;;;AAGD;EACC;;;AAIA;EAAmB,kBAZH;;;AAejB;EACC;;AAEA;EACC,YAlBc;EAmBd,eFFgB;EEGhB,YFmGa","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Form/Form.scss","../../../src/components/AnvilSelect/AnvilSelect.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/AnvilSelect/components/Trigger.scss","../../../src/components/AnvilSelect/components/DrillIn.scss"],"names":[],"mappings":"AAAA;ACIA;AACA;EAAc;;;AACd;EAAc;;;AACd;EAAe;;;AACf;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AACb;EAAc;;;AACd;EAAiB;;;AAEjB;AAGC;AAAA;EAAS;;;AAGV;AAOC;AAAA;AAAA;AAAA;EAEC,kBAPiB;EAQjB,cAPa;EAQb,OAVW;EAWX;;AAGD;AAAA;AAAA;AAAA;EAEC,kBAfiB;EAgBjB,cAfa;EAgBb,OAlBW;EAmBX;EACA;;;ACrCF;AACA;ACFC;EACA;AAEA;EACA;;;ADIC;EACC;;AAEA;EAAiB;;;AAKpB;EACC;;;AAGD;EACC;EACA,OE6Gc;EF5Gd,KE4Gc;;AF1Gd;EACC;;AAGD;EACC,eETuB;EFUvB;EACA;;AAEA;EACC,eEdsB;;AFiBvB;EAAoB;;;AAItB;EACC,eEkFW;;;AF/EZ;EACC;;AAEA;EACC,WEoFY;EFnFZ,aEgFa;EF/Eb,gBE+Ea;;AF5Ed;EACC,aEoEU;;;AFhEZ;EACC;;AAEA;EACC,YE4DU;;;AFxDZ;EACC,WEiEa;;AF/Db;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;AAEA;EAAwB,aEgDX;;AF7Cd;EAAmB;;;AAKnB;AAAA;EAA8B;;AAE9B;AAAA;EACC;;AAGD;AAAA;EACC;;;AG3EF;AFvBC;EACA;AAEA;EACA;EEsBA;EACA;EACA,YAxBoB;EAyBpB;EACA,eDZiB;ECajB,OA7Bc;EA8Bd;EACA;EACA;;AAEA;EAEC,cA7Ba;EA8Bb,YDiFa;EChFb;;AAGD;EAAY;;AAEZ;EAAO;;AAEP;EACC,aD6FiB;EC5FjB,SD+DoB;;AC5DrB;EACC,OAlDW;EAmDX,SD0DoB;;ACvDrB;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAAoB;;;AAItB;EAAoB;;;AACpB;EAAoB;;;AAEpB;EACC,cAlEc;;AAmEd;EAAmB,cApEL;;;AAuEf;EACC,cAxEc;EAyEd,OA9EY;EA+EZ,kBA7EkB;;AA+ElB;EAEC,cA9Ea;EA+Eb;;AAGD;AAAA;EACU,OAxFE;;;AA2Fb;EACC;EACA,SDekB;ECdlB,kBA3FqB;;AA6FrB;EACC,kBA/FiB;;AAiGjB;EACC,OApGU;;AAwGZ;EACC;;;AAIF;EACC;EACA;EACA,OAxGe;EAyGf;EACA;EACA;EACA;;AAEA;EAAsB,cApGN;;AAqGhB;EAAsB,cAxGN;;AA0GhB;EACC,OA1HW;EA2HX,cAtHa;;AAyHd;EAEC,cA1Ha;;;AA8Hf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAvIa;;AA0Id;EAEC,oBA7Ia;;;AAiJf;EACC;EACA;;AAEA;EAAsB;;AACtB;EAAsB;;AAEtB;EAEC,oBAzJa;;AA4Jd;EAEC,oBA/Ja;;;AAmKf;EACC;EACA;EACA;EACA,cDpDW;;;ACuDZ;EACC;EACA,OAzKe;;AA2Kf;EAAoB,OAnLR;;;AAsLb;EACC;;;ACvLD;EACC;;;AAGD;EACC;;;AAIA;EAAmB,kBAZH;;;AAejB;EACC;;AAEA;EACC,YAlBc;EAmBd,eFFgB;EEGhB,YFmGa","file":"index.css"}

package/dist/components/Button/Button.css

@@ -9,7 +9,7 @@
   align-items: center;
   background-color: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
-  border-radius: 3px;
+  border-radius: 6px;
   box-sizing: border-box;
   color: var(--colorsTextOnGrey, #444445);
   cursor: pointer;
@@ -19,14 +19,15 @@
   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;
+  transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline-offset cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   user-select: none;
   position: relative;
+  outline-offset: 0;
+  outline: solid 0 transparent;
 }
 .Button::before {
   content: "";
@@ -46,13 +47,13 @@
 .Button:active::before, .Button.Button--selected::before {
   background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
-.Button.Button--focus-visible:focus {
-  outline: 0;
-  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
+.Button:focus-visible {
+  outline-offset: 2px;
+  outline: solid 2px var(--colorsBorderPrimary, #0265dc);
 }
 .Button.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
 }
 .Button.Button--outline:hover::before {
   background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
@@ -60,9 +61,6 @@
 .Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
   background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 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, #78bbfa);
-}
 .Button.Button--subtle {
   background-color: transparent;
 }
@@ -114,34 +112,31 @@ button.Button {
   color: var(--colorsTextOnPrimary, white);
 }
 .Button--blue:hover::before {
-  background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Button--blue:active::before, .Button--blue.Button--selected::before {
-  background-color: var(--colorsActiveOnPrimary, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
 }
 .Button--blue.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
   color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--outline:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
-}
-.Button--blue.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 .Button--blue.Button--subtle {
   background-color: transparent;
   color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--subtle:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 
 .Button--red {
@@ -151,15 +146,15 @@ button.Button {
 .Button--red:hover::before {
   background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
 }
+.Button--red:focus-visible {
+  outline: solid 2px var(--colorsBorderCritical, #e13212);
+}
 .Button--red:active::before, .Button--red.Button--selected::before {
   background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 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, #e13212);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
   color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--outline:hover::before {
@@ -168,9 +163,6 @@ button.Button {
 .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
   background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
-.Button--red.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
-}
 .Button--red.Button--subtle {
   background-color: transparent;
   color: var(--colorsTextCritical, #bf2a00);
@@ -183,19 +175,14 @@ button.Button {
 }
 
 .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
-  background: var(--colorsSurfaceGrey, #eeeeee);
-  color: var(--colorsTextOnGrey, #444445);
+  background: #bcbcbd;
+  color: #606162;
+  box-shadow: none;
   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;

package/dist/components/Button/Button.css.map

@@ -1 +1 @@
-{"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/core/tokens.scss"],"names":[],"mappings":"AAAA;AC0CA;ACvCC;EACA;AAEA;EACA;ECLC;EACA;EF2CD;EACA,kBArCoB;EAsCpB;EACA,eG5BiB;EH6BjB;EACA,OA/Cc;EAgDd;EACA;EACA,WGoFa;EHnFb,aGsDsB;EHrDtB;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,WGHa;EHIb;;;AAGD;EACC,SGpBW;EHqBX;;AAEA;EACC;;AAEA;EACC;EACA;;;AAKH;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKA;EAKC,OAjLa;;;AAqLf;EACC,kBA/KoB;EAgLpB,OApLiB;;AAuLhB;EACC,kBAhKgB;;AAsKjB;EACC,kBA/JiB;;AAmKnB;EACC;EACA;EACA,OAxMa;;AA2MZ;EACC,kBAtLY;;AA0Ld;EAAgC;;AAI/B;EACC,kBAvLa;;AA4LhB;EACC;EACA,OA5Na;;AA+NZ;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,OAlQc;;AAqQb;EACC,kBAhPa;;AAsPd;EACC,kBA/Oc;;AAmPhB;EAAgC;;AAGjC;EACC;EACA,OAtRc;;AAyRb;EACC,kBApQa;;AA0Qd;EACC,kBAnQc;;;AA2QjB;EAGC,YAxSmB;EAySnB,OA/Sa;EAgTb;;AAEA;EACC,SGrMgB;;AHyMlB;EAEC;;AAGD;EACC;;;AAIF;EAAoB;;;AAGpB;EACC,WGhMa;EHiMb;;AAEA;EACC,WGlMY;EHmMZ;;;AAMF;EAAwB,WG3MV;;;AH6Md;EACC;;AACA;EAAsB,SGlNR;;;AHqNf;EACC;;AACA;EAAsB;;;AAIvB;EAAgB;;;AAGhB;EAAsB;;;AAItB;EACC;IAAK;;;AAGN;EACC,SG3PkB;EH4PlB;EACA;;AAEA;EAAmB;;;AAGpB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EAAsB,eGvQV;;;AHwQZ;EAAuB,cGxQX;;;AH0QZ;EAA2B;;;AAE3B;EACC;EACA;;;AAGD;EAAoD","file":"Button.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/core/tokens.scss","../../../node_modules/@servicetitan/tokens/core/appearances/light.scss"],"names":[],"mappings":"AAAA;ACoCA;ACjCC;EACA;AAEA;EACA;ECLC;EACA;EFqCD;EACA,kBA/BoB;EAgCpB;EACA,eGrBiB;EHsBjB;EACA,OAzCc;EA0Cd;EACA;EACA,WG0Fa;EHzFb,aG4DsB;EH3DtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACC;EAID;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC,kBAzDa;;AA+Dd;EACC,kBA1Dc;;AA8DhB;EACC;EACA,SA9Ec;;AAiFf;EACC;EACA;;AAGC;EACC,kBA5EY;;AAkFb;EACC,kBA7Ea;;AAkFhB;EACC;;AAGC;EACC,kBA7FY;;AAmGb;EACC,kBA9Fa;;;AAsGjB;EACC,WGEa;EHDb;;;AAGD;EACC,SGfW;EHgBX;;AAEA;EACC;;AAEA;EACC;EACA;;;AAKH;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKA;EAKC,OA5Ka;;;AAgLf;EACC,kBA1KoB;EA2KpB,OA/KiB;;AAkLhB;EACC,kBA/Ja;;AAqKd;EACC,kBAhKc;;AAoKhB;EACC;EACA;EACA,OAnMa;;AAsMZ;EACC,kBApLY;;AA0Lb;EACC,kBArLa;;AA0LhB;EACC;EACA,OArNa;;AAwNZ;EACC,kBAtMY;;AA4Mb;EACC,kBAvMa;;;AA6MjB;EACC,kBAhOqB;EAiOrB,OArOkB;;AAwOjB;EACC,kBArNiB;;AAyNnB;EACC,SApOe;;AAyOf;EACC,kBA1NkB;;AA8NpB;EACC;EACA;EACA,OA7Pc;;AAgQb;EACC,kBA9Oa;;AAoPd;EACC,kBA/Oc;;AAoPjB;EACC;EACA,OA/Qc;;AAkRb;EACC,kBAhQa;;AAsQd;EACC,kBAjQc;;;AAyQjB;EAGC,YI5PkC;EJ6PlC,OIhPyB;EJiPzB;EACA;;AAEA;EACC,SG/LgB;;;AHoMnB;EAAoB;;;AAGpB;EACC,WGjLa;EHkLb;;AAEA;EACC,WGnLY;EHoLZ;;;AAMF;EAAwB,WG5LV;;;AH8Ld;EACC;;AACA;EAAsB,SGnMR;;;AHsMf;EACC;;AACA;EAAsB;;;AAIvB;EAAgB;;;AAGhB;EAAsB;;;AAItB;EACC;IAAK;;;AAGN;EACC,SG5OkB;EH6OlB;EACA;;AAEA;EAAmB;;;AAGpB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EAAsB,eGxPV;;;AHyPZ;EAAuB,cGzPX;;;AH2PZ;EAA2B;;;AAE3B;EACC;EACA;;;AAGD;EAAoD","file":"Button.css"}

package/dist/components/Button/Button.js

@@ -13,7 +13,6 @@ import React from 'react';
 import classnames from 'classnames';
 import { Icon } from '../Icon';
 import { getContent } from '../../utilities/getContent';
-import { useFocusVisible } from '../../hooks/useFocusVisible';
 const defaultProps = {
     el: 'button',
 };
@@ -22,9 +21,6 @@ const defaultProps = {
  */
 export const Button = React.forwardRef((_a, ref) => {
     var { children, className, color = 'default', content, el: Element = defaultProps.el, fill = 'solid', full, href, icon, iconName, iconPosition = 'left', inactive, large, loading, negative, outline, primary, selected, size = 'medium', small, text, type, width = 'auto', xsmall, onFocus, onBlur } = _a, props = __rest(_a, ["children", "className", "color", "content", "el", "fill", "full", "href", "icon", "iconName", "iconPosition", "inactive", "large", "loading", "negative", "outline", "primary", "selected", "size", "small", "text", "type", "width", "xsmall", "onFocus", "onBlur"]);
-    const newRef = React.useRef(null);
-    const itemRef = ref ? ref : newRef;
-    const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(itemRef, onBlur, onFocus);
     const getTagName = () => {
         // If `el` is passed in and isn't default, it is always used
         if (Element !== defaultProps.el)
@@ -147,7 +143,6 @@ export const Button = React.forwardRef((_a, ref) => {
         'Button--inactive': preventClicks,
         'Button--loading': loading,
         'Button--icon-only': !hasContent(),
-        'Button--focus-visible': isFocusVisible,
         'Button--selected': selected,
     });
     const ButtonElement = getTagName();
@@ -155,7 +150,7 @@ export const Button = React.forwardRef((_a, ref) => {
         !props['aria-label'] &&
         console.warn(`Accessibility warning:
 				\naria-label attribute does not exist or is empty for button that does not have inner text that is visible to screen readers`);
-    return (React.createElement(ButtonElement, Object.assign({ className: ButtonClasses, disabled: preventClicks, href: href, role: getTagName() !== 'button' ? 'button' : null, style: { width: getWidthValue() }, tabIndex: getTabIndex(), onFocus: focusFunction, onBlur: blurFunction, ref: itemRef, "data-anvil-component": "Button" }, getTypeAttribute(), props),
+    return (React.createElement(ButtonElement, Object.assign({ className: ButtonClasses, disabled: preventClicks, href: href, role: getTagName() !== 'button' ? 'button' : null, style: { width: getWidthValue() }, tabIndex: getTabIndex(), ref: ref, "data-anvil-component": "Button" }, getTypeAttribute(), props),
         React.createElement("span", { className: "Button__content" },
             iconPosition === 'left' && renderIcon(),
             getContent({ children, content }),

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react';\nimport classnames from 'classnames';\nimport { Icon, IconPropsStrict } from '../Icon';\nimport { getContent } from '../../utilities/getContent';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\n\n/**\n * Button properties\n */\nexport interface ButtonPropsStrict {\n\t/** Button Color */\n\tcolor?: 'primary' | 'blue' | 'default' | 'grey' | 'negative' | 'red';\n\n\t/** Additional classes */\n\tclassName?: string;\n\n\t/** Disabled button, unclickable */\n\tdisabled?: boolean;\n\n\t/** Set the component HTML element. Warning: Using non-standard markup can produce accessibility issues. */\n\tel?: 'button' | 'a' | 'span';\n\n\t/** Button Type. 'none' is deprecated, use 'subtle' instead. */\n\tfill?: 'solid' | 'outline' | 'none' | 'subtle';\n\n\t/** Shortcut for `width=\"full\"` */\n\tfull?: boolean;\n\n\t/** URL for Button. Turns into `<a>` tag. */\n\thref?: string;\n\n\t/** Custom Icon element. Use `iconName` to use default element. */\n\ticon?: React.ReactElement;\n\n\t/** Name of Icon to be inside Button. Use `icon` to pass a custom element. */\n\ticonName?: IconPropsStrict['name'];\n\n\t/** Position the icon */\n\ticonPosition?: 'left' | 'right';\n\n\t/** Unclicable button */\n\tinactive?: boolean;\n\n\t/** Shortcut for `size=\"large\"` */\n\tlarge?: boolean;\n\n\t/** Button with loading indicator */\n\tloading?: boolean;\n\n\t/** Shortcut for `color=\"negative\"` */\n\tnegative?: boolean;\n\n\t/** Shortcut for `fill=\"outline\"` */\n\toutline?: boolean;\n\n\t/** Shortcut for `color=\"primary\"` */\n\tprimary?: boolean;\n\n\t/** Selected State */\n\tselected?: boolean;\n\n\t/** Button Size */\n\tsize?: 'xsmall' | 'small' | 'medium' | 'large';\n\n\t/** Shortcut for `size=\"small\"` */\n\tsmall?: boolean;\n\n\t/** Deprecated. Shortcut for `fill=\"subtle\"` */\n\ttext?: boolean;\n\n\t/** Button Width */\n\twidth?: string | number | 'auto' | 'full';\n\n\t/** Shortcut for `size=\"small\"` */\n\txsmall?: boolean;\n}\n\nexport interface ButtonProps extends ButtonPropsStrict {\n\t/** Unstrict Props */\n\t[propName: string]: any;\n}\n\nconst defaultProps = {\n\tel: 'button',\n};\n\n/**\n * **Buttons** provide a possible user actions\n */\nexport const Button: FC<ButtonProps> = React.forwardRef(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcolor = 'default',\n\t\t\tcontent,\n\t\t\tel: Element = defaultProps.el,\n\t\t\tfill = 'solid',\n\t\t\tfull,\n\t\t\thref,\n\t\t\ticon,\n\t\t\ticonName,\n\t\t\ticonPosition = 'left',\n\t\t\tinactive,\n\t\t\tlarge,\n\t\t\tloading,\n\t\t\tnegative,\n\t\t\toutline,\n\t\t\tprimary,\n\t\t\tselected,\n\t\t\tsize = 'medium',\n\t\t\tsmall,\n\t\t\ttext,\n\t\t\ttype,\n\t\t\twidth = 'auto',\n\t\t\txsmall,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\t...props\n\t\t},\n\t\tref: React.RefObject<HTMLElement>\n\t) => {\n\t\tconst newRef = React.useRef(null);\n\t\tconst itemRef = ref ? ref : newRef;\n\n\t\tconst { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(\n\t\t\titemRef,\n\t\t\tonBlur,\n\t\t\tonFocus\n\t\t);\n\n\t\tconst getTagName = () => {\n\t\t\t// If `el` is passed in and isn't default, it is always used\n\t\t\tif (Element !== defaultProps.el) return Element;\n\n\t\t\t// If `href` is passed in, the element becomes an anchor\n\t\t\tif (href) return 'a';\n\n\t\t\t// Is default, use it\n\t\t\treturn Element;\n\t\t};\n\n\t\tconst getTabIndex = () => {\n\t\t\tif (props.tabIndex) return props.tabIndex;\n\t\t\tif (getTagName() !== 'button') 0;\n\t\t\treturn null;\n\t\t};\n\n\t\tconst getColorClass = () => {\n\t\t\tlet realColor = color;\n\n\t\t\t// Override string props with boolean values\n\t\t\tif (primary) realColor = 'primary';\n\t\t\tif (negative) realColor = 'negative';\n\n\t\t\tconst ButtonColorClasses: any = {\n\t\t\t\tprimary: 'Button--blue',\n\t\t\t\tblue: 'Button--blue',\n\t\t\t\tdefault: 'Button--grey',\n\t\t\t\tgrey: 'Button--grey',\n\t\t\t\tnegative: 'Button--red',\n\t\t\t\tred: 'Button--red',\n\t\t\t};\n\n\t\t\treturn ButtonColorClasses[realColor];\n\t\t};\n\n\t\tconst getFillClass = () => {\n\t\t\tlet realFill = fill;\n\t\t\tif (outline) realFill = 'outline';\n\t\t\tif (text || fill === 'subtle' || fill === 'none')\n\t\t\t\trealFill = 'subtle';\n\n\t\t\tif (realFill === 'solid') return 'Button--solid';\n\t\t\tif (realFill === 'outline') return 'Button--outline';\n\t\t\tif (realFill === 'subtle') return 'Button--subtle';\n\t\t};\n\n\t\tconst getSizeClass = () => {\n\t\t\tlet realSize = size;\n\t\t\tif (xsmall) realSize = 'xsmall';\n\t\t\tif (small) realSize = 'small';\n\t\t\tif (large) realSize = 'large';\n\n\t\t\tif (realSize === 'xsmall') return 'Button--xsmall';\n\t\t\tif (realSize === 'small') return 'Button--small';\n\t\t\tif (realSize === 'large') return 'Button--large';\n\t\t};\n\n\t\tconst getWidth = () => {\n\t\t\tif (full) return 'full';\n\t\t\treturn width;\n\t\t};\n\n\t\tconst getWidthValue = () => {\n\t\t\tconst width = getWidth();\n\t\t\treturn width !== 'auto' && width !== 'full' ? width : false;\n\t\t};\n\n\t\tconst getWidthClass = () => {\n\t\t\treturn getWidth() === 'full' ? 'Button--full' : null;\n\t\t};\n\n\t\tconst getTypeAttribute = () => {\n\t\t\tif (type) return { type };\n\t\t\tif (getTagName() === 'button') return { type: 'button' };\n\t\t};\n\n\t\tReact.useEffect(() => {\n\t\t\tif (text)\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"@servicetitan/design-system: The `text` prop of the Button component has been deprecated. Please use `fill='subtle'` instead.\"\n\t\t\t\t);\n\n\t\t\tif (fill === 'none')\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"@servicetitan/design-system: The `fill='none'` prop of the Button component has been deprecated. Please use `fill='subtle'` instead.\"\n\t\t\t\t);\n\n\t\t\tif (getTagName() !== 'button' && !!getTypeAttribute())\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'@servicetitan/design-system: The Button component is using incompatible props. Only button elements can have type attributes.'\n\t\t\t\t);\n\n\t\t\tif (getTagName() !== 'a' && href)\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'@servicetitan/design-system: The Button component is using incompatible props. Only anchor elements can have href attributes.'\n\t\t\t\t);\n\t\t});\n\n\t\tconst hasContent = () => {\n\t\t\tif (children != null) return true;\n\t\t\tif (content != null) return true;\n\t\t\treturn false;\n\t\t};\n\n\t\tconst hasIcon = () => {\n\t\t\tif (iconName || icon) return true;\n\t\t\treturn false;\n\t\t};\n\n\t\tconst renderIcon = () => {\n\t\t\tif (!hasIcon()) return;\n\n\t\t\tlet ButtonIcon = null;\n\t\t\tif (iconName)\n\t\t\t\tButtonIcon = (\n\t\t\t\t\t<Icon className=\"Button__icon-svg\" name={iconName} />\n\t\t\t\t);\n\t\t\tif (icon) ButtonIcon = icon;\n\n\t\t\tconst ButtonIconClasses = classnames('Button__icon', {\n\t\t\t\t'Button__icon--left': hasContent() && iconPosition === 'left',\n\t\t\t\t'Button__icon--right': hasContent() && iconPosition === 'right',\n\t\t\t});\n\n\t\t\treturn <span className={ButtonIconClasses}>{ButtonIcon}</span>;\n\t\t};\n\n\t\tconst preventClicks = props.disabled || inactive || loading;\n\n\t\tconst ButtonClasses = classnames(\n\t\t\t'Button',\n\t\t\tclassName,\n\t\t\tgetColorClass(),\n\t\t\tgetFillClass(),\n\t\t\tgetSizeClass(),\n\t\t\tgetWidthClass(),\n\t\t\t{\n\t\t\t\t'Button--disabled': props.disabled,\n\t\t\t\t'Button--inactive': preventClicks,\n\t\t\t\t'Button--loading': loading,\n\t\t\t\t'Button--icon-only': !hasContent(),\n\t\t\t\t'Button--focus-visible': isFocusVisible,\n\t\t\t\t'Button--selected': selected,\n\t\t\t}\n\t\t);\n\n\t\tconst ButtonElement: any = getTagName();\n\n\t\t!hasContent() &&\n\t\t\t!props['aria-label'] &&\n\t\t\tconsole.warn(\n\t\t\t\t`Accessibility warning:\n\t\t\t\t\\naria-label attribute does not exist or is empty for button that does not have inner text that is visible to screen readers`\n\t\t\t);\n\n\t\treturn (\n\t\t\t<ButtonElement\n\t\t\t\tclassName={ButtonClasses}\n\t\t\t\tdisabled={preventClicks}\n\t\t\t\thref={href}\n\t\t\t\trole={getTagName() !== 'button' ? 'button' : null}\n\t\t\t\tstyle={{ width: getWidthValue() }}\n\t\t\t\ttabIndex={getTabIndex()}\n\t\t\t\tonFocus={focusFunction}\n\t\t\t\tonBlur={blurFunction}\n\t\t\t\tref={itemRef}\n\t\t\t\tdata-anvil-component=\"Button\"\n\t\t\t\t{...getTypeAttribute()}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"Button__content\">\n\t\t\t\t\t{iconPosition === 'left' && renderIcon()}\n\t\t\t\t\t{getContent({ children, content })}\n\t\t\t\t\t{iconPosition === 'right' && renderIcon()}\n\t\t\t\t</span>\n\t\t\t</ButtonElement>\n\t\t);\n\t}\n);\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC } from 'react';\nimport classnames from 'classnames';\nimport { Icon, IconPropsStrict } from '../Icon';\nimport { getContent } from '../../utilities/getContent';\n\n/**\n * Button properties\n */\nexport interface ButtonPropsStrict {\n\t/** Button Color */\n\tcolor?: 'primary' | 'blue' | 'default' | 'grey' | 'negative' | 'red';\n\n\t/** Additional classes */\n\tclassName?: string;\n\n\t/** Disabled button, unclickable */\n\tdisabled?: boolean;\n\n\t/** Set the component HTML element. Warning: Using non-standard markup can produce accessibility issues. */\n\tel?: 'button' | 'a' | 'span';\n\n\t/** Button Type. 'none' is deprecated, use 'subtle' instead. */\n\tfill?: 'solid' | 'outline' | 'none' | 'subtle';\n\n\t/** Shortcut for `width=\"full\"` */\n\tfull?: boolean;\n\n\t/** URL for Button. Turns into `<a>` tag. */\n\thref?: string;\n\n\t/** Custom Icon element. Use `iconName` to use default element. */\n\ticon?: React.ReactElement;\n\n\t/** Name of Icon to be inside Button. Use `icon` to pass a custom element. */\n\ticonName?: IconPropsStrict['name'];\n\n\t/** Position the icon */\n\ticonPosition?: 'left' | 'right';\n\n\t/** Unclicable button */\n\tinactive?: boolean;\n\n\t/** Shortcut for `size=\"large\"` */\n\tlarge?: boolean;\n\n\t/** Button with loading indicator */\n\tloading?: boolean;\n\n\t/** Shortcut for `color=\"negative\"` */\n\tnegative?: boolean;\n\n\t/** Shortcut for `fill=\"outline\"` */\n\toutline?: boolean;\n\n\t/** Shortcut for `color=\"primary\"` */\n\tprimary?: boolean;\n\n\t/** Selected State */\n\tselected?: boolean;\n\n\t/** Button Size */\n\tsize?: 'xsmall' | 'small' | 'medium' | 'large';\n\n\t/** Shortcut for `size=\"small\"` */\n\tsmall?: boolean;\n\n\t/** Deprecated. Shortcut for `fill=\"subtle\"` */\n\ttext?: boolean;\n\n\t/** Button Width */\n\twidth?: string | number | 'auto' | 'full';\n\n\t/** Shortcut for `size=\"small\"` */\n\txsmall?: boolean;\n}\n\nexport interface ButtonProps extends ButtonPropsStrict {\n\t/** Unstrict Props */\n\t[propName: string]: any;\n}\n\nconst defaultProps = {\n\tel: 'button',\n};\n\n/**\n * **Buttons** provide a possible user actions\n */\nexport const Button: FC<ButtonProps> = React.forwardRef(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tcolor = 'default',\n\t\t\tcontent,\n\t\t\tel: Element = defaultProps.el,\n\t\t\tfill = 'solid',\n\t\t\tfull,\n\t\t\thref,\n\t\t\ticon,\n\t\t\ticonName,\n\t\t\ticonPosition = 'left',\n\t\t\tinactive,\n\t\t\tlarge,\n\t\t\tloading,\n\t\t\tnegative,\n\t\t\toutline,\n\t\t\tprimary,\n\t\t\tselected,\n\t\t\tsize = 'medium',\n\t\t\tsmall,\n\t\t\ttext,\n\t\t\ttype,\n\t\t\twidth = 'auto',\n\t\t\txsmall,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\t...props\n\t\t},\n\t\tref: React.RefObject<HTMLElement>\n\t) => {\n\t\tconst getTagName = () => {\n\t\t\t// If `el` is passed in and isn't default, it is always used\n\t\t\tif (Element !== defaultProps.el) return Element;\n\n\t\t\t// If `href` is passed in, the element becomes an anchor\n\t\t\tif (href) return 'a';\n\n\t\t\t// Is default, use it\n\t\t\treturn Element;\n\t\t};\n\n\t\tconst getTabIndex = () => {\n\t\t\tif (props.tabIndex) return props.tabIndex;\n\t\t\tif (getTagName() !== 'button') 0;\n\t\t\treturn null;\n\t\t};\n\n\t\tconst getColorClass = () => {\n\t\t\tlet realColor = color;\n\n\t\t\t// Override string props with boolean values\n\t\t\tif (primary) realColor = 'primary';\n\t\t\tif (negative) realColor = 'negative';\n\n\t\t\tconst ButtonColorClasses: any = {\n\t\t\t\tprimary: 'Button--blue',\n\t\t\t\tblue: 'Button--blue',\n\t\t\t\tdefault: 'Button--grey',\n\t\t\t\tgrey: 'Button--grey',\n\t\t\t\tnegative: 'Button--red',\n\t\t\t\tred: 'Button--red',\n\t\t\t};\n\n\t\t\treturn ButtonColorClasses[realColor];\n\t\t};\n\n\t\tconst getFillClass = () => {\n\t\t\tlet realFill = fill;\n\t\t\tif (outline) realFill = 'outline';\n\t\t\tif (text || fill === 'subtle' || fill === 'none')\n\t\t\t\trealFill = 'subtle';\n\n\t\t\tif (realFill === 'solid') return 'Button--solid';\n\t\t\tif (realFill === 'outline') return 'Button--outline';\n\t\t\tif (realFill === 'subtle') return 'Button--subtle';\n\t\t};\n\n\t\tconst getSizeClass = () => {\n\t\t\tlet realSize = size;\n\t\t\tif (xsmall) realSize = 'xsmall';\n\t\t\tif (small) realSize = 'small';\n\t\t\tif (large) realSize = 'large';\n\n\t\t\tif (realSize === 'xsmall') return 'Button--xsmall';\n\t\t\tif (realSize === 'small') return 'Button--small';\n\t\t\tif (realSize === 'large') return 'Button--large';\n\t\t};\n\n\t\tconst getWidth = () => {\n\t\t\tif (full) return 'full';\n\t\t\treturn width;\n\t\t};\n\n\t\tconst getWidthValue = () => {\n\t\t\tconst width = getWidth();\n\t\t\treturn width !== 'auto' && width !== 'full' ? width : false;\n\t\t};\n\n\t\tconst getWidthClass = () => {\n\t\t\treturn getWidth() === 'full' ? 'Button--full' : null;\n\t\t};\n\n\t\tconst getTypeAttribute = () => {\n\t\t\tif (type) return { type };\n\t\t\tif (getTagName() === 'button') return { type: 'button' };\n\t\t};\n\n\t\tReact.useEffect(() => {\n\t\t\tif (text)\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"@servicetitan/design-system: The `text` prop of the Button component has been deprecated. Please use `fill='subtle'` instead.\"\n\t\t\t\t);\n\n\t\t\tif (fill === 'none')\n\t\t\t\tconsole.warn(\n\t\t\t\t\t\"@servicetitan/design-system: The `fill='none'` prop of the Button component has been deprecated. Please use `fill='subtle'` instead.\"\n\t\t\t\t);\n\n\t\t\tif (getTagName() !== 'button' && !!getTypeAttribute())\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'@servicetitan/design-system: The Button component is using incompatible props. Only button elements can have type attributes.'\n\t\t\t\t);\n\n\t\t\tif (getTagName() !== 'a' && href)\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'@servicetitan/design-system: The Button component is using incompatible props. Only anchor elements can have href attributes.'\n\t\t\t\t);\n\t\t});\n\n\t\tconst hasContent = () => {\n\t\t\tif (children != null) return true;\n\t\t\tif (content != null) return true;\n\t\t\treturn false;\n\t\t};\n\n\t\tconst hasIcon = () => {\n\t\t\tif (iconName || icon) return true;\n\t\t\treturn false;\n\t\t};\n\n\t\tconst renderIcon = () => {\n\t\t\tif (!hasIcon()) return;\n\n\t\t\tlet ButtonIcon = null;\n\t\t\tif (iconName)\n\t\t\t\tButtonIcon = (\n\t\t\t\t\t<Icon className=\"Button__icon-svg\" name={iconName} />\n\t\t\t\t);\n\t\t\tif (icon) ButtonIcon = icon;\n\n\t\t\tconst ButtonIconClasses = classnames('Button__icon', {\n\t\t\t\t'Button__icon--left': hasContent() && iconPosition === 'left',\n\t\t\t\t'Button__icon--right': hasContent() && iconPosition === 'right',\n\t\t\t});\n\n\t\t\treturn <span className={ButtonIconClasses}>{ButtonIcon}</span>;\n\t\t};\n\n\t\tconst preventClicks = props.disabled || inactive || loading;\n\n\t\tconst ButtonClasses = classnames(\n\t\t\t'Button',\n\t\t\tclassName,\n\t\t\tgetColorClass(),\n\t\t\tgetFillClass(),\n\t\t\tgetSizeClass(),\n\t\t\tgetWidthClass(),\n\t\t\t{\n\t\t\t\t'Button--disabled': props.disabled,\n\t\t\t\t'Button--inactive': preventClicks,\n\t\t\t\t'Button--loading': loading,\n\t\t\t\t'Button--icon-only': !hasContent(),\n\t\t\t\t'Button--selected': selected,\n\t\t\t}\n\t\t);\n\n\t\tconst ButtonElement: any = getTagName();\n\n\t\t!hasContent() &&\n\t\t\t!props['aria-label'] &&\n\t\t\tconsole.warn(\n\t\t\t\t`Accessibility warning:\n\t\t\t\t\\naria-label attribute does not exist or is empty for button that does not have inner text that is visible to screen readers`\n\t\t\t);\n\n\t\treturn (\n\t\t\t<ButtonElement\n\t\t\t\tclassName={ButtonClasses}\n\t\t\t\tdisabled={preventClicks}\n\t\t\t\thref={href}\n\t\t\t\trole={getTagName() !== 'button' ? 'button' : null}\n\t\t\t\tstyle={{ width: getWidthValue() }}\n\t\t\t\ttabIndex={getTabIndex()}\n\t\t\t\tref={ref}\n\t\t\t\tdata-anvil-component=\"Button\"\n\t\t\t\t{...getTypeAttribute()}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"Button__content\">\n\t\t\t\t\t{iconPosition === 'left' && renderIcon()}\n\t\t\t\t\t{getContent({ children, content })}\n\t\t\t\t\t{iconPosition === 'right' && renderIcon()}\n\t\t\t\t</span>\n\t\t\t</ButtonElement>\n\t\t);\n\t}\n);\n"]}

package/dist/components/Button/index.css

@@ -9,7 +9,7 @@
   align-items: center;
   background-color: var(--colorsSurfaceGrey, #eeeeee);
   border: 0;
-  border-radius: 3px;
+  border-radius: 6px;
   box-sizing: border-box;
   color: var(--colorsTextOnGrey, #444445);
   cursor: pointer;
@@ -19,14 +19,15 @@
   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;
+  transition: background cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, outline-offset cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   user-select: none;
   position: relative;
+  outline-offset: 0;
+  outline: solid 0 transparent;
 }
 .Button::before {
   content: "";
@@ -46,13 +47,13 @@
 .Button:active::before, .Button.Button--selected::before {
   background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
-.Button.Button--focus-visible:focus {
-  outline: 0;
-  box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
+.Button:focus-visible {
+  outline-offset: 2px;
+  outline: solid 2px var(--colorsBorderPrimary, #0265dc);
 }
 .Button.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #444445);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
 }
 .Button.Button--outline:hover::before {
   background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
@@ -60,9 +61,6 @@
 .Button.Button--outline:active::before, .Button.Button--outline.Button--selected::before {
   background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 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, #78bbfa);
-}
 .Button.Button--subtle {
   background-color: transparent;
 }
@@ -114,34 +112,31 @@ button.Button {
   color: var(--colorsTextOnPrimary, white);
 }
 .Button--blue:hover::before {
-  background-color: var(--colorsHoverOnPrimary, rgba(255, 255, 255, 0.16));
+  background-color: var(--colorsHoverOnGrey, rgba(20, 20, 20, 0.08));
 }
 .Button--blue:active::before, .Button--blue.Button--selected::before {
-  background-color: var(--colorsActiveOnPrimary, rgba(20, 20, 20, 0.16));
+  background-color: var(--colorsActiveOnGrey, rgba(20, 20, 20, 0.16));
 }
 .Button--blue.Button--outline {
   background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
   color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--outline:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
-}
-.Button--blue.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderPrimary, #0265dc), 0 0 0 3px var(--colorsFocusRingPrimary, #78bbfa);
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--outline:active::before, .Button--blue.Button--outline.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 .Button--blue.Button--subtle {
   background-color: transparent;
   color: var(--colorsTextPrimary, #0265dc);
 }
 .Button--blue.Button--subtle:hover::before {
-  background-color: var(--colorsHoverPrimary, rgba(2, 101, 220, 0.1));
+  background-color: var(--colorsHoverDefault, rgba(20, 20, 20, 0.08));
 }
 .Button--blue.Button--subtle:active::before, .Button--blue.Button--subtle.Button--selected::before {
-  background-color: var(--colorsActivePrimary, rgba(2, 101, 220, 0.3));
+  background-color: var(--colorsActiveDefault, rgba(20, 20, 20, 0.2));
 }
 
 .Button--red {
@@ -151,15 +146,15 @@ button.Button {
 .Button--red:hover::before {
   background-color: var(--colorsHoverOnCritical, rgba(255, 255, 255, 0.16));
 }
+.Button--red:focus-visible {
+  outline: solid 2px var(--colorsBorderCritical, #e13212);
+}
 .Button--red:active::before, .Button--red.Button--selected::before {
   background-color: var(--colorsActiveOnCritical, rgba(20, 20, 20, 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, #e13212);
+  box-shadow: inset 0 0 0 1px var(--colorsBorderDefault, #949596);
   color: var(--colorsTextCritical, #bf2a00);
 }
 .Button--red.Button--outline:hover::before {
@@ -168,9 +163,6 @@ button.Button {
 .Button--red.Button--outline:active::before, .Button--red.Button--outline.Button--selected::before {
   background-color: var(--colorsActiveCritical, rgba(225, 50, 18, 0.3));
 }
-.Button--red.Button--outline.Button--focus-visible:focus {
-  box-shadow: inset 0 0 0 1px var(--colorsBorderCritical, #e13212), 0 0 0 3px var(--colorsFocusRingCritical, #ffb2a0);
-}
 .Button--red.Button--subtle {
   background-color: transparent;
   color: var(--colorsTextCritical, #bf2a00);
@@ -183,19 +175,14 @@ button.Button {
 }
 
 .Button--disabled, .Button--disabled.Button--outline, .Button--disabled.Button--subtle {
-  background: var(--colorsSurfaceGrey, #eeeeee);
-  color: var(--colorsTextOnGrey, #444445);
+  background: #bcbcbd;
+  color: #606162;
+  box-shadow: none;
   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;

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

@@ -1 +1 @@
-{"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/core/tokens.scss"],"names":[],"mappings":"AAAA;AC0CA;ACvCC;EACA;AAEA;EACA;ECLC;EACA;EF2CD;EACA,kBArCoB;EAsCpB;EACA,eG5BiB;EH6BjB;EACA,OA/Cc;EAgDd;EACA;EACA,WGoFa;EHnFb,aGsDsB;EHrDtB;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,WGHa;EHIb;;;AAGD;EACC,SGpBW;EHqBX;;AAEA;EACC;;AAEA;EACC;EACA;;;AAKH;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKA;EAKC,OAjLa;;;AAqLf;EACC,kBA/KoB;EAgLpB,OApLiB;;AAuLhB;EACC,kBAhKgB;;AAsKjB;EACC,kBA/JiB;;AAmKnB;EACC;EACA;EACA,OAxMa;;AA2MZ;EACC,kBAtLY;;AA0Ld;EAAgC;;AAI/B;EACC,kBAvLa;;AA4LhB;EACC;EACA,OA5Na;;AA+NZ;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,OAlQc;;AAqQb;EACC,kBAhPa;;AAsPd;EACC,kBA/Oc;;AAmPhB;EAAgC;;AAGjC;EACC;EACA,OAtRc;;AAyRb;EACC,kBApQa;;AA0Qd;EACC,kBAnQc;;;AA2QjB;EAGC,YAxSmB;EAySnB,OA/Sa;EAgTb;;AAEA;EACC,SGrMgB;;AHyMlB;EAEC;;AAGD;EACC;;;AAIF;EAAoB;;;AAGpB;EACC,WGhMa;EHiMb;;AAEA;EACC,WGlMY;EHmMZ;;;AAMF;EAAwB,WG3MV;;;AH6Md;EACC;;AACA;EAAsB,SGlNR;;;AHqNf;EACC;;AACA;EAAsB;;;AAIvB;EAAgB;;;AAGhB;EAAsB;;;AAItB;EACC;IAAK;;;AAGN;EACC,SG3PkB;EH4PlB;EACA;;AAEA;EAAmB;;;AAGpB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EAAsB,eGvQV;;;AHwQZ;EAAuB,cGxQX;;;AH0QZ;EAA2B;;;AAE3B;EACC;EACA;;;AAGD;EAAoD","file":"index.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/core/tokens.scss","../../../node_modules/@servicetitan/tokens/core/appearances/light.scss"],"names":[],"mappings":"AAAA;ACoCA;ACjCC;EACA;AAEA;EACA;ECLC;EACA;EFqCD;EACA,kBA/BoB;EAgCpB;EACA,eGrBiB;EHsBjB;EACA,OAzCc;EA0Cd;EACA;EACA,WG0Fa;EHzFb,aG4DsB;EH3DtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACC;EAID;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC,kBAzDa;;AA+Dd;EACC,kBA1Dc;;AA8DhB;EACC;EACA,SA9Ec;;AAiFf;EACC;EACA;;AAGC;EACC,kBA5EY;;AAkFb;EACC,kBA7Ea;;AAkFhB;EACC;;AAGC;EACC,kBA7FY;;AAmGb;EACC,kBA9Fa;;;AAsGjB;EACC,WGEa;EHDb;;;AAGD;EACC,SGfW;EHgBX;;AAEA;EACC;;AAEA;EACC;EACA;;;AAKH;AAAA;EAEC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKA;EAKC,OA5Ka;;;AAgLf;EACC,kBA1KoB;EA2KpB,OA/KiB;;AAkLhB;EACC,kBA/Ja;;AAqKd;EACC,kBAhKc;;AAoKhB;EACC;EACA;EACA,OAnMa;;AAsMZ;EACC,kBApLY;;AA0Lb;EACC,kBArLa;;AA0LhB;EACC;EACA,OArNa;;AAwNZ;EACC,kBAtMY;;AA4Mb;EACC,kBAvMa;;;AA6MjB;EACC,kBAhOqB;EAiOrB,OArOkB;;AAwOjB;EACC,kBArNiB;;AAyNnB;EACC,SApOe;;AAyOf;EACC,kBA1NkB;;AA8NpB;EACC;EACA;EACA,OA7Pc;;AAgQb;EACC,kBA9Oa;;AAoPd;EACC,kBA/Oc;;AAoPjB;EACC;EACA,OA/Qc;;AAkRb;EACC,kBAhQa;;AAsQd;EACC,kBAjQc;;;AAyQjB;EAGC,YI5PkC;EJ6PlC,OIhPyB;EJiPzB;EACA;;AAEA;EACC,SG/LgB;;;AHoMnB;EAAoB;;;AAGpB;EACC,WGjLa;EHkLb;;AAEA;EACC,WGnLY;EHoLZ;;;AAMF;EAAwB,WG5LV;;;AH8Ld;EACC;;AACA;EAAsB,SGnMR;;;AHsMf;EACC;;AACA;EAAsB;;;AAIvB;EAAgB;;;AAGhB;EAAsB;;;AAItB;EACC;IAAK;;;AAGN;EACC,SG5OkB;EH6OlB;EACA;;AAEA;EAAmB;;;AAGpB;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EAAsB,eGxPV;;;AHyPZ;EAAuB,cGzPX;;;AH2PZ;EAA2B;;;AAE3B;EACC;EACA;;;AAGD;EAAoD","file":"index.css"}

package/dist/components/Checkbox/Checkbox.css

@@ -228,7 +228,7 @@
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderDefault, #444445);
+  border-color: var(--colorsBorderDefault, #949596);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
   border-color: var(--colorsBorderCritical, #e13212);

package/dist/components/Checkbox/index.css

@@ -228,7 +228,7 @@
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderDefault, #444445);
+  border-color: var(--colorsBorderDefault, #949596);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
   border-color: var(--colorsBorderCritical, #e13212);

package/dist/components/DatePicker/DatePicker.css

@@ -228,7 +228,7 @@
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderDefault, #444445);
+  border-color: var(--colorsBorderDefault, #949596);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
   border-color: var(--colorsBorderCritical, #e13212);

package/dist/components/DatePicker/index.css

@@ -228,7 +228,7 @@
   box-shadow: 0 0 0 4px var(--colorsBorderPrimarySubdued, #b5deff);
 }
 .a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
-  border-color: var(--colorsBorderDefault, #444445);
+  border-color: var(--colorsBorderDefault, #949596);
 }
 .Checkbox--error.a-Checkbox:not(.Checkbox--disabled):hover .Checkbox__box {
   border-color: var(--colorsBorderCritical, #e13212);

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -101,18 +101,33 @@ export const DateRangePicker = (_a) => {
         if (event.nativeEvent.target.className === 'k-nav-today') {
             event.syntheticEvent.stopPropagation();
             const today = DateTime.now().setZone(timezone);
-            if (event.target.activeRangeEnd === 'start') {
-                eventValue = {
-                    start: iValue.start ? iValue.start : undefined,
-                    end: today.endOf('day'),
-                };
-            }
-            if (event.target.activeRangeEnd === 'end') {
+            if (iValue.start && iValue.end) {
+                // reset selection if both values are already filled
                 eventValue = {
                     start: today.startOf('day'),
-                    end: iValue.end ? iValue.end : undefined,
                 };
             }
+            else {
+                if (event.target.activeRangeEnd === 'start') {
+                    eventValue = {
+                        start: iValue.start ? iValue.start : undefined,
+                        end: today.endOf('day'),
+                    };
+                }
+                if (event.target.activeRangeEnd === 'end') {
+                    eventValue = {
+                        start: today.startOf('day'),
+                        end: iValue.end ? iValue.end : undefined,
+                    };
+                }
+                if (eventValue.start > eventValue.end) {
+                    const reverseEventValue = {
+                        start: eventValue.end,
+                        end: eventValue.start,
+                    };
+                    eventValue = reverseEventValue;
+                }
+            }
             setIValue(eventValue);
             return;
         }