@servicetitan/marketing-ui 5.9.0 → 5.10.0

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/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/date-range-picker/date-range-picker.js

@@ -4,49 +4,85 @@ import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { BodyText, Form, Stack } from '@servicetitan/design-system';
 import * as Styles from './date-range-picker.module.less';
-const convertDateRange = (val, backward) => val
-    ? {
+const convertDateRange = (val, backward)=>val ? {
         start: val.start,
-        end: new Date(val.end.getFullYear(), val.end.getMonth(), val.end.getDate() + (backward ? 1 : -1)),
-    }
-    : undefined;
-const formatDate = (dt) => dt.toLocaleString('en-US', {
-    day: 'numeric',
-    year: 'numeric',
-    month: 'short',
-});
-const formatDateRange = (range) => `${formatDate(range.start)} - ${formatDate(range.end)}`;
-export const DateRangePicker = observer(({ compare, disabled, state, onChange, input, }) => {
+        end: new Date(val.end.getFullYear(), val.end.getMonth(), val.end.getDate() + (backward ? 1 : -1))
+    } : undefined;
+const formatDate = (dt)=>dt.toLocaleString('en-US', {
+        day: 'numeric',
+        year: 'numeric',
+        month: 'short'
+    });
+const formatDateRange = (range)=>`${formatDate(range.start)} - ${formatDate(range.end)}`;
+export const DateRangePicker = observer(({ compare, disabled, state, onChange, input })=>{
     const selectedOption = state.selectedOption;
     /*
-     * DateRangePickerOptions uses exclusive date ranges for end date (start >= dt > end)
-     * but anvil's DateRangePicker uses inclusive dates (with end set to endOfDay),
-     * so we performing some transformations here
-     * convertDateRange (predefined options, value and onChange)
-     */
-    const onPickerChange = val => {
+         * DateRangePickerOptions uses exclusive date ranges for end date (start >= dt > end)
+         * but anvil's DateRangePicker uses inclusive dates (with end set to endOfDay),
+         * so we performing some transformations here
+         * convertDateRange (predefined options, value and onChange)
+         */ const onPickerChange = (val)=>{
         const newVal = convertDateRange(val, true);
         if (onChange) {
             onChange(newVal);
-        }
-        else {
+        } else {
             state.onChange(newVal);
         }
     };
-    const options = useMemo(() => state.options.options.map(o => ({
-        text: o.text,
-        value: convertDateRange(o.value),
-        selected: o.key === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key),
-    })), [selectedOption, state.options.options]);
-    const value = useMemo(() => convertDateRange(state.value), [state.value]);
-    const compareValue = useMemo(() => state.value && compare
-        ? convertDateRange(state.options.getComparisonDateRange(state.value))
-        : undefined, [compare, state.value, state.options]);
-    const textValue = selectedOption
-        ? selectedOption.text
-        : compare || !value
-            ? 'Custom Date Range'
-            : formatDateRange(value);
-    return (_jsxs(Stack, { children: [_jsx(Stack.Item, { className: Styles.pickerContainer, children: _jsx(Form.DateRangePicker, { onChange: onPickerChange, options: options, value: value, required: true, disabled: disabled, label: !input && (_jsx("div", { className: classNames(Styles.pickerValue, 'd-f flex-column justify-content-center t-truncate cursor-pointer'), children: textValue })), input: input === null || input === void 0 ? void 0 : input(textValue) }) }), !!compare && (_jsxs(Stack, { direction: "column", justifyContent: "center", className: "m-l-2", children: [_jsx(BodyText, { children: value ? formatDateRange(value) : '' }), !!compareValue && (_jsxs(BodyText, { size: "xsmall", subdued: true, children: ["vs. ", formatDateRange(compareValue)] }))] }))] }));
+    const options = useMemo(()=>state.options.options.map((o)=>({
+                text: o.text,
+                value: convertDateRange(o.value),
+                selected: o.key === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key)
+            })), [
+        selectedOption,
+        state.options.options
+    ]);
+    const value = useMemo(()=>convertDateRange(state.value), [
+        state.value
+    ]);
+    const compareValue = useMemo(()=>state.value && compare ? convertDateRange(state.options.getComparisonDateRange(state.value)) : undefined, [
+        compare,
+        state.value,
+        state.options
+    ]);
+    const textValue = selectedOption ? selectedOption.text : compare || !value ? 'Custom Date Range' : formatDateRange(value);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        children: [
+            /*#__PURE__*/ _jsx(Stack.Item, {
+                className: Styles.pickerContainer,
+                children: /*#__PURE__*/ _jsx(Form.DateRangePicker, {
+                    onChange: onPickerChange,
+                    options: options,
+                    value: value,
+                    required: true,
+                    disabled: disabled,
+                    label: !input && /*#__PURE__*/ _jsx("div", {
+                        className: classNames(Styles.pickerValue, 'd-f flex-column justify-content-center t-truncate cursor-pointer'),
+                        children: textValue
+                    }),
+                    input: input === null || input === void 0 ? void 0 : input(textValue)
+                })
+            }),
+            !!compare && /*#__PURE__*/ _jsxs(Stack, {
+                direction: "column",
+                justifyContent: "center",
+                className: "m-l-2",
+                children: [
+                    /*#__PURE__*/ _jsx(BodyText, {
+                        children: value ? formatDateRange(value) : ''
+                    }),
+                    !!compareValue && /*#__PURE__*/ _jsxs(BodyText, {
+                        size: "xsmall",
+                        subdued: true,
+                        children: [
+                            "vs. ",
+                            formatDateRange(compareValue)
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 });
+
 //# sourceMappingURL=date-range-picker.js.map

package/dist/components/ui/date-range-picker/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.js","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { observer } from 'mobx-react';\nimport { BodyText, DateRangePickerProps, Form, Stack } from '@servicetitan/design-system';\nimport { DateRange, DateRangePickerOptionsStateType } from '../../../utils/date';\nimport * as Styles from './date-range-picker.module.less';\n\ninterface TriggerProps {\n    onClick?: () => void;\n}\n\nexport interface CustomDateRangePickerProps<OptionKeys extends string> {\n    state: DateRangePickerOptionsStateType<OptionKeys>;\n    onChange?: DateRangePickerOptionsStateType<OptionKeys>['onChange'];\n    compare?: boolean;\n    disabled?: boolean;\n    input?: (textValue: string) => {\n        element: (\n            value: DateRangePickerProps['value'],\n            triggerProp: TriggerProps,\n            open: DateRangePickerProps['open'],\n            error: DateRangePickerProps['error']\n        ) => ReactElement;\n    };\n}\n\nconst convertDateRange = (val?: DateRange, backward?: boolean): DateRange | undefined =>\n    val\n        ? {\n              start: val.start,\n              end: new Date(\n                  val.end.getFullYear(),\n                  val.end.getMonth(),\n                  val.end.getDate() + (backward ? 1 : -1)\n              ),\n          }\n        : undefined;\n\nconst formatDate = (dt: Date) =>\n    dt.toLocaleString('en-US', {\n        day: 'numeric',\n        year: 'numeric',\n        month: 'short',\n    });\n\nconst formatDateRange = (range: DateRange) =>\n    `${formatDate(range.start)} - ${formatDate(range.end)}`;\n\nexport const DateRangePicker = observer(\n    <OptionKeys extends string>({\n        compare,\n        disabled,\n        state,\n        onChange,\n        input,\n    }: CustomDateRangePickerProps<OptionKeys>) => {\n        const selectedOption = state.selectedOption;\n\n        /*\n         * DateRangePickerOptions uses exclusive date ranges for end date (start >= dt > end)\n         * but anvil's DateRangePicker uses inclusive dates (with end set to endOfDay),\n         * so we performing some transformations here\n         * convertDateRange (predefined options, value and onChange)\n         */\n        const onPickerChange: DateRangePickerOptionsStateType<OptionKeys>['onChange'] = val => {\n            const newVal = convertDateRange(val, true);\n\n            if (onChange) {\n                onChange(newVal);\n            } else {\n                state.onChange(newVal);\n            }\n        };\n        const options = useMemo(\n            () =>\n                state.options.options.map(o => ({\n                    text: o.text,\n                    value: convertDateRange(o.value),\n                    selected: o.key === selectedOption?.key,\n                })),\n            [selectedOption, state.options.options]\n        );\n        const value = useMemo(() => convertDateRange(state.value), [state.value]);\n        const compareValue = useMemo(\n            () =>\n                state.value && compare\n                    ? convertDateRange(state.options.getComparisonDateRange(state.value))\n                    : undefined,\n            [compare, state.value, state.options]\n        );\n        const textValue = selectedOption\n            ? selectedOption.text\n            : compare || !value\n              ? 'Custom Date Range'\n              : formatDateRange(value);\n\n        return (\n            <Stack>\n                <Stack.Item className={Styles.pickerContainer}>\n                    <Form.DateRangePicker\n                        onChange={onPickerChange}\n                        options={options}\n                        value={value}\n                        required\n                        disabled={disabled}\n                        label={\n                            !input && (\n                                <div\n                                    className={classNames(\n                                        Styles.pickerValue,\n                                        'd-f flex-column justify-content-center t-truncate cursor-pointer'\n                                    )}\n                                >\n                                    {textValue}\n                                </div>\n                            )\n                        }\n                        input={input?.(textValue)}\n                    />\n                </Stack.Item>\n                {!!compare && (\n                    <Stack direction=\"column\" justifyContent=\"center\" className=\"m-l-2\">\n                        <BodyText>{value ? formatDateRange(value) : ''}</BodyText>\n                        {!!compareValue && (\n                            <BodyText size=\"xsmall\" subdued>\n                                vs. {formatDateRange(compareValue)}\n                            </BodyText>\n                        )}\n                    </Stack>\n                )}\n            </Stack>\n        );\n    }\n);\n"],"names":["useMemo","classNames","observer","BodyText","Form","Stack","Styles","convertDateRange","val","backward","start","end","Date","getFullYear","getMonth","getDate","undefined","formatDate","dt","toLocaleString","day","year","month","formatDateRange","range","DateRangePicker","compare","disabled","state","onChange","input","selectedOption","onPickerChange","newVal","options","map","o","text","value","selected","key","compareValue","getComparisonDateRange","textValue","Item","className","pickerContainer","required","label","div","pickerValue","direction","justifyContent","size","subdued"],"mappings":";AAAA,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,EAAwBC,IAAI,EAAEC,KAAK,QAAQ,8BAA8B;AAE1F,YAAYC,YAAY,kCAAkC;AAqB1D,MAAMC,mBAAmB,CAACC,KAAiBC,WACvCD,MACM;QACIE,OAAOF,IAAIE,KAAK;QAChBC,KAAK,IAAIC,KACLJ,IAAIG,GAAG,CAACE,WAAW,IACnBL,IAAIG,GAAG,CAACG,QAAQ,IAChBN,IAAIG,GAAG,CAACI,OAAO,KAAMN,CAAAA,WAAW,IAAI,CAAC,CAAA;IAE7C,IACAO;AAEV,MAAMC,aAAa,CAACC,KAChBA,GAAGC,cAAc,CAAC,SAAS;QACvBC,KAAK;QACLC,MAAM;QACNC,OAAO;IACX;AAEJ,MAAMC,kBAAkB,CAACC,QACrB,GAAGP,WAAWO,MAAMd,KAAK,EAAE,GAAG,EAAEO,WAAWO,MAAMb,GAAG,GAAG;AAE3D,OAAO,MAAMc,kBAAkBvB,SAC3B,CAA4B,EACxBwB,OAAO,EACPC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACgC;IACrC,MAAMC,iBAAiBH,MAAMG,cAAc;IAE3C;;;;;SAKC,GACD,MAAMC,iBAA0ExB,CAAAA;QAC5E,MAAMyB,SAAS1B,iBAAiBC,KAAK;QAErC,IAAIqB,UAAU;YACVA,SAASI;QACb,OAAO;YACHL,MAAMC,QAAQ,CAACI;QACnB;IACJ;IACA,MAAMC,UAAUlC,QACZ,IACI4B,MAAMM,OAAO,CAACA,OAAO,CAACC,GAAG,CAACC,CAAAA,IAAM,CAAA;gBAC5BC,MAAMD,EAAEC,IAAI;gBACZC,OAAO/B,iBAAiB6B,EAAEE,KAAK;gBAC/BC,UAAUH,EAAEI,GAAG,MAAKT,2BAAAA,qCAAAA,eAAgBS,GAAG;YAC3C,CAAA,IACJ;QAACT;QAAgBH,MAAMM,OAAO,CAACA,OAAO;KAAC;IAE3C,MAAMI,QAAQtC,QAAQ,IAAMO,iBAAiBqB,MAAMU,KAAK,GAAG;QAACV,MAAMU,KAAK;KAAC;IACxE,MAAMG,eAAezC,QACjB,IACI4B,MAAMU,KAAK,IAAIZ,UACTnB,iBAAiBqB,MAAMM,OAAO,CAACQ,sBAAsB,CAACd,MAAMU,KAAK,KACjEtB,WACV;QAACU;QAASE,MAAMU,KAAK;QAAEV,MAAMM,OAAO;KAAC;IAEzC,MAAMS,YAAYZ,iBACZA,eAAeM,IAAI,GACnBX,WAAW,CAACY,QACV,sBACAf,gBAAgBe;IAExB,qBACI,MAACjC;;0BACG,KAACA,MAAMuC,IAAI;gBAACC,WAAWvC,OAAOwC,eAAe;0BACzC,cAAA,KAAC1C,KAAKqB,eAAe;oBACjBI,UAAUG;oBACVE,SAASA;oBACTI,OAAOA;oBACPS,QAAQ;oBACRpB,UAAUA;oBACVqB,OACI,CAAClB,uBACG,KAACmB;wBACGJ,WAAW5C,WACPK,OAAO4C,WAAW,EAClB;kCAGHP;;oBAIbb,KAAK,EAAEA,kBAAAA,4BAAAA,MAAQa;;;YAGtB,CAAC,CAACjB,yBACC,MAACrB;gBAAM8C,WAAU;gBAASC,gBAAe;gBAASP,WAAU;;kCACxD,KAAC1C;kCAAUmC,QAAQf,gBAAgBe,SAAS;;oBAC3C,CAAC,CAACG,8BACC,MAACtC;wBAASkD,MAAK;wBAASC,OAAO;;4BAAC;4BACvB/B,gBAAgBkB;;;;;;;AAOjD,GACF"}

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

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const pickerContainer: string;
+export const pickerValue: string;
+

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

@@ -8,8 +8,17 @@ import { Button, Tooltip } from '@servicetitan/design-system';
  * return (
  *   <DisabledButton disabled="This button is disabled">knock knock</Button>
  * )
- */
-export const DisabledButton = props => {
-    return props.disabled && props.disabled !== true ? (_jsx(Tooltip, { text: props.disabled, children: _jsx(Button, { ...props, disabled: true }) })) : (_jsx(Button, { ...props, disabled: !!props.disabled }));
+ */ export const DisabledButton = (props)=>{
+    return props.disabled && props.disabled !== true ? /*#__PURE__*/ _jsx(Tooltip, {
+        text: props.disabled,
+        children: /*#__PURE__*/ _jsx(Button, {
+            ...props,
+            disabled: true
+        })
+    }) : /*#__PURE__*/ _jsx(Button, {
+        ...props,
+        disabled: !!props.disabled
+    });
 };
+
 //# sourceMappingURL=disabled-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"disabled-button.js","sourceRoot":"","sources":["../../../src/components/ui/disabled-button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAe,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAM3E;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAA4B,KAAK,CAAC,EAAE;IAC3D,OAAO,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAC/C,KAAC,OAAO,IAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,YACzB,KAAC,MAAM,OAAK,KAAK,EAAE,QAAQ,SAAG,GACxB,CACb,CAAC,CAAC,CAAC,CACA,KAAC,MAAM,OAAK,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAI,CACpD,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/ui/disabled-button.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Button, ButtonProps, Tooltip } from '@servicetitan/design-system';\n\ninterface DisabledButtonProps extends Omit<ButtonProps, 'disabled'> {\n    disabled?: string | boolean;\n}\n\n/**\n * Button that shows disabled reason as tooltip\n *\n * @component\n * @example\n * return (\n *   <DisabledButton disabled=\"This button is disabled\">knock knock</Button>\n * )\n */\nexport const DisabledButton: FC<DisabledButtonProps> = props => {\n    return props.disabled && props.disabled !== true ? (\n        <Tooltip text={props.disabled}>\n            <Button {...props} disabled />\n        </Tooltip>\n    ) : (\n        <Button {...props} disabled={!!props.disabled} />\n    );\n};\n"],"names":["Button","Tooltip","DisabledButton","props","disabled","text"],"mappings":";AACA,SAASA,MAAM,EAAeC,OAAO,QAAQ,8BAA8B;AAM3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,iBAA0CC,CAAAA;IACnD,OAAOA,MAAMC,QAAQ,IAAID,MAAMC,QAAQ,KAAK,qBACxC,KAACH;QAAQI,MAAMF,MAAMC,QAAQ;kBACzB,cAAA,KAACJ;YAAQ,GAAGG,KAAK;YAAEC,QAAQ;;uBAG/B,KAACJ;QAAQ,GAAGG,KAAK;QAAEC,UAAU,CAAC,CAACD,MAAMC,QAAQ;;AAErD,EAAE"}

package/dist/components/ui/label-with-hint/label-with-hint.js

@@ -1,5 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BodyText, Icon, Stack, Tooltip } from '@servicetitan/design-system';
 import { tokens } from '@servicetitan/tokens/core';
-export const LabelWithHint = ({ label, textClassName, className, hint, textSize = 'small', }) => (_jsxs(Stack, { spacing: 1, alignItems: "flex-start", className: className, children: [_jsx(BodyText, { size: textSize, bold: true, className: textClassName, children: label }), !!hint && (_jsx(Tooltip, { direction: "tr", text: hint, children: _jsx(Icon, { name: "info", size: 18, color: tokens.colorNeutral80 }) }))] }));
+export const LabelWithHint = ({ label, textClassName, className, hint, textSize = 'small' })=>/*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        alignItems: "flex-start",
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsx(BodyText, {
+                size: textSize,
+                bold: true,
+                className: textClassName,
+                children: label
+            }),
+            !!hint && /*#__PURE__*/ _jsx(Tooltip, {
+                direction: "tr",
+                text: hint,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: "info",
+                    size: 18,
+                    color: tokens.colorNeutral80
+                })
+            })
+        ]
+    });
+
 //# sourceMappingURL=label-with-hint.js.map

package/dist/components/ui/label-with-hint/label-with-hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"label-with-hint.js","sourceRoot":"","sources":["../../../../src/components/ui/label-with-hint/label-with-hint.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAWnD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAClD,KAAK,EACL,aAAa,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,GAAG,OAAO,GACrB,EAAE,EAAE,CAAC,CACF,MAAC,KAAK,IAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,aAC3D,KAAC,QAAQ,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,QAAC,SAAS,EAAE,aAAa,YAClD,KAAK,GACC,EACV,CAAC,CAAC,IAAI,IAAI,CACP,KAAC,OAAO,IAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,YAC9B,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,cAAc,GAAI,GACtD,CACb,IACG,CACX,CAAC"}
+{"version":3,"sources":["../../../../src/components/ui/label-with-hint/label-with-hint.tsx"],"sourcesContent":["import { BodyText, Icon, Stack, Tooltip } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { FC } from 'react';\n\nexport interface LabelWithHintProps {\n    label: string;\n    hint?: string;\n    textClassName?: string;\n    className?: string;\n    textSize?: 'large' | 'medium' | 'small' | 'xsmall';\n}\n\nexport const LabelWithHint: FC<LabelWithHintProps> = ({\n    label,\n    textClassName,\n    className,\n    hint,\n    textSize = 'small',\n}) => (\n    <Stack spacing={1} alignItems=\"flex-start\" className={className}>\n        <BodyText size={textSize} bold className={textClassName}>\n            {label}\n        </BodyText>\n        {!!hint && (\n            <Tooltip direction=\"tr\" text={hint}>\n                <Icon name=\"info\" size={18} color={tokens.colorNeutral80} />\n            </Tooltip>\n        )}\n    </Stack>\n);\n"],"names":["BodyText","Icon","Stack","Tooltip","tokens","LabelWithHint","label","textClassName","className","hint","textSize","spacing","alignItems","size","bold","direction","text","name","color","colorNeutral80"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAQ,8BAA8B;AAC7E,SAASC,MAAM,QAAQ,4BAA4B;AAWnD,OAAO,MAAMC,gBAAwC,CAAC,EAClDC,KAAK,EACLC,aAAa,EACbC,SAAS,EACTC,IAAI,EACJC,WAAW,OAAO,EACrB,iBACG,MAACR;QAAMS,SAAS;QAAGC,YAAW;QAAaJ,WAAWA;;0BAClD,KAACR;gBAASa,MAAMH;gBAAUI,IAAI;gBAACN,WAAWD;0BACrCD;;YAEJ,CAAC,CAACG,sBACC,KAACN;gBAAQY,WAAU;gBAAKC,MAAMP;0BAC1B,cAAA,KAACR;oBAAKgB,MAAK;oBAAOJ,MAAM;oBAAIK,OAAOd,OAAOe,cAAc;;;;OAItE"}

package/dist/components/ui/line-text/index.js

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

package/dist/components/ui/line-text/index.js.map

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

package/dist/components/ui/line-text/line-text.js

@@ -1,25 +1,84 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import classNames from 'classnames';
-import { BodyText, Headline, MoreDetails, } from '@servicetitan/design-system';
+import { BodyText, Headline, MoreDetails } from '@servicetitan/design-system';
 import { useClientRect } from '../../../utils/use-client-rect';
 import * as Styles from './line-text.module.less';
-const useLimited = () => {
+const useLimited = ()=>{
     const [rect1, ref1] = useClientRect();
     const [rect2, ref2] = useClientRect();
-    const limited = useMemo(() => !!(rect1 === null || rect1 === void 0 ? void 0 : rect1.width) && !!(rect2 === null || rect2 === void 0 ? void 0 : rect2.width) && ((rect2 === null || rect2 === void 0 ? void 0 : rect2.width) || 0) > ((rect1 === null || rect1 === void 0 ? void 0 : rect1.width) || 0), [rect1, rect2]);
-    return [ref1, ref2, limited];
+    const limited = useMemo(()=>!!(rect1 === null || rect1 === void 0 ? void 0 : rect1.width) && !!(rect2 === null || rect2 === void 0 ? void 0 : rect2.width) && ((rect2 === null || rect2 === void 0 ? void 0 : rect2.width) || 0) > ((rect1 === null || rect1 === void 0 ? void 0 : rect1.width) || 0), [
+        rect1,
+        rect2
+    ]);
+    return [
+        ref1,
+        ref2,
+        limited
+    ];
 };
-export const BodyTextLine = ({ children, wrapperClassName, ...props }) => {
+export const BodyTextLine = ({ children, wrapperClassName, ...props })=>{
     const [ref1, ref2, limited] = useLimited();
-    return (_jsxs("div", { ref: ref1, className: classNames(wrapperClassName, 'w-100 position-relative d-f flex-row of-x-hidden'), children: [_jsx(BodyText, { ...props, className: classNames(props.className, Styles.mainText, {
-                    [Styles.mainTextHidden]: limited,
-                }), ref: ref2, children: children }), limited && (_jsxs("div", { className: Styles.moreDetailsWrapper, children: [_jsx(BodyText, { ...props, className: classNames(props.className, Styles.moreDetailsText, 't-truncate'), children: children }), _jsx(MoreDetails, { full: children !== null && children !== void 0 ? children : '', short: "", size: props.size })] }))] }));
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: ref1,
+        className: classNames(wrapperClassName, 'w-100 position-relative d-f flex-row of-x-hidden'),
+        children: [
+            /*#__PURE__*/ _jsx(BodyText, {
+                ...props,
+                className: classNames(props.className, Styles.mainText, {
+                    [Styles.mainTextHidden]: limited
+                }),
+                ref: ref2,
+                children: children
+            }),
+            limited && /*#__PURE__*/ _jsxs("div", {
+                className: Styles.moreDetailsWrapper,
+                children: [
+                    /*#__PURE__*/ _jsx(BodyText, {
+                        ...props,
+                        className: classNames(props.className, Styles.moreDetailsText, 't-truncate'),
+                        children: children
+                    }),
+                    /*#__PURE__*/ _jsx(MoreDetails, {
+                        full: children !== null && children !== void 0 ? children : '',
+                        short: "",
+                        size: props.size
+                    })
+                ]
+            })
+        ]
+    });
 };
-export const HeadlineLine = ({ children, wrapperClassName, ...props }) => {
+export const HeadlineLine = ({ children, wrapperClassName, ...props })=>{
     const [ref1, ref2, limited] = useLimited();
-    return (_jsxs("div", { ref: ref1, className: classNames(wrapperClassName, 'w-100 position-relative d-f flex-row'), children: [_jsx(Headline, { ...props, className: classNames(props.className, Styles.mainText, {
-                    [Styles.mainTextHidden]: limited,
-                }), ref: ref2, children: children }), limited && (_jsxs("div", { className: Styles.moreDetailsWrapper, children: [_jsx(Headline, { ...props, className: classNames(props.className, Styles.moreDetailsText, 't-truncate'), children: children }), _jsx(MoreDetails, { full: children !== null && children !== void 0 ? children : '', short: "" })] }))] }));
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: ref1,
+        className: classNames(wrapperClassName, 'w-100 position-relative d-f flex-row'),
+        children: [
+            /*#__PURE__*/ _jsx(Headline, {
+                ...props,
+                className: classNames(props.className, Styles.mainText, {
+                    [Styles.mainTextHidden]: limited
+                }),
+                ref: ref2,
+                children: children
+            }),
+            limited && /*#__PURE__*/ _jsxs("div", {
+                className: Styles.moreDetailsWrapper,
+                children: [
+                    /*#__PURE__*/ _jsx(Headline, {
+                        ...props,
+                        className: classNames(props.className, Styles.moreDetailsText, 't-truncate'),
+                        children: children
+                    }),
+                    /*#__PURE__*/ _jsx(MoreDetails, {
+                        full: children !== null && children !== void 0 ? children : '',
+                        short: ""
+                    })
+                ]
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=line-text.js.map

package/dist/components/ui/line-text/line-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-text.js","sourceRoot":"","sources":["../../../../src/components/ui/line-text/line-text.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ui/line-text/line-text.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport classNames from 'classnames';\nimport {\n    BodyText,\n    BodyTextPropsStrict,\n    Headline,\n    HeadlinePropsStrict,\n    MoreDetails,\n} from '@servicetitan/design-system';\nimport { useClientRect } from '../../../utils/use-client-rect';\nimport * as Styles from './line-text.module.less';\n\nconst useLimited = (): [\n    (node: HTMLElement | null) => void,\n    (node: HTMLElement | null) => void,\n    boolean,\n] => {\n    const [rect1, ref1] = useClientRect();\n    const [rect2, ref2] = useClientRect();\n    const limited = useMemo(\n        () => !!rect1?.width && !!rect2?.width && (rect2?.width || 0) > (rect1?.width || 0),\n        [rect1, rect2]\n    );\n\n    return [ref1, ref2, limited];\n};\n\nexport interface BodyTextLineProps extends BodyTextPropsStrict {\n    wrapperClassName?: string;\n    children?: string;\n}\n\nexport const BodyTextLine: FC<BodyTextLineProps> = ({ children, wrapperClassName, ...props }) => {\n    const [ref1, ref2, limited] = useLimited();\n\n    return (\n        <div\n            ref={ref1}\n            className={classNames(\n                wrapperClassName,\n                'w-100 position-relative d-f flex-row of-x-hidden'\n            )}\n        >\n            <BodyText\n                {...props}\n                className={classNames(props.className, Styles.mainText, {\n                    [Styles.mainTextHidden]: limited,\n                })}\n                ref={ref2}\n            >\n                {children}\n            </BodyText>\n\n            {limited && (\n                <div className={Styles.moreDetailsWrapper}>\n                    <BodyText\n                        {...props}\n                        className={classNames(\n                            props.className,\n                            Styles.moreDetailsText,\n                            't-truncate'\n                        )}\n                    >\n                        {children}\n                    </BodyText>\n                    <MoreDetails full={children ?? ''} short=\"\" size={props.size} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport interface HeadlineLineProps extends HeadlinePropsStrict {\n    wrapperClassName?: string;\n    children?: string;\n}\n\nexport const HeadlineLine: FC<HeadlineLineProps> = ({ children, wrapperClassName, ...props }) => {\n    const [ref1, ref2, limited] = useLimited();\n\n    return (\n        <div\n            ref={ref1}\n            className={classNames(wrapperClassName, 'w-100 position-relative d-f flex-row')}\n        >\n            <Headline\n                {...props}\n                className={classNames(props.className, Styles.mainText, {\n                    [Styles.mainTextHidden]: limited,\n                })}\n                ref={ref2}\n            >\n                {children}\n            </Headline>\n\n            {limited && (\n                <div className={Styles.moreDetailsWrapper}>\n                    <Headline\n                        {...props}\n                        className={classNames(\n                            props.className,\n                            Styles.moreDetailsText,\n                            't-truncate'\n                        )}\n                    >\n                        {children}\n                    </Headline>\n                    <MoreDetails full={children ?? ''} short=\"\" />\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["useMemo","classNames","BodyText","Headline","MoreDetails","useClientRect","Styles","useLimited","rect1","ref1","rect2","ref2","limited","width","BodyTextLine","children","wrapperClassName","props","div","ref","className","mainText","mainTextHidden","moreDetailsWrapper","moreDetailsText","full","short","size","HeadlineLine"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AACpC,OAAOC,gBAAgB,aAAa;AACpC,SACIC,QAAQ,EAERC,QAAQ,EAERC,WAAW,QACR,8BAA8B;AACrC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,YAAYC,YAAY,0BAA0B;AAElD,MAAMC,aAAa;IAKf,MAAM,CAACC,OAAOC,KAAK,GAAGJ;IACtB,MAAM,CAACK,OAAOC,KAAK,GAAGN;IACtB,MAAMO,UAAUZ,QACZ,IAAM,CAAC,EAACQ,kBAAAA,4BAAAA,MAAOK,KAAK,KAAI,CAAC,EAACH,kBAAAA,4BAAAA,MAAOG,KAAK,KAAI,AAACH,CAAAA,CAAAA,kBAAAA,4BAAAA,MAAOG,KAAK,KAAI,CAAA,IAAML,CAAAA,CAAAA,kBAAAA,4BAAAA,MAAOK,KAAK,KAAI,CAAA,GACjF;QAACL;QAAOE;KAAM;IAGlB,OAAO;QAACD;QAAME;QAAMC;KAAQ;AAChC;AAOA,OAAO,MAAME,eAAsC,CAAC,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGC,OAAO;IACxF,MAAM,CAACR,MAAME,MAAMC,QAAQ,GAAGL;IAE9B,qBACI,MAACW;QACGC,KAAKV;QACLW,WAAWnB,WACPe,kBACA;;0BAGJ,KAACd;gBACI,GAAGe,KAAK;gBACTG,WAAWnB,WAAWgB,MAAMG,SAAS,EAAEd,OAAOe,QAAQ,EAAE;oBACpD,CAACf,OAAOgB,cAAc,CAAC,EAAEV;gBAC7B;gBACAO,KAAKR;0BAEJI;;YAGJH,yBACG,MAACM;gBAAIE,WAAWd,OAAOiB,kBAAkB;;kCACrC,KAACrB;wBACI,GAAGe,KAAK;wBACTG,WAAWnB,WACPgB,MAAMG,SAAS,EACfd,OAAOkB,eAAe,EACtB;kCAGHT;;kCAEL,KAACX;wBAAYqB,MAAMV,qBAAAA,sBAAAA,WAAY;wBAAIW,OAAM;wBAAGC,MAAMV,MAAMU,IAAI;;;;;;AAKhF,EAAE;AAOF,OAAO,MAAMC,eAAsC,CAAC,EAAEb,QAAQ,EAAEC,gBAAgB,EAAE,GAAGC,OAAO;IACxF,MAAM,CAACR,MAAME,MAAMC,QAAQ,GAAGL;IAE9B,qBACI,MAACW;QACGC,KAAKV;QACLW,WAAWnB,WAAWe,kBAAkB;;0BAExC,KAACb;gBACI,GAAGc,KAAK;gBACTG,WAAWnB,WAAWgB,MAAMG,SAAS,EAAEd,OAAOe,QAAQ,EAAE;oBACpD,CAACf,OAAOgB,cAAc,CAAC,EAAEV;gBAC7B;gBACAO,KAAKR;0BAEJI;;YAGJH,yBACG,MAACM;gBAAIE,WAAWd,OAAOiB,kBAAkB;;kCACrC,KAACpB;wBACI,GAAGc,KAAK;wBACTG,WAAWnB,WACPgB,MAAMG,SAAS,EACfd,OAAOkB,eAAe,EACtB;kCAGHT;;kCAEL,KAACX;wBAAYqB,MAAMV,qBAAAA,sBAAAA,WAAY;wBAAIW,OAAM;;;;;;AAK7D,EAAE"}

package/dist/components/ui/line-text/line-text.module.less.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: true;
+export const mainText: string;
+export const mainTextHidden: string;
+export const moreDetailsText: string;
+export const moreDetailsWrapper: string;
+

package/dist/components/ui/title-popover/index.js

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

package/dist/components/ui/title-popover/index.js.map

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