@servicetitan/marketing-ui 5.8.1 → 5.10.0

package/dist/utils/use-target-range-store.js

@@ -1,9 +1,10 @@
 import { useLocalStore } from 'mobx-react';
 import { action } from 'mobx';
-export const useTargetRangeStore = () => useLocalStore(() => ({
-    targetRange: undefined,
-    setTargetRange: action(function (range) {
-        this.targetRange = range;
-    }),
-}));
+export const useTargetRangeStore = ()=>useLocalStore(()=>({
+            targetRange: undefined,
+            setTargetRange: action(function(range) {
+                this.targetRange = range;
+            })
+        }));
+
 //# sourceMappingURL=use-target-range-store.js.map

package/dist/utils/use-target-range-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-target-range-store.js","sourceRoot":"","sources":["../../src/utils/use-target-range-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAS9B,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CACpC,aAAa,CAAmB,GAAG,EAAE,CAAC,CAAC;IACnC,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,MAAM,CAAC,UAAkC,KAAoB;QACzE,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC,CAAC;CACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/utils/use-target-range-store.ts"],"sourcesContent":["import { useLocalStore } from 'mobx-react';\nimport { action } from 'mobx';\n\nexport type OptionalRange = Range | undefined;\n\nexport interface TargetRangeStore {\n    targetRange: OptionalRange;\n    setTargetRange: (range: OptionalRange) => void;\n}\n\nexport const useTargetRangeStore = () =>\n    useLocalStore<TargetRangeStore>(() => ({\n        targetRange: undefined,\n        setTargetRange: action(function (this: TargetRangeStore, range: OptionalRange) {\n            this.targetRange = range;\n        }),\n    }));\n"],"names":["useLocalStore","action","useTargetRangeStore","targetRange","undefined","setTargetRange","range"],"mappings":"AAAA,SAASA,aAAa,QAAQ,aAAa;AAC3C,SAASC,MAAM,QAAQ,OAAO;AAS9B,OAAO,MAAMC,sBAAsB,IAC/BF,cAAgC,IAAO,CAAA;YACnCG,aAAaC;YACbC,gBAAgBJ,OAAO,SAAkCK,KAAoB;gBACzE,IAAI,CAACH,WAAW,GAAGG;YACvB;QACJ,CAAA,GAAI"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "5.8.1",
+    "version": "5.10.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -14,7 +14,7 @@
         "src"
     ],
     "dependencies": {
-        "classnames": "~2.3.1",
+        "classnames": "^2.3.1",
         "react-image-crop": "8.6.5"
     },
     "peerDependencies": {
@@ -30,19 +30,19 @@
     },
     "devDependencies": {
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/react-ioc": "^24.0.3",
-        "@servicetitan/tokens": ">=12.1.11",
-        "@testing-library/react": "^14.0.0",
+        "@servicetitan/react-ioc": "^31.3.2",
+        "@servicetitan/tokens": ">=12.2.1",
+        "@testing-library/react": "^14.2.1",
         "@types/accounting": "~0.4.2",
-        "@types/history": "~4.7.7",
+        "@types/history": "~4.7.10",
         "@types/react": "~18.2.55",
         "@types/react-image-crop": "8.1.2",
         "accounting": "~0.4.1",
-        "axios": ">=0.20.0",
+        "axios": "~0.30.0",
         "mobx": "~6.10.2",
-        "mobx-react": "~9.0.2",
-        "moment": "~2.29.1",
-        "react": "~18.2.0"
+        "mobx-react": "^9.2.0",
+        "moment": "~2.29.3",
+        "react": "^18.2.0"
     },
     "publishConfig": {
         "access": "public"
@@ -51,5 +51,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "17fc7d50aebf18316775bddae960a29a2c79b1b0"
+    "gitHead": "7fc7b9cbf766fe23879ae81831f28bdd96559bce"
 }

package/src/components/charts/funnel-chart/funnel-chart.stories.tsx

@@ -7,8 +7,9 @@ export default {
     component: FunnelChart,
     parameters: {},
 };
-const w = (cb: () => ReactElement) => () =>
-    <div style={{ height: '300px', width: '420px' }}>{cb()}</div>;
+const w = (cb: () => ReactElement) => () => (
+    <div style={{ height: '300px', width: '420px' }}>{cb()}</div>
+);
 
 const sections3 = (): FunnelChartSection<{ info: string[] }>[] => [
     {

package/src/components/charts/line-chart/components/svg-bars.tsx

@@ -13,6 +13,7 @@ interface SvgBarsProps {
 
 export const SvgBars: FC<SvgBarsProps> = observer(
     ({ metrics, isStackedBarChart, isGroupedBarChart }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
         const [store] = useDependencies(SvgStore);
         const { fpx, fpy, barWidth, length } = store;
         const barWidthHalf = barWidth / 2;
@@ -87,6 +88,7 @@ interface SvgBarsHoverProps {
 }
 
 export const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [store] = useDependencies(SvgStore);
     const { fpx, fpy, barWidth, length } = store;
     const barWidthHalf = barWidth / 2;

package/src/components/ui/action-button/action-button.stories.tsx

@@ -7,8 +7,9 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
-    <div style={style}>{cb()}</div>;
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () => (
+    <div style={style}>{cb()}</div>
+);
 
 export const actionButtonHoverPrimary = w({}, () => (
     <ActionButton hover="primary">Button</ActionButton>

package/src/components/ui/centered-spinner/centered-spinner.stories.tsx

@@ -7,8 +7,9 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
-    <div style={style}>{cb()}</div>;
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () => (
+    <div style={style}>{cb()}</div>
+);
 
 export const centeredSpinnerTiny = w({}, () => <CenteredSpinner size="tiny" />);
 export const centeredSpinner = w({ width: '400px', height: '400px' }, () => <CenteredSpinner />);

package/src/components/ui/date-range-picker/date-range-picker.stories.tsx

@@ -12,12 +12,11 @@ export default {
 const tz = { UtcOffset: 0 };
 const state = DateRangePickerState.createWithOptions(DateRangePickerOptionsTenantAds.create(tz));
 
-const w = (style: { width?: string; height?: string }, Component: FC) => () =>
-    (
-        <div style={style}>
-            <Component />
-        </div>
-    );
+const w = (style: { width?: string; height?: string }, Component: FC) => () => (
+    <div style={style}>
+        <Component />
+    </div>
+);
 
 export const dateRangePicker = w({}, () => <DateRangePicker state={state} />);
 export const dateRangePickerCompare = w({}, () => <DateRangePicker state={state} compare />);

package/src/components/ui/date-range-picker/date-range-picker.tsx

@@ -91,8 +91,8 @@ export const DateRangePicker = observer(
         const textValue = selectedOption
             ? selectedOption.text
             : compare || !value
-            ? 'Custom Date Range'
-            : formatDateRange(value);
+              ? 'Custom Date Range'
+              : formatDateRange(value);
 
         return (
             <Stack>

package/src/components/ui/line-text/line-text-body.stories.tsx

@@ -7,8 +7,9 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string }, cb: () => ReactElement) => () =>
-    <div style={style}>{cb()}</div>;
+const w = (style: { width?: string }, cb: () => ReactElement) => () => (
+    <div style={style}>{cb()}</div>
+);
 
 export const bodyTextLineUnlimited = w({}, () => <BodyTextLine>just a simple text</BodyTextLine>);
 export const bodyTextLineLimited = w({ width: '400px' }, () => (

package/src/components/ui/line-text/line-text-head.stories.tsx

@@ -7,8 +7,9 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string }, cb: () => ReactElement) => () =>
-    <div style={style}>{cb()}</div>;
+const w = (style: { width?: string }, cb: () => ReactElement) => () => (
+    <div style={style}>{cb()}</div>
+);
 
 export const headlineLineUnlimited = w({}, () => <HeadlineLine>just a simple text</HeadlineLine>);
 export const headlineLineLimited = w({ width: '400px' }, () => (

package/src/components/ui/line-text/line-text.tsx

@@ -13,7 +13,7 @@ import * as Styles from './line-text.module.less';
 const useLimited = (): [
     (node: HTMLElement | null) => void,
     (node: HTMLElement | null) => void,
-    boolean
+    boolean,
 ] => {
     const [rect1, ref1] = useClientRect();
     const [rect2, ref2] = useClientRect();

package/src/components/ui/title-popover/title-popover.stories.tsx

@@ -8,8 +8,9 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
-    <div style={style}>{cb()}</div>;
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () => (
+    <div style={style}>{cb()}</div>
+);
 
 export const titlePopover = w({}, () => <TitlePopover text="Title text">Content</TitlePopover>);
 export const titlePopoverToggle = w({}, () => {

package/src/utils/date/__tests__/date-range-picker.test.ts

@@ -10,7 +10,7 @@ type OptType = [
     [number, number, number],
     [number, number, number],
     string,
-    DateRangePickerOptionsTenantAdsTypes
+    DateRangePickerOptionsTenantAdsTypes,
 ];
 const opt = ([sy, sm, sd]: [number, number, number], [ey, em, ed]: [number, number, number]) => ({
     start: new Date(sy, sm - 1, sd),

package/src/utils/use-client-rect.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 export const useClientRect = (): [
     DOMRect | null,
     (node: HTMLElement | null) => void,
-    HTMLElement | null
+    HTMLElement | null,
 ] => {
     const element = useRef<HTMLElement | null>(null);
     const [rect, setRect] = useState<DOMRect | null>(null);

package/dist/components/charts/funnel-chart/funnel-chart.stories.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FunnelChart } from './index';
-import { BodyText } from '@servicetitan/design-system';
-export default {
-    title: 'Marketing UI/charts/FunnelChart',
-    component: FunnelChart,
-    parameters: {},
-};
-const w = (cb) => () => _jsx("div", { style: { height: '300px', width: '420px' }, children: cb() });
-const sections3 = () => [
-    {
-        id: 1,
-        color: '#A9D1FF',
-        title: 'Revenue',
-        description: 'rate 1 description',
-        value: 0.33,
-        prev: 0.38,
-        data: { info: ['random text 1'] },
-    },
-    {
-        id: 2,
-        color: '#3684F5',
-        title: 'Budget',
-        description: 'rate 2 description',
-        value: 0.23,
-        prev: 0.21,
-        data: { info: ['random text 2', 'random text 22'] },
-    },
-    {
-        id: 3,
-        color: '#1360D9',
-        title: 'Sales',
-        description: 'rate 3 description',
-        value: 0.11,
-        prev: 0.11,
-        textClass: 'c-white',
-    },
-];
-const CustomPopoverContent = ({ data }) => (data === null || data === void 0 ? void 0 : data.info.length) ? (_jsx("div", { children: data.info.map(t => (_jsx(BodyText, { children: t }, t))) })) : null;
-export const funnelChart3Sections = w(() => (_jsx(FunnelChart, { format: "percent", sections: sections3() })));
-export const funnelChart4Sections = w(() => (_jsx(FunnelChart, { format: "percent", sections: [
-        {
-            id: 1,
-            color: '#A9D1FF',
-            title: 'Revenue',
-            description: 'rate 1 description',
-            value: 0.33,
-            prev: 0.38,
-        },
-        {
-            id: 2,
-            color: '#56A4FF',
-            title: 'Budget',
-            description: 'rate 2 description',
-            value: 0.23,
-            prev: 0.21,
-        },
-        {
-            id: 3,
-            color: '#2270EE',
-            title: 'Sales',
-            description: 'rate 3 description',
-            value: 0.11,
-            prev: 0.11,
-        },
-        {
-            id: 4,
-            color: '#1360D9',
-            title: 'Sales',
-            description: 'rate 4 description',
-            value: 0.22,
-            prev: 0.221,
-        },
-    ] })));
-export const funnelChartCustomContent = w(() => (_jsx(FunnelChart, { format: "percent", topSideLength: 80, bottomSideLength: 20, sections: sections3(), popoverContent: CustomPopoverContent })));
-//# sourceMappingURL=funnel-chart.stories.js.map

package/dist/components/charts/funnel-chart/funnel-chart.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"funnel-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/funnel-chart/funnel-chart.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAqD,MAAM,SAAS,CAAC;AACzF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,eAAe;IACX,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,EAAE;CACjB,CAAC;AACF,MAAM,CAAC,GAAG,CAAC,EAAsB,EAAE,EAAE,CAAC,GAAG,EAAE,CACvC,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,YAAG,EAAE,EAAE,GAAO,CAAC;AAElE,MAAM,SAAS,GAAG,GAA6C,EAAE,CAAC;IAC9D;QACI,EAAE,EAAE,CAAC;QACL,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,oBAAoB;QACjC,KAAK,EAAE,IAAI;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,eAAe,CAAC,EAAE;KACpC;IACD;QACI,EAAE,EAAE,CAAC;QACL,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,oBAAoB;QACjC,KAAK,EAAE,IAAI;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAAE;KACtD;IACD;QACI,EAAE,EAAE,CAAC;QACL,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,oBAAoB;QACjC,KAAK,EAAE,IAAI;QACX,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;KACvB;CACJ,CAAC;AAEF,MAAM,oBAAoB,GAAsD,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CACzF,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,MAAM,EAAC,CAAC,CAAC,CAChB,wBACK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAChB,KAAC,QAAQ,cAAU,CAAC,IAAL,CAAC,CAAgB,CACnC,CAAC,GACA,CACT,CAAC,CAAC,CAAC,IAAI,CAAC;AAEb,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CACxC,KAAC,WAAW,IAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAI,CAC1D,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CACxC,KAAC,WAAW,IACR,MAAM,EAAC,SAAS,EAChB,QAAQ,EAAE;QACN;YACI,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACb;QACD;YACI,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,QAAQ;YACf,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACb;QACD;YACI,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,OAAO;YACd,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI;SACb;QACD;YACI,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,OAAO;YACd,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,KAAK;SACd;KACJ,GACH,CACL,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAC5C,KAAC,WAAW,IACR,MAAM,EAAC,SAAS,EAChB,aAAa,EAAE,EAAE,EACjB,gBAAgB,EAAE,EAAE,EACpB,QAAQ,EAAE,SAAS,EAAE,EACrB,cAAc,EAAE,oBAAoB,GACtC,CACL,CAAC,CAAC"}

package/dist/components/charts/line-chart/line-chart.stories.js

@@ -1,225 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Form } from '@servicetitan/design-system';
-import { LineChart } from './index';
-export default {
-    title: 'Marketing UI/charts/LineChart',
-    component: LineChart,
-    parameters: {},
-};
-const dailyValues = (() => {
-    const periods = [];
-    const days = new Date(2021, 7, 0).getDate();
-    for (let i = 1; i <= days; i++) {
-        periods.push({
-            from: new Date(2021, 7, i),
-            to: new Date(2021, 7, i + 1),
-        });
-    }
-    return {
-        periods,
-        values: [
-            {
-                metricId: 1,
-                values: periods.map((_, index) => 2000 + (index % 5) * 2000),
-            },
-            {
-                metricId: 2,
-                values: periods.map(({ from }) => (from.getDay() !== 0 ? 5000 : 0)),
-            },
-        ],
-    };
-})();
-const stackedBarChartValues = (() => {
-    const periods = [];
-    const days = new Date(2021, 7, 0).getDate();
-    for (let i = 1; i <= days; i++) {
-        periods.push({
-            from: new Date(2021, 7, i),
-            to: new Date(2021, 7, i + 1),
-        });
-    }
-    return {
-        periods,
-        values: [
-            {
-                metricId: 2,
-                values: periods.map((_, index) => 15 + (index % 5) * 15),
-            },
-            {
-                metricId: 3,
-                values: periods.map((_, index) => 10 + (index % 5) * 10),
-            },
-            {
-                metricId: 4,
-                values: periods.map((_, index) => 5 + (index % 5) * 5),
-            },
-        ],
-    };
-})();
-const weeklyValues = (() => {
-    const periods = [];
-    for (let i = 0; i <= 15; i++) {
-        periods.push({
-            from: new Date(2021, 7, 8 + i * 7),
-        });
-    }
-    return {
-        periods,
-        values: [
-            {
-                metricId: 1,
-                values: periods.map((_, index) => 2000 + (index % 5) * 2000),
-            },
-            {
-                metricId: 2,
-                values: periods.map(({ from }) => from.getDate() % 10),
-            },
-        ],
-    };
-})();
-export const lineChartDailyBottomTitles = () => (_jsx(LineChart, { resolution: "day", metrics: [
-        {
-            id: 1,
-            color: '#60dfa6',
-            title: 'Revenue',
-            type: 'bar',
-        },
-        {
-            id: 2,
-            color: '#737475',
-            title: 'Budget',
-            type: 'line',
-            opts: { dashed: true },
-            isRight: true,
-        },
-    ], metricValues: dailyValues.values, periods: dailyValues.periods, titleY: "Left title", display: {
-        yLeft: false,
-        yLeftFormat: 'money',
-        metricsTitlePosition: 'bottom',
-    } }));
-export const stackedBarChartDailyBottomTitles = () => {
-    return (_jsx(LineChart, { resolution: "day", metrics: [
-            {
-                id: 2,
-                title: 'Lead Calls',
-                type: 'stacked-bar',
-                color: '#D0D8DD',
-            },
-            {
-                id: 3,
-                title: 'Online Bookings',
-                type: 'stacked-bar',
-                color: '#08BFDF',
-            },
-            {
-                id: 4,
-                title: 'Manual Calls',
-                type: 'stacked-bar',
-                color: '#1FBC70',
-            },
-        ], metricValues: stackedBarChartValues.values, periods: dailyValues.periods, titleY: "Left title", display: {
-            yLeft: false,
-            yLeftFormat: 'number',
-            metricsTitlePosition: 'bottom',
-        } }));
-};
-export const groupedBarChartDailyBottomTitles = () => {
-    return (_jsx(LineChart, { resolution: "day", metrics: [
-            {
-                id: 2,
-                title: 'Lead Calls',
-                type: 'grouped-bar',
-                color: '#D0D8DD',
-            },
-            {
-                id: 3,
-                title: 'Online Bookings',
-                type: 'grouped-bar',
-                color: '#08BFDF',
-            },
-            {
-                id: 4,
-                title: 'Manual Calls',
-                type: 'grouped-bar',
-                color: '#1FBC70',
-            },
-        ], metricValues: stackedBarChartValues.values, periods: dailyValues.periods, titleY: "Left title", display: {
-            yLeft: false,
-            yLeftFormat: 'number',
-            metricsTitlePosition: 'bottom',
-        } }));
-};
-export const lineChartWeekly = () => (_jsx(LineChart, { resolution: "week", metrics: [
-        {
-            id: 1,
-            color: '#60dfa6',
-            title: 'Revenue',
-            type: 'line',
-        },
-        {
-            id: 2,
-            color: '#737475',
-            title: 'Numbers',
-            type: 'line',
-            isRight: true,
-        },
-    ], metricValues: weeklyValues.values, periods: weeklyValues.periods, display: {
-        yLeft: true,
-        yRight: true,
-        yLeftFormat: 'moneyShort',
-        metricsTitlePosition: 'top',
-    } }));
-const CountrySelect = () => {
-    const [value, setValue] = useState();
-    const options = [
-        { key: 1, group: 'Arcona', value: 1, text: 'Australia' },
-        { key: 2, group: 'Arcona', value: 2, text: 'America' },
-        { key: 3, group: 'Arcona', value: 3, text: 'New Zealand' },
-        { key: 4, group: 'Ewok', value: 4, text: 'Spain' },
-        { key: 5, group: 'Gungan', value: 5, text: 'Turkey' },
-        { key: 6, group: 'Gungan', value: 6, text: 'India' },
-    ];
-    return (_jsx(Form.Select, { width: "4", open: true, grouped: true, label: "Clearable select with groups", placeholder: "Choose Country", options: options, onChange: (event, value) => setValue(value.value), value: value }));
-};
-export const lineChartMergedDays = () => (_jsx("div", { style: { width: '800px' }, children: _jsx(LineChart, { resolution: "week", metrics: [
-            {
-                id: 1,
-                color: '#60dfa6',
-                title: 'Revenue',
-                type: 'bar',
-            },
-            {
-                id: 2,
-                color: '#737475',
-                title: 'Numbers',
-                type: 'line',
-                isRight: true,
-            },
-        ], metricValues: weeklyValues.values, periods: weeklyValues.periods, titleY: "Left title", display: {
-            yLeft: true,
-            yRight: true,
-            yLeftFormat: 'moneyShort',
-            metricsTitlePosition: 'top',
-        } }) }));
-export const lineChartIndexes = () => (_jsxs("div", { children: [_jsx(CountrySelect, {}), _jsx(LineChart, { resolution: "week", metrics: [
-                {
-                    id: 1,
-                    color: '#60dfa6',
-                    title: 'Revenue',
-                    type: 'bar',
-                },
-                {
-                    id: 2,
-                    color: '#737475',
-                    title: 'Numbers',
-                    type: 'line',
-                    isRight: true,
-                },
-            ], metricValues: weeklyValues.values, periods: weeklyValues.periods, display: {
-                yLeft: true,
-                yRight: true,
-                yLeftFormat: 'moneyShort',
-                metricsTitlePosition: 'top',
-            } })] }));
-//# sourceMappingURL=line-chart.stories.js.map

package/dist/components/charts/line-chart/line-chart.stories.js.map

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

package/dist/components/charts/pie-chart/pie-chart.stories.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PieChart } from './index';
-import { Eyebrow, Stack, BodyText } from '@servicetitan/design-system';
-export default {
-    title: 'Marketing UI/charts/PieChart',
-    component: PieChart,
-    parameters: {},
-};
-export const pieChart5AutoColor = () => (_jsx(PieChart, { title: "Pie Chart", height: 250, sections: [
-        { title: 'lorem', value: 99 },
-        { title: 'ipsum', value: 88 },
-        { title: 'dolor', value: 66 },
-        { title: 'sit', value: 55 },
-        { title: 'amet', value: 22 },
-    ], popoverDirection: "lt" }));
-export const pieChartWithContent = () => (_jsx(PieChart, { title: "Pie Chart", height: 300, sections: [
-        { title: 'New Customer', value: 61 },
-        { title: 'Existing Customer', value: 90 },
-    ], content: () => (_jsxs(Stack, { className: "h-100", justifyContent: "center", alignItems: "center", direction: "column", children: [_jsx(BodyText, { bold: true, children: "244" }), _jsx(Eyebrow, { size: "small", children: "Total Leads" })] })), radiusRelative: 45, hideTitles: true }));
-export const pieChart1CustomColor = () => (_jsx(PieChart, { title: "Pie Chart", height: 250, sections: [{ title: 'lorem', value: 99, color: '#ffe278' }] }));
-export const pieChartNoData = () => _jsx(PieChart, { title: "Pie Chart", height: 250, sections: [] });
-//# sourceMappingURL=pie-chart.stories.js.map

package/dist/components/charts/pie-chart/pie-chart.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pie-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvE,eAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CACpC,KAAC,QAAQ,IACL,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE;QACN,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;QAC3B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;KAC/B,EACD,gBAAgB,EAAC,IAAI,GACvB,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACrC,KAAC,QAAQ,IACL,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE;QACN,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE;QACpC,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,EAAE;KAC5C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CACX,MAAC,KAAK,IAAC,SAAS,EAAC,OAAO,EAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,aACnF,KAAC,QAAQ,IAAC,IAAI,0BAAe,EAC7B,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,4BAAsB,IACvC,CACX,EACD,cAAc,EAAE,EAAE,EAClB,UAAU,SACZ,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACtC,KAAC,QAAQ,IACL,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,GAC7D,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,GAAI,CAAC"}

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

@@ -1,48 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, Fragment } from 'react';
-import { ImageCropper } from './image-cropper';
-export default {
-    title: 'Marketing UI/ImageCropper/ImageCropper',
-    component: ImageCropper,
-    parameters: {},
-};
-const BasicExample = () => {
-    const [imageToEdit, setImageToEdit] = useState();
-    const [croppedImage, setCroppedImage] = useState();
-    const imageCropper = useRef(null);
-    const handleFileChange = (e) => {
-        var _a;
-        const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file) {
-            return;
-        }
-        setImageToEdit(file);
-    };
-    const handleSave = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if (!imageToEdit) {
-            return;
-        }
-        const file = yield ((_a = imageCropper.current) === null || _a === void 0 ? void 0 : _a.getCroppedImg(imageToEdit.type, imageToEdit.name));
-        if (!file) {
-            return;
-        }
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => {
-            setCroppedImage(reader.result);
-        };
-    });
-    return (_jsxs(Fragment, { children: [_jsx("input", { type: "file", accept: "image/png, image/jpeg", onChange: handleFileChange }), imageToEdit && (_jsxs("div", { style: { marginTop: 30 }, children: [_jsx("button", { onClick: handleSave, children: "Save cropped image" }), _jsx("div", { style: { marginTop: 30 }, children: _jsx(ImageCropper, { file: imageToEdit, ref: imageCropper, crop: { width: 300, height: 300 } }) })] })), croppedImage && (_jsxs("div", { style: { marginTop: 30 }, children: [_jsx("a", { href: croppedImage, download: imageToEdit === null || imageToEdit === void 0 ? void 0 : imageToEdit.name, children: "Download" }), _jsx("div", { style: { marginTop: 30 }, children: _jsx("img", { src: croppedImage }) })] }))] }));
-};
-export const basic = () => _jsx(BasicExample, {});
-//# sourceMappingURL=image-cropper.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"image-cropper.stories.js","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAmB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAe;IACX,KAAK,EAAE,wCAAwC;IAC/C,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,YAAY,GAAO,GAAG,EAAE;IAC1B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAAQ,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE3D,MAAM,YAAY,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IAEhD,MAAM,gBAAgB,GAAG,CAAC,CAAgC,EAAE,EAAE;;QAC1D,MAAM,IAAI,GAAG,MAAA,CAAC,CAAC,MAAM,CAAC,KAAK,0CAAG,CAAC,CAAC,CAAC;QACjC,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,cAAc,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAS,EAAE;;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;YACf,OAAO;QACX,CAAC;QACD,MAAM,IAAI,GAAG,MAAM,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,aAAa,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA,CAAC;QAC3F,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAChC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACjB,eAAe,CAAC,MAAM,CAAC,MAAgB,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,CAAA,CAAC;IAEF,OAAO,CACH,MAAC,QAAQ,eACL,gBAAO,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,uBAAuB,EAAC,QAAQ,EAAE,gBAAgB,GAAI,EAC/E,WAAW,IAAI,CACZ,eAAK,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,aACzB,iBAAQ,OAAO,EAAE,UAAU,mCAA6B,EACxD,cAAK,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YACzB,KAAC,YAAY,IACT,IAAI,EAAE,WAAW,EACjB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GACnC,GACA,IACJ,CACT,EACA,YAAY,IAAI,CACb,eAAK,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,aACzB,YAAG,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,yBAE9C,EACJ,cAAK,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YACzB,cAAK,GAAG,EAAE,YAAY,GAAI,GACxB,IACJ,CACT,IACM,CACd,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,KAAC,YAAY,KAAG,CAAC"}