@servicetitan/design-system 12.8.1 → 12.10.0

package/dist/components/KeyPressListener/KeyPressListener.d.ts

@@ -5,6 +5,7 @@ export interface KeyPressListenerProps {
     handler(event: KeyboardEvent): void;
     keyEvent?: KeyEvent;
     disabled?: boolean;
+    targetElement?: HTMLElement;
 }
 declare type KeyEvent = 'keydown' | 'keyup';
 export declare const KeyPressListener: React.FC<KeyPressListenerProps>;

package/dist/components/KeyPressListener/KeyPressListener.js

@@ -1,18 +1,20 @@
 import { useEffect } from 'react';
-export const KeyPressListener = ({ code, handler, keyEvent = 'keyup', disabled = false, }) => {
+export const KeyPressListener = ({ code, handler, keyEvent = 'keyup', disabled = false, targetElement, }) => {
     const handleKeyEvent = (event) => {
+        if (event.code !== code)
+            return;
         if (disabled) {
             event.preventDefault();
             return;
         }
-        if (event.code === code) {
-            handler(event);
-        }
+        handler(event);
     };
+    const getElement = () => (targetElement ? targetElement : document);
     useEffect(() => {
-        document.addEventListener(keyEvent, handleKeyEvent);
+        const target = getElement();
+        target.addEventListener(keyEvent, handleKeyEvent);
         return () => {
-            document.removeEventListener(keyEvent, handleKeyEvent);
+            target.removeEventListener(keyEvent, handleKeyEvent);
         };
     });
     return null;

package/dist/components/KeyPressListener/KeyPressListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyPressListener.js","sourceRoot":"","sources":["../../../src/components/KeyPressListener/KeyPressListener.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzC,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EACjE,IAAI,EACJ,OAAO,EACP,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,KAAK,GAChB,EAAE,EAAE;IACJ,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,IAAI,QAAQ,EAAE;YACb,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;SACP;QAED,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;YACxB,OAAO,CAAC,KAAK,CAAC,CAAC;SACf;IACF,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACxD,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACb,CAAC,CAAC"}
+{"version":3,"file":"KeyPressListener.js","sourceRoot":"","sources":["../../../src/components/KeyPressListener/KeyPressListener.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAazC,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EACjE,IAAI,EACJ,OAAO,EACP,QAAQ,GAAG,OAAO,EAClB,QAAQ,GAAG,KAAK,EAChB,aAAa,GACb,EAAE,EAAE;IACJ,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC/C,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI;YAAE,OAAO;QAEhC,IAAI,QAAQ,EAAE;YACb,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;SACP;QAED,OAAO,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,MAAM,GAAG,UAAU,EAAE,CAAC;QAC5B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAElD,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACtD,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACb,CAAC,CAAC"}

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { ModalWindow, ModalWindowProps, ModalHeader, ModalHeaderProps, ModalFooter, ModalFooterProps, ModalContent, ModalSizes } from './components';
-import { FocusTrapProps } from '../../utilities/FocusTrap';
+import { UseFocusTrapProps } from '../../hooks';
 export interface ModalProps extends ModalHeaderProps, ModalWindowProps {
     /** Adds one or more classnames for an element */
     className?: string;
@@ -16,8 +16,8 @@ export interface ModalProps extends ModalHeaderProps, ModalWindowProps {
     scrollable?: boolean;
     /** Controls the width of the Modal */
     size?: ModalSizes;
-    /** Options passed into FocusTrap */
-    focusTrapOptions?: FocusTrapProps;
+    /** Options passed into useFocusTrap */
+    focusTrapOptions?: UseFocusTrapProps;
     /** Adds classnames to Modal's content wrapper */
     contentClassName?: string;
 }

package/dist/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,EACN,WAAW,EAEX,WAAW,EAEX,WAAW,EAEX,YAAY,EACZ,UAAU,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAwCxC,MAAM,CAAC,MAAM,KAAK,GAAU,CAAC,EAa5B,EAAE,EAAE;QAbwB,EAC5B,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,gBAAgB,OAEhB,EADG,IAAI,cAZqB,yIAa5B,CADO;IAEP,MAAM,WAAW,GAAG,4BAA4B,CAAC;IACjD,MAAM,UAAU,GAAG,iBAAiB,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IACvE,MAAM,gBAAgB,GAAG,uBAAuB,cAAc,CAC7D,WAAW,EACX,CAAC,CACD,EAAE,EAAE,CAAC;IAEN,OAAO,CACN,oBAAC,WAAW,kBACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,aAAa,0BACG,OAAO,gBACjB,MAAM,qBACA,UAAU,sBACT,gBAAgB,IAC9B,IAAI;QAER,oBAAC,WAAW,IAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QAC/D,oBAAC,YAAY,IACZ,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,EAC/C,UAAU,EAAE,UAAU,EACtB,EAAE,EAAE,gBAAgB,IAEnB,QAAQ,CACK;QACd,MAAM,IAAI,oBAAC,WAAW,IAAC,KAAK,EAAE,WAAW,IAAG,MAAM,CAAe,CACrD,CACd,CAAC;AACH,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAC7B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,EACN,WAAW,EAEX,WAAW,EAEX,WAAW,EAEX,YAAY,EACZ,UAAU,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAyCxC,MAAM,CAAC,MAAM,KAAK,GAAU,CAAC,EAa5B,EAAE,EAAE;QAbwB,EAC5B,QAAQ,EACR,MAAM,EACN,WAAW,EACX,OAAO,EACP,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,UAAU,GAAG,IAAI,EACjB,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,gBAAgB,OAEhB,EADG,IAAI,cAZqB,yIAa5B,CADO;IAEP,MAAM,WAAW,GAAG,4BAA4B,CAAC;IACjD,MAAM,UAAU,GAAG,iBAAiB,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IACvE,MAAM,gBAAgB,GAAG,uBAAuB,cAAc,CAC7D,WAAW,EACX,CAAC,CACD,EAAE,EAAE,CAAC;IAEN,OAAO,CACN,oBAAC,WAAW,kBACX,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,IAAI,EAAC,aAAa,0BACG,OAAO,gBACjB,MAAM,qBACA,UAAU,sBACT,gBAAgB,IAC9B,IAAI;QAER,oBAAC,WAAW,IAAC,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;QAC/D,oBAAC,YAAY,IACZ,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,EAC/C,UAAU,EAAE,UAAU,EACtB,EAAE,EAAE,gBAAgB,IAEnB,QAAQ,CACK;QACd,MAAM,IAAI,oBAAC,WAAW,IAAC,KAAK,EAAE,WAAW,IAAG,MAAM,CAAe,CACrD,CACd,CAAC;AACH,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAC7B,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC"}

package/dist/components/Modal/components.d.ts

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { OverlayProps } from '../../internal/Overlay';
 import { JustifyProps } from '../../utilities/justify-props';
-import { FocusTrapProps } from '../../utilities/FocusTrap';
+import { UseFocusTrapProps } from '../../hooks/useFocusTrap';
 export interface ModalContentProps {
     /** Adds one or more classnames for an element */
     className?: string;
@@ -38,7 +38,7 @@ export interface ModalWindowProps extends OverlayProps {
     /** Add class attribute */
     className?: string;
     size?: ModalSizes;
-    /** Options passed into FocusTrap */
-    focusTrapOptions?: FocusTrapProps;
+    /** Options passed into useFocusTrap */
+    focusTrapOptions?: UseFocusTrapProps;
 }
 export declare const ModalWindow: FC<ModalWindowProps>;

package/dist/components/Modal/components.js

@@ -9,12 +9,12 @@ 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 { FocusTrap } from '../../utilities/FocusTrap';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { Headline } from '../Headline';
 import { Button } from '../Button';
 export const ModalContent = ({ children, className, scrollable = true, id, }) => {
@@ -62,8 +62,8 @@ function sizeClass(size) {
 export const ModalWindow = (_a) => {
     var { animate = true, children, className, focusTrapOptions, onClose, open, portal = true, size = ModalSizes.M } = _a, props = __rest(_a, ["animate", "children", "className", "focusTrapOptions", "onClose", "open", "portal", "size"]);
     const ModalWindowClassNames = classnames('Modal', sizeClass(size), className);
-    const containerRef = useRef(null);
-    const [focusWrapper, setFocusWrapper] = React.useState(1);
+    // Focus trapping
+    const containerRef = useFocusTrap(Object.assign({ autoFocusContainer: true, disabled: !open }, focusTrapOptions));
     const duration = parseInt(tokens.durationStandard, 10) / 1000; // '200ms' -> 0.2
     const framerAnimation = {
         initial: { opacity: 0, y: 50 },
@@ -73,20 +73,8 @@ export const ModalWindow = (_a) => {
     };
     const Animate = animate ? AnimatePresence : React.Fragment;
     const ModalEl = animate ? motion.div : 'div';
-    const ModalProps = Object.assign(Object.assign(Object.assign({ className: ModalWindowClassNames }, (animate && framerAnimation)), props), { ref: containerRef, tabIndex: focusWrapper });
-    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 ModalProps = Object.assign(Object.assign(Object.assign({ className: ModalWindowClassNames }, (animate && framerAnimation)), props), { ref: containerRef });
     return (React.createElement(Overlay, { animate: animate, backdrop: true, onClose: onClose, open: open, portal: portal },
-        React.createElement(Animate, null, open && (React.createElement(FocusTrap, Object.assign({}, focusTrapOptions),
-            React.createElement(ModalEl, Object.assign({}, ModalProps), children))))));
+        React.createElement(Animate, null, open && React.createElement(ModalEl, Object.assign({}, ModalProps), children))));
 };
 //# sourceMappingURL=components.js.map

package/dist/components/Modal/components.js.map

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

package/dist/components/Popover/Popover.d.ts

@@ -1,7 +1,7 @@
 import React, { ForwardRefExoticComponent } from 'react';
 import { PopperProps } from '../../internal/Popper';
 import { PopoverContent, PopoverContentProps, PopoverDivider, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps } from './components';
-import { FocusTrapProps } from '../../utilities/FocusTrap';
+import { UseFocusTrapProps } from '../../hooks/useFocusTrap';
 export interface PopoverPropsStrict {
     /** If there isn't enough space on the screen the Popover will be repositioned to the opposite side of the anchor */
     autoFlipHorizontally?: boolean;
@@ -51,8 +51,8 @@ export interface PopoverPropsStrict {
     width?: 'xs' | 's' | 'm' | 'l' | '100' | 'auto';
     /** Adds one or more classnames to Popover's source element */
     wrapperClassName?: string;
-    /** Options passed into FocusTrap */
-    focusTrapOptions?: FocusTrapProps;
+    /** Options passed into useFocusTrap */
+    focusTrapOptions?: UseFocusTrapProps;
     /** offset ammount between Popover and trigger */
     offset?: PopperProps['offset'];
 }

package/dist/components/ProgressTracker/ProgressTracker.css

@@ -14,6 +14,9 @@
 .ProgressTrackerDivider {
   position: relative;
   width: 100%;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-basis: 0;
 }
 .ProgressTrackerDivider::after {
   content: "";
@@ -23,7 +26,16 @@
   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);
 }
 
 /*# sourceMappingURL=ProgressTracker.css.map */

package/dist/components/ProgressTracker/ProgressTracker.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"],"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","file":"ProgressTracker.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"],"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","file":"ProgressTracker.css"}

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