@servicetitan/marketing-ui 5.9.0 → 5.10.0

package/dist/components/image-cropper/image-cropper.js

@@ -1,44 +1,51 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
+}
+function _ts_metadata(k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
+}
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { observable, action, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
-import ReactCrop from 'react-image-crop';
+import ReactCrop, { Crop } from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
-let ImageCropper = class ImageCropper extends Component {
-    constructor(props) {
-        super(props);
-        Object.defineProperty(this, "src", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "crop", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "image", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "getCroppedImg", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (type, fileName) => new Promise(resolve => {
+export class ImageCropper extends Component {
+    componentDidMount() {
+        return this.src = URL.createObjectURL(this.props.file);
+    }
+    componentWillUnmount() {
+        if (this.src) {
+            URL.revokeObjectURL(this.src);
+        }
+    }
+    render() {
+        return this.src ? /*#__PURE__*/ _jsx(ReactCrop, {
+            locked: true,
+            src: this.src,
+            crop: this.crop,
+            onChange: this.handleChange,
+            onImageLoaded: this.handleImageLoaded
+        }) : null;
+    }
+    constructor(props){
+        super(props), _define_property(this, "src", void 0), _define_property(this, "crop", void 0), _define_property(this, "image", void 0), _define_property(this, "getCroppedImg", (type, fileName)=>new Promise((resolve)=>{
                 if (!this.image || !this.crop) {
                     resolve(undefined);
                     return;
@@ -58,77 +65,56 @@ let ImageCropper = class ImageCropper extends Component {
                     return;
                 }
                 ctx.drawImage(this.image, x * (this.image.naturalWidth / this.image.width), y * (this.image.naturalHeight / this.image.height), width, height, 0, 0, width, height);
-                canvas.toBlob(blob => {
-                    const result = blob ? new File([blob], fileName) : undefined;
+                canvas.toBlob((blob)=>{
+                    const result = blob ? new File([
+                        blob
+                    ], fileName) : undefined;
                     resolve(result);
                 }, type, 1);
-            })
-        });
-        Object.defineProperty(this, "handleChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (crop) => (this.crop = crop)
-        });
-        Object.defineProperty(this, "handleImageLoaded", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (image) => {
-                this.image = image;
-                this.crop = {
-                    unit: 'px',
-                    x: 0,
-                    y: 0,
-                    width: this.props.crop.width * (image.width / image.naturalWidth),
-                    height: this.props.crop.height * (image.height / image.naturalHeight),
-                };
-                return false;
-            }
+            })), _define_property(this, "handleChange", (crop)=>this.crop = crop), _define_property(this, "handleImageLoaded", (image)=>{
+            this.image = image;
+            this.crop = {
+                unit: 'px',
+                x: 0,
+                y: 0,
+                width: this.props.crop.width * (image.width / image.naturalWidth),
+                height: this.props.crop.height * (image.height / image.naturalHeight)
+            };
+            return false;
         });
         makeObservable(this);
     }
-    componentDidMount() {
-        return (this.src = URL.createObjectURL(this.props.file));
-    }
-    componentWillUnmount() {
-        if (this.src) {
-            URL.revokeObjectURL(this.src);
-        }
-    }
-    render() {
-        return this.src ? (_jsx(ReactCrop, { locked: true, src: this.src, crop: this.crop, onChange: this.handleChange, onImageLoaded: this.handleImageLoaded })) : null;
-    }
-};
-__decorate([
+}
+_ts_decorate([
     observable,
-    __metadata("design:type", String)
+    _ts_metadata("design:type", String)
 ], ImageCropper.prototype, "src", void 0);
-__decorate([
+_ts_decorate([
     observable,
-    __metadata("design:type", Object)
+    _ts_metadata("design:type", typeof Crop === "undefined" ? Object : Crop)
 ], ImageCropper.prototype, "crop", void 0);
-__decorate([
+_ts_decorate([
     observable,
-    __metadata("design:type", HTMLImageElement)
+    _ts_metadata("design:type", typeof HTMLImageElement === "undefined" ? Object : HTMLImageElement)
 ], ImageCropper.prototype, "image", void 0);
-__decorate([
+_ts_decorate([
     action,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", []),
+    _ts_metadata("design:returntype", void 0)
 ], ImageCropper.prototype, "componentDidMount", null);
-__decorate([
-    action,
-    __metadata("design:type", Object)
+_ts_decorate([
+    action
 ], ImageCropper.prototype, "handleChange", void 0);
-__decorate([
-    action,
-    __metadata("design:type", Object)
+_ts_decorate([
+    action
 ], ImageCropper.prototype, "handleImageLoaded", void 0);
-ImageCropper = __decorate([
+ImageCropper = _ts_decorate([
     observer,
-    __metadata("design:paramtypes", [Object])
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", [
+        typeof ImageCropperProps === "undefined" ? Object : ImageCropperProps
+    ])
 ], ImageCropper);
-export { ImageCropper };
+
 //# sourceMappingURL=image-cropper.js.map

package/dist/components/image-cropper/image-cropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-cropper.js","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/image-cropper/image-cropper.tsx"],"sourcesContent":["import { Component } from 'react';\nimport { observable, action, makeObservable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\n\ninterface ImageCropperProps {\n    file: File;\n    crop: {\n        width: number;\n        height: number;\n    };\n}\n\n@observer\nexport class ImageCropper extends Component<ImageCropperProps> {\n    @observable private src?: string;\n    @observable private crop?: Crop;\n    @observable private image?: HTMLImageElement;\n\n    constructor(props: ImageCropperProps) {\n        super(props);\n        makeObservable(this);\n    }\n\n    getCroppedImg = (type: string, fileName: string) =>\n        new Promise<File | undefined>(resolve => {\n            if (!this.image || !this.crop) {\n                resolve(undefined);\n                return;\n            }\n\n            const { x, y } = this.crop;\n            if (x == null || y == null) {\n                resolve(undefined);\n                return;\n            }\n\n            const { width, height } = this.props.crop;\n            const canvas = document.createElement('canvas');\n            canvas.width = width;\n            canvas.height = height;\n            const ctx = canvas.getContext('2d');\n            if (!ctx) {\n                resolve(undefined);\n                return;\n            }\n\n            ctx.drawImage(\n                this.image,\n                x * (this.image.naturalWidth / this.image.width),\n                y * (this.image.naturalHeight / this.image.height),\n                width,\n                height,\n                0,\n                0,\n                width,\n                height\n            );\n\n            canvas.toBlob(\n                blob => {\n                    const result = blob ? new File([blob], fileName) : undefined;\n                    resolve(result);\n                },\n                type,\n                1\n            );\n        });\n\n    @action\n    componentDidMount() {\n        return (this.src = URL.createObjectURL(this.props.file));\n    }\n\n    componentWillUnmount() {\n        if (this.src) {\n            URL.revokeObjectURL(this.src);\n        }\n    }\n\n    render() {\n        return this.src ? (\n            <ReactCrop\n                locked\n                src={this.src}\n                crop={this.crop}\n                onChange={this.handleChange}\n                onImageLoaded={this.handleImageLoaded}\n            />\n        ) : null;\n    }\n\n    @action\n    private handleChange = (crop: Crop) => (this.crop = crop);\n\n    @action\n    private handleImageLoaded = (image: HTMLImageElement) => {\n        this.image = image;\n        this.crop = {\n            unit: 'px',\n            x: 0,\n            y: 0,\n            width: this.props.crop.width * (image.width / image.naturalWidth),\n            height: this.props.crop.height * (image.height / image.naturalHeight),\n        };\n\n        return false;\n    };\n}\n"],"names":["Component","observable","action","makeObservable","observer","ReactCrop","Crop","ImageCropper","componentDidMount","src","URL","createObjectURL","props","file","componentWillUnmount","revokeObjectURL","render","locked","crop","onChange","handleChange","onImageLoaded","handleImageLoaded","constructor","image","getCroppedImg","type","fileName","Promise","resolve","undefined","x","y","width","height","canvas","document","createElement","ctx","getContext","drawImage","naturalWidth","naturalHeight","toBlob","blob","result","File","unit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,UAAU,EAAEC,MAAM,EAAEC,cAAc,QAAQ,OAAO;AAC1D,SAASC,QAAQ,QAAQ,aAAa;AACtC,OAAOC,aAAaC,IAAI,QAAQ,mBAAmB;AACnD,OAAO,sCAAsC;AAW7C,OAAO,MAAMC,qBAAqBP;IAwD9BQ,oBAAoB;QAChB,OAAQ,IAAI,CAACC,GAAG,GAAGC,IAAIC,eAAe,CAAC,IAAI,CAACC,KAAK,CAACC,IAAI;IAC1D;IAEAC,uBAAuB;QACnB,IAAI,IAAI,CAACL,GAAG,EAAE;YACVC,IAAIK,eAAe,CAAC,IAAI,CAACN,GAAG;QAChC;IACJ;IAEAO,SAAS;QACL,OAAO,IAAI,CAACP,GAAG,iBACX,KAACJ;YACGY,MAAM;YACNR,KAAK,IAAI,CAACA,GAAG;YACbS,MAAM,IAAI,CAACA,IAAI;YACfC,UAAU,IAAI,CAACC,YAAY;YAC3BC,eAAe,IAAI,CAACC,iBAAiB;aAEzC;IACR;IAvEAC,YAAYX,KAAwB,CAAE;QAClC,KAAK,CAACA,QALV,uBAAoBH,OAApB,KAAA,IACA,uBAAoBS,QAApB,KAAA,IACA,uBAAoBM,SAApB,KAAA,IAOAC,uBAAAA,iBAAgB,CAACC,MAAcC,WAC3B,IAAIC,QAA0BC,CAAAA;gBAC1B,IAAI,CAAC,IAAI,CAACL,KAAK,IAAI,CAAC,IAAI,CAACN,IAAI,EAAE;oBAC3BW,QAAQC;oBACR;gBACJ;gBAEA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAG,IAAI,CAACd,IAAI;gBAC1B,IAAIa,KAAK,QAAQC,KAAK,MAAM;oBACxBH,QAAQC;oBACR;gBACJ;gBAEA,MAAM,EAAEG,KAAK,EAAEC,MAAM,EAAE,GAAG,IAAI,CAACtB,KAAK,CAACM,IAAI;gBACzC,MAAMiB,SAASC,SAASC,aAAa,CAAC;gBACtCF,OAAOF,KAAK,GAAGA;gBACfE,OAAOD,MAAM,GAAGA;gBAChB,MAAMI,MAAMH,OAAOI,UAAU,CAAC;gBAC9B,IAAI,CAACD,KAAK;oBACNT,QAAQC;oBACR;gBACJ;gBAEAQ,IAAIE,SAAS,CACT,IAAI,CAAChB,KAAK,EACVO,IAAK,CAAA,IAAI,CAACP,KAAK,CAACiB,YAAY,GAAG,IAAI,CAACjB,KAAK,CAACS,KAAK,AAAD,GAC9CD,IAAK,CAAA,IAAI,CAACR,KAAK,CAACkB,aAAa,GAAG,IAAI,CAAClB,KAAK,CAACU,MAAM,AAAD,GAChDD,OACAC,QACA,GACA,GACAD,OACAC;gBAGJC,OAAOQ,MAAM,CACTC,CAAAA;oBACI,MAAMC,SAASD,OAAO,IAAIE,KAAK;wBAACF;qBAAK,EAAEjB,YAAYG;oBACnDD,QAAQgB;gBACZ,GACAnB,MACA;YAER,KAyBJ,uBACQN,gBAAe,CAACF,OAAgB,IAAI,CAACA,IAAI,GAAGA,OAEpD,uBACQI,qBAAoB,CAACE;YACzB,IAAI,CAACA,KAAK,GAAGA;YACb,IAAI,CAACN,IAAI,GAAG;gBACR6B,MAAM;gBACNhB,GAAG;gBACHC,GAAG;gBACHC,OAAO,IAAI,CAACrB,KAAK,CAACM,IAAI,CAACe,KAAK,GAAIT,CAAAA,MAAMS,KAAK,GAAGT,MAAMiB,YAAY,AAAD;gBAC/DP,QAAQ,IAAI,CAACtB,KAAK,CAACM,IAAI,CAACgB,MAAM,GAAIV,CAAAA,MAAMU,MAAM,GAAGV,MAAMkB,aAAa,AAAD;YACvE;YAEA,OAAO;QACX;QAtFIvC,eAAe,IAAI;IACvB;AAsFJ"}

package/dist/components/stat/stat-card.js

@@ -1,66 +1,112 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
-import { BodyText, Eyebrow, Popover, Stack, Tooltip, } from '@servicetitan/design-system';
+import { BodyText, Eyebrow, Popover, Stack, Tooltip } from '@servicetitan/design-system';
 import * as Styles from './stat-card.module.less';
 import { formatValue } from '../../utils/formatters';
-const calculateDiff = (value, prev, percents) => {
+const calculateDiff = (value, prev, percents)=>{
     const diff = (value - prev) * (percents ? 100 : 1);
     const absDiff = Math.abs(diff);
     let diffPercent = 0;
     if (percents) {
         diffPercent = diff;
+    } else if (absDiff) {
+        diffPercent = prev ? 100 * absDiff / prev : 100;
     }
-    else if (absDiff) {
-        diffPercent = prev ? (100 * absDiff) / prev : 100;
-    }
-    return [absDiff, diffPercent, diff >= 0];
+    return [
+        absDiff,
+        diffPercent,
+        diff >= 0
+    ];
 };
-const formatDifference = (value, isPlus, format) => {
+const formatDifference = (value, isPlus, format)=>{
     return (isPlus ? '+' : '-') + formatValue(value, format);
 };
-const formatDifferencePercentage = (value, isPlus) => {
+const formatDifferencePercentage = (value, isPlus)=>{
     if (!value) {
         return '';
     }
     return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');
 };
-export const StatDiff = ({ value, prev, size, format, inverted, neutral, className, diffPercentOnly = false, }) => {
+export const StatDiff = ({ value, prev, size, format, inverted, neutral, className, diffPercentOnly = false })=>{
     const percents = format === 'percent';
     const [absDiff, diffPercent, isIncrease] = calculateDiff(value !== null && value !== void 0 ? value : 0, prev !== null && prev !== void 0 ? prev : 0, percents);
     const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
     let text = '';
     if (percents) {
         text += formatDifferencePercentage(absDiff, isIncrease);
-    }
-    else {
+    } else {
         const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);
         if (diffPercentOnly) {
             text += `${diffPercentage}`;
-        }
-        else {
+        } else {
             text += `${formatDifference(absDiff, isIncrease, format)}`;
             if (diffPercent !== 0) {
                 text += ` (${diffPercentage})`;
             }
         }
     }
-    return (_jsxs(BodyText, { className: classNames(Styles.statDiff, {
+    return /*#__PURE__*/ _jsxs(BodyText, {
+        className: classNames(Styles.statDiff, {
             'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),
             'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),
-            'c-neutral-200': !!neutral,
-        }, className), size: size !== null && size !== void 0 ? size : 'small', "data-cy": "stat-diff-value", children: [_jsx("span", { children: diff }), value === undefined ? '\u00A0' : text] }));
+            'c-neutral-200': !!neutral
+        }, className),
+        size: size !== null && size !== void 0 ? size : 'small',
+        "data-cy": "stat-diff-value",
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                children: diff
+            }),
+            value === undefined ? '\u00A0' : text
+        ]
+    });
 };
-export const StatCard = ({ title, description, popoverContent, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false, }) => {
+export const StatCard = ({ title, description, popoverContent, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false })=>{
     const [popoverShown, setPopoverShown] = useState(false);
     const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
     const val = value === undefined ? '\u00A0' : formatValue(value, format);
-    const eyebrow = (_jsx(Eyebrow, { className: classNames(Styles.title, 'ta-center'), "data-cy": `marketing-stat-${title}-title`, onMouseEnter: () => {
+    const eyebrow = /*#__PURE__*/ _jsx(Eyebrow, {
+        className: classNames(Styles.title, 'ta-center'),
+        "data-cy": `marketing-stat-${title}-title`,
+        onMouseEnter: ()=>{
             setPopoverShown(true);
-        }, children: title }));
-    return (_jsxs(Stack, { direction: "column", alignItems: "center", className: classNames('p-y-3', {
+        },
+        children: title
+    });
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "column",
+        alignItems: "center",
+        className: classNames('p-y-3', {
             'bg-white border-radius-2 border': !clean,
-            'flex-grow-1 flex-basis-0': fill,
-        }, className), onMouseLeave: () => setPopoverShown(false), children: [popoverContent ? (_jsx(Popover, { open: popoverShown, trigger: eyebrow, children: popoverContent })) : description ? (_jsx(Tooltip, { text: description, "data-cy": `marketing-stat-${title}-tooltip`, children: eyebrow })) : (eyebrow), _jsx(BodyText, { className: "fs-6-i ff-display", "data-cy": `marketing-stat-${title}-value`, children: val }), !valueOnly && (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, diffPercentOnly: diffPercentOnly }))] }));
+            'flex-grow-1 flex-basis-0': fill
+        }, className),
+        onMouseLeave: ()=>setPopoverShown(false),
+        children: [
+            popoverContent ? /*#__PURE__*/ _jsx(Popover, {
+                open: popoverShown,
+                trigger: eyebrow,
+                children: popoverContent
+            }) : description ? /*#__PURE__*/ _jsx(Tooltip, {
+                text: description,
+                "data-cy": `marketing-stat-${title}-tooltip`,
+                children: eyebrow
+            }) : eyebrow,
+            /*#__PURE__*/ _jsx(BodyText, {
+                className: "fs-6-i ff-display",
+                "data-cy": `marketing-stat-${title}-value`,
+                children: val
+            }),
+            !valueOnly && /*#__PURE__*/ _jsx(StatDiff, {
+                value: value,
+                prev: prev,
+                format: format,
+                inverted: inverted,
+                neutral: neutral,
+                diffPercentOnly: diffPercentOnly
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=stat-card.js.map

package/dist/components/stat/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/stat/stat-card.tsx"],"sourcesContent":["import { FC, ReactNode, useState } from 'react';\nimport classNames from 'classnames';\nimport {\n    BodyText,\n    BodyTextPropsStrict,\n    Eyebrow,\n    Popover,\n    Stack,\n    Tooltip,\n} from '@servicetitan/design-system';\nimport * as Styles from './stat-card.module.less';\nimport { formatValue, NumberFormatter } from '../../utils/formatters';\n\nconst calculateDiff = (\n    value: number,\n    prev: number,\n    percents?: boolean\n): [number, number, boolean] => {\n    const diff = (value - prev) * (percents ? 100 : 1);\n    const absDiff = Math.abs(diff);\n    let diffPercent = 0;\n\n    if (percents) {\n        diffPercent = diff;\n    } else if (absDiff) {\n        diffPercent = prev ? (100 * absDiff) / prev : 100;\n    }\n\n    return [absDiff, diffPercent, diff >= 0];\n};\n\nconst formatDifference = (value: number, isPlus: boolean, format: NumberFormatter): string => {\n    return (isPlus ? '+' : '-') + formatValue(value, format);\n};\n\nconst formatDifferencePercentage = (value: number, isPlus: boolean): string => {\n    if (!value) {\n        return '';\n    }\n\n    return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');\n};\n\ninterface StatDiffProps {\n    value?: number;\n    prev?: number;\n    size?: BodyTextPropsStrict['size'];\n    format: NumberFormatter;\n    inverted?: boolean;\n    neutral?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatDiff: FC<StatDiffProps> = ({\n    value,\n    prev,\n    size,\n    format,\n    inverted,\n    neutral,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const percents = format === 'percent';\n    const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);\n    const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';\n    let text = '';\n\n    if (percents) {\n        text += formatDifferencePercentage(absDiff, isIncrease);\n    } else {\n        const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);\n\n        if (diffPercentOnly) {\n            text += `${diffPercentage}`;\n        } else {\n            text += `${formatDifference(absDiff, isIncrease, format)}`;\n\n            if (diffPercent !== 0) {\n                text += ` (${diffPercentage})`;\n            }\n        }\n    }\n\n    return (\n        <BodyText\n            className={classNames(\n                Styles.statDiff,\n                {\n                    'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n                    'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n                    'c-neutral-200': !!neutral,\n                },\n                className\n            )}\n            size={size ?? 'small'}\n            data-cy=\"stat-diff-value\"\n        >\n            <span>{diff}</span>\n            {value === undefined ? '\\u00A0' : text}\n        </BodyText>\n    );\n};\n\nexport interface StatCardProps {\n    title: string;\n    description?: string;\n    popoverContent?: ReactNode;\n    value?: number;\n    prev?: number;\n    percent?: boolean;\n    money?: boolean;\n    rate?: boolean;\n    clean?: boolean;\n    inverted?: boolean;\n    neutral?: boolean;\n    fill?: boolean;\n    valueOnly?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatCard: FC<StatCardProps> = ({\n    title,\n    description,\n    popoverContent,\n    value,\n    percent,\n    money,\n    rate,\n    prev,\n    clean,\n    inverted,\n    neutral,\n    fill,\n    valueOnly,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const [popoverShown, setPopoverShown] = useState(false);\n    const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n    const val = value === undefined ? '\\u00A0' : formatValue(value, format);\n\n    const eyebrow = (\n        <Eyebrow\n            className={classNames(Styles.title, 'ta-center')}\n            data-cy={`marketing-stat-${title}-title`}\n            onMouseEnter={() => {\n                setPopoverShown(true);\n            }}\n        >\n            {title}\n        </Eyebrow>\n    );\n\n    return (\n        <Stack\n            direction=\"column\"\n            alignItems=\"center\"\n            className={classNames(\n                'p-y-3',\n                {\n                    'bg-white border-radius-2 border': !clean,\n                    'flex-grow-1 flex-basis-0': fill,\n                },\n                className\n            )}\n            onMouseLeave={() => setPopoverShown(false)}\n        >\n            {popoverContent ? (\n                <Popover open={popoverShown} trigger={eyebrow}>\n                    {popoverContent}\n                </Popover>\n            ) : description ? (\n                <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>\n                    {eyebrow}\n                </Tooltip>\n            ) : (\n                eyebrow\n            )}\n            <BodyText className=\"fs-6-i ff-display\" data-cy={`marketing-stat-${title}-value`}>\n                {val}\n            </BodyText>\n            {!valueOnly && (\n                <StatDiff\n                    value={value}\n                    prev={prev}\n                    format={format}\n                    inverted={inverted}\n                    neutral={neutral}\n                    diffPercentOnly={diffPercentOnly}\n                />\n            )}\n        </Stack>\n    );\n};\n"],"names":["useState","classNames","BodyText","Eyebrow","Popover","Stack","Tooltip","Styles","formatValue","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","text","diffPercentage","statDiff","data-cy","span","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","popoverShown","setPopoverShown","val","eyebrow","onMouseEnter","direction","alignItems","onMouseLeave","open","trigger"],"mappings":"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"}

package/dist/components/stat/stat-card.module.less.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const statDiff: string;
+export const statExtendedDiff: string;
+export const title: string;
+

package/dist/components/stat/stat-extended-card.js

@@ -4,10 +4,82 @@ import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan
 import { formatValue } from '../../utils/formatters';
 import { StatDiff } from './stat-card';
 import * as Styles from './stat-card.module.less';
-export const StatExtendedCard = ({ title, title2, description, value, goal, prev, percent, money, rate, inverted, neutral, fill, className, actions, }) => {
+export const StatExtendedCard = ({ title, title2, description, value, goal, prev, percent, money, rate, inverted, neutral, fill, className, actions })=>{
     const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
-    return (_jsxs("div", { className: classNames('p-3 bg-white border border-radius-2', {
-            'flex-grow-1 flex-basis-0': fill,
-        }, className), children: [_jsxs(Stack, { justifyContent: "space-between", alignItems: "center", children: [_jsx(Stack.Item, { fill: true, children: _jsxs(Stack, { children: [_jsx(Headline, { size: "small", children: title }), !!description && (_jsx(Tooltip, { text: description, "data-cy": `marketing-stat-card-${title}-info-tooltip`, children: _jsx(Icon, { name: "info", size: 18, className: "c-neutral-80 m-l-half", "data-cy": `marketing-stat-card-${title}-info-icon` }) }))] }) }), actions && _jsx(Stack.Item, { shrink: 0, children: actions })] }), _jsx(Eyebrow, { size: "small", className: "m-t-2 c-black", "data-cy": `marketing-stat-card-${title2}-title2`, children: title2 }), _jsx(Stack, { justifyContent: "space-between", className: "m-t-half", children: _jsxs(Stack, { alignItems: "flex-end", className: "flex-grow-1 flex-basis-0", children: [_jsx(Headline, { className: "m-b-0-i m-r-half fw-normal-i", size: "xlarge", children: formatValue(value, format) }), goal !== undefined ? (_jsxs(BodyText, { subdued: true, children: ["/ ", formatValue(goal, format), " (Goal)"] })) : prev !== undefined ? (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, className: classNames(Styles.statExtendedDiff, 'm-l-1') })) : undefined] }) })] }));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classNames('p-3 bg-white border border-radius-2', {
+            'flex-grow-1 flex-basis-0': fill
+        }, className),
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                justifyContent: "space-between",
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ _jsx(Stack.Item, {
+                        fill: true,
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            children: [
+                                /*#__PURE__*/ _jsx(Headline, {
+                                    size: "small",
+                                    children: title
+                                }),
+                                !!description && /*#__PURE__*/ _jsx(Tooltip, {
+                                    text: description,
+                                    "data-cy": `marketing-stat-card-${title}-info-tooltip`,
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "info",
+                                        size: 18,
+                                        className: "c-neutral-80 m-l-half",
+                                        "data-cy": `marketing-stat-card-${title}-info-icon`
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    actions && /*#__PURE__*/ _jsx(Stack.Item, {
+                        shrink: 0,
+                        children: actions
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Eyebrow, {
+                size: "small",
+                className: "m-t-2 c-black",
+                "data-cy": `marketing-stat-card-${title2}-title2`,
+                children: title2
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                justifyContent: "space-between",
+                className: "m-t-half",
+                children: /*#__PURE__*/ _jsxs(Stack, {
+                    alignItems: "flex-end",
+                    className: "flex-grow-1 flex-basis-0",
+                    children: [
+                        /*#__PURE__*/ _jsx(Headline, {
+                            className: "m-b-0-i m-r-half fw-normal-i",
+                            size: "xlarge",
+                            children: formatValue(value, format)
+                        }),
+                        goal !== undefined ? /*#__PURE__*/ _jsxs(BodyText, {
+                            subdued: true,
+                            children: [
+                                "/ ",
+                                formatValue(goal, format),
+                                " (Goal)"
+                            ]
+                        }) : prev !== undefined ? /*#__PURE__*/ _jsx(StatDiff, {
+                            value: value,
+                            prev: prev,
+                            format: format,
+                            inverted: inverted,
+                            neutral: neutral,
+                            className: classNames(Styles.statExtendedDiff, 'm-l-1')
+                        }) : undefined
+                    ]
+                })
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=stat-extended-card.js.map

package/dist/components/stat/stat-extended-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-extended-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAkBlD,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EACxD,KAAK,EACL,MAAM,EACN,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,OAAO,GACV,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEhF,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CACjB,qCAAqC,EACrC;YACI,0BAA0B,EAAE,IAAI;SACnC,EACD,SAAS,CACZ,aAED,MAAC,KAAK,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aACrD,KAAC,KAAK,CAAC,IAAI,IAAC,IAAI,kBACZ,MAAC,KAAK,eACF,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,YAAE,KAAK,GAAY,EACxC,CAAC,CAAC,WAAW,IAAI,CACd,KAAC,OAAO,IACJ,IAAI,EAAE,WAAW,aACR,uBAAuB,KAAK,eAAe,YAEpD,KAAC,IAAI,IACD,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,EAAE,EACR,SAAS,EAAC,uBAAuB,aACxB,uBAAuB,KAAK,YAAY,GACnD,GACI,CACb,IACG,GACC,EACZ,OAAO,IAAI,KAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,CAAC,YAAG,OAAO,GAAc,IACrD,EACR,KAAC,OAAO,IACJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,eAAe,aAChB,uBAAuB,MAAM,SAAS,YAE9C,MAAM,GACD,EAEV,KAAC,KAAK,IAAC,cAAc,EAAC,eAAe,EAAC,SAAS,EAAC,UAAU,YACtD,MAAC,KAAK,IAAC,UAAU,EAAC,UAAU,EAAC,SAAS,EAAC,0BAA0B,aAC7D,KAAC,QAAQ,IAAC,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,YAC3D,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,GACpB,EACV,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAClB,MAAC,QAAQ,IAAC,OAAO,yBAAI,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,eAAmB,CACpE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,QAAQ,IACL,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,OAAO,CAAC,GACzD,CACL,CAAC,CAAC,CAAC,SAAS,IACT,GACJ,IACN,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/stat/stat-extended-card.tsx"],"sourcesContent":["import { FC, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan/design-system';\nimport { formatValue } from '../../utils/formatters';\nimport { StatDiff } from './stat-card';\nimport * as Styles from './stat-card.module.less';\n\nexport interface StatExtendedCardProps {\n    title: string;\n    description?: string;\n    title2: string;\n    value: number;\n    goal?: number;\n    prev?: number;\n    percent?: boolean;\n    money?: boolean;\n    rate?: boolean;\n    inverted?: boolean;\n    neutral?: boolean;\n    fill?: boolean;\n    className?: string;\n    actions?: ReactNode;\n}\nexport const StatExtendedCard: FC<StatExtendedCardProps> = ({\n    title,\n    title2,\n    description,\n    value,\n    goal,\n    prev,\n    percent,\n    money,\n    rate,\n    inverted,\n    neutral,\n    fill,\n    className,\n    actions,\n}) => {\n    const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n\n    return (\n        <div\n            className={classNames(\n                'p-3 bg-white border border-radius-2',\n                {\n                    'flex-grow-1 flex-basis-0': fill,\n                },\n                className\n            )}\n        >\n            <Stack justifyContent=\"space-between\" alignItems=\"center\">\n                <Stack.Item fill>\n                    <Stack>\n                        <Headline size=\"small\">{title}</Headline>\n                        {!!description && (\n                            <Tooltip\n                                text={description}\n                                data-cy={`marketing-stat-card-${title}-info-tooltip`}\n                            >\n                                <Icon\n                                    name=\"info\"\n                                    size={18}\n                                    className=\"c-neutral-80 m-l-half\"\n                                    data-cy={`marketing-stat-card-${title}-info-icon`}\n                                />\n                            </Tooltip>\n                        )}\n                    </Stack>\n                </Stack.Item>\n                {actions && <Stack.Item shrink={0}>{actions}</Stack.Item>}\n            </Stack>\n            <Eyebrow\n                size=\"small\"\n                className=\"m-t-2 c-black\"\n                data-cy={`marketing-stat-card-${title2}-title2`}\n            >\n                {title2}\n            </Eyebrow>\n\n            <Stack justifyContent=\"space-between\" className=\"m-t-half\">\n                <Stack alignItems=\"flex-end\" className=\"flex-grow-1 flex-basis-0\">\n                    <Headline className=\"m-b-0-i m-r-half fw-normal-i\" size=\"xlarge\">\n                        {formatValue(value, format)}\n                    </Headline>\n                    {goal !== undefined ? (\n                        <BodyText subdued>/ {formatValue(goal, format)} (Goal)</BodyText>\n                    ) : prev !== undefined ? (\n                        <StatDiff\n                            value={value}\n                            prev={prev}\n                            format={format}\n                            inverted={inverted}\n                            neutral={neutral}\n                            className={classNames(Styles.statExtendedDiff, 'm-l-1')}\n                        />\n                    ) : undefined}\n                </Stack>\n            </Stack>\n        </div>\n    );\n};\n"],"names":["classNames","BodyText","Icon","Headline","Eyebrow","Stack","Tooltip","formatValue","StatDiff","Styles","StatExtendedCard","title","title2","description","value","goal","prev","percent","money","rate","inverted","neutral","fill","className","actions","format","div","justifyContent","alignItems","Item","size","text","data-cy","name","shrink","undefined","subdued","statExtendedDiff"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,QAAQ,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,KAAK,EAAEC,OAAO,QAAQ,8BAA8B;AAChG,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,cAAc;AACvC,YAAYC,YAAY,0BAA0B;AAkBlD,OAAO,MAAMC,mBAA8C,CAAC,EACxDC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,OAAO,EACPC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,SAAS,EACTC,OAAO,EACV;IACG,MAAMC,SAASP,QAAQ,UAAUD,UAAU,YAAYE,OAAO,SAAS;IAEvE,qBACI,MAACO;QACGH,WAAWvB,WACP,uCACA;YACI,4BAA4BsB;QAChC,GACAC;;0BAGJ,MAAClB;gBAAMsB,gBAAe;gBAAgBC,YAAW;;kCAC7C,KAACvB,MAAMwB,IAAI;wBAACP,IAAI;kCACZ,cAAA,MAACjB;;8CACG,KAACF;oCAAS2B,MAAK;8CAASnB;;gCACvB,CAAC,CAACE,6BACC,KAACP;oCACGyB,MAAMlB;oCACNmB,WAAS,CAAC,oBAAoB,EAAErB,MAAM,aAAa,CAAC;8CAEpD,cAAA,KAACT;wCACG+B,MAAK;wCACLH,MAAM;wCACNP,WAAU;wCACVS,WAAS,CAAC,oBAAoB,EAAErB,MAAM,UAAU,CAAC;;;;;;oBAMpEa,yBAAW,KAACnB,MAAMwB,IAAI;wBAACK,QAAQ;kCAAIV;;;;0BAExC,KAACpB;gBACG0B,MAAK;gBACLP,WAAU;gBACVS,WAAS,CAAC,oBAAoB,EAAEpB,OAAO,OAAO,CAAC;0BAE9CA;;0BAGL,KAACP;gBAAMsB,gBAAe;gBAAgBJ,WAAU;0BAC5C,cAAA,MAAClB;oBAAMuB,YAAW;oBAAWL,WAAU;;sCACnC,KAACpB;4BAASoB,WAAU;4BAA+BO,MAAK;sCACnDvB,YAAYO,OAAOW;;wBAEvBV,SAASoB,0BACN,MAAClC;4BAASmC,OAAO;;gCAAC;gCAAG7B,YAAYQ,MAAMU;gCAAQ;;6BAC/CT,SAASmB,0BACT,KAAC3B;4BACGM,OAAOA;4BACPE,MAAMA;4BACNS,QAAQA;4BACRL,UAAUA;4BACVC,SAASA;4BACTE,WAAWvB,WAAWS,OAAO4B,gBAAgB,EAAE;6BAEnDF;;;;;;AAKxB,EAAE"}

package/dist/components/ui/action-button/action-button.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import classnames from 'classnames';
-import { Icon, BodyText, Tooltip, useFocusVisible, } from '@servicetitan/design-system';
+import { Icon, BodyText, Tooltip, useFocusVisible } from '@servicetitan/design-system';
 import * as Styles from './action-button.module.less';
-export const ActionButton = ({ onClick, disabled, children, iconName, hover, qaPrefix, active, tooltip, }) => {
+export const ActionButton = ({ onClick, disabled, children, iconName, hover, qaPrefix, active, tooltip })=>{
     const buttonRef = useRef(null);
     const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(buttonRef);
-    const handleClick = () => {
+    const handleClick = ()=>{
         if (disabled) {
             return;
         }
@@ -14,19 +14,45 @@ export const ActionButton = ({ onClick, disabled, children, iconName, hover, qaP
             onClick();
         }
     };
-    const getButton = () => {
+    const getButton = ()=>{
         const classes = classnames(Styles.actionButton, qaPrefix, {
             [Styles.primary]: hover === 'primary' && !disabled,
             [Styles.negative]: hover === 'negative' && !disabled,
             [Styles.active]: active && !disabled,
             [Styles.disabled]: disabled,
-            [Styles.focusVisible]: isFocusVisible,
+            [Styles.focusVisible]: isFocusVisible
+        });
+        return /*#__PURE__*/ _jsxs("button", {
+            type: "button",
+            ref: buttonRef,
+            className: classes,
+            onClick: handleClick,
+            disabled: disabled,
+            onFocus: focusFunction,
+            onBlur: blurFunction,
+            children: [
+                iconName && /*#__PURE__*/ _jsx(Icon, {
+                    name: iconName,
+                    size: "20px",
+                    className: "m-r-1"
+                }),
+                /*#__PURE__*/ _jsx(BodyText, {
+                    className: classnames(Styles.text, `${qaPrefix}-text`),
+                    children: children
+                })
+            ]
         });
-        return (_jsxs("button", { type: "button", ref: buttonRef, className: classes, onClick: handleClick, disabled: disabled, onFocus: focusFunction, onBlur: blurFunction, children: [iconName && _jsx(Icon, { name: iconName, size: "20px", className: "m-r-1" }), _jsx(BodyText, { className: classnames(Styles.text, `${qaPrefix}-text`), children: children })] }));
     };
     if (!tooltip) {
         return getButton();
     }
-    return (_jsx(Tooltip, { text: tooltip, direction: "l", el: "div", className: `${qaPrefix}-tooltip`, children: getButton() }));
+    return /*#__PURE__*/ _jsx(Tooltip, {
+        text: tooltip,
+        direction: "l",
+        el: "div",
+        className: `${qaPrefix}-tooltip`,
+        children: getButton()
+    });
 };
+
 //# sourceMappingURL=action-button.js.map