@servicetitan/marketing-ui 5.8.1 → 5.10.0

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-cards.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import("react").FC<import("./stat-card").StatCardProps>;

package/dist/components/stat/stat-cards.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-cards.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;;;AAIA,wBAIE;AAIF,eAAO,MAAM,cAAc,+CAA+D,CAAC;AAC3F,eAAO,MAAM,0BAA0B,+CAOrC,CAAC;AACH,eAAO,MAAM,yBAAyB,+CAEpC,CAAC;AACH,eAAO,MAAM,aAAa,+CAAuE,CAAC;AAClG,eAAO,MAAM,uBAAuB,+CAElC,CAAC;AACH,eAAO,MAAM,YAAY,+CAAiE,CAAC"}
+{"version":3,"file":"stat-cards.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;;AAIA,wBAIE;AAIF,eAAO,MAAM,cAAc,+CAA+D,CAAC;AAC3F,eAAO,MAAM,0BAA0B,+CAOrC,CAAC;AACH,eAAO,MAAM,yBAAyB,+CAEpC,CAAC;AACH,eAAO,MAAM,aAAa,+CAAuE,CAAC;AAClG,eAAO,MAAM,uBAAuB,+CAElC,CAAC;AACH,eAAO,MAAM,YAAY,+CAAiE,CAAC"}

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/stat/stat-extended-card.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import("react").FC<import("./stat-extended-card").StatExtendedCardProps>;

package/dist/components/stat/stat-extended-card.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-extended-card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.stories.tsx"],"names":[],"mappings":";;;;;;AAGA,wBAIE;AAIF,eAAO,MAAM,qBAAqB,+CAUhC,CAAC;AACH,eAAO,MAAM,qBAAqB,+CAEhC,CAAC;AACH,eAAO,MAAM,uBAAuB,+CASlC,CAAC"}
+{"version":3,"file":"stat-extended-card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAIF,eAAO,MAAM,qBAAqB,+CAUhC,CAAC;AACH,eAAO,MAAM,qBAAqB,+CAEhC,CAAC;AACH,eAAO,MAAM,uBAAuB,+CASlC,CAAC"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"action-button.js","sourceRoot":"","sources":["../../../../src/components/ui/action-button/action-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EACH,IAAI,EACJ,QAAQ,EAER,OAAO,EACP,eAAe,GAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAatD,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAChD,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,GACV,EAAE,EAAE;IACD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;IAEnF,MAAM,WAAW,GAAG,GAAG,EAAE;QACrB,IAAI,QAAQ,EAAE,CAAC;YACX,OAAO;QACX,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACV,OAAO,EAAE,CAAC;QACd,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,QAAQ,EAAE;YACtD,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,KAAK,SAAS,IAAI,CAAC,QAAQ;YAClD,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,UAAU,IAAI,CAAC,QAAQ;YACpD,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,cAAc;SACxC,CAAC,CAAC;QAEH,OAAO,CACH,kBACI,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,aAAa,EACtB,MAAM,EAAE,YAAY,aAEnB,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,GAAG,EACnE,KAAC,QAAQ,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,QAAQ,OAAO,CAAC,YAC3D,QAAQ,GACF,IACN,CACZ,CAAC;IACN,CAAC,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE,CAAC;QACX,OAAO,SAAS,EAAE,CAAC;IACvB,CAAC;IAED,OAAO,CACH,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAC,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAE,GAAG,QAAQ,UAAU,YAC1E,SAAS,EAAE,GACN,CACb,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../../src/components/ui/action-button/action-button.tsx"],"sourcesContent":["import { ReactNode, FC, useRef } from 'react';\nimport classnames from 'classnames';\nimport {\n    Icon,\n    BodyText,\n    IconNameType,\n    Tooltip,\n    useFocusVisible,\n} from '@servicetitan/design-system';\nimport * as Styles from './action-button.module.less';\n\nexport interface ActionButtonProps {\n    children: ReactNode;\n    iconName?: IconNameType;\n    hover?: 'primary' | 'negative' | 'none';\n    disabled?: boolean;\n    tooltip?: string;\n    qaPrefix?: string;\n    active?: boolean;\n    onClick?(): void;\n}\n\nexport const ActionButton: FC<ActionButtonProps> = ({\n    onClick,\n    disabled,\n    children,\n    iconName,\n    hover,\n    qaPrefix,\n    active,\n    tooltip,\n}) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const { isFocusVisible, focusFunction, blurFunction } = useFocusVisible(buttonRef);\n\n    const handleClick = () => {\n        if (disabled) {\n            return;\n        }\n\n        if (onClick) {\n            onClick();\n        }\n    };\n\n    const getButton = () => {\n        const classes = classnames(Styles.actionButton, qaPrefix, {\n            [Styles.primary]: hover === 'primary' && !disabled,\n            [Styles.negative]: hover === 'negative' && !disabled,\n            [Styles.active]: active && !disabled,\n            [Styles.disabled]: disabled,\n            [Styles.focusVisible]: isFocusVisible,\n        });\n\n        return (\n            <button\n                type=\"button\"\n                ref={buttonRef}\n                className={classes}\n                onClick={handleClick}\n                disabled={disabled}\n                onFocus={focusFunction}\n                onBlur={blurFunction}\n            >\n                {iconName && <Icon name={iconName} size=\"20px\" className=\"m-r-1\" />}\n                <BodyText className={classnames(Styles.text, `${qaPrefix}-text`)}>\n                    {children}\n                </BodyText>\n            </button>\n        );\n    };\n\n    if (!tooltip) {\n        return getButton();\n    }\n\n    return (\n        <Tooltip text={tooltip} direction=\"l\" el=\"div\" className={`${qaPrefix}-tooltip`}>\n            {getButton()}\n        </Tooltip>\n    );\n};\n"],"names":["useRef","classnames","Icon","BodyText","Tooltip","useFocusVisible","Styles","ActionButton","onClick","disabled","children","iconName","hover","qaPrefix","active","tooltip","buttonRef","isFocusVisible","focusFunction","blurFunction","handleClick","getButton","classes","actionButton","primary","negative","focusVisible","button","type","ref","className","onFocus","onBlur","name","size","text","direction","el"],"mappings":";AAAA,SAAwBA,MAAM,QAAQ,QAAQ;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SACIC,IAAI,EACJC,QAAQ,EAERC,OAAO,EACPC,eAAe,QACZ,8BAA8B;AACrC,YAAYC,YAAY,8BAA8B;AAatD,OAAO,MAAMC,eAAsC,CAAC,EAChDC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,MAAM,EACNC,OAAO,EACV;IACG,MAAMC,YAAYhB,OAA0B;IAC5C,MAAM,EAAEiB,cAAc,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAAGd,gBAAgBW;IAExE,MAAMI,cAAc;QAChB,IAAIX,UAAU;YACV;QACJ;QAEA,IAAID,SAAS;YACTA;QACJ;IACJ;IAEA,MAAMa,YAAY;QACd,MAAMC,UAAUrB,WAAWK,OAAOiB,YAAY,EAAEV,UAAU;YACtD,CAACP,OAAOkB,OAAO,CAAC,EAAEZ,UAAU,aAAa,CAACH;YAC1C,CAACH,OAAOmB,QAAQ,CAAC,EAAEb,UAAU,cAAc,CAACH;YAC5C,CAACH,OAAOQ,MAAM,CAAC,EAAEA,UAAU,CAACL;YAC5B,CAACH,OAAOG,QAAQ,CAAC,EAAEA;YACnB,CAACH,OAAOoB,YAAY,CAAC,EAAET;QAC3B;QAEA,qBACI,MAACU;YACGC,MAAK;YACLC,KAAKb;YACLc,WAAWR;YACXd,SAASY;YACTX,UAAUA;YACVsB,SAASb;YACTc,QAAQb;;gBAEPR,0BAAY,KAACT;oBAAK+B,MAAMtB;oBAAUuB,MAAK;oBAAOJ,WAAU;;8BACzD,KAAC3B;oBAAS2B,WAAW7B,WAAWK,OAAO6B,IAAI,EAAE,GAAGtB,SAAS,KAAK,CAAC;8BAC1DH;;;;IAIjB;IAEA,IAAI,CAACK,SAAS;QACV,OAAOM;IACX;IAEA,qBACI,KAACjB;QAAQ+B,MAAMpB;QAASqB,WAAU;QAAIC,IAAG;QAAMP,WAAW,GAAGjB,SAAS,QAAQ,CAAC;kBAC1EQ;;AAGb,EAAE"}

package/dist/components/ui/action-button/action-button.module.less.d.ts

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const actionButton: string;
+export const active: string;
+export const disabled: string;
+export const focusVisible: string;
+export const negative: string;
+export const primary: string;
+export const text: string;
+

package/dist/components/ui/action-button/action-button.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import("react").FC<import("./action-button").ActionButtonProps>;

package/dist/components/ui/action-button/action-button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action-button/action-button.stories.tsx"],"names":[],"mappings":";;;;;;AAGA,wBAIE;AAKF,eAAO,MAAM,wBAAwB,+CAEnC,CAAC;AAEH,eAAO,MAAM,yBAAyB,+CAEpC,CAAC"}
+{"version":3,"file":"action-button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/action-button/action-button.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAMF,eAAO,MAAM,wBAAwB,+CAEnC,CAAC;AAEH,eAAO,MAAM,yBAAyB,+CAEpC,CAAC"}

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

@@ -1,2 +1,3 @@
 export * from './action-button';
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ui/action-button/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"sources":["../../../../src/components/ui/action-button/index.tsx"],"sourcesContent":["export * from './action-button';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB"}

package/dist/components/ui/centered-spinner/centered-spinner.js

@@ -1,7 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classnames from 'classnames';
 import { BodyText, Stack, Spinner } from '@servicetitan/design-system';
-export const CenteredSpinner = ({ size, className, info }) => {
-    return (_jsxs(Stack, { justifyContent: "center", alignItems: "center", direction: "column", className: classnames(className, 'h-100 w-100'), children: [_jsx(Spinner, { className: "of-hidden", size: size }), !!info && (_jsx(BodyText, { size: "small", className: "m-t-1", subdued: true, children: info }))] }));
+export const CenteredSpinner = ({ size, className, info })=>{
+    return /*#__PURE__*/ _jsxs(Stack, {
+        justifyContent: "center",
+        alignItems: "center",
+        direction: "column",
+        className: classnames(className, 'h-100 w-100'),
+        children: [
+            /*#__PURE__*/ _jsx(Spinner, {
+                className: "of-hidden",
+                size: size
+            }),
+            !!info && /*#__PURE__*/ _jsx(BodyText, {
+                size: "small",
+                className: "m-t-1",
+                subdued: true,
+                children: info
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=centered-spinner.js.map

package/dist/components/ui/centered-spinner/centered-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"centered-spinner.js","sourceRoot":"","sources":["../../../../src/components/ui/centered-spinner/centered-spinner.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AASvE,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE;IACzF,OAAO,CACH,MAAC,KAAK,IACF,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,aAAa,CAAC,aAE/C,KAAC,OAAO,IAAC,SAAS,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,GAAI,EAC5C,CAAC,CAAC,IAAI,IAAI,CACP,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAC,OAAO,kBAC3C,IAAI,GACE,CACd,IACG,CACX,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../../src/components/ui/centered-spinner/centered-spinner.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classnames from 'classnames';\nimport { BodyText, Stack, Spinner } from '@servicetitan/design-system';\n\nexport interface CenteredSpinnerPropsStrict {\n    /** Size variants */\n    size?: 'large' | 'medium' | 'small' | 'tiny';\n    className?: string;\n    info?: string;\n}\n\nexport const CenteredSpinner: FC<CenteredSpinnerPropsStrict> = ({ size, className, info }) => {\n    return (\n        <Stack\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            direction=\"column\"\n            className={classnames(className, 'h-100 w-100')}\n        >\n            <Spinner className=\"of-hidden\" size={size} />\n            {!!info && (\n                <BodyText size=\"small\" className=\"m-t-1\" subdued>\n                    {info}\n                </BodyText>\n            )}\n        </Stack>\n    );\n};\n"],"names":["classnames","BodyText","Stack","Spinner","CenteredSpinner","size","className","info","justifyContent","alignItems","direction","subdued"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AACpC,SAASC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,QAAQ,8BAA8B;AASvE,OAAO,MAAMC,kBAAkD,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAEC,IAAI,EAAE;IACrF,qBACI,MAACL;QACGM,gBAAe;QACfC,YAAW;QACXC,WAAU;QACVJ,WAAWN,WAAWM,WAAW;;0BAEjC,KAACH;gBAAQG,WAAU;gBAAYD,MAAMA;;YACpC,CAAC,CAACE,sBACC,KAACN;gBAASI,MAAK;gBAAQC,WAAU;gBAAQK,OAAO;0BAC3CJ;;;;AAKrB,EAAE"}

package/dist/components/ui/centered-spinner/centered-spinner.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import("react").FC<import("./centered-spinner").CenteredSpinnerPropsStrict>;

package/dist/components/ui/centered-spinner/centered-spinner.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"centered-spinner.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/centered-spinner/centered-spinner.stories.tsx"],"names":[],"mappings":";;;;;;AAGA,wBAIE;AAKF,eAAO,MAAM,mBAAmB,+CAA+C,CAAC;AAChF,eAAO,MAAM,eAAe,+CAAoE,CAAC;AACjG,eAAO,MAAM,qBAAqB,+CAEhC,CAAC"}
+{"version":3,"file":"centered-spinner.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/centered-spinner/centered-spinner.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAMF,eAAO,MAAM,mBAAmB,+CAA+C,CAAC;AAChF,eAAO,MAAM,eAAe,+CAAoE,CAAC;AACjG,eAAO,MAAM,qBAAqB,+CAEhC,CAAC"}

package/dist/components/ui/date-range-picker/date-range-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAY,oBAAoB,EAAe,MAAM,6BAA6B,CAAC;AAC1F,OAAO,EAAa,+BAA+B,EAAE,MAAM,qBAAqB,CAAC;AAGjF,UAAU,YAAY;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B,CAAC,UAAU,SAAS,MAAM;IACjE,KAAK,EAAE,+BAA+B,CAAC,UAAU,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,+BAA+B,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK;QAC3B,OAAO,EAAE,CACL,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,EACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,KACnC,YAAY,CAAC;KACrB,CAAC;CACL;AAwBD,eAAO,MAAM,eAAe,8EAOrB,2BAA2B,UAAU,CAAC,4CA8E5C,CAAC"}
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAY,oBAAoB,EAAe,MAAM,6BAA6B,CAAC;AAC1F,OAAO,EAAa,+BAA+B,EAAE,MAAM,qBAAqB,CAAC;AAGjF,UAAU,YAAY;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B,CAAC,UAAU,SAAS,MAAM;IACjE,KAAK,EAAE,+BAA+B,CAAC,UAAU,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,+BAA+B,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK;QAC3B,OAAO,EAAE,CACL,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,EACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,oBAAoB,CAAC,OAAO,CAAC,KACnC,YAAY,CAAC;KACrB,CAAC;CACL;AAwBD,eAAO,MAAM,eAAe,GACvB,UAAU,SAAS,MAAM,kDAMvB,0BAA0B,CAAC,UAAU,CAAC,4CA8E5C,CAAC"}