@servicetitan/design-system 12.9.0 → 12.10.0

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 collapsible provided, item to be rendered as collapsible menu (accordion).
+     * In this case a SideNav must be provided as children.
+     */
+    collapsible?: CollapsibleListItemProps['collapsible'];
+    /** 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,118 @@ 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)
+        return (React.createElement(CollapsibleList.Item, { el: "li", collapsible: Object.assign(Object.assign({}, props.collapsible), { extractCollapsibleList: true }), 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":"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"}

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"}