@servicetitan/marketing-ui 6.0.1 → 6.0.2

package/dist/components/charts/funnel-chart/components/funnel-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"funnel-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,EAAE,EAAY,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAOtD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8J5C,CAAC"}
+{"version":3,"file":"funnel-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,EAAE,EAAY,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAOtD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6J5C,CAAC"}

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

@@ -21,8 +21,7 @@ export const FunnelChart = ({ sections, format, topSideLength = defaultTopSideLe
     ]);
     const hidePopover = ()=>setPopoverShown(undefined);
     const rightStyles = useMemo(()=>({
-            left: `${100 - topSideLength}%`,
-            width: `${topSideLength}%`
+            left: `${100 - topSideLength}%`
         }), [
         topSideLength
     ]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"sourcesContent":["import { useMemo, useState, FC, Fragment } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Eyebrow, Icon, Mask, Stack, Tooltip } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { formatValue } from '../../../../utils/formatters';\nimport { StatDiff } from '../../../stat/stat-card';\nimport { FunnelChartProps } from '../utils/interface';\nimport { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';\nimport { FunnelPyramidSvg } from './funnel-svg';\nimport * as Styles from './funnel-chart.module.less';\nimport { Popover } from '@servicetitan/anvil2';\nimport { ColorTag } from '../../common';\n\nexport const FunnelChart: FC<FunnelChartProps> = ({\n    sections,\n    format,\n    topSideLength = defaultTopSideLength,\n    bottomSideLength = defaultBottomSideLength,\n    popoverContent: PopoverContent,\n    loading,\n    className,\n}) => {\n    const [popoverShown, setPopoverShown] = useState<number | undefined>(undefined);\n    const [rowYs, setRowYs] = useState<number[]>([]);\n    const colors = useMemo(() => sections.map(s => s.color), [sections]);\n    const outlineColors = useMemo(() => sections.map(s => s.outlineColor), [sections]);\n    const hidePopover = () => setPopoverShown(undefined);\n\n    const rightStyles = useMemo(\n        () => ({\n            left: `${100 - topSideLength}%`,\n            width: `${topSideLength}%`,\n        }),\n        [topSideLength]\n    );\n\n    return (\n        <Mask\n            className={classNames(\n                'h-100 bg-white border border-radius-2 p-3 of-hidden position-relative',\n                className\n            )}\n            active={!!loading}\n        >\n            <div className={Styles.pyramidWrapper}>\n                <FunnelPyramidSvg\n                    colors={colors}\n                    outlineColors={outlineColors}\n                    topSideLength={topSideLength}\n                    bottomSideLength={bottomSideLength}\n                    onRowAnchors={setRowYs}\n                />\n            </div>\n\n            <div\n                className={classNames(\n                    'd-f flex-column justify-content-around',\n                    Styles.pyramidBoxRight\n                )}\n                style={rightStyles}\n            >\n                {sections.map(({ id, title, value, color, prev, data, outlineColor }) => (\n                    <Stack\n                        key={title}\n                        className={Styles.flex1}\n                        justifyContent=\"center\"\n                        alignItems=\"center\"\n                        onMouseEnter={() => setPopoverShown(id)}\n                        onMouseLeave={hidePopover}\n                    >\n                        <Popover open={popoverShown === id} openOnHover placement=\"right\">\n                            <Popover.Trigger>\n                                {props => (\n                                    <span {...props}>\n                                        <div className={Styles.percentTextWrapper}>\n                                            <BodyText\n                                                className={classNames('m-x-2 m-b-0-i')}\n                                                data-cy={`marketing-funnel-section-${id}-value`}\n                                            >\n                                                {formatValue(value, format)}\n                                            </BodyText>\n                                        </div>\n                                    </span>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <Stack\n                                    alignItems=\"flex-start\"\n                                    justifyContent=\"flex-start\"\n                                    direction=\"column\"\n                                    data-cy={`marketing-funnel-popover-${id}-content`}\n                                >\n                                    <Stack>\n                                        <ColorTag\n                                            label=\"\"\n                                            color={color}\n                                            outlineColor={outlineColor}\n                                            pattern={outlineColor ? 'outline' : 'solid'}\n                                        />\n                                        <BodyText bold className=\"m-r-half\">\n                                            {title} {formatValue(value, format)}\n                                        </BodyText>\n                                    </Stack>\n                                    <Stack.Item>\n                                        <StatDiff\n                                            value={value}\n                                            prev={prev}\n                                            size=\"xsmall\"\n                                            format={format}\n                                        />\n                                    </Stack.Item>\n                                </Stack>\n\n                                {!!PopoverContent && (\n                                    <PopoverContent\n                                        id={id}\n                                        value={value}\n                                        text={formatValue(value, format)}\n                                        data={data}\n                                    />\n                                )}\n                            </Popover.Content>\n                        </Popover>\n                    </Stack>\n                ))}\n            </div>\n            <div className={Styles.pyramidBoxLeft} style={{ width: `${100 - topSideLength}%` }}>\n                {sections.map((s, i) => {\n                    const y = rowYs[i] ?? 0;\n                    const TITLE_UP = 24;\n                    const DIFF_DOWN = 4;\n\n                    return (\n                        <Fragment key={s.id}>\n                            <div\n                                className={Styles.leftTitle}\n                                style={{ top: `calc(${y}% - ${TITLE_UP}px)` }}\n                            >\n                                <Eyebrow\n                                    size=\"small\"\n                                    className={classNames(Styles.statTitle, 'm-r-half')}\n                                >\n                                    {s.title}\n                                </Eyebrow>\n                                <Tooltip direction=\"t\" portal text={s.description}>\n                                    <Icon\n                                        name=\"info\"\n                                        className=\"m-r-1\"\n                                        size=\"14px\"\n                                        color={tokens.colorNeutral90}\n                                    />\n                                </Tooltip>\n                            </div>\n\n                            <div\n                                className={Styles.leftDiff}\n                                style={{ top: `calc(${y}% + ${DIFF_DOWN}px)` }}\n                            >\n                                <StatDiff\n                                    value={s.value}\n                                    prev={s.prev}\n                                    size=\"small\"\n                                    format={format}\n                                />\n                            </div>\n                        </Fragment>\n                    );\n                })}\n            </div>\n        </Mask>\n    );\n};\n"],"names":["useMemo","useState","Fragment","classNames","BodyText","Eyebrow","Icon","Mask","Stack","Tooltip","tokens","formatValue","StatDiff","defaultBottomSideLength","defaultTopSideLength","FunnelPyramidSvg","Styles","Popover","ColorTag","FunnelChart","sections","format","topSideLength","bottomSideLength","popoverContent","PopoverContent","loading","className","popoverShown","setPopoverShown","undefined","rowYs","setRowYs","colors","map","s","color","outlineColors","outlineColor","hidePopover","rightStyles","left","width","active","div","pyramidWrapper","onRowAnchors","pyramidBoxRight","style","id","title","value","prev","data","flex1","justifyContent","alignItems","onMouseEnter","onMouseLeave","open","openOnHover","placement","Trigger","props","span","percentTextWrapper","data-cy","Content","direction","label","pattern","bold","Item","size","text","pyramidBoxLeft","i","y","TITLE_UP","DIFF_DOWN","leftTitle","top","statTitle","portal","description","name","colorNeutral90","leftDiff"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"sourcesContent":["import { useMemo, useState, FC, Fragment } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Eyebrow, Icon, Mask, Stack, Tooltip } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { formatValue } from '../../../../utils/formatters';\nimport { StatDiff } from '../../../stat/stat-card';\nimport { FunnelChartProps } from '../utils/interface';\nimport { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';\nimport { FunnelPyramidSvg } from './funnel-svg';\nimport * as Styles from './funnel-chart.module.less';\nimport { Popover } from '@servicetitan/anvil2';\nimport { ColorTag } from '../../common';\n\nexport const FunnelChart: FC<FunnelChartProps> = ({\n    sections,\n    format,\n    topSideLength = defaultTopSideLength,\n    bottomSideLength = defaultBottomSideLength,\n    popoverContent: PopoverContent,\n    loading,\n    className,\n}) => {\n    const [popoverShown, setPopoverShown] = useState<number | undefined>(undefined);\n    const [rowYs, setRowYs] = useState<number[]>([]);\n    const colors = useMemo(() => sections.map(s => s.color), [sections]);\n    const outlineColors = useMemo(() => sections.map(s => s.outlineColor), [sections]);\n    const hidePopover = () => setPopoverShown(undefined);\n\n    const rightStyles = useMemo(\n        () => ({\n            left: `${100 - topSideLength}%`,\n        }),\n        [topSideLength]\n    );\n\n    return (\n        <Mask\n            className={classNames(\n                'h-100 bg-white border border-radius-2 p-3 of-hidden position-relative',\n                className\n            )}\n            active={!!loading}\n        >\n            <div className={Styles.pyramidWrapper}>\n                <FunnelPyramidSvg\n                    colors={colors}\n                    outlineColors={outlineColors}\n                    topSideLength={topSideLength}\n                    bottomSideLength={bottomSideLength}\n                    onRowAnchors={setRowYs}\n                />\n            </div>\n\n            <div\n                className={classNames(\n                    'd-f flex-column justify-content-around',\n                    Styles.pyramidBoxRight\n                )}\n                style={rightStyles}\n            >\n                {sections.map(({ id, title, value, color, prev, data, outlineColor }) => (\n                    <Stack\n                        key={title}\n                        className={Styles.flex1}\n                        justifyContent=\"center\"\n                        alignItems=\"center\"\n                        onMouseEnter={() => setPopoverShown(id)}\n                        onMouseLeave={hidePopover}\n                    >\n                        <Popover open={popoverShown === id} openOnHover placement=\"right\">\n                            <Popover.Trigger>\n                                {props => (\n                                    <span {...props}>\n                                        <div className={Styles.percentTextWrapper}>\n                                            <BodyText\n                                                className={classNames('m-x-2 m-b-0-i')}\n                                                data-cy={`marketing-funnel-section-${id}-value`}\n                                            >\n                                                {formatValue(value, format)}\n                                            </BodyText>\n                                        </div>\n                                    </span>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <Stack\n                                    alignItems=\"flex-start\"\n                                    justifyContent=\"flex-start\"\n                                    direction=\"column\"\n                                    data-cy={`marketing-funnel-popover-${id}-content`}\n                                >\n                                    <Stack>\n                                        <ColorTag\n                                            label=\"\"\n                                            color={color}\n                                            outlineColor={outlineColor}\n                                            pattern={outlineColor ? 'outline' : 'solid'}\n                                        />\n                                        <BodyText bold className=\"m-r-half\">\n                                            {title} {formatValue(value, format)}\n                                        </BodyText>\n                                    </Stack>\n                                    <Stack.Item>\n                                        <StatDiff\n                                            value={value}\n                                            prev={prev}\n                                            size=\"xsmall\"\n                                            format={format}\n                                        />\n                                    </Stack.Item>\n                                </Stack>\n\n                                {!!PopoverContent && (\n                                    <PopoverContent\n                                        id={id}\n                                        value={value}\n                                        text={formatValue(value, format)}\n                                        data={data}\n                                    />\n                                )}\n                            </Popover.Content>\n                        </Popover>\n                    </Stack>\n                ))}\n            </div>\n            <div className={Styles.pyramidBoxLeft} style={{ width: `${100 - topSideLength}%` }}>\n                {sections.map((s, i) => {\n                    const y = rowYs[i] ?? 0;\n                    const TITLE_UP = 24;\n                    const DIFF_DOWN = 4;\n\n                    return (\n                        <Fragment key={s.id}>\n                            <div\n                                className={Styles.leftTitle}\n                                style={{ top: `calc(${y}% - ${TITLE_UP}px)` }}\n                            >\n                                <Eyebrow\n                                    size=\"small\"\n                                    className={classNames(Styles.statTitle, 'm-r-half')}\n                                >\n                                    {s.title}\n                                </Eyebrow>\n                                <Tooltip direction=\"t\" portal text={s.description}>\n                                    <Icon\n                                        name=\"info\"\n                                        className=\"m-r-1\"\n                                        size=\"14px\"\n                                        color={tokens.colorNeutral90}\n                                    />\n                                </Tooltip>\n                            </div>\n\n                            <div\n                                className={Styles.leftDiff}\n                                style={{ top: `calc(${y}% + ${DIFF_DOWN}px)` }}\n                            >\n                                <StatDiff\n                                    value={s.value}\n                                    prev={s.prev}\n                                    size=\"small\"\n                                    format={format}\n                                />\n                            </div>\n                        </Fragment>\n                    );\n                })}\n            </div>\n        </Mask>\n    );\n};\n"],"names":["useMemo","useState","Fragment","classNames","BodyText","Eyebrow","Icon","Mask","Stack","Tooltip","tokens","formatValue","StatDiff","defaultBottomSideLength","defaultTopSideLength","FunnelPyramidSvg","Styles","Popover","ColorTag","FunnelChart","sections","format","topSideLength","bottomSideLength","popoverContent","PopoverContent","loading","className","popoverShown","setPopoverShown","undefined","rowYs","setRowYs","colors","map","s","color","outlineColors","outlineColor","hidePopover","rightStyles","left","active","div","pyramidWrapper","onRowAnchors","pyramidBoxRight","style","id","title","value","prev","data","flex1","justifyContent","alignItems","onMouseEnter","onMouseLeave","open","openOnHover","placement","Trigger","props","span","percentTextWrapper","data-cy","Content","direction","label","pattern","bold","Item","size","text","pyramidBoxLeft","width","i","y","TITLE_UP","DIFF_DOWN","leftTitle","top","statTitle","portal","description","name","colorNeutral90","leftDiff"],"mappings":"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"}

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

@@ -37,6 +37,7 @@ const PieTitles = ({ title, pieces })=>{
     }) : /*#__PURE__*/ _jsx(Flex, {
         direction: "row",
         gap: 8,
+        className: Styles.titleWrapperColorTags,
         children: pieces.map((piece)=>/*#__PURE__*/ _jsx(ColorTag, {
                 label: piece.title,
                 color: piece.color

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport { BodyText, Stack, StatusLight } from '@servicetitan/design-system';\nimport { PieChartProps, PiePiece } from '../utils/interface';\nimport { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';\nimport { Pie } from './pie';\nimport { Flex } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport * as Styles from './pie-chart.module.less';\nimport { ColorTag } from '../../common';\n\nconst PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {\n    return pieces.length > 2 ? (\n        <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>\n            <div>\n                {!!pieces.length && (\n                    <Stack.Item className=\"p-l-1 p-b-1\">\n                        <BodyText bold>{title}</BodyText>\n                    </Stack.Item>\n                )}\n                {pieces.map(piece => (\n                    <Stack key={piece.title} alignItems=\"center\">\n                        <StatusLight color={piece.color} />\n                        <BodyText className=\"c-neutral-90\" size=\"medium\">\n                            {piece.title}\n                        </BodyText>\n                    </Stack>\n                ))}\n            </div>\n        </div>\n    ) : (\n        <Flex direction=\"row\" gap={8}>\n            {pieces.map(piece => (\n                <ColorTag key={piece.title} label={piece.title} color={piece.color} />\n            ))}\n        </Flex>\n    );\n};\n\nexport const PieChart: FC<PieChartProps> = ({\n    height,\n    width,\n    title,\n    sections,\n    popoverContent,\n    content,\n    radiusRelative = radiusRelativeDefault,\n    popoverDirection = 'rb',\n    hideTitles = false,\n}) => {\n    const pieces = useMemo(\n        () => convertSessionsToPieces(sections, radiusRelative),\n        [sections, radiusRelative]\n    );\n    const style = useMemo(() => ({ height, width }), [height, width]);\n\n    return (\n        <Stack direction={pieces.length > 2 ? 'row' : 'column'}>\n            <div style={style}>\n                <Pie\n                    title={title}\n                    pieces={pieces}\n                    content={content}\n                    popoverContent={popoverContent}\n                    popoverDirection={popoverDirection}\n                    radiusRelative={radiusRelative}\n                    hideTitles={hideTitles}\n                />\n            </div>\n            {!hideTitles && <PieTitles title={title} pieces={pieces} />}\n        </Stack>\n    );\n};\n"],"names":["useMemo","BodyText","Stack","StatusLight","convertSessionsToPieces","radiusRelativeDefault","Pie","Flex","classNames","Styles","ColorTag","PieTitles","title","pieces","length","div","className","titleWrapper","Item","bold","map","piece","alignItems","color","size","direction","gap","label","PieChart","height","width","sections","popoverContent","content","radiusRelative","popoverDirection","hideTitles","style"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AACpC,SAASC,QAAQ,EAAEC,KAAK,EAAEC,WAAW,QAAQ,8BAA8B;AAE3E,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,iBAAiB;AAChF,SAASC,GAAG,QAAQ,QAAQ;AAC5B,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,OAAOC,gBAAgB,aAAa;AACpC,YAAYC,YAAY,0BAA0B;AAClD,SAASC,QAAQ,QAAQ,eAAe;AAExC,MAAMC,YAAuD,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAE;IAC3E,OAAOA,OAAOC,MAAM,GAAG,kBACnB,KAACC;QAAIC,WAAWR,WAAWC,OAAOQ,YAAY,EAAE;kBAC5C,cAAA,MAACF;;gBACI,CAAC,CAACF,OAAOC,MAAM,kBACZ,KAACZ,MAAMgB,IAAI;oBAACF,WAAU;8BAClB,cAAA,KAACf;wBAASkB,IAAI;kCAAEP;;;gBAGvBC,OAAOO,GAAG,CAACC,CAAAA,sBACR,MAACnB;wBAAwBoB,YAAW;;0CAChC,KAACnB;gCAAYoB,OAAOF,MAAME,KAAK;;0CAC/B,KAACtB;gCAASe,WAAU;gCAAeQ,MAAK;0CACnCH,MAAMT,KAAK;;;uBAHRS,MAAMT,KAAK;;;uBAUnC,KAACL;QAAKkB,WAAU;QAAMC,KAAK;kBACtBb,OAAOO,GAAG,CAACC,CAAAA,sBACR,KAACX;gBAA2BiB,OAAON,MAAMT,KAAK;gBAAEW,OAAOF,MAAME,KAAK;eAAnDF,MAAMT,KAAK;;AAI1C;AAEA,OAAO,MAAMgB,WAA8B,CAAC,EACxCC,MAAM,EACNC,KAAK,EACLlB,KAAK,EACLmB,QAAQ,EACRC,cAAc,EACdC,OAAO,EACPC,iBAAiB7B,qBAAqB,EACtC8B,mBAAmB,IAAI,EACvBC,aAAa,KAAK,EACrB;IACG,MAAMvB,SAASb,QACX,IAAMI,wBAAwB2B,UAAUG,iBACxC;QAACH;QAAUG;KAAe;IAE9B,MAAMG,QAAQrC,QAAQ,IAAO,CAAA;YAAE6B;YAAQC;QAAM,CAAA,GAAI;QAACD;QAAQC;KAAM;IAEhE,qBACI,MAAC5B;QAAMuB,WAAWZ,OAAOC,MAAM,GAAG,IAAI,QAAQ;;0BAC1C,KAACC;gBAAIsB,OAAOA;0BACR,cAAA,KAAC/B;oBACGM,OAAOA;oBACPC,QAAQA;oBACRoB,SAASA;oBACTD,gBAAgBA;oBAChBG,kBAAkBA;oBAClBD,gBAAgBA;oBAChBE,YAAYA;;;YAGnB,CAACA,4BAAc,KAACzB;gBAAUC,OAAOA;gBAAOC,QAAQA;;;;AAG7D,EAAE"}
+{"version":3,"sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport { BodyText, Stack, StatusLight } from '@servicetitan/design-system';\nimport { PieChartProps, PiePiece } from '../utils/interface';\nimport { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';\nimport { Pie } from './pie';\nimport { Flex } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport * as Styles from './pie-chart.module.less';\nimport { ColorTag } from '../../common';\n\nconst PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {\n    return pieces.length > 2 ? (\n        <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>\n            <div>\n                {!!pieces.length && (\n                    <Stack.Item className=\"p-l-1 p-b-1\">\n                        <BodyText bold>{title}</BodyText>\n                    </Stack.Item>\n                )}\n                {pieces.map(piece => (\n                    <Stack key={piece.title} alignItems=\"center\">\n                        <StatusLight color={piece.color} />\n                        <BodyText className=\"c-neutral-90\" size=\"medium\">\n                            {piece.title}\n                        </BodyText>\n                    </Stack>\n                ))}\n            </div>\n        </div>\n    ) : (\n        <Flex direction=\"row\" gap={8} className={Styles.titleWrapperColorTags}>\n            {pieces.map(piece => (\n                <ColorTag key={piece.title} label={piece.title} color={piece.color} />\n            ))}\n        </Flex>\n    );\n};\n\nexport const PieChart: FC<PieChartProps> = ({\n    height,\n    width,\n    title,\n    sections,\n    popoverContent,\n    content,\n    radiusRelative = radiusRelativeDefault,\n    popoverDirection = 'rb',\n    hideTitles = false,\n}) => {\n    const pieces = useMemo(\n        () => convertSessionsToPieces(sections, radiusRelative),\n        [sections, radiusRelative]\n    );\n    const style = useMemo(() => ({ height, width }), [height, width]);\n\n    return (\n        <Stack direction={pieces.length > 2 ? 'row' : 'column'}>\n            <div style={style}>\n                <Pie\n                    title={title}\n                    pieces={pieces}\n                    content={content}\n                    popoverContent={popoverContent}\n                    popoverDirection={popoverDirection}\n                    radiusRelative={radiusRelative}\n                    hideTitles={hideTitles}\n                />\n            </div>\n            {!hideTitles && <PieTitles title={title} pieces={pieces} />}\n        </Stack>\n    );\n};\n"],"names":["useMemo","BodyText","Stack","StatusLight","convertSessionsToPieces","radiusRelativeDefault","Pie","Flex","classNames","Styles","ColorTag","PieTitles","title","pieces","length","div","className","titleWrapper","Item","bold","map","piece","alignItems","color","size","direction","gap","titleWrapperColorTags","label","PieChart","height","width","sections","popoverContent","content","radiusRelative","popoverDirection","hideTitles","style"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AACpC,SAASC,QAAQ,EAAEC,KAAK,EAAEC,WAAW,QAAQ,8BAA8B;AAE3E,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,iBAAiB;AAChF,SAASC,GAAG,QAAQ,QAAQ;AAC5B,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,OAAOC,gBAAgB,aAAa;AACpC,YAAYC,YAAY,0BAA0B;AAClD,SAASC,QAAQ,QAAQ,eAAe;AAExC,MAAMC,YAAuD,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAE;IAC3E,OAAOA,OAAOC,MAAM,GAAG,kBACnB,KAACC;QAAIC,WAAWR,WAAWC,OAAOQ,YAAY,EAAE;kBAC5C,cAAA,MAACF;;gBACI,CAAC,CAACF,OAAOC,MAAM,kBACZ,KAACZ,MAAMgB,IAAI;oBAACF,WAAU;8BAClB,cAAA,KAACf;wBAASkB,IAAI;kCAAEP;;;gBAGvBC,OAAOO,GAAG,CAACC,CAAAA,sBACR,MAACnB;wBAAwBoB,YAAW;;0CAChC,KAACnB;gCAAYoB,OAAOF,MAAME,KAAK;;0CAC/B,KAACtB;gCAASe,WAAU;gCAAeQ,MAAK;0CACnCH,MAAMT,KAAK;;;uBAHRS,MAAMT,KAAK;;;uBAUnC,KAACL;QAAKkB,WAAU;QAAMC,KAAK;QAAGV,WAAWP,OAAOkB,qBAAqB;kBAChEd,OAAOO,GAAG,CAACC,CAAAA,sBACR,KAACX;gBAA2BkB,OAAOP,MAAMT,KAAK;gBAAEW,OAAOF,MAAME,KAAK;eAAnDF,MAAMT,KAAK;;AAI1C;AAEA,OAAO,MAAMiB,WAA8B,CAAC,EACxCC,MAAM,EACNC,KAAK,EACLnB,KAAK,EACLoB,QAAQ,EACRC,cAAc,EACdC,OAAO,EACPC,iBAAiB9B,qBAAqB,EACtC+B,mBAAmB,IAAI,EACvBC,aAAa,KAAK,EACrB;IACG,MAAMxB,SAASb,QACX,IAAMI,wBAAwB4B,UAAUG,iBACxC;QAACH;QAAUG;KAAe;IAE9B,MAAMG,QAAQtC,QAAQ,IAAO,CAAA;YAAE8B;YAAQC;QAAM,CAAA,GAAI;QAACD;QAAQC;KAAM;IAEhE,qBACI,MAAC7B;QAAMuB,WAAWZ,OAAOC,MAAM,GAAG,IAAI,QAAQ;;0BAC1C,KAACC;gBAAIuB,OAAOA;0BACR,cAAA,KAAChC;oBACGM,OAAOA;oBACPC,QAAQA;oBACRqB,SAASA;oBACTD,gBAAgBA;oBAChBG,kBAAkBA;oBAClBD,gBAAgBA;oBAChBE,YAAYA;;;YAGnB,CAACA,4BAAc,KAAC1B;gBAAUC,OAAOA;gBAAOC,QAAQA;;;;AAG7D,EAAE"}

package/dist/components/charts/pie-chart/components/pie-chart.module.less

@@ -4,6 +4,10 @@
     max-width: 120px;
 }
 
+.title-wrapper-color-tags {
+    max-width: 380px;
+}
+
 .percent-text-wrapper {
     width: 32px;
     height: 32px;

package/dist/components/charts/pie-chart/components/pie-chart.module.less.d.ts

@@ -1,4 +1,5 @@
 export const __esModule: true;
 export const percentTextWrapper: string;
 export const titleWrapper: string;
+export const titleWrapperColorTags: string;
 

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

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEH,mBAAmB,EAKtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAmCtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA0EtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEH,mBAAmB,EAKtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAmCtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC"}

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

@@ -36,8 +36,7 @@ export const StatDiff = ({ value, prev, size, format, inverted, neutral, classNa
     const [absDiff, diffPercent, isIncrease] = calculateDiff(value !== null && value !== void 0 ? value : 0, prev !== null && prev !== void 0 ? prev : 0, percents);
     const diff = absDiff === 0 ? '' : /*#__PURE__*/ _jsx(Icon, {
         svg: isIncrease ? TrendingUpSVG : TrendingDownSVG,
-        color: neutral ? 'neutral-200' : inverted ? isIncrease ? 'red' : 'green' : isIncrease ? 'green' : 'red',
-        className: "m-r-half m-t-half"
+        color: neutral ? 'neutral-200' : inverted ? isIncrease ? 'red' : 'green' : isIncrease ? 'green' : 'red'
     });
     let text = '';
     if (percents) {
@@ -59,6 +58,7 @@ export const StatDiff = ({ value, prev, size, format, inverted, neutral, classNa
         alignItems: "center",
         children: [
             /*#__PURE__*/ _jsx(Stack.Item, {
+                className: "m-r-half m-t-half",
                 children: /*#__PURE__*/ _jsx("span", {
                     children: diff
                 })

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

@@ -1 +1 @@
-{"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';\nimport { Icon } from '@servicetitan/anvil2';\nimport TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';\nimport TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';\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 =\n        absDiff === 0 ? (\n            ''\n        ) : (\n            <Icon\n                svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}\n                color={\n                    neutral\n                        ? 'neutral-200'\n                        : inverted\n                          ? isIncrease\n                              ? 'red'\n                              : 'green'\n                          : isIncrease\n                            ? 'green'\n                            : 'red'\n                }\n                className=\"m-r-half m-t-half\"\n            />\n        );\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        <Stack\n            className={classNames(Styles.statDiff, className)}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n        >\n            <Stack.Item>\n                <span>{diff}</span>\n            </Stack.Item>\n            <Stack.Item>\n                <BodyText\n                    size={size ?? 'small'}\n                    data-cy=\"stat-diff-value\"\n                    className={classNames({\n                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n                        'c-neutral-200': !!neutral,\n                    })}\n                >\n                    {value === undefined ? '\\u00A0' : text}\n                </BodyText>\n            </Stack.Item>\n        </Stack>\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","Icon","TrendingUpSVG","TrendingDownSVG","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","svg","color","text","diffPercentage","statDiff","justifyContent","alignItems","Item","span","data-cy","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","popoverShown","setPopoverShown","val","eyebrow","onMouseEnter","direction","onMouseLeave","open","trigger"],"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';\nimport { Icon } from '@servicetitan/anvil2';\nimport TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';\nimport TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';\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 =\n        absDiff === 0 ? (\n            ''\n        ) : (\n            <Icon\n                svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}\n                color={\n                    neutral\n                        ? 'neutral-200'\n                        : inverted\n                          ? isIncrease\n                              ? 'red'\n                              : 'green'\n                          : isIncrease\n                            ? 'green'\n                            : 'red'\n                }\n            />\n        );\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        <Stack\n            className={classNames(Styles.statDiff, className)}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n        >\n            <Stack.Item className=\"m-r-half m-t-half\">\n                <span>{diff}</span>\n            </Stack.Item>\n            <Stack.Item>\n                <BodyText\n                    size={size ?? 'small'}\n                    data-cy=\"stat-diff-value\"\n                    className={classNames({\n                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n                        'c-neutral-200': !!neutral,\n                    })}\n                >\n                    {value === undefined ? '\\u00A0' : text}\n                </BodyText>\n            </Stack.Item>\n        </Stack>\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","Icon","TrendingUpSVG","TrendingDownSVG","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","svg","color","text","diffPercentage","statDiff","justifyContent","alignItems","Item","span","data-cy","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","popoverShown","setPopoverShown","val","eyebrow","onMouseEnter","direction","onMouseLeave","open","trigger"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "6.0.1",
+    "version": "6.0.2",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -53,5 +53,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "231fbedc1ec501f5e88216dab08c1cd20192579d"
+    "gitHead": "ac914d3ce7c30346d7dbad50d7c9e8cde89b161f"
 }

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

@@ -29,7 +29,6 @@ export const FunnelChart: FC<FunnelChartProps> = ({
     const rightStyles = useMemo(
         () => ({
             left: `${100 - topSideLength}%`,
-            width: `${topSideLength}%`,
         }),
         [topSideLength]
     );

package/src/components/charts/pie-chart/components/pie-chart.module.less

@@ -4,6 +4,10 @@
     max-width: 120px;
 }
 
+.title-wrapper-color-tags {
+    max-width: 380px;
+}
+
 .percent-text-wrapper {
     width: 32px;
     height: 32px;

package/src/components/charts/pie-chart/components/pie-chart.module.less.d.ts

@@ -1,4 +1,5 @@
 export const __esModule: true;
 export const percentTextWrapper: string;
 export const titleWrapper: string;
+export const titleWrapperColorTags: string;
 

package/src/components/charts/pie-chart/components/pie-chart.tsx

@@ -28,7 +28,7 @@ const PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces })
             </div>
         </div>
     ) : (
-        <Flex direction="row" gap={8}>
+        <Flex direction="row" gap={8} className={Styles.titleWrapperColorTags}>
             {pieces.map(piece => (
                 <ColorTag key={piece.title} label={piece.title} color={piece.color} />
             ))}

package/src/components/stat/stat-card.tsx

@@ -84,7 +84,6 @@ export const StatDiff: FC<StatDiffProps> = ({
                             ? 'green'
                             : 'red'
                 }
-                className="m-r-half m-t-half"
             />
         );
     let text = '';
@@ -111,7 +110,7 @@ export const StatDiff: FC<StatDiffProps> = ({
             justifyContent="center"
             alignItems="center"
         >
-            <Stack.Item>
+            <Stack.Item className="m-r-half m-t-half">
                 <span>{diff}</span>
             </Stack.Item>
             <Stack.Item>