@servicetitan/design-system 12.8.0 → 12.9.0

package/dist/components/ProgressTracker/ProgressTracker.d.ts

@@ -8,6 +8,12 @@ export interface ProgressTrackerPropsStrict {
     currentIndex: number | false;
     /** Turn this on if this flow has been previously completed */
     completed?: boolean;
+    /** Disable style for the entire Progress Tracker */
+    disabled?: boolean;
+    /** Hides labels behind Tooltips. For accessibility, labels should be added even when hidden */
+    hideLabels?: boolean;
+    /** Size of the Progress Tracker. Defaults to medium. */
+    size?: 'small' | 'medium';
 }
 export interface ProgressTrackerProps extends ProgressTrackerPropsStrict {
     [propName: string]: any;

package/dist/components/ProgressTracker/ProgressTracker.js

@@ -14,7 +14,7 @@ import classnames from 'classnames';
 import { ProgressTrackerStep } from './ProgressTrackerStep';
 import { ProgressTrackerDivider } from './ProgressTrackerDivider';
 export const ProgressTracker = (_a) => {
-    var { children, className, completed, currentIndex = 0 } = _a, rest = __rest(_a, ["children", "className", "completed", "currentIndex"]);
+    var { children, className, completed, currentIndex = 0, disabled, hideLabels, size = 'medium' } = _a, rest = __rest(_a, ["children", "className", "completed", "currentIndex", "disabled", "hideLabels", "size"]);
     const renderSteps = () => {
         return React.Children.map(children, (child, index) => {
             const childProps = {
@@ -23,11 +23,15 @@ export const ProgressTracker = (_a) => {
                 active: child.props.active,
                 completed: child.props.completed,
                 editing: child.props.editing,
+                hideLabels: child.props.hideLabels,
+                size,
             };
             const isIndexed = currentIndex !== false;
             const isActive = index === currentIndex;
             const isBeforeActive = index < currentIndex;
             const flowPreviouslyCompleted = completed;
+            if (hideLabels)
+                childProps.hideLabels = true;
             if (isIndexed) {
                 if (flowPreviouslyCompleted) {
                     // If currentIndex is used and this is the current step
@@ -47,13 +51,17 @@ export const ProgressTracker = (_a) => {
                 }
             }
             return [
-                index > 0 && (React.createElement(ProgressTrackerDivider, { key: `${index}-divider` })),
+                index > 0 && (React.createElement(ProgressTrackerDivider, { key: `${index}-divider`, completed: isBeforeActive ||
+                        flowPreviouslyCompleted ||
+                        isActive })),
                 React.cloneElement(child, childProps),
             ];
         });
     };
     const ProgressTrackerClasses = classnames('ProgressTracker', className, {
         'ProgressTracker--completed': completed,
+        'ProgressTracker--disabled': disabled,
+        [`ProgressTracker--${size}`]: size,
     });
     return (React.createElement("div", Object.assign({ className: ProgressTrackerClasses, "data-anvil-component": "ProgressTracker" }, rest), renderSteps()));
 };

package/dist/components/ProgressTracker/ProgressTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressTracker.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTracker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAuBlE,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,EAMhD,EAAE,EAAE;QAN4C,EAChD,QAAQ,EACR,SAAS,EACT,SAAS,EACT,YAAY,GAAG,CAAC,OAEhB,EADG,IAAI,cALyC,sDAMhD,CADO;IAEP,MAAM,WAAW,GAAG,GAAoB,EAAE;QACzC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CACxB,QAAQ,EACR,CAAC,KAAyB,EAAE,KAAK,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG;gBAClB,GAAG,EAAE,GAAG,KAAK,OAAO;gBACpB,UAAU,EAAE,KAAK,GAAG,CAAC;gBACrB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM;gBAC1B,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS;gBAChC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO;aAC5B,CAAC;YAEF,MAAM,SAAS,GAAG,YAAY,KAAK,KAAK,CAAC;YACzC,MAAM,QAAQ,GAAG,KAAK,KAAK,YAAY,CAAC;YACxC,MAAM,cAAc,GAAG,KAAK,GAAG,YAAY,CAAC;YAC5C,MAAM,uBAAuB,GAAG,SAAS,CAAC;YAE1C,IAAI,SAAS,EAAE;gBACd,IAAI,uBAAuB,EAAE;oBAC5B,uDAAuD;oBACvD,IAAI,QAAQ;wBAAE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;oBAExC,2GAA2G;oBAC3G,IAAI,CAAC,QAAQ;wBAAE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC;iBAC3C;gBAED,IAAI,CAAC,uBAAuB,EAAE;oBAC7B,uDAAuD;oBACvD,IAAI,QAAQ;wBAAE,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;oBAEvC,mEAAmE;oBACnE,IAAI,cAAc;wBAAE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC;iBAChD;aACD;YAED,OAAO;gBACN,KAAK,GAAG,CAAC,IAAI,CACZ,oBAAC,sBAAsB,IAAC,GAAG,EAAE,GAAG,KAAK,UAAU,GAAI,CACnD;gBACD,KAAK,CAAC,YAAY,CAAC,KAA2B,EAAE,UAAU,CAAC;aAC3D,CAAC;QACH,CAAC,CACD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;QACvE,4BAA4B,EAAE,SAAS;KACvC,CAAC,CAAC;IAEH,OAAO,CACN,2CACC,SAAS,EAAE,sBAAsB,0BACZ,iBAAiB,IAClC,IAAI,GAEP,WAAW,EAAE,CACT,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG,mBAAmB,CAAC;AAC3C,eAAe,CAAC,OAAO,GAAG,sBAAsB,CAAC"}
+{"version":3,"file":"ProgressTracker.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTracker.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAgClE,MAAM,CAAC,MAAM,eAAe,GAAoB,CAAC,EAShD,EAAE,EAAE;QAT4C,EAChD,QAAQ,EACR,SAAS,EACT,SAAS,EACT,YAAY,GAAG,CAAC,EAChB,QAAQ,EACR,UAAU,EACV,IAAI,GAAG,QAAQ,OAEf,EADG,IAAI,cARyC,wFAShD,CADO;IAEP,MAAM,WAAW,GAAG,GAAoB,EAAE;QACzC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CACxB,QAAQ,EACR,CAAC,KAAyB,EAAE,KAAK,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG;gBAClB,GAAG,EAAE,GAAG,KAAK,OAAO;gBACpB,UAAU,EAAE,KAAK,GAAG,CAAC;gBACrB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM;gBAC1B,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS;gBAChC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO;gBAC5B,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU;gBAClC,IAAI;aACJ,CAAC;YAEF,MAAM,SAAS,GAAG,YAAY,KAAK,KAAK,CAAC;YACzC,MAAM,QAAQ,GAAG,KAAK,KAAK,YAAY,CAAC;YACxC,MAAM,cAAc,GAAG,KAAK,GAAG,YAAY,CAAC;YAC5C,MAAM,uBAAuB,GAAG,SAAS,CAAC;YAE1C,IAAI,UAAU;gBAAE,UAAU,CAAC,UAAU,GAAG,IAAI,CAAC;YAE7C,IAAI,SAAS,EAAE;gBACd,IAAI,uBAAuB,EAAE;oBAC5B,uDAAuD;oBACvD,IAAI,QAAQ;wBAAE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;oBAExC,2GAA2G;oBAC3G,IAAI,CAAC,QAAQ;wBAAE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC;iBAC3C;gBAED,IAAI,CAAC,uBAAuB,EAAE;oBAC7B,uDAAuD;oBACvD,IAAI,QAAQ;wBAAE,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC;oBAEvC,mEAAmE;oBACnE,IAAI,cAAc;wBAAE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC;iBAChD;aACD;YAED,OAAO;gBACN,KAAK,GAAG,CAAC,IAAI,CACZ,oBAAC,sBAAsB,IACtB,GAAG,EAAE,GAAG,KAAK,UAAU,EACvB,SAAS,EACR,cAAc;wBACd,uBAAuB;wBACvB,QAAQ,GAER,CACF;gBACD,KAAK,CAAC,YAAY,CAAC,KAA2B,EAAE,UAAU,CAAC;aAC3D,CAAC;QACH,CAAC,CACD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,EAAE;QACvE,4BAA4B,EAAE,SAAS;QACvC,2BAA2B,EAAE,QAAQ;QACrC,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE,IAAI;KAClC,CAAC,CAAC;IAEH,OAAO,CACN,2CACC,SAAS,EAAE,sBAAsB,0BACZ,iBAAiB,IAClC,IAAI,GAEP,WAAW,EAAE,CACT,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG,mBAAmB,CAAC;AAC3C,eAAe,CAAC,OAAO,GAAG,sBAAsB,CAAC"}

package/dist/components/ProgressTracker/ProgressTrackerDivider.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 export interface Props {
     /** Adds one or more classnames to an element */
     className?: string;
+    completed?: boolean;
     [propName: string]: any;
 }
 export declare const ProgressTrackerDivider: FC<Props>;

package/dist/components/ProgressTracker/ProgressTrackerDivider.js

@@ -13,7 +13,9 @@ import React from 'react';
 import classnames from 'classnames';
 export const ProgressTrackerDivider = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    const ProgressTrackerDividerClasses = classnames('ProgressTrackerDivider', className);
+    const ProgressTrackerDividerClasses = classnames('ProgressTrackerDivider', className, {
+        'ProgressTrackerDivider--completed': props.completed,
+    });
     return React.createElement("div", Object.assign({ className: ProgressTrackerDividerClasses }, props));
 };
 //# sourceMappingURL=ProgressTrackerDivider.js.map

package/dist/components/ProgressTracker/ProgressTrackerDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressTrackerDivider.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerDivider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,MAAM,CAAC,MAAM,sBAAsB,GAAc,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACtE,MAAM,6BAA6B,GAAG,UAAU,CAC/C,wBAAwB,EACxB,SAAS,CACT,CAAC;IAEF,OAAO,2CAAK,SAAS,EAAE,6BAA6B,IAAM,KAAK,EAAI,CAAC;AACrE,CAAC,CAAC"}
+{"version":3,"file":"ProgressTrackerDivider.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerDivider.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,CAAC,MAAM,sBAAsB,GAAc,CAAC,EAAuB,EAAE,EAAE;QAA3B,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IACtE,MAAM,6BAA6B,GAAG,UAAU,CAC/C,wBAAwB,EACxB,SAAS,EACT;QACC,mCAAmC,EAAE,KAAK,CAAC,SAAS;KACpD,CACD,CAAC;IAEF,OAAO,2CAAK,SAAS,EAAE,6BAA6B,IAAM,KAAK,EAAI,CAAC;AACrE,CAAC,CAAC"}

package/dist/components/ProgressTracker/ProgressTrackerStep.css

@@ -1,10 +1,9 @@
 .ProgressTrackerStep {
-  color: var(--colorsTextSubdued, #606162);
   display: flex;
-  align-items: center;
+  flex-shrink: 1;
+  flex-grow: 0;
   position: relative;
-  margin: 0 24px;
-  padding: 0 8px;
+  margin: 0 16px;
   text-decoration: none;
 }
 .ProgressTrackerStep:first-child {
@@ -21,12 +20,20 @@
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
+.ProgressTrackerStep--small {
+  margin: 0 8px;
+}
+
+.ProgressTrackerStep--hideLabels {
+  margin: 0 8px;
+}
+
 /* Children */
 .ProgressTrackerStep__icon {
-  width: 1.8em;
-  height: 1.8em;
+  font-weight: 700;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
   color: var(---colorsTextInverted, #ffffff);
   display: flex;
   flex-shrink: 0;
@@ -34,42 +41,90 @@
   align-items: center;
 }
 
-.ProgressTrackerStep__label {
+.ProgressTrackerStep__simple {
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  color: var(---colorsTextInverted, #ffffff);
+  display: flex;
   flex-shrink: 0;
-  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+.ProgressTrackerStep--incomplete .ProgressTrackerStep__simple {
+  box-shadow: 0 0 0 2px inset var(--colorsStatusDefault, #8c9ca5);
+}
+.ProgressTrackerStep--active .ProgressTrackerStep__simple {
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
+}
+.ProgressTrackerStep--complete .ProgressTrackerStep__simple, .ProgressTrackerStep--editing .ProgressTrackerStep__simple {
+  background-color: var(--colorsTextPrimary, #1360d9);
+}
+
+.ProgressTrackerStep__label {
   margin-left: 8px;
 }
 
-/* States */
-.ProgressTrackerStep--clickable:hover {
+.ProgressTrackerStep--medium .ProgressTrackerStep__label {
+  margin-top: 3px;
+}
+
+.ProgressTrackerStep--clickable {
   cursor: pointer;
-  opacity: 0.8;
+}
+.ProgressTrackerStep--clickable .ProgressTrackerStep__label {
+  color: var(--colorsTextPrimary, #1360d9);
+}
+.ProgressTrackerStep--clickable .ProgressTrackerStep__label:hover, .ProgressTrackerStep--clickable .ProgressTrackerStep__label:focus {
+  text-decoration: underline;
+  outline: none;
 }
 
-.ProgressTrackerStep--complete {
-  color: var(--colorsTextDefault, #141414);
+.ProgressTrackerStep--incomplete {
+  color: var(--colorsTextSubdued, #606162);
 }
+.ProgressTrackerStep--incomplete .ProgressTrackerStep__icon {
+  box-shadow: 0 0 0 2px inset var(--colorsStatusDefault, #8c9ca5);
+  color: var(--colorsTextSubdued, #606162);
+}
+
 .ProgressTrackerStep--complete .ProgressTrackerStep__icon {
-  background-color: var(--colorsStatusSuccess, #18a761);
+  color: var(--colorsTextPrimary, #1360d9);
 }
 .ProgressTrackerStep--complete .a-Icon {
-  font-size: 20px;
+  font-size: 28px;
 }
 
 .ProgressTrackerStep--editing,
 .ProgressTrackerStep--active {
   color: var(--colorsTextDefault, #141414);
 }
+.ProgressTrackerStep--editing .ProgressTrackerStep__label,
+.ProgressTrackerStep--active .ProgressTrackerStep__label {
+  font-weight: 700;
+}
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  background-color: var(--colorsStatusInfo, #2270ee);
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
+  color: var(--colorsTextPrimary, #1360d9);
 }
 
 .ProgressTrackerStep--disabled {
-  pointer-events: none !important;
+  pointer-events: none;
 }
 .ProgressTrackerStep--disabled, .ProgressTrackerStep--disabled:hover {
   opacity: 0.6;
 }
+.ProgressTracker--disabled .ProgressTrackerStep--disabled {
+  opacity: 1;
+}
+
+.ProgressTrackerStep__Tooltip {
+  display: none;
+}
+
+.ProgressTrackerStep__Tooltip--visible {
+  display: block;
+}
 
 /*# sourceMappingURL=ProgressTrackerStep.css.map */

package/dist/components/ProgressTracker/ProgressTrackerStep.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerStep.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss"],"names":[],"mappings":"AASA;EACC,OARc;EASd;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA,YC4Fa;;;ADxFf;AACA;EACC;EACA;EACA;EACA,YAnCc;EAoCd,OArCa;EAsCb;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,aC2EW;;;ADxEZ;AACA;EACC;EACA,SCwDiB;;;ADrDlB;EACC,OA1Da;;AA4Db;EACC,kBA1Da;;AA6Dd;EAAU,WCwEG;;;ADrEd;AAAA;EAEC,OArEa;;AAsEb;AAAA;EAA6B,kBAlEf;;;AAqEf;EACC;;AAEA;EAEC,SCiCiB","file":"ProgressTrackerStep.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerStep.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA,YC6Fa;;;ADzFf;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC,aCkEkB;EDjElB;EACA;EACA;EACA,OA5Ca;EA6Cb;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA,OAvDa;EAwDb;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EAEC,kBApEc;;;AAwEhB;EACC,aC8CW;;;AD1CX;EACC;;;AAIF;EACC;;AAEA;EACC,OAvFY;;AAyFZ;EAEC;EACA;;;AAKH;EACC,OAtGc;;AAwGd;EACC;EACA,OA1Ga;;;AA+Gd;EAA6B,OA3GhB;;AA4Gb;EAAU;;;AAGX;AAAA;EAEC,OApHa;;AAsHb;AAAA;EACC,aCZiB;;ADelB;AAAA;EACC;EACA,OAzHY;;;AA6Hd;EACC;;AAEA;EAEC,SCtBiB;;ADyBlB;EAA+B;;;AAGhC;EACC;;;AAGD;EACC","file":"ProgressTrackerStep.css"}

package/dist/components/ProgressTracker/ProgressTrackerStep.d.ts

@@ -18,6 +18,9 @@ export interface ProgressTrackerStepPropsStrict {
     onClick?: (e: React.SyntheticEvent<HTMLElement>) => void;
     /** The step number. Automatically set when inside <ProgressTracker> */
     stepNumber?: number;
+    hideLabels?: boolean;
+    /** Size of the Progress Tracker step. Defaults to medium. */
+    size?: 'small' | 'medium';
 }
 export interface ProgressTrackerStepProps extends ProgressTrackerStepPropsStrict {
     [propName: string]: any;

package/dist/components/ProgressTracker/ProgressTrackerStep.js

@@ -12,25 +12,47 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import classnames from 'classnames';
 import { Icon } from '../Icon';
+import { Tooltip } from '../Tooltip';
+import { useScreenSize } from '../../hooks';
 export const ProgressTrackerStep = (_a) => {
-    var { active = false, className, completed = false, disabled, editing, label, stepNumber } = _a, props = __rest(_a, ["active", "className", "completed", "disabled", "editing", "label", "stepNumber"]);
+    var { active = false, className, completed = false, disabled, editing, href, label, size = 'medium', stepNumber, hideLabels } = _a, props = __rest(_a, ["active", "className", "completed", "disabled", "editing", "href", "label", "size", "stepNumber", "hideLabels"]);
+    const screensize = useScreenSize();
+    const getStepContent = () => {
+        if (size === 'medium')
+            return (React.createElement("div", { className: "ProgressTrackerStep__icon" }, getBadge()));
+        return React.createElement("div", { className: "ProgressTrackerStep__simple" });
+    };
     const getBadge = () => {
+        if (size === 'small')
+            return;
         if (completed)
-            return React.createElement(Icon, { name: "check" });
+            return React.createElement(Icon, { name: "check_circle" });
         if (editing)
             return React.createElement(Icon, { name: "edit" });
         return stepNumber;
     };
+    const StepElement = href && !disabled ? 'a' : 'div';
+    const getLabel = () => {
+        if (!label || hideLabels || screensize.smallerThan.tablet)
+            return;
+        return React.createElement("div", { className: "ProgressTrackerStep__label" }, label);
+    };
+    const getTooltipLabel = () => {
+        if (screensize.smallerThan.tablet || hideLabels)
+            return label;
+    };
     const ProgressTrackerStepClasses = classnames('ProgressTrackerStep', className, {
         'ProgressTrackerStep--active': active,
         'ProgressTrackerStep--complete': completed,
-        'ProgressTrackerStep--clickable': !disabled && (props.href != null || props.onClick != null),
+        'ProgressTrackerStep--incomplete': !active && !completed && !editing,
+        'ProgressTrackerStep--clickable': href != null || props.onClick != null,
         'ProgressTrackerStep--disabled': disabled,
         'ProgressTrackerStep--editing': editing,
+        'ProgressTrackerStep--hideLabels': hideLabels,
+        [`ProgressTrackerStep--${size}`]: size,
     });
-    const StepElement = props.href ? 'a' : 'div';
-    return (React.createElement(StepElement, Object.assign({ className: ProgressTrackerStepClasses, tabIndex: (props.href || props.onClick) && 0, "data-anvil-component": "ProgressTrackerStep" }, props),
-        React.createElement("div", { className: "ProgressTrackerStep__icon" }, getBadge()),
-        label && React.createElement("div", { className: "ProgressTrackerStep__label" }, label)));
+    return (React.createElement(StepElement, Object.assign({ className: ProgressTrackerStepClasses, tabIndex: (props.href || props.onClick) && 0, "data-anvil-component": "ProgressTrackerStep", href: !disabled && href }, props),
+        React.createElement(Tooltip, { text: getTooltipLabel(), portal: true, direction: "b", el: "div" }, getStepContent()),
+        getLabel()));
 };
 //# sourceMappingURL=ProgressTrackerStep.js.map

package/dist/components/ProgressTracker/ProgressTrackerStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressTrackerStep.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerStep.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAoC/B,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EASjE,EAAE,EAAE;QAT6D,EACjE,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,UAAU,OAEV,EADG,KAAK,cARyD,kFASjE,CADQ;IAER,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,IAAI,SAAS;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC;QAC5C,IAAI,OAAO;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC;QACzC,OAAO,UAAU,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,0BAA0B,GAAG,UAAU,CAC5C,qBAAqB,EACrB,SAAS,EACT;QACC,6BAA6B,EAAE,MAAM;QACrC,+BAA+B,EAAE,SAAS;QAC1C,gCAAgC,EAC/B,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC;QAC3D,+BAA+B,EAAE,QAAQ;QACzC,8BAA8B,EAAE,OAAO;KACvC,CACD,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAE7C,OAAO,CACN,oBAAC,WAAW,kBACX,SAAS,EAAE,0BAA0B,EACrC,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,0BACvB,qBAAqB,IACtC,KAAK;QAET,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,EAAE,CAAO;QAC5D,KAAK,IAAI,6BAAK,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAO,CACtD,CACd,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"ProgressTrackerStep.js","sourceRoot":"","sources":["../../../src/components/ProgressTracker/ProgressTrackerStep.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAyC5C,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAYjE,EAAE,EAAE;QAZ6D,EACjE,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,UAAU,EACV,UAAU,OAEV,EADG,KAAK,cAXyD,gHAYjE,CADQ;IAER,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,MAAM,cAAc,GAAG,GAAG,EAAE;QAC3B,IAAI,IAAI,KAAK,QAAQ;YACpB,OAAO,CACN,6BAAK,SAAS,EAAC,2BAA2B,IAAE,QAAQ,EAAE,CAAO,CAC7D,CAAC;QACH,OAAO,6BAAK,SAAS,EAAC,6BAA6B,GAAG,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,IAAI,IAAI,KAAK,OAAO;YAAE,OAAO;QAC7B,IAAI,SAAS;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,cAAc,GAAG,CAAC;QACnD,IAAI,OAAO;YAAE,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC;QACzC,OAAO,UAAU,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpD,MAAM,QAAQ,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,KAAK,IAAI,UAAU,IAAI,UAAU,CAAC,WAAW,CAAC,MAAM;YAAE,OAAO;QAClE,OAAO,6BAAK,SAAS,EAAC,4BAA4B,IAAE,KAAK,CAAO,CAAC;IAClE,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC5B,IAAI,UAAU,CAAC,WAAW,CAAC,MAAM,IAAI,UAAU;YAAE,OAAO,KAAK,CAAC;IAC/D,CAAC,CAAC;IAEF,MAAM,0BAA0B,GAAG,UAAU,CAC5C,qBAAqB,EACrB,SAAS,EACT;QACC,6BAA6B,EAAE,MAAM;QACrC,+BAA+B,EAAE,SAAS;QAC1C,iCAAiC,EAChC,CAAC,MAAM,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO;QAClC,gCAAgC,EAC/B,IAAI,IAAI,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI;QACtC,+BAA+B,EAAE,QAAQ;QACzC,8BAA8B,EAAE,OAAO;QACvC,iCAAiC,EAAE,UAAU;QAC7C,CAAC,wBAAwB,IAAI,EAAE,CAAC,EAAE,IAAI;KACtC,CACD,CAAC;IAEF,OAAO,CACN,oBAAC,WAAW,kBACX,SAAS,EAAE,0BAA0B,EACrC,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,0BACvB,qBAAqB,EAC1C,IAAI,EAAE,CAAC,QAAQ,IAAI,IAAI,IACnB,KAAK;QAET,oBAAC,OAAO,IAAC,IAAI,EAAE,eAAe,EAAE,EAAE,MAAM,QAAC,SAAS,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,IAC7D,cAAc,EAAE,CACR;QACT,QAAQ,EAAE,CACE,CACd,CAAC;AACH,CAAC,CAAC"}

package/dist/components/ProgressTracker/index.css

@@ -14,6 +14,9 @@
 .ProgressTrackerDivider {
   position: relative;
   width: 100%;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-basis: 0;
 }
 .ProgressTrackerDivider::after {
   content: "";
@@ -23,16 +26,24 @@
   top: 50%;
   margin-top: -1px;
   height: 2px;
-  background-color: var(--colorsBorderGrey, #dfe0e1);
+  background-color: var(--colorsStatusDefault, #8c9ca5);
+}
+
+.ProgressTracker--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ProgressTrackerDivider--completed::after {
+  background-color: var(--colorsStatusInfo, #2270ee);
 }
 
 .ProgressTrackerStep {
-  color: var(--colorsTextSubdued, #606162);
   display: flex;
-  align-items: center;
+  flex-shrink: 1;
+  flex-grow: 0;
   position: relative;
-  margin: 0 24px;
-  padding: 0 8px;
+  margin: 0 16px;
   text-decoration: none;
 }
 .ProgressTrackerStep:first-child {
@@ -49,12 +60,20 @@
   box-shadow: 0 0 0 3px var(--colorsFocusRingPrimary, #a9d1ff);
 }
 
+.ProgressTrackerStep--small {
+  margin: 0 8px;
+}
+
+.ProgressTrackerStep--hideLabels {
+  margin: 0 8px;
+}
+
 /* Children */
 .ProgressTrackerStep__icon {
-  width: 1.8em;
-  height: 1.8em;
+  font-weight: 700;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: var(--colorsSurfaceGreyStronger, #bcbcbd);
   color: var(---colorsTextInverted, #ffffff);
   display: flex;
   flex-shrink: 0;
@@ -62,42 +81,90 @@
   align-items: center;
 }
 
-.ProgressTrackerStep__label {
+.ProgressTrackerStep__simple {
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  color: var(---colorsTextInverted, #ffffff);
+  display: flex;
   flex-shrink: 0;
-  white-space: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+.ProgressTrackerStep--incomplete .ProgressTrackerStep__simple {
+  box-shadow: 0 0 0 2px inset var(--colorsStatusDefault, #8c9ca5);
+}
+.ProgressTrackerStep--active .ProgressTrackerStep__simple {
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
+}
+.ProgressTrackerStep--complete .ProgressTrackerStep__simple, .ProgressTrackerStep--editing .ProgressTrackerStep__simple {
+  background-color: var(--colorsTextPrimary, #1360d9);
+}
+
+.ProgressTrackerStep__label {
   margin-left: 8px;
 }
 
-/* States */
-.ProgressTrackerStep--clickable:hover {
+.ProgressTrackerStep--medium .ProgressTrackerStep__label {
+  margin-top: 3px;
+}
+
+.ProgressTrackerStep--clickable {
   cursor: pointer;
-  opacity: 0.8;
+}
+.ProgressTrackerStep--clickable .ProgressTrackerStep__label {
+  color: var(--colorsTextPrimary, #1360d9);
+}
+.ProgressTrackerStep--clickable .ProgressTrackerStep__label:hover, .ProgressTrackerStep--clickable .ProgressTrackerStep__label:focus {
+  text-decoration: underline;
+  outline: none;
 }
 
-.ProgressTrackerStep--complete {
-  color: var(--colorsTextDefault, #141414);
+.ProgressTrackerStep--incomplete {
+  color: var(--colorsTextSubdued, #606162);
 }
+.ProgressTrackerStep--incomplete .ProgressTrackerStep__icon {
+  box-shadow: 0 0 0 2px inset var(--colorsStatusDefault, #8c9ca5);
+  color: var(--colorsTextSubdued, #606162);
+}
+
 .ProgressTrackerStep--complete .ProgressTrackerStep__icon {
-  background-color: var(--colorsStatusSuccess, #18a761);
+  color: var(--colorsTextPrimary, #1360d9);
 }
 .ProgressTrackerStep--complete .a-Icon {
-  font-size: 20px;
+  font-size: 28px;
 }
 
 .ProgressTrackerStep--editing,
 .ProgressTrackerStep--active {
   color: var(--colorsTextDefault, #141414);
 }
+.ProgressTrackerStep--editing .ProgressTrackerStep__label,
+.ProgressTrackerStep--active .ProgressTrackerStep__label {
+  font-weight: 700;
+}
 .ProgressTrackerStep--editing .ProgressTrackerStep__icon,
 .ProgressTrackerStep--active .ProgressTrackerStep__icon {
-  background-color: var(--colorsStatusInfo, #2270ee);
+  box-shadow: 0 0 0 2px inset var(--colorsTextPrimary, #1360d9);
+  color: var(--colorsTextPrimary, #1360d9);
 }
 
 .ProgressTrackerStep--disabled {
-  pointer-events: none !important;
+  pointer-events: none;
 }
 .ProgressTrackerStep--disabled, .ProgressTrackerStep--disabled:hover {
   opacity: 0.6;
 }
+.ProgressTracker--disabled .ProgressTrackerStep--disabled {
+  opacity: 1;
+}
+
+.ProgressTrackerStep__Tooltip {
+  display: none;
+}
+
+.ProgressTrackerStep__Tooltip--visible {
+  display: block;
+}
 
 /*# sourceMappingURL=index.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressTracker/ProgressTracker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/ProgressTracker/ProgressTrackerStep.scss"],"names":[],"mappings":"AAAA;ACKA;ACJC;EACA;AAEA;EACA;EDGA;EACA;EACA;EACA,WE8Ha;EF7Hb,aEgGqB;;;AF7FtB;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAxBe;;;AGMjB;EACC,OARc;EASd;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA,YD4Fa;;;ACxFf;AACA;EACC;EACA;EACA;EACA,YAnCc;EAoCd,OArCa;EAsCb;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA,aD2EW;;;ACxEZ;AACA;EACC;EACA,SDwDiB;;;ACrDlB;EACC,OA1Da;;AA4Db;EACC,kBA1Da;;AA6Dd;EAAU,WDwEG;;;ACrEd;AAAA;EAEC,OArEa;;AAsEb;AAAA;EAA6B,kBAlEf;;;AAqEf;EACC;;AAEA;EAEC,SDiCiB","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/ProgressTracker/ProgressTracker.scss","../../../src/utilities/_component-reset.scss","../../../node_modules/@servicetitan/tokens/core/tokens.scss","../../../src/components/ProgressTracker/ProgressTrackerStep.scss"],"names":[],"mappings":"AAAA;ACMA;ACLC;EACA;AAEA;EACA;EDIA;EACA;EACA;EACA,WE6Ha;EF5Hb,aE+FqB;;;AF5FtB;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBA5Be;;;AAgCjB;EACC;EACA,SE6EkB;;;AFzElB;EAAW,kBArCM;;;AGKlB;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA,YD6Fa;;;ACzFf;EACC;;;AAGD;EACC;;;AAGD;AACA;EACC,aDkEkB;ECjElB;EACA;EACA;EACA,OA5Ca;EA6Cb;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA,OAvDa;EAwDb;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EAEC,kBApEc;;;AAwEhB;EACC,aD8CW;;;AC1CX;EACC;;;AAIF;EACC;;AAEA;EACC,OAvFY;;AAyFZ;EAEC;EACA;;;AAKH;EACC,OAtGc;;AAwGd;EACC;EACA,OA1Ga;;;AA+Gd;EAA6B,OA3GhB;;AA4Gb;EAAU;;;AAGX;AAAA;EAEC,OApHa;;AAsHb;AAAA;EACC,aDZiB;;ACelB;AAAA;EACC;EACA,OAzHY;;;AA6Hd;EACC;;AAEA;EAEC,SDtBiB;;ACyBlB;EAA+B;;;AAGhC;EACC;;;AAGD;EACC","file":"index.css"}

package/dist/components/Scroll/Scroll.css

@@ -43,6 +43,12 @@
 .Scroll--of-y-hidden > .Scroll__Scrollbar {
   overflow-y: hidden;
 }
+.Scroll__Scrollbar:focus {
+  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.Scroll__Scrollbar:focus-visible {
+  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+}
 
 /* Scrollable without visible scrollbar */
 .Scroll--of-x-hidden.Scroll--hidden-scrollbar > .Scroll__Scrollbar {

package/dist/components/Scroll/Scroll.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACMA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACnBC;EACA;AAEA;EACA;EDkBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;;AAG5B;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QAvGkB;;AA0GnB;EAIC;EACA,OA/GkB;EAgHlB;;AAGD;EAIC;EACA;EACA,QAzHkB;;AA4HnB;EAIC;EACA,OAjIkB;EAkIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"Scroll.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACOA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACpBC;EACA;AAEA;EACA;EDmBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;AAG3B;EAAU,eAhCU;;AAmCpB;EAAkB,eAnCE;;;AAsCrB;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QA9GkB;;AAiHnB;EAIC;EACA,OAtHkB;EAuHlB;;AAGD;EAIC;EACA;EACA,QAhIkB;;AAmInB;EAIC;EACA,OAxIkB;EAyIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"Scroll.css"}

package/dist/components/Scroll/Scroll.js

@@ -16,6 +16,12 @@ export const Scroll = (_a) => {
     var { el: ScrollElement = 'div', children, className, height: maxHeight, width: maxWidth, horizontal = 'auto', vertical = 'auto', scrollIndicator = false, scrollbar } = _a, props = __rest(_a, ["el", "children", "className", "height", "width", "horizontal", "vertical", "scrollIndicator", "scrollbar"]);
     const scrollbarRef = React.useRef(null);
     const { top, right, bottom, left } = useScrollPosition(scrollbarRef);
+    const isScrollable = top ||
+        right ||
+        bottom ||
+        left ||
+        horizontal === 'scroll' ||
+        vertical === 'scroll';
     const ScrollClasses = classnames('Scroll', className, {
         [`Scroll--of-x-${horizontal}`]: horizontal,
         [`Scroll--of-y-${vertical}`]: vertical,
@@ -38,6 +44,6 @@ export const Scroll = (_a) => {
     };
     return (React.createElement(ScrollElement, { className: ScrollClasses, style: styles, "data-anvil-component": "Scroll" },
         scrollIndicator && shadows,
-        React.createElement("div", Object.assign({ className: "Scroll__Scrollbar", ref: scrollbarRef }, props), children)));
+        React.createElement("div", Object.assign({ className: "Scroll__Scrollbar", tabIndex: props.tabIndex || isScrollable ? 0 : null, ref: scrollbarRef }, props), children)));
 };
 //# sourceMappingURL=Scroll.js.map

package/dist/components/Scroll/Scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scroll.js","sourceRoot":"","sources":["../../../src/components/Scroll/Scroll.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAmClE,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAWvC,EAAE,EAAE;QAXmC,EACvC,EAAE,EAAE,aAAa,GAAG,KAAK,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,QAAQ,EACf,UAAU,GAAG,MAAM,EACnB,QAAQ,GAAG,MAAM,EACjB,eAAe,GAAG,KAAK,EACvB,SAAS,OAET,EADG,KAAK,cAV+B,4GAWvC,CADQ;IAER,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAErE,MAAM,aAAa,GAAG,UAAU,CAAC,QAAQ,EAAE,SAAS,EAAE;QACrD,CAAC,gBAAgB,UAAU,EAAE,CAAC,EAAE,UAAU;QAC1C,CAAC,gBAAgB,QAAQ,EAAE,CAAC,EAAE,QAAQ;QACtC,wBAAwB,EAAE,GAAG;QAC7B,0BAA0B,EAAE,KAAK;QACjC,2BAA2B,EAAE,MAAM;QACnC,yBAAyB,EAAE,IAAI;QAC/B,0BAA0B,EAAE,SAAS,KAAK,QAAQ;QAClD,qBAAqB,EAAE,CAAC,SAAS;QACjC,oBAAoB,EAAE,CAAC,QAAQ;KAC/B,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CACf,6BAAK,SAAS,EAAC,iBAAiB;QAC/B,6BAAK,SAAS,EAAC,aAAa,GAAG;QAC/B,6BAAK,SAAS,EAAC,eAAe,GAAG;QACjC,6BAAK,SAAS,EAAC,gBAAgB,GAAG;QAClC,6BAAK,SAAS,EAAC,cAAc,GAAG,CAC3B,CACN,CAAC;IAEF,MAAM,MAAM,GAAwB;QACnC,QAAQ;QACR,SAAS;KACT,CAAC;IAEF,OAAO,CACN,oBAAC,aAAa,IACb,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,MAAM,0BACQ,QAAQ;QAE5B,eAAe,IAAI,OAAO;QAC3B,2CAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,YAAY,IAAM,KAAK,GAC7D,QAAQ,CACJ,CACS,CAChB,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"Scroll.js","sourceRoot":"","sources":["../../../src/components/Scroll/Scroll.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAmClE,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAWvC,EAAE,EAAE;QAXmC,EACvC,EAAE,EAAE,aAAa,GAAG,KAAK,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,EAAE,SAAS,EACjB,KAAK,EAAE,QAAQ,EACf,UAAU,GAAG,MAAM,EACnB,QAAQ,GAAG,MAAM,EACjB,eAAe,GAAG,KAAK,EACvB,SAAS,OAET,EADG,KAAK,cAV+B,4GAWvC,CADQ;IAER,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACrE,MAAM,YAAY,GACjB,GAAG;QACH,KAAK;QACL,MAAM;QACN,IAAI;QACJ,UAAU,KAAK,QAAQ;QACvB,QAAQ,KAAK,QAAQ,CAAC;IAEvB,MAAM,aAAa,GAAG,UAAU,CAAC,QAAQ,EAAE,SAAS,EAAE;QACrD,CAAC,gBAAgB,UAAU,EAAE,CAAC,EAAE,UAAU;QAC1C,CAAC,gBAAgB,QAAQ,EAAE,CAAC,EAAE,QAAQ;QACtC,wBAAwB,EAAE,GAAG;QAC7B,0BAA0B,EAAE,KAAK;QACjC,2BAA2B,EAAE,MAAM;QACnC,yBAAyB,EAAE,IAAI;QAC/B,0BAA0B,EAAE,SAAS,KAAK,QAAQ;QAClD,qBAAqB,EAAE,CAAC,SAAS;QACjC,oBAAoB,EAAE,CAAC,QAAQ;KAC/B,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,CACf,6BAAK,SAAS,EAAC,iBAAiB;QAC/B,6BAAK,SAAS,EAAC,aAAa,GAAG;QAC/B,6BAAK,SAAS,EAAC,eAAe,GAAG;QACjC,6BAAK,SAAS,EAAC,gBAAgB,GAAG;QAClC,6BAAK,SAAS,EAAC,cAAc,GAAG,CAC3B,CACN,CAAC;IAEF,MAAM,MAAM,GAAwB;QACnC,QAAQ;QACR,SAAS;KACT,CAAC;IAEF,OAAO,CACN,oBAAC,aAAa,IACb,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,MAAM,0BACQ,QAAQ;QAE5B,eAAe,IAAI,OAAO;QAC3B,2CACC,SAAS,EAAC,mBAAmB,EAC7B,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EACnD,GAAG,EAAE,YAAY,IACb,KAAK,GAER,QAAQ,CACJ,CACS,CAChB,CAAC;AACH,CAAC,CAAC"}

package/dist/components/Scroll/index.css

@@ -43,6 +43,12 @@
 .Scroll--of-y-hidden > .Scroll__Scrollbar {
   overflow-y: hidden;
 }
+.Scroll__Scrollbar:focus {
+  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+}
+.Scroll__Scrollbar:focus-visible {
+  outline-color: var(--colorsFocusRingPrimary, #a9d1ff);
+}
 
 /* Scrollable without visible scrollbar */
 .Scroll--of-x-hidden.Scroll--hidden-scrollbar > .Scroll__Scrollbar {

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACMA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACnBC;EACA;AAEA;EACA;EDkBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;;AAG5B;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QAvGkB;;AA0GnB;EAIC;EACA,OA/GkB;EAgHlB;;AAGD;EAIC;EACA;EACA,QAzHkB;;AA4HnB;EAIC;EACA,OAjIkB;EAkIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/utilities/_visually-hidden.scss","../../../src/components/Scroll/Scroll.scss","../../../src/utilities/_component-reset.scss"],"names":[],"mappings":"AAAA;ACOA;AACA;EACC;EACA;;;AAGD;AACA;AAAA;EAC4C;;;AAE5C;AACA;AAAA;EAC2C;;;AAE3C;ACpBC;EACA;AAEA;EACA;EDmBA;AAEA;;AACA;EAAyB;;AACzB;EAAyB;;AAEzB;EAA2B;;AAC3B;EAA2B;;AAE3B;EAA2B;;AAC3B;EAA2B;;AAG3B;EAAU,eAhCU;;AAmCpB;EAAkB,eAnCE;;;AAsCrB;AACA;EAAqE;;;AACrE;EAAqE;;;AAErE;AAAA;EAEC;;AAEA;AAAA;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAQA;EAAmB;;AAQnB;EAAmB;;AAIrB;EAIC;EACA;;AAIA;EAIC;EACA;EACA,QA9GkB;;AAiHnB;EAIC;EACA,OAtHkB;EAuHlB;;AAGD;EAIC;EACA;EACA,QAhIkB;;AAmInB;EAIC;EACA,OAxIkB;EAyIlB;;;AAKH;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAc;;;AACd;EAAgB;;;AAChB;EAAiB;;;AACjB;EAAe","file":"index.css"}

package/dist/components/Tab/Tab.js

@@ -25,6 +25,6 @@ export const Tab = (_a) => {
         'Tab--disabled': disabled,
         'Tab--focus-visible': isFocusVisible,
     });
-    return (React.createElement(TabElement, Object.assign({ role: "tab", ref: itemRef, tabIndex: disabled ? undefined : 0, "aria-current": active ? 'page' : false, className: TabClasses, onFocus: focusFunction, onBlur: blurFunction, "aria-disabled": props.disabled, "data-anvil-component": "Tab" }, props)));
+    return (React.createElement(TabElement, Object.assign({ role: "tab", ref: itemRef, tabIndex: props.tabIndex || disabled ? -1 : 0, "aria-current": active ? 'page' : false, className: TabClasses, onFocus: focusFunction, onBlur: blurFunction, "aria-disabled": props.disabled, "data-anvil-component": "Tab" }, props)));
 };
 //# sourceMappingURL=Tab.js.map

package/dist/components/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwB9D,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAQjC,EAAE,EAAE;QAR6B,EACjC,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,EACR,OAAO,EACP,MAAM,OAEN,EADG,KAAK,cAPyB,kEAQjC,CADQ;IAER,IAAI,UAAU,GAAQ,QAAQ,CAAC;IAE/B,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,IAAI,KAAK,CAAC,IAAI;QAAE,UAAU,GAAG,GAAG,CAAC;IAEjC,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE;QAC/C,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE,CAAC,MAAM;QACxB,eAAe,EAAE,QAAQ;QACzB,oBAAoB,EAAE,cAAc;KACpC,CAAC,CAAC;IAEH,OAAO,CACN,oBAAC,UAAU,kBACV,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,kBACpB,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACrC,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,mBACL,KAAK,CAAC,QAAQ,0BACR,KAAK,IACtB,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tab/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAClC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwB9D,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAQjC,EAAE,EAAE;QAR6B,EACjC,MAAM,EACN,MAAM,EACN,SAAS,EACT,QAAQ,EACR,OAAO,EACP,MAAM,OAEN,EADG,KAAK,cAPyB,kEAQjC,CADQ;IAER,IAAI,UAAU,GAAQ,QAAQ,CAAC;IAE/B,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,IAAI,KAAK,CAAC,IAAI;QAAE,UAAU,GAAG,GAAG,CAAC;IAEjC,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE;QAC/C,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE,CAAC,MAAM;QACxB,eAAe,EAAE,QAAQ;QACzB,oBAAoB,EAAE,cAAc;KACpC,CAAC,CAAC;IAEH,OAAO,CACN,oBAAC,UAAU,kBACV,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,OAAO,EACZ,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAC/B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACrC,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,mBACL,KAAK,CAAC,QAAQ,0BACR,KAAK,IACtB,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC"}

package/dist/components/Takeover/Takeover.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { FocusTrapProps } from '../../utilities/FocusTrap';
+import { UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import { TakeoverHeader, TakeoverHeaderProps } from './TakeoverHeader';
 import { TakeoverSection, TakeoverSectionProps } from './TakeoverSection';
 import { TakeoverFooter, TakeoverFooterProps } from './TakeoverFooter';
@@ -37,8 +37,8 @@ export interface TakeoverPropsStrict {
     title: TakeoverHeaderProps['title'];
     /** Render in a React Portal */
     portal?: boolean;
-    /** Options passed into FocusTrap */
-    focusTrapOptions?: FocusTrapProps;
+    /** Options passed into useFocusTrap */
+    focusTrapOptions?: UseFocusTrapProps;
 }
 export interface TakeoverProps extends TakeoverPropsStrict {
     [propName: string]: any;