@servicetitan/design-system 12.9.0 → 12.11.0

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/core/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACGA;EACC,YC6HW;;AD3HX;EAA+B,YCyHpB;;;ADtHZ;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/core/tokens.scss","../../../src/utilities/_list-unset.scss"],"names":[],"mappings":"AAAA;ACGA;EACC,YC4HW;;AD1HX;EAA+B,YCyHpB;;ADxHX;EAA8B,eCwHnB;;;ADrHZ;EACC,QCmHW;EDlHX;;;AAGD;EEdC;EACA;EACA;EACA;EACA","file":"SideNavGroup.css"}

package/dist/components/SideNav/SideNavGroup.js

@@ -17,6 +17,6 @@ export const SideNavGroup = (_a) => {
     const SideNavItemClasses = classnames('SideNavGroup', className);
     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)));
+        React.createElement("menu", { className: "SideNavGroup__list" }, children)));
 };
 //# sourceMappingURL=SideNavGroup.js.map

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,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"}
+{"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,8BAAM,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAQ,CAClD,CACL,CAAC;AACH,CAAC,CAAC"}

package/dist/components/SideNav/SideNavItem.css

@@ -8,20 +8,23 @@
   color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
-.SideNav .Tag {
-  margin-left: 8px;
-  transform: translateY(-1px);
-}
 .SideNav a {
   text-decoration: none;
 }
+.SideNav .SideNav {
+  padding: 0;
+}
 
 .SideNav__title {
-  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
-  margin: 0 16px;
-  padding: 8px 0 24px;
+  margin: 0 8px;
+  margin-bottom: 16px;
+  padding: 8px 0;
   color: var(--colorsTextOnGrey, #444445);
 }
+.SideNav__title .Tag {
+  margin-left: 8px;
+  transform: translateY(-1px);
+}
 
 .SideNav__list {
   list-style: none;
@@ -29,34 +32,106 @@
   margin-left: 0;
   margin-top: 0;
   padding-left: 0;
-  padding-top: 16px;
 }
 
 .SideNavItem {
   margin: 0;
   padding: 0;
 }
-
-.SideNavItem__button {
+.SideNavItem > .SideNavItem__button {
   border-radius: 3px;
   color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
-  display: block;
-  padding: 6px 16px;
+  display: flex;
+  min-height: 22px;
+  padding: 6px 8px;
   position: relative;
   transition: color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   text-decoration: none;
+  /* States */
 }
-.SideNavItem__button:focus {
+.SideNavItem > .SideNavItem__button:hover {
+  background: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
+}
+.SideNavItem > .SideNavItem__button:active:not(:focus-within) {
+  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
+}
+.SideNavItem > .SideNavItem__button.SideNavItem__button--focus-visible:focus {
   outline: none;
+  box-shadow: inset 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
 }
-.SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
-  color: var(--colorsTextPrimary, #2270ee);
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix {
+  margin-right: 8px;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  margin-left: 8px;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  flex-grow: 1;
+  margin-top: 0.5px;
+}
+.SideNavItem.SideNavItem--disabled > .SideNavItem__button {
+  background-color: transparent !important;
+  opacity: 0.4;
+  pointer-events: none;
 }
-.SideNavItem--active .SideNavItem__button {
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
   color: var(--colorsTextPrimary, #2270ee);
 }
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) .a-Icon svg {
+  color: var(--colorsTextPrimary, #2270ee) !important;
+  fill: var(--colorsTextPrimary, #2270ee) !important;
+}
+.SideNavItem .SideNavItem__button--expanded > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  margin-left: 28px;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button .SideNavItem__button__prefix {
+  display: none;
+}
+
+.SideNavItem__button__suffix__collapsible-icon {
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 300ms 0ms;
+  transform: rotate(0) translateY(1px);
+}
+.SideNavItem__button--expanded .SideNavItem__button__suffix__collapsible-icon {
+  transform: rotate(180deg) translateY(0);
+}
+
+.SideNavItem__button .SideNavItem__button__prefix .a-Icon,
+.SideNavItem__button .SideNavItem__button__suffix .a-Icon {
+  margin-top: -0.5px;
+}
+.SideNavItem__button .StatusLight {
+  margin: -4px -5px;
+}
+.SideNavItem__button .Button {
+  margin: -4px;
+  vertical-align: middle;
+}
+.SideNavItem__button .ActionMenu__TriggerWrapper {
+  margin-top: -3px;
+}
+.SideNavItem__button .Tooltip {
+  margin-top: -2px;
+}
+.SideNavItem__button .Tag {
+  margin-left: 8px;
+  transform: translateY(0);
+}
 
 /*# 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/SideNav.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SEiHW;;AF/GX;EACC,aE6GU;EF5GV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE6FW;;;AExHZ;EACC;EACA;;;AAGD;EACC,eFQiB;EEPjB,OJTc;EIUd,aF6FqB;EE5FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YAvBiB;EAwBjB,OAvBW;;AA0BZ;EAAyB,OA1Bb","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/core/tokens.scss","../../../src/utilities/_list-unset.scss","../../../src/components/SideNav/SideNavItem.scss"],"names":[],"mappings":"AAAA;ACSA;ACRC;EACA;AAEA;EACA;EDOA;EACA,OARc;EASd,SEiHW;;AF/GX;EAAI;;AAGJ;EAAW;;;AAGZ;EACC;EACA,eEuGW;EFtGX;EACA,OAnBoB;;AAqBpB;EACC,aEiGU;EFhGV;;;AAIF;EGjCC;EACA;EACA;EACA;EACA;;;ACYD;EACC;EACA;;AAEA;EACC,eFDgB;EEEhB,OJlBa;EImBb,aFoFoB;EEnFpB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EAAU,YA5BO;;AA6BjB;EAA8B,kBA5BZ;;AA8BlB;EACC;EACA,YA3Ba;;AA8Bd;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;EAAiC,cF4EvB;;AE3EV;EAAiC,aF2EvB;;AEzEV;EACC;EACA;;AAKD;EACC;EACA,SFqDmB;EEpDnB;;AAKD;EACC,kBA7DmB;EA8DnB,OAlEW;;AAoEX;EAAkC;;AAElC;EACC;EACA;;AAKH;EAAiE;;AAGjE;EACC;;AAKA;EAA+B;;;AAKjC;EACC;EACA;;AAEA;EAAmC;;;AAOlC;AAAA;EAAU;;AAGX;EAAe;;AAEf;EACC;EACA;;AAGD;EAA8B;;AAC9B;EAAW;;AAEX;EACC,aFMU;EELV","file":"SideNavItem.css"}

package/dist/components/SideNav/SideNavItem.d.ts

@@ -1,19 +1,32 @@
 import React, { FC } from 'react';
-/**
- * SideNavItem properties
- */
+import { IconProps, IconPropsStrict } from '../Icon';
+import { CollapsibleListItemProps } from '../../internal';
 export interface SideNavItemPropsStrict {
     /** Controls if this is the currently active item in SideNav */
     active?: boolean;
     /** Adds one or more classnames for an element */
     className?: string;
+    /**
+     * If provided, item to be rendered as collapsible menu (accordion).
+     * In this case one nested SideNav must be provided inside children.
+     */
+    collapsible?: CollapsibleListItemProps['collapsible'] | true;
+    /** Indicates whether the SideNav.Item is disabled or not. */
+    disabled?: boolean;
     /** Add a href attribute so right click context menus work (open in new tab, etc) */
     href?: string;
-    /** Action for when <SideNav.Item> is clicked */
+    /** Name of icon to render on right side of SideNav.Item */
+    icon?: IconPropsStrict['name'] | IconProps;
+    /** Action for when SideNav.Item is clicked */
     onClick?: (e: React.SyntheticEvent<HTMLElement>) => void;
+    /** To be rendered on the right side of SideNav.Item */
+    prefix?: React.ReactElement;
+    /** To be rendered on the left side of SideNav.Item */
+    suffix?: React.ReactElement;
 }
 export interface SideNavItemProps extends SideNavItemPropsStrict {
     /** Unstrict Props */
     [propName: string]: any;
 }
 export declare const SideNavItem: FC<SideNavItemProps>;
+export declare const SideNavItemContext: React.Context<any>;

package/dist/components/SideNav/SideNavItem.js

@@ -11,27 +11,126 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import classnames from 'classnames';
+import { useFocusManager } from '@react-aria/focus';
 import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { keys } from '../../utilities/keyCodes';
 import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { CollapsibleContext, CollapsibleList, } from '../../internal';
 export const SideNavItem = (_a) => {
-    var { active, children, className, href, onClick, onFocus, onBlur } = _a, props = __rest(_a, ["active", "children", "className", "href", "onClick", "onFocus", "onBlur"]);
-    const itemRef = React.useRef(null);
-    const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(itemRef, onBlur, onFocus);
-    const onClickHandler = (e) => {
-        if (!onClick)
-            return;
-        e.preventDefault();
-        onClick(e);
-    };
-    const El = href ? 'a' : 'span';
-    const buttonProps = { href };
+    var props = __rest(_a, []);
+    const { className } = props, rest = __rest(props, ["className"]);
     const SideNavItemClasses = classnames('SideNavItem', className, {
-        'SideNavItem--active': active,
+        'SideNavItem--active': props.active,
+        'SideNavItem--disabled': props.disabled,
     });
+    const sideNavItemContext = React.useContext(SideNavItemContext);
+    if (props.collapsible || sideNavItemContext) {
+        const collapsible = props.collapsible === true
+            ? {
+                expanded: false,
+                animate: true,
+                extractCollapsibleList: true,
+            }
+            : Object.assign(Object.assign({}, props.collapsible), { extractCollapsibleList: true });
+        return (React.createElement(CollapsibleList.Item, { el: "li", collapsible: collapsible, className: SideNavItemClasses, "data-anvil-component": "SideNavItem" },
+            React.createElement(SideNavItemButton, Object.assign({}, rest))));
+    }
+    return (React.createElement("li", { className: SideNavItemClasses, "data-anvil-component": "SideNavItem" },
+        React.createElement(SideNavItemButton, Object.assign({}, rest))));
+};
+/**
+ * SideNav Item's Button
+ */
+const SideNavItemButton = (_a) => {
+    var { collapsible, children, disabled, expanded, href, icon, onClick, onFocus, onBlur, prefix, suffix } = _a, rest = __rest(_a, ["collapsible", "children", "disabled", "expanded", "href", "icon", "onClick", "onFocus", "onBlur", "prefix", "suffix"]);
+    const El = href ? 'a' : 'span';
+    const buttonRef = React.useRef(null);
+    const collapsibleContext = React.useContext(CollapsibleContext);
+    const focusManager = useFocusManager();
+    const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(buttonRef, onBlur, onFocus);
     const SideNavItemButtonClasses = classnames('SideNavItem__button', {
         'SideNavItem__button--focus-visible': isFocusVisible,
+        'SideNavItem__button--expanded': collapsible && (collapsibleContext === null || collapsibleContext === void 0 ? void 0 : collapsibleContext.expanded),
     });
-    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)));
+    const handleClick = (e) => {
+        var _a, _b;
+        if (collapsible || !((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
+            return; // Exclude top-level handlers
+        if (href) {
+            (_b = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _b === void 0 ? void 0 : _b.click();
+            return;
+        }
+        if (onClick)
+            onClick(e);
+    };
+    const handleEnter = (e) => {
+        if (e.target !== buttonRef.current) {
+            e.stopPropagation(); // Disable top-level item handlers from firing on buttons in suffix
+            return;
+        }
+        if (e.key === keys.space)
+            e.preventDefault(); // Disable scrolling on space keypress
+        handleClick(e);
+    };
+    const handleKeyDown = (e) => {
+        switch (e.key) {
+            case keys.right:
+            case keys.down:
+                e.stopPropagation(); // Exclude multiple keydown handles
+                e.preventDefault(); // Disable scrolling on keypress
+                focusManager.focusNext({ tabbable: true }); // Exclude disabled items with tabbable option
+                break;
+            case keys.left:
+            case keys.up:
+                e.stopPropagation();
+                e.preventDefault();
+                focusManager.focusPrevious({ tabbable: true });
+                break;
+            case keys.enter:
+            case keys.space:
+                handleEnter(e);
+                break;
+        }
+    };
+    const renderPrefix = () => {
+        const i = renderIcon(icon);
+        if (!i && !prefix)
+            return null;
+        return (React.createElement("span", { className: "SideNavItem__button__prefix" },
+            i,
+            prefix));
+    };
+    const renderSuffix = () => {
+        const arrow = collapsible ? (React.createElement(Icon, { className: "SideNavItem__button__suffix__collapsible-icon", name: "keyboard_arrow_down", size: 20 })) : null;
+        if (!suffix && !arrow)
+            return null;
+        return (React.createElement("span", { className: "SideNavItem__button__suffix" },
+            suffix,
+            arrow));
+    };
+    const buttonProps = {
+        className: SideNavItemButtonClasses,
+        href,
+        tabIndex: disabled ? -1 : 0,
+        target: href && rest.target,
+    };
+    return (React.createElement(SideNavItemContext.Provider, { value: { buttonRef } },
+        React.createElement(El, Object.assign({ ref: buttonRef, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: focusFunction, onBlur: blurFunction }, buttonProps),
+            renderPrefix(),
+            React.createElement(BodyText, { el: "span", size: "small", className: "SideNavItem__button__content" }, children),
+            renderSuffix())));
+};
+export const SideNavItemContext = React.createContext(null);
+const renderIcon = (icon) => {
+    // Icon passed as Icon name
+    if (typeof icon === 'string') {
+        return (React.createElement(Icon, { className: "SideNavItem__button__icon", name: icon, size: 20 }));
+    }
+    // Icon passed as an IconProps object
+    if (icon != null && !React.isValidElement(icon)) {
+        return (React.createElement(Icon, Object.assign({ className: classnames('SideNavItem__button__icon', icon.className) }, icon)));
+    }
+    return null;
 };
 //# 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,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"}
+{"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,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,IAAI,EAA8B,MAAM,SAAS,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EACN,kBAAkB,EAClB,eAAe,GAEf,MAAM,gBAAgB,CAAC;AAuCxB,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAY,EAAE,EAAE;QAAX,KAAK,cAAV,EAAY,CAAF;IAC3D,MAAM,EAAE,SAAS,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA9B,aAAsB,CAAQ,CAAC;IACrC,MAAM,kBAAkB,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,EAAE;QAC/D,qBAAqB,EAAE,KAAK,CAAC,MAAM;QACnC,uBAAuB,EAAE,KAAK,CAAC,QAAQ;KACvC,CAAC,CAAC;IACH,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEhE,IAAI,KAAK,CAAC,WAAW,IAAI,kBAAkB,EAAE;QAC5C,MAAM,WAAW,GAChB,KAAK,CAAC,WAAW,KAAK,IAAI;YACzB,CAAC,CAAC;gBACA,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,IAAI;gBACb,sBAAsB,EAAE,IAAI;aAC3B;YACH,CAAC,iCAAM,KAAK,CAAC,WAAW,KAAE,sBAAsB,EAAE,IAAI,GAAE,CAAC;QAE3D,OAAO,CACN,oBAAC,eAAe,CAAC,IAAI,IACpB,EAAE,EAAC,IAAI,EACP,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,kBAAkB,0BACR,aAAa;YAElC,oBAAC,iBAAiB,oBAAK,IAAI,EAAI,CACT,CACvB,CAAC;KACF;IAED,OAAO,CACN,4BAAI,SAAS,EAAE,kBAAkB,0BAAuB,aAAa;QACpE,oBAAC,iBAAiB,oBAAK,IAAI,EAAI,CAC3B,CACL,CAAC;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,iBAAiB,GAAyB,CAAC,EAahD,EAAE,EAAE;QAb4C,EAChD,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,OAEN,EADG,IAAI,cAZyC,uHAahD,CADO;IAEP,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;IAC/B,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,CACtE,SAAS,EACT,MAAM,EACN,OAAO,CACP,CAAC;IAEF,MAAM,wBAAwB,GAAG,UAAU,CAAC,qBAAqB,EAAE;QAClE,oCAAoC,EAAE,cAAc;QACpD,+BAA+B,EAC9B,WAAW,KAAI,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAA;KAC5C,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,CAAoC,EAAE,EAAE;;QAC5D,IAAI,WAAW,IAAI,CAAC,CAAA,MAAA,SAAS,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;YAAE,OAAO,CAAC,6BAA6B;QAEhG,IAAI,IAAI,EAAE;YACT,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC5B,OAAO;SACP;QACD,IAAI,OAAO;YAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC3D,IAAI,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,OAAO,EAAE;YACnC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,mEAAmE;YACxF,OAAO;SACP;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,sCAAsC;QAEpF,WAAW,CAAC,CAAsC,CAAC,CAAC;IACrD,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAmC,EAAE,EAAE;QAC7D,QAAQ,CAAC,CAAC,GAAG,EAAE;YACd,KAAK,IAAI,CAAC,KAAK,CAAC;YAChB,KAAK,IAAI,CAAC,IAAI;gBACb,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,mCAAmC;gBACxD,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,gCAAgC;gBACpD,YAAY,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;gBAC1F,MAAM;YACP,KAAK,IAAI,CAAC,IAAI,CAAC;YACf,KAAK,IAAI,CAAC,EAAE;gBACX,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/C,MAAM;YACP,KAAK,IAAI,CAAC,KAAK,CAAC;YAChB,KAAK,IAAI,CAAC,KAAK;gBACd,WAAW,CAAC,CAAC,CAAC,CAAC;gBACf,MAAM;SACP;IACF,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,MAAM,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAE3B,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAE/B,OAAO,CACN,8BAAM,SAAS,EAAC,6BAA6B;YAC3C,CAAC;YACD,MAAM,CACD,CACP,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACzB,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAC3B,oBAAC,IAAI,IACJ,SAAS,EAAC,+CAA+C,EACzD,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAE,EAAE,GACP,CACF,CAAC,CAAC,CAAC,IAAI,CAAC;QACT,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QACnC,OAAO,CACN,8BAAM,SAAS,EAAC,6BAA6B;YAC3C,MAAM;YACN,KAAK,CACA,CACP,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QACnB,SAAS,EAAE,wBAAwB;QACnC,IAAI;QACJ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3B,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,MAAM;KAC3B,CAAC;IAEF,OAAO,CACN,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE;QAChD,oBAAC,EAAE,kBACF,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,IAChB,WAAW;YAEd,YAAY,EAAE;YACf,oBAAC,QAAQ,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,8BAA8B,IAEvC,QAAQ,CACC;YACV,YAAY,EAAE,CACX,CACwB,CAC9B,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,UAAU,GAAG,CAAC,IAAyC,EAAE,EAAE;IAChE,2BAA2B;IAC3B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC7B,OAAO,CACN,oBAAC,IAAI,IAAC,SAAS,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,CACpE,CAAC;KACF;IAED,qCAAqC;IACrC,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;QAChD,OAAO,CACN,oBAAC,IAAI,kBACJ,SAAS,EAAE,UAAU,CACpB,2BAA2B,EAC3B,IAAI,CAAC,SAAS,CACd,IACG,IAAI,EACP,CACF,CAAC;KACF;IAED,OAAO,IAAI,CAAC;AACb,CAAC,CAAC"}

package/dist/components/SideNav/index.css

@@ -8,20 +8,23 @@
   color: var(--colorsTextDefault, #141414);
   padding: 16px;
 }
-.SideNav .Tag {
-  margin-left: 8px;
-  transform: translateY(-1px);
-}
 .SideNav a {
   text-decoration: none;
 }
+.SideNav .SideNav {
+  padding: 0;
+}
 
 .SideNav__title {
-  border-bottom: 1px solid var(--colorsBorderGrey, #dfe0e1);
-  margin: 0 16px;
-  padding: 8px 0 24px;
+  margin: 0 8px;
+  margin-bottom: 16px;
+  padding: 8px 0;
   color: var(--colorsTextOnGrey, #444445);
 }
+.SideNav__title .Tag {
+  margin-left: 8px;
+  transform: translateY(-1px);
+}
 
 .SideNav__list {
   list-style: none;
@@ -29,45 +32,121 @@
   margin-left: 0;
   margin-top: 0;
   padding-left: 0;
-  padding-top: 16px;
 }
 
 .SideNavItem {
   margin: 0;
   padding: 0;
 }
-
-.SideNavItem__button {
+.SideNavItem > .SideNavItem__button {
   border-radius: 3px;
   color: var(--colorsTextDefault, #141414);
   font-weight: 400;
   cursor: pointer;
-  display: block;
-  padding: 6px 16px;
+  display: flex;
+  min-height: 22px;
+  padding: 6px 8px;
   position: relative;
   transition: color cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
   text-decoration: none;
+  /* States */
 }
-.SideNavItem__button:focus {
+.SideNavItem > .SideNavItem__button:hover {
+  background: var(--colorsHoverDefault, rgba(4, 4, 4, 0.08));
+}
+.SideNavItem > .SideNavItem__button:active:not(:focus-within) {
+  background-color: var(--colorsActiveDefault, rgba(4, 4, 4, 0.2));
+}
+.SideNavItem > .SideNavItem__button.SideNavItem__button--focus-visible:focus {
   outline: none;
+  box-shadow: inset 0 0 0 2px var(--colorsFocusRingPrimary, #a9d1ff);
 }
-.SideNavItem__button:hover, .SideNavItem__button.SideNavItem__button--focus-visible:focus {
-  background: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
-  color: var(--colorsTextPrimary, #2270ee);
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content,
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
 }
-.SideNavItem--active .SideNavItem__button {
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__prefix {
+  margin-right: 8px;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__suffix {
+  margin-left: 8px;
+}
+.SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  flex-grow: 1;
+  margin-top: 0.5px;
+}
+.SideNavItem.SideNavItem--disabled > .SideNavItem__button {
+  background-color: transparent !important;
+  opacity: 0.4;
+  pointer-events: none;
+}
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) {
+  background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
   color: var(--colorsTextPrimary, #2270ee);
 }
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem.SideNavItem--active > .SideNavItem__button:not(.SideNavItem__button--expanded) .a-Icon svg {
+  color: var(--colorsTextPrimary, #2270ee) !important;
+  fill: var(--colorsTextPrimary, #2270ee) !important;
+}
+.SideNavItem .SideNavItem__button--expanded > .SideNavItem__button__content {
+  font-weight: bold;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button > .SideNavItem__button__content {
+  margin-left: 28px;
+}
+.SideNavItem .SideNav .SideNavItem > .SideNavItem__button .SideNavItem__button__prefix {
+  display: none;
+}
+
+.SideNavItem__button__suffix__collapsible-icon {
+  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 300ms 0ms;
+  transform: rotate(0) translateY(1px);
+}
+.SideNavItem__button--expanded .SideNavItem__button__suffix__collapsible-icon {
+  transform: rotate(180deg) translateY(0);
+}
+
+.SideNavItem__button .SideNavItem__button__prefix .a-Icon,
+.SideNavItem__button .SideNavItem__button__suffix .a-Icon {
+  margin-top: -0.5px;
+}
+.SideNavItem__button .StatusLight {
+  margin: -4px -5px;
+}
+.SideNavItem__button .Button {
+  margin: -4px;
+  vertical-align: middle;
+}
+.SideNavItem__button .ActionMenu__TriggerWrapper {
+  margin-top: -3px;
+}
+.SideNavItem__button .Tooltip {
+  margin-top: -2px;
+}
+.SideNavItem__button .Tag {
+  margin-left: 8px;
+  transform: translateY(0);
+}
 
 .SideNavGroup {
-  margin-top: 32px;
+  margin-top: 24px;
 }
 .SideNav__list .SideNavGroup:first-child {
   margin-top: 16px;
 }
+.SideNav__list .SideNavGroup:last-child {
+  margin-bottom: 16px;
+}
 
 .SideNavGroup__title {
-  margin: 0 16px 8px;
+  margin: 8px;
+  margin-top: 0;
 }
 
 .SideNavGroup__list {

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/core/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,SEiHW;;AF/GX;EACC,aE6GU;EF5GV;;AAGD;EAAI;;;AAGL;EACC;EACA;EACA;EACA,OArBoB;;;AAwBrB;EG9BC;EACA;EACA;EACA;EACA;EH6BA,aE6FW;;;AExHZ;EACC;EACA;;;AAGD;EACC,eFQiB;EEPjB,OJTc;EIUd,aF6FqB;EE5FrB;EACA;EACA;EACA;EACA;EACA;;AAEA;EAAU;;AAEV;EAEC,YAvBiB;EAwBjB,OAvBW;;AA0BZ;EAAyB,OA1Bb;;;ACFb;EACC,YH6HW;;AG3HX;EAA+B,YHyHpB;;;AGtHZ;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/core/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,SEiHW;;AF/GX;EAAI;;AAGJ;EAAW;;;AAGZ;EACC;EACA,eEuGW;EFtGX;EACA,OAnBoB;;AAqBpB;EACC,aEiGU;EFhGV;;;AAIF;EGjCC;EACA;EACA;EACA;EACA;;;ACYD;EACC;EACA;;AAEA;EACC,eFDgB;EEEhB,OJlBa;EImBb,aFoFoB;EEnFpB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EAAU,YA5BO;;AA6BjB;EAA8B,kBA5BZ;;AA8BlB;EACC;EACA,YA3Ba;;AA8Bd;AAAA;AAAA;EAGC;EACA;EACA;;AAGD;EAAiC,cF4EvB;;AE3EV;EAAiC,aF2EvB;;AEzEV;EACC;EACA;;AAKD;EACC;EACA,SFqDmB;EEpDnB;;AAKD;EACC,kBA7DmB;EA8DnB,OAlEW;;AAoEX;EAAkC;;AAElC;EACC;EACA;;AAKH;EAAiE;;AAGjE;EACC;;AAKA;EAA+B;;;AAKjC;EACC;EACA;;AAEA;EAAmC;;;AAOlC;AAAA;EAAU;;AAGX;EAAe;;AAEf;EACC;EACA;;AAGD;EAA8B;;AAC9B;EAAW;;AAEX;EACC,aFMU;EELV;;;ACtHF;EACC,YH4HW;;AG1HX;EAA+B,YHyHpB;;AGxHX;EAA8B,eHwHnB;;;AGrHZ;EACC,QHmHW;EGlHX;;;AAGD;EFdC;EACA;EACA;EACA;EACA","file":"index.css"}

package/dist/components/Sidebar/Sidebar.css

@@ -68,7 +68,7 @@
   overflow-x: hidden;
   opacity: 0;
 }
-.Sidebar--collapsed .Sidebar__toggle-button:not(:hover) {
+.Sidebar--collapsed .Sidebar__toggle-button:not(:hover):not(:focus) {
   box-shadow: none;
 }
 
@@ -113,6 +113,9 @@
 .Sidebar__toggle-button:hover::before {
   background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
 }
+.Sidebar__toggle-button.Button--focus-visible:focus {
+  opacity: 1;
+}
 
 .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"],"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;EACA,OAzCe;;;AA4ChB;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YAhDJ;;AAkDpB;AAAA;AAAA;AAAA;AAAA;EACuB,YAjDN;;;AAoDlB;EACC,OA7DyB;EA8DzB;;AAEA;EACC,OAjEwB;EAkExB;;AAGD;EAA4B;;AAE5B;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OArFyB;;AAuFzB;EACC,OAzFc;EA0Fd;;AAGD;EACC;EACA;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eA3G6B;;;AA+G/B;EACC;EACA,eAhH6B;EAiH7B;EACA;EACA;EACA;EACA,YA7G2B;;AA+G3B;EACC,YAhH0B;EAiH1B,OAlHkB;EAmHlB,cAnHkB;EAoHlB;;AAEA;EACC,kBAxHuB;;;AA6H1B;EACC;EACA,KApI2B;EAqI3B;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;EACA,OAzCe;;;AA4ChB;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YAhDJ;;AAkDpB;AAAA;AAAA;AAAA;AAAA;EACuB,YAjDN;;;AAoDlB;EACC,OA7DyB;EA8DzB;;AAEA;EACC,OAjEwB;EAkExB;;AAGD;EAA4B;;AAE5B;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OArFyB;;AAuFzB;EACC,OAzFc;EA0Fd;;AAGD;EACC;EACA;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eA3G6B;;;AA+G/B;EACC;EACA,eAhH6B;EAiH7B;EACA;EACA;EACA;EACA,YA7G2B;;AA+G3B;EACC,YAhH0B;EAiH1B,OAlHkB;EAmHlB,cAnHkB;EAoHlB;;AAEA;EACC,kBAxHuB;;AA4HzB;EAAgC;;;AAGjC;EACC;EACA,KAtI2B;EAuI3B;EACA","file":"Sidebar.css"}

package/dist/components/Sidebar/Sidebar.js

@@ -83,7 +83,7 @@ export const Sidebar = (_a) => {
     return (React.createElement(Element, Object.assign({ className: SidebarClasses, ref: sidebarRef, "data-anvil-component": "Sidebar" }, rest),
         React.createElement("div", { className: "Sidebar__wrapper" },
             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(Button, { className: toggleButtonClasses, onClick: open, iconName: iconName, size: size, onMouseOver: () => clearTimeout(hoverTimeout.current), onMouseLeave: () => isTempOpen && handleHover(false), "aria-label": `${isOpen ? 'collapse' : 'expand'} sidebar` })),
             React.createElement("div", { className: "Sidebar__content-wrapper", onMouseOver: () => handleHover(true), onMouseLeave: () => handleHover(false) },
                 React.createElement("div", { className: "Sidebar__content" }, children)))));
 };

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

@@ -68,7 +68,7 @@
   overflow-x: hidden;
   opacity: 0;
 }
-.Sidebar--collapsed .Sidebar__toggle-button:not(:hover) {
+.Sidebar--collapsed .Sidebar__toggle-button:not(:hover):not(:focus) {
   box-shadow: none;
 }
 
@@ -113,6 +113,9 @@
 .Sidebar__toggle-button:hover::before {
   background-color: var(--colorsHoverPrimary, rgba(34, 112, 238, 0.08));
 }
+.Sidebar__toggle-button.Button--focus-visible:focus {
+  opacity: 1;
+}
 
 .Sidebar__toggle-button-wrapper {
   position: absolute;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Sidebar/SidebarSection.scss","../../../node_modules/@servicetitan/tokens/core/tokens.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;EACA,OAzCe;;;AA4ChB;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YAhDJ;;AAkDpB;AAAA;AAAA;AAAA;AAAA;EACuB,YAjDN;;;AAoDlB;EACC,OA7DyB;EA8DzB;;AAEA;EACC,OAjEwB;EAkExB;;AAGD;EAA4B;;AAE5B;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OArFyB;;AAuFzB;EACC,OAzFc;EA0Fd;;AAGD;EACC;EACA;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eA3G6B;;;AA+G/B;EACC;EACA,eAhH6B;EAiH7B;EACA;EACA;EACA;EACA,YA7G2B;;AA+G3B;EACC,YAhH0B;EAiH1B,OAlHkB;EAmHlB,cAnHkB;EAoHlB;;AAEA;EACC,kBAxHuB;;;AA6H1B;EACC;EACA,KApI2B;EAqI3B;EACA;;;AE3ID;EACC;EACA,SC0HW;;ADxHX;EAAgB;;;AAGjB;AACA;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA0B","file":"SidebarSection.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Sidebar/Sidebar.scss","../../../src/utilities/_component-reset.scss","../../../src/components/Sidebar/SidebarSection.scss","../../../node_modules/@servicetitan/tokens/core/tokens.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;EACA,OAzCe;;;AA4ChB;AAAA;AAAA;AAAA;EAIC;;;AAMA;AAAA;AAAA;AAAA;AAAA;EACwB,YAhDJ;;AAkDpB;AAAA;AAAA;AAAA;AAAA;EACuB,YAjDN;;;AAoDlB;EACC,OA7DyB;EA8DzB;;AAEA;EACC,OAjEwB;EAkExB;;AAGD;EAA4B;;AAE5B;EACC;EACA;EACA;;AAIA;EACC;;;AAKH;EACC,OArFyB;;AAuFzB;EACC,OAzFc;EA0Fd;;AAGD;EACC;EACA;;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;EACA,eA3G6B;;;AA+G/B;EACC;EACA,eAhH6B;EAiH7B;EACA;EACA;EACA;EACA,YA7G2B;;AA+G3B;EACC,YAhH0B;EAiH1B,OAlHkB;EAmHlB,cAnHkB;EAoHlB;;AAEA;EACC,kBAxHuB;;AA4HzB;EAAgC;;;AAGjC;EACC;EACA,KAtI2B;EAuI3B;EACA;;;AE7ID;EACC;EACA,SC0HW;;ADxHX;EAAgB;;;AAGjB;AACA;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAA0B","file":"SidebarSection.css"}