@servicetitan/design-system 11.3.0 → 11.4.1

package/dist/components/SideNav/SideNav.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACKA;ACJC;EACA,OCiBa;ADfb;EACA;EDGA;EACA,OEUa;EFTb,SEiHW;;AF/GX;EACC,aE6GU;EF5GV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;;;AAGD;EGzBC;EACA;EACA;EACA;EACA;EHwBA,aE8FW","file":"SideNav.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SE8GW;;AF5GX;EACC,aE0GU;EFzGV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE0FW","file":"SideNav.css"}

package/dist/components/SideNav/SideNav.js

@@ -17,8 +17,8 @@ import { Headline } from '../Headline';
 export const SideNav = (_a) => {
     var { children, className, title } = _a, rest = __rest(_a, ["children", "className", "title"]);
     const SideNavClasses = classnames('SideNav', className);
-    return (React.createElement("div", Object.assign({ className: SideNavClasses }, rest),
-        title !== undefined && (React.createElement(Headline, { el: "div", className: "SideNav__title c-neutral-200", size: "small" }, title)),
+    return (React.createElement("div", Object.assign({ className: SideNavClasses, "data-anvil-component": "SideNav" }, rest),
+        title !== undefined && (React.createElement(Headline, { el: "div", className: "SideNav__title", size: "small" }, title)),
         React.createElement("ul", { className: "SideNav__list" }, children)));
 };
 SideNav.Item = SideNavItem;

package/dist/components/SideNav/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNav.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwBvC,MAAM,CAAC,MAAM,OAAO,GAAY,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACrE,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACN,2CAAK,SAAS,EAAE,cAAc,IAAM,IAAI;QACtC,KAAK,KAAK,SAAS,IAAI,CACvB,oBAAC,QAAQ,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,8BAA8B,EACxC,IAAI,EAAC,OAAO,IAEX,KAAK,CACI,CACX;QACD,4BAAI,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAM,CACxC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC;AAC3B,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC"}
+{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNav.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwBvC,MAAM,CAAC,MAAM,OAAO,GAAY,CAAC,EAAuC,EAAE,EAAE;QAA3C,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACrE,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACN,2CACC,SAAS,EAAE,cAAc,0BACJ,SAAS,IAC1B,IAAI;QAEP,KAAK,KAAK,SAAS,IAAI,CACvB,oBAAC,QAAQ,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,IACxD,KAAK,CACI,CACX;QACD,4BAAI,SAAS,EAAC,eAAe,IAAE,QAAQ,CAAM,CACxC,CACN,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,CAAC,IAAI,GAAG,WAAW,CAAC;AAC3B,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC"}

package/dist/components/SideNav/SideNavGroup.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNavGroup.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACGA;EACC,YCyHW;;ADvHX;EAA+B,YCqHpB;;;ADlHZ;EACC;;;AAGD;EEZC;EACA;EACA;EACA;EACA","file":"SideNavGroup.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNavGroup.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACGA;EACC,YC0HW;;ADxHX;EAA+B,YCsHpB;;;ADnHZ;EACC;;;AAGD;EEZC;EACA;EACA;EACA;EACA","file":"SideNavGroup.css"}

package/dist/components/SideNav/SideNavGroup.js

@@ -15,7 +15,7 @@ import { Eyebrow } from '../Eyebrow';
 export const SideNavGroup = (_a) => {
     var { children, className, title } = _a, props = __rest(_a, ["children", "className", "title"]);
     const SideNavItemClasses = classnames('SideNavGroup', className);
-    return (React.createElement("li", Object.assign({ className: SideNavItemClasses }, props),
+    return (React.createElement("li", Object.assign({ className: SideNavItemClasses, "data-anvil-component": "SideNavGroup" }, props),
         title !== undefined && (React.createElement(Eyebrow, { className: "SideNavGroup__title", size: "medium" }, title)),
         React.createElement("ul", { className: "SideNavGroup__list" }, children)));
 };

package/dist/components/SideNav/SideNavGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavGroup.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNavGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkBrC,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAKnD,EAAE,EAAE;QAL+C,EACnD,QAAQ,EACR,SAAS,EACT,KAAK,OAEL,EADG,KAAK,cAJ2C,kCAKnD,CADQ;IAER,MAAM,kBAAkB,GAAG,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,CACN,0CAAI,SAAS,EAAE,kBAAkB,IAAM,KAAK;QAC1C,KAAK,KAAK,SAAS,IAAI,CACvB,oBAAC,OAAO,IAAC,SAAS,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,IACpD,KAAK,CACG,CACV;QACD,4BAAI,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAC9C,CACL,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"SideNavGroup.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNavGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAkBrC,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAKnD,EAAE,EAAE;QAL+C,EACnD,QAAQ,EACR,SAAS,EACT,KAAK,OAEL,EADG,KAAK,cAJ2C,kCAKnD,CADQ;IAER,MAAM,kBAAkB,GAAG,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,CACN,0CACC,SAAS,EAAE,kBAAkB,0BACR,cAAc,IAC/B,KAAK;QAER,KAAK,KAAK,SAAS,IAAI,CACvB,oBAAC,OAAO,IAAC,SAAS,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,IACpD,KAAK,CACG,CACV;QACD,4BAAI,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAC9C,CACL,CAAC;AACH,CAAC,CAAC"}

package/dist/components/SideNav/SideNavItem.css

@@ -1,4 +1,37 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.SideNav {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #040404);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  box-sizing: border-box;
+  color: var(--colorsTextDefault, #141414);
+  padding: 16px;
+}
+.SideNav .Tag {
+  margin-left: 8px;
+  transform: translateY(-1px);
+}
+.SideNav a {
+  text-decoration: none;
+}
+
+.SideNav__title {
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  margin: 0 16px;
+  padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
+}
+
+.SideNav__list {
+  list-style: none;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-top: 0;
+  padding-left: 0;
+  padding-top: 16px;
+}
+
 .SideNavItem {
   margin: 0;
   padding: 0;
@@ -6,7 +39,7 @@
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -19,11 +52,11 @@
   outline: none;
 }
 .SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: #ecf4fd;
-  color: #2270ee;
+  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .SideNavItem--active .SideNavItem__button {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 /*# sourceMappingURL=SideNavItem.css.map */

package/dist/components/SideNav/SideNavItem.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNavItem.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACGA;EACC;EACA;;;AAGD;EACC,eCDiB;EDEjB,OCSa;EDRb,aC8FqB;ED7FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YCMe;EDLf,OCQe;;ADLhB;EAAyB,OCKT","file":"SideNavItem.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SE8GW;;AF5GX;EACC,aE0GU;EFzGV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE0FW;;;AErHZ;EACC;EACA;;;AAGD;EACC,eFLiB;EEMjB,OJTc;EIUd,aF2FqB;EE1FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YAvBiB;EAwBjB,OAvBW;;AA0BZ;EAAyB,OA1Bb","file":"SideNavItem.css"}

package/dist/components/SideNav/SideNavItem.js

@@ -31,7 +31,7 @@ export const SideNavItem = (_a) => {
     const SideNavItemButtonClasses = classnames('SideNavItem__button', {
         'SideNavItem__button--focus-visible': isFocusVisible,
     });
-    return (React.createElement("li", Object.assign({ className: SideNavItemClasses }, props),
+    return (React.createElement("li", Object.assign({ className: SideNavItemClasses, "data-anvil-component": "SideNavItem" }, props),
         React.createElement(BodyText, Object.assign({ ref: itemRef, onFocus: focusFunction, onBlur: blurFunction, tabIndex: 0, el: El, size: "small", className: SideNavItemButtonClasses, onClick: onClickHandler }, buttonProps), children)));
 };
 //# sourceMappingURL=SideNavItem.js.map

package/dist/components/SideNav/SideNavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItem.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNavItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwB9D,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EASjD,EAAE,EAAE;QAT6C,EACjD,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,OAAO,EACP,OAAO,EACP,MAAM,OAEN,EADG,KAAK,cARyC,2EASjD,CADQ;IAER,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEnC,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,CACtE,OAAO,EACP,MAAM,EACN,OAAO,CACP,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAoC,EAAE,EAAE;QAC/D,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,OAAO,CAAC,CAAC,CAAC,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAC/B,MAAM,WAAW,GAAG,EAAE,IAAI,EAAE,CAAC;IAE7B,MAAM,kBAAkB,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE;QAC/D,qBAAqB,EAAE,MAAM;KAC7B,CAAC,CAAC;IAEH,MAAM,wBAAwB,GAAG,UAAU,CAAC,qBAAqB,EAAE;QAClE,oCAAoC,EAAE,cAAc;KACpD,CAAC,CAAC;IAEH,OAAO,CACN,0CAAI,SAAS,EAAE,kBAAkB,IAAM,KAAK;QAC3C,oBAAC,QAAQ,kBACR,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,wBAAwB,EACnC,OAAO,EAAE,cAAc,IACnB,WAAW,GAEd,QAAQ,CACC,CACP,CACL,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"SideNavItem.js","sourceRoot":"","sources":["../../../src/components/SideNav/SideNavItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwB9D,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EASjD,EAAE,EAAE;QAT6C,EACjD,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,OAAO,EACP,OAAO,EACP,MAAM,OAEN,EADG,KAAK,cARyC,2EASjD,CADQ;IAER,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEnC,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,CACtE,OAAO,EACP,MAAM,EACN,OAAO,CACP,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAoC,EAAE,EAAE;QAC/D,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,OAAO,CAAC,CAAC,CAAC,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAC/B,MAAM,WAAW,GAAG,EAAE,IAAI,EAAE,CAAC;IAE7B,MAAM,kBAAkB,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE;QAC/D,qBAAqB,EAAE,MAAM;KAC7B,CAAC,CAAC;IAEH,MAAM,wBAAwB,GAAG,UAAU,CAAC,qBAAqB,EAAE;QAClE,oCAAoC,EAAE,cAAc;KACpD,CAAC,CAAC;IAEH,OAAO,CACN,0CACC,SAAS,EAAE,kBAAkB,0BACR,aAAa,IAC9B,KAAK;QAET,oBAAC,QAAQ,kBACR,GAAG,EAAE,OAAO,EACZ,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,wBAAwB,EACnC,OAAO,EAAE,cAAc,IACnB,WAAW,GAEd,QAAQ,CACC,CACP,CACL,CAAC;AACH,CAAC,CAAC"}

package/dist/components/SideNav/index.css

@@ -1,11 +1,11 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .SideNav {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   box-sizing: border-box;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
 .SideNav .Tag {
@@ -17,9 +17,10 @@
 }
 
 .SideNav__title {
-  border-bottom: 1px solid #dfe0e1;
+  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
   margin: 0 16px;
   padding: 8px 0 24px;
+  color: var(--colorsTextOnGrey, #444445);
 }
 
 .SideNav__list {
@@ -38,7 +39,7 @@
 
 .SideNavItem__button {
   border-radius: 3px;
-  color: #141414;
+  color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
   display: block;
@@ -51,11 +52,11 @@
   outline: none;
 }
 .SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: #ecf4fd;
-  color: #2270ee;
+  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+  color: var(--colorsTextPrimary, #2270ee);
 }
 .SideNavItem--active .SideNavItem__button {
-  color: #2270ee;
+  color: var(--colorsTextPrimary, #2270ee);
 }
 
 .SideNavGroup {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss","../../../src/components/SideNav/SideNavGroup.scss"],"names":[],"mappings":"AAAA;ACKA;ACJC;EACA,OCiBa;ADfb;EACA;EDGA;EACA,OEUa;EFTb,SEiHW;;AF/GX;EACC,aE6GU;EF5GV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;;;AAGD;EGzBC;EACA;EACA;EACA;EACA;EHwBA,aE8FW;;;AExHZ;EACC;EACA;;;AAGD;EACC,eFDiB;EEEjB,OFSa;EERb,aF8FqB;EE7FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YFMe;EELf,OFQe;;AELhB;EAAyB,OFKT;;;AG7BjB;EACC,YHyHW;;AGvHX;EAA+B,YHqHpB;;;AGlHZ;EACC;;;AAGD;EFZC;EACA;EACA;EACA;EACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/SideNav/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss","../../../src/components/SideNav/SideNavGroup.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SE8GW;;AF5GX;EACC,aE0GU;EFzGV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE0FW;;;AErHZ;EACC;EACA;;;AAGD;EACC,eFLiB;EEMjB,OJTc;EIUd,aF2FqB;EE1FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YAvBiB;EAwBjB,OAvBW;;AA0BZ;EAAyB,OA1Bb;;;ACFb;EACC,YH0HW;;AGxHX;EAA+B,YHsHpB;;;AGnHZ;EACC;;;AAGD;EFZC;EACA;EACA;EACA;EACA","file":"index.css"}

package/dist/components/Sidebar/Sidebar.css

@@ -1,7 +1,7 @@
 /* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
 .Sidebar {
   /* Set color on root of component. It can be overridden after the @include */
-  color: #141414;
+  color: var(--colorsTextDefault, #040404);
   /* Make sure font-family goes across entire component */
   font-family: "Nunito Sans", sans-serif;
   z-index: 10;
@@ -21,7 +21,7 @@
   width: 239px;
   transition: width 0.25s, opacity 0.25s;
   position: relative;
-  border-right: 1px solid #dfe0e1;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
 }
 
 .Sidebar__content {
@@ -41,21 +41,23 @@
 .Page.bg-neutral-10 .Sidebar__content,
 .Sidebar__toggle-button,
 .Page.bg-neutral-10 .Sidebar__toggle-button {
-  background: #ffffff;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Page.bg-white .Sidebar__wrapper, .Page.bg-neutral-0 .Sidebar__wrapper,
 .Page.bg-white .Sidebar__content,
 .Page.bg-neutral-0 .Sidebar__content,
 .Page.bg-white .Sidebar__toggle-button,
 .Page.bg-neutral-0 .Sidebar__toggle-button {
-  background: #fcfcfc;
+  background: var(--colorsAppBackground, #fcfcfc);
 }
 
 .Sidebar--collapsed {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__wrapper {
   width: 29px;
+  transition: width 0.25s;
 }
 .Sidebar--collapsed .Sidebar__content {
   visibility: hidden;
@@ -73,6 +75,10 @@
   width: 239px;
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
 }
+.Sidebar--temporary .Sidebar__content {
+  visibility: visible;
+  opacity: 1;
+}
 
 .Sidebar--touch .Sidebar__wrapper {
   min-height: 50px;
@@ -86,19 +92,23 @@
 }
 
 .Sidebar__toggle-button {
-  border: 1px solid #dfe0e1;
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
   border-radius: 16px;
   box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
   opacity: 0;
   transition: opacity 0.25s;
   padding: 3px !important;
+  background: var(--colorsSurfaceDefault, #ffffff);
 }
 .Sidebar__toggle-button:hover {
-  background-color: #ecf4fd;
-  color: #2270ee;
-  border-color: #2270ee;
+  background: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextPrimary, #2270ee);
+  border-color: var(--colorsTextPrimary, #2270ee);
   box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
 }
+.Sidebar__toggle-button:hover::before {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
 
 .Sidebar__toggle-button-wrapper {
   position: absolute;

package/dist/components/Sidebar/Sidebar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/dist/tokens.scss"],"names":[],"mappings":"AAAA;ACUA;ACTC;EACA,OCiBa;ADfb;EACA;EDQA;EACA;EACA;EACA,OAbe;EAcf;;AAEA;AAAA;EAEC;EACA;;;AAIF;EACC;EACA,OAzBe;EA0Bf;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YEhCX;;AFkCb;AAAA;AAAA;AAAA;AAAA;EACuB,YEjBL;;;AFoBnB;EACC,OArDyB;;AAuDzB;EACC,OAxDwB;;AA2DzB;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OAzEyB;;AA2EzB;EACC,OA7Ec;EA8Ed;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eA1F6B;;;AA8F/B;EACC;EACA,eA/F6B;EAgG7B;EACA;EACA;EACA;;AAEA;EACC,kBEhFe;EFiFf,OE9Ee;EF+Ef,cE/Ee;EFgFf;;;AAIF;EACC;EACA,KA9G2B;EA+G3B;EACA","file":"Sidebar.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACiBA;AChBC;EACA;AAEA;EACA;EDeA;EACA;EACA;EACA,OApBe;EAqBf;;AAEA;AAAA;EAEC;EACA;;;AAIF;EACC;EACA,OAhCe;EAiCf;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YA/CJ;;AAiDpB;AAAA;AAAA;AAAA;AAAA;EACuB,YAhDN;;;AAmDlB;EACC,OA5DyB;EA6DzB;;AAEA;EACC,OAhEwB;EAiExB;;AAGD;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OAlFyB;;AAoFzB;EACC,OAtFc;EAuFd;;AAGD;EACC;EACA;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eAxG6B;;;AA4G/B;EACC;EACA,eA7G6B;EA8G7B;EACA;EACA;EACA;EACA,YA1G2B;;AA4G3B;EACC,YA7G0B;EA8G1B,OA/GkB;EAgHlB,cAhHkB;EAiHlB;;AAEA;EACC,kBArHuB;;;AA0H1B;EACC;EACA,KAjI2B;EAkI3B;EACA","file":"Sidebar.css"}

package/dist/components/Sidebar/Sidebar.js

@@ -9,136 +9,80 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import { debounce } from '../../utilities/debounce';
-import { ToggleButton } from './ToggleButton';
+import { useScreenSize } from '../../hooks/useScreenSize';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
 import { SidebarSection } from './SidebarSection';
 export const Sidebar = (_a) => {
     var { el: Element = 'div', className, localStorageKey, children } = _a, rest = __rest(_a, ["el", "className", "localStorageKey", "children"]);
-    const breakpoint = 992;
-    const hoverDelay = 300;
-    const hoverTimeout = useRef();
     const sidebarRef = useRef();
-    const pointerId = useRef();
     const getInitialOpen = () => {
         const wasPreviouslyOpen = typeof window !== 'undefined' &&
             window.localStorage.getItem(localStorageKey);
-        return {
-            value: wasPreviouslyOpen ? JSON.parse(wasPreviouslyOpen) : true,
-            temporary: false,
-        };
+        return wasPreviouslyOpen ? JSON.parse(wasPreviouslyOpen) : true;
     };
-    const [isDisplaySmall, setIsDisplaySmall] = useState(false);
-    const [openOnLargeDisplay, setOpenOnLargeDisplay] = useState(getInitialOpen());
-    const [openOnSmallDisplay, setOpenOnSmallDisplay] = useState(false);
-    const isOpen = (isDisplaySmall && openOnSmallDisplay) ||
-        (!isDisplaySmall && openOnLargeDisplay.value);
-    const isTemporary = isDisplaySmall || (!isDisplaySmall && openOnLargeDisplay.temporary);
+    const screensize = useScreenSize();
+    const isDisplaySmall = screensize.smallerThan.desktop;
+    const [isHover, setIsHover] = useState(false);
+    const [isTempOpen, setIsTempOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(getInitialOpen());
+    const hoverTimeout = useRef();
     const isTouchScreen = typeof window !== 'undefined' &&
         window.matchMedia('(pointer:coarse)').matches;
-    const open = useCallback((options) => {
-        var _a;
-        clearTimeout(hoverTimeout.current);
-        if (isDisplaySmall) {
-            setOpenOnSmallDisplay(true);
-        }
-        else {
-            setOpenOnLargeDisplay({
-                value: true,
-                temporary: (_a = options.temporary) !== null && _a !== void 0 ? _a : false,
-            });
-        }
-    }, [isDisplaySmall]);
-    const close = useCallback(() => {
-        clearTimeout(hoverTimeout.current);
-        if (isDisplaySmall) {
-            setOpenOnSmallDisplay(false);
-        }
-        else {
-            setOpenOnLargeDisplay({
-                value: false,
-                temporary: false,
-            });
-        }
-    }, [isDisplaySmall]);
-    const handlePointerEnter = (e) => {
-        if (e.pointerType === 'mouse') {
-            clearTimeout(hoverTimeout.current);
-            if (isOpen)
-                return;
-            hoverTimeout.current = setTimeout(() => open({ temporary: true }), hoverDelay);
-        }
-    };
-    const handlePointerLeave = (e) => {
-        var _a;
-        if (e.pointerType === 'mouse') {
-            clearTimeout(hoverTimeout.current);
-            if (!isOpen || (isOpen && !isTemporary))
-                return;
-            if (e.relatedTarget.nodeType &&
-                ((_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)))
-                return;
-            hoverTimeout.current = setTimeout(() => close(), hoverDelay);
-        }
-    };
-    const handlePointerDown = (e) => {
-        if (isDisplaySmall && e.pointerType === 'touch')
-            pointerId.current = e.pointerId;
-    };
-    const handlePointerUp = (e) => {
-        if (isDisplaySmall &&
-            e.pointerType === 'touch' &&
-            e.pointerId === pointerId.current) {
-            if (isOpen)
-                return;
-            open({ temporary: true });
-            pointerId.current = undefined;
-        }
-    };
-    const calcDisplaySmall = () => {
-        const windowWidth = Math.min(window.innerWidth, window.outerWidth);
-        return windowWidth < breakpoint;
-    };
     const SidebarClasses = classnames('Sidebar', className, {
-        'Sidebar--collapsed': !isOpen,
-        'Sidebar--temporary': isOpen && isTemporary,
+        'Sidebar--collapsed': !isOpen || isDisplaySmall,
+        'Sidebar--temporary': isTempOpen,
         'Sidebar--touch': isTouchScreen,
     });
     const toggleButtonClasses = classnames('Sidebar__toggle-button', {
-        'Sidebar__toggle-button-visible': isTemporary || isTouchScreen || !isOpen,
+        'Sidebar__toggle-button-visible': isTouchScreen || !isOpen,
     });
+    const iconName = isDisplaySmall && isTempOpen
+        ? 'keyboard_arrow_left'
+        : isDisplaySmall && !isTempOpen
+            ? 'keyboard_arrow_right'
+            : isOpen
+                ? 'keyboard_arrow_left'
+                : 'keyboard_arrow_right';
+    const size = isTouchScreen ? 'medium' : 'small';
+    const [tooltipText, setTooltipText] = useState();
     useEffect(() => {
-        const handleWindowResize = () => setIsDisplaySmall(calcDisplaySmall());
-        const handleWindowResizeDebounced = debounce(handleWindowResize, 150);
-        window.addEventListener('resize', handleWindowResizeDebounced);
-        handleWindowResize();
-        return () => window.removeEventListener('resize', handleWindowResizeDebounced);
-    }, []);
-    useEffect(() => {
-        if (!openOnLargeDisplay.temporary) {
-            localStorage.setItem(localStorageKey, JSON.stringify(openOnLargeDisplay.value));
-        }
-    }, [openOnLargeDisplay, localStorageKey]);
-    useEffect(() => {
-        const handleTapOutside = (e) => {
-            var _a;
-            if (isOpen &&
-                isTemporary &&
-                !((_a = sidebarRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                close();
-            }
+        const getTooltipText = () => {
+            if (isTempOpen)
+                return 'Keep sidebar open';
+            if (!isOpen)
+                return 'Open sidebar';
+            return 'Close sidebar';
         };
-        window.addEventListener('touchend', handleTapOutside);
-        return () => window.removeEventListener('touchend', handleTapOutside);
-    }, [isOpen, isTemporary, close]);
+        setTooltipText(getTooltipText());
+    }, [isDisplaySmall, isHover, isOpen, isTempOpen]);
+    const handleHover = (state, delay = 300) => {
+        clearTimeout(hoverTimeout.current);
+        if (!isOpen || isDisplaySmall) {
+            setIsHover(state);
+            hoverTimeout.current = setTimeout(() => {
+                setIsTempOpen(state);
+            }, delay);
+        }
+    };
+    const open = () => {
+        if (!isDisplaySmall) {
+            handleHover(false, 0);
+            setIsOpen(!isOpen);
+            return;
+        }
+        setIsTempOpen(!isTempOpen);
+    };
     useEffect(() => {
-        return () => clearTimeout(hoverTimeout.current);
-    }, []);
-    return (React.createElement(Element, Object.assign({ className: SidebarClasses, ref: sidebarRef }, rest),
+        localStorage.setItem(localStorageKey, JSON.stringify(isOpen));
+    }, [localStorageKey, isOpen]);
+    return (React.createElement(Element, Object.assign({ className: SidebarClasses, ref: sidebarRef, "data-anvil-component": "Sidebar" }, rest),
         React.createElement("div", { className: "Sidebar__wrapper" },
-            React.createElement(ToggleButton, { className: toggleButtonClasses, isTouchScreen: isTouchScreen, isDisplaySmall: isDisplaySmall, openOnLargeDisplay: openOnLargeDisplay, openOnSmallDisplay: openOnSmallDisplay, open: open, close: close, onPointerEnter: () => clearTimeout(hoverTimeout.current), onPointerLeave: handlePointerLeave }),
-            React.createElement("div", { className: "Sidebar__content-wrapper", onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp },
+            React.createElement(Tooltip, { hoverOnly: true, className: "Sidebar__toggle-button-wrapper", direction: "r", text: tooltipText },
+                React.createElement(Button, { className: toggleButtonClasses, onClick: open, iconName: iconName, size: size, onMouseOver: () => clearTimeout(hoverTimeout.current), onMouseLeave: () => isTempOpen && handleHover(false) })),
+            React.createElement("div", { className: "Sidebar__content-wrapper", onMouseOver: () => handleHover(true), onMouseLeave: () => handleHover(false) },
                 React.createElement("div", { className: "Sidebar__content" }, children)))));
 };
 Sidebar.Section = SidebarSection;

package/dist/components/Sidebar/Sidebar.js.map

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

package/dist/components/Sidebar/SidebarSection.css

@@ -1,5 +1,124 @@
+/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
+.Sidebar {
+  /* Set color on root of component. It can be overridden after the @include */
+  color: var(--colorsTextDefault, #040404);
+  /* Make sure font-family goes across entire component */
+  font-family: "Nunito Sans", sans-serif;
+  z-index: 10;
+  flex-grow: 1;
+  flex-shrink: 0;
+  width: 239px;
+  transition: width 0.25s;
+}
+.Sidebar:hover .Sidebar__toggle-button,
+.Sidebar .Sidebar__toggle-button-visible {
+  opacity: 1;
+  transition: opacity 0.25s;
+}
+
+.Sidebar__wrapper {
+  min-height: 46px;
+  width: 239px;
+  transition: width 0.25s, opacity 0.25s;
+  position: relative;
+  border-right: 1px solid var(--colorsBorderGrey, #dfe0e1);
+}
+
+.Sidebar__content {
+  transition: opacity 0.25s, visibility 0.25s;
+  overflow: auto;
+}
+
+.Sidebar,
+.Sidebar__wrapper,
+.Sidebar__content-wrapper,
+.Sidebar__content {
+  height: 100%;
+}
+
+.Sidebar__wrapper, .Page.bg-neutral-10 .Sidebar__wrapper,
+.Sidebar__content,
+.Page.bg-neutral-10 .Sidebar__content,
+.Sidebar__toggle-button,
+.Page.bg-neutral-10 .Sidebar__toggle-button {
+  background: var(--colorsSurfaceDefault, #ffffff);
+}
+.Page.bg-white .Sidebar__wrapper, .Page.bg-neutral-0 .Sidebar__wrapper,
+.Page.bg-white .Sidebar__content,
+.Page.bg-neutral-0 .Sidebar__content,
+.Page.bg-white .Sidebar__toggle-button,
+.Page.bg-neutral-0 .Sidebar__toggle-button {
+  background: var(--colorsAppBackground, #fcfcfc);
+}
+
+.Sidebar--collapsed {
+  width: 29px;
+  transition: width 0.25s;
+}
+.Sidebar--collapsed .Sidebar__wrapper {
+  width: 29px;
+  transition: width 0.25s;
+}
+.Sidebar--collapsed .Sidebar__content {
+  visibility: hidden;
+  overflow: hidden;
+  opacity: 0;
+}
+.Sidebar--collapsed .Sidebar__toggle-button:not(:hover) {
+  box-shadow: none;
+}
+
+.Sidebar--temporary {
+  width: 29px;
+}
+.Sidebar--temporary .Sidebar__wrapper {
+  width: 239px;
+  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
+}
+.Sidebar--temporary .Sidebar__content {
+  visibility: visible;
+  opacity: 1;
+}
+
+.Sidebar--touch .Sidebar__wrapper {
+  min-height: 50px;
+}
+.Sidebar--touch .Sidebar__toggle-button-wrapper {
+  right: -20px;
+}
+.Sidebar--touch .Sidebar__toggle-button {
+  padding: 7px !important;
+  border-radius: 20px;
+}
+
+.Sidebar__toggle-button {
+  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
+  border-radius: 16px;
+  box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
+  opacity: 0;
+  transition: opacity 0.25s;
+  padding: 3px !important;
+  background: var(--colorsSurfaceDefault, #ffffff);
+}
+.Sidebar__toggle-button:hover {
+  background: var(--colorsSurfaceDefault, #ffffff);
+  color: var(--colorsTextPrimary, #2270ee);
+  border-color: var(--colorsTextPrimary, #2270ee);
+  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
+}
+.Sidebar__toggle-button:hover::before {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
+}
+
+.Sidebar__toggle-button-wrapper {
+  position: absolute;
+  top: 30px;
+  right: -16px;
+  z-index: 10;
+}
+
 .SidebarSection {
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--colorsBorderGrey, #dfe0e1);
   padding: 16px;
 }
 .SidebarSection:first-child {