@servicetitan/design-system 12.8.1 → 12.9.0

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;

package/dist/components/Takeover/Takeover.js

@@ -9,19 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useRef } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { tokens } from '@servicetitan/tokens/core';
 import { Overlay } from '../../internal/Overlay';
 import { wrapWithComponent } from '../../utilities/wrapWithComponent';
-import { FocusTrap } from '../../utilities/FocusTrap';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { TakeoverHeader } from './TakeoverHeader';
 import { TakeoverSection } from './TakeoverSection';
 import { TakeoverFooter } from './TakeoverFooter';
 export const Takeover = (_a) => {
     var { actions, animate = false, backLabel, children, className, contentWrapperClass, focusTrapOptions, footer, footerAlign = TakeoverFooter.defaultProps.align, onBack, onClose, open = true, portal = true, sectioned, theme = TakeoverHeader.defaultProps.theme, title } = _a, props = __rest(_a, ["actions", "animate", "backLabel", "children", "className", "contentWrapperClass", "focusTrapOptions", "footer", "footerAlign", "onBack", "onClose", "open", "portal", "sectioned", "theme", "title"]);
-    const [focusWrapper, setFocusWrapper] = React.useState(1);
     React.useEffect(() => {
         document.body.classList.add('Takeover--is-open');
         return () => {
@@ -31,7 +30,8 @@ export const Takeover = (_a) => {
             }
         };
     }, []);
-    const takeoverRef = useRef(null);
+    // Focus trapping
+    const takeoverRef = useFocusTrap(Object.assign({ autoFocusContainer: true, disabled: !open }, focusTrapOptions));
     const headerProps = {
         actions,
         backLabel,
@@ -56,24 +56,12 @@ export const Takeover = (_a) => {
     };
     const Animate = animate ? AnimatePresence : React.Fragment;
     const TakeoverEl = animate ? motion.div : 'div';
-    const TakeoverProps = Object.assign(Object.assign({ className: TakeoverClasses, ref: takeoverRef, tabIndex: focusWrapper }, (animate && framerAnimation)), props);
-    React.useEffect(() => {
-        // Removes wrapper to be focusable element after initial tab
-        function eventHandler(event) {
-            event.key === 'Tab' && setFocusWrapper(-1);
-        }
-        document.addEventListener('keydown', eventHandler);
-        return () => document.removeEventListener('keydown', eventHandler);
-    }, []);
-    React.useEffect(() => {
-        setFocusWrapper(1);
-    }, [open]);
+    const TakeoverProps = Object.assign(Object.assign({ className: TakeoverClasses, ref: takeoverRef }, (animate && framerAnimation)), props);
     return (React.createElement(Overlay, { portal: portal, animate: animate, open: open },
-        React.createElement(Animate, null, open && (React.createElement(FocusTrap, Object.assign({}, focusTrapOptions),
-            React.createElement(TakeoverEl, Object.assign({ "data-anvil-component": "Takeover" }, TakeoverProps),
-                React.createElement(TakeoverHeader, Object.assign({}, headerProps)),
-                React.createElement("div", { className: contentWrapperClasses }, content),
-                React.createElement(TakeoverFooter, Object.assign({}, footerProps))))))));
+        React.createElement(Animate, null, open && (React.createElement(TakeoverEl, Object.assign({ "data-anvil-component": "Takeover" }, TakeoverProps),
+            React.createElement(TakeoverHeader, Object.assign({}, headerProps)),
+            React.createElement("div", { className: contentWrapperClasses }, content),
+            React.createElement(TakeoverFooter, Object.assign({}, footerProps)))))));
 };
 Takeover.Header = TakeoverHeader;
 Takeover.Section = TakeoverSection;

package/dist/components/Takeover/Takeover.js.map

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