@servicetitan/form 31.1.0 → 31.3.0

package/dist/color-picker/color-palette.js

@@ -9,7 +9,7 @@ export const colorPalette = [
         tokens.colorBlue200,
         tokens.colorMagenta200,
         tokens.colorPurple200,
-        tokens.colorNeutral60,
+        tokens.colorNeutral60
     ],
     [
         tokens.colorRed300,
@@ -20,7 +20,7 @@ export const colorPalette = [
         tokens.colorBlue300,
         tokens.colorMagenta300,
         tokens.colorPurple300,
-        tokens.colorNeutral70,
+        tokens.colorNeutral70
     ],
     [
         tokens.colorRed400,
@@ -31,7 +31,7 @@ export const colorPalette = [
         tokens.colorBlue400,
         tokens.colorMagenta400,
         tokens.colorPurple400,
-        tokens.colorNeutral90,
+        tokens.colorNeutral90
     ],
     [
         tokens.colorRed500,
@@ -42,7 +42,7 @@ export const colorPalette = [
         tokens.colorBlue500,
         tokens.colorMagenta500,
         tokens.colorPurple500,
-        tokens.colorNeutral200,
+        tokens.colorNeutral200
     ],
     [
         tokens.colorRed600,
@@ -53,9 +53,8 @@ export const colorPalette = [
         tokens.colorBlue600,
         tokens.colorMagenta600,
         tokens.colorPurple600,
-        tokens.colorNeutral400,
-    ],
-]
-    .flat()
-    .map(color => color.toLowerCase());
+        tokens.colorNeutral400
+    ]
+].flat().map((color)=>color.toLowerCase());
+
 //# sourceMappingURL=color-palette.js.map

package/dist/color-picker/color-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.js","sourceRoot":"","sources":["../../src/color-picker/color-palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,MAAM,CAAC,MAAM,YAAY,GAAG;IACxB;QACI,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,aAAa;QACpB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,eAAe;QACtB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;KACxB;IACD;QACI,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,aAAa;QACpB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,eAAe;QACtB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;KACxB;IACD;QACI,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,aAAa;QACpB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,eAAe;QACtB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;KACxB;IACD;QACI,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,aAAa;QACpB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,eAAe;QACtB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,eAAe;KACzB;IACD;QACI,MAAM,CAAC,WAAW;QAClB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,aAAa;QACpB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,YAAY;QACnB,MAAM,CAAC,eAAe;QACtB,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,eAAe;KACzB;CACJ;KACI,IAAI,EAAE;KACN,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC"}
+{"version":3,"sources":["../../src/color-picker/color-palette.ts"],"sourcesContent":["import { tokens } from '@servicetitan/tokens/core';\r\n\r\nexport const colorPalette = [\r\n    [\r\n        tokens.colorRed200,\r\n        tokens.colorOrange200,\r\n        tokens.colorYellow200,\r\n        tokens.colorGreen200,\r\n        tokens.colorCyan200,\r\n        tokens.colorBlue200,\r\n        tokens.colorMagenta200,\r\n        tokens.colorPurple200,\r\n        tokens.colorNeutral60,\r\n    ],\r\n    [\r\n        tokens.colorRed300,\r\n        tokens.colorOrange300,\r\n        tokens.colorYellow300,\r\n        tokens.colorGreen300,\r\n        tokens.colorCyan300,\r\n        tokens.colorBlue300,\r\n        tokens.colorMagenta300,\r\n        tokens.colorPurple300,\r\n        tokens.colorNeutral70,\r\n    ],\r\n    [\r\n        tokens.colorRed400,\r\n        tokens.colorOrange400,\r\n        tokens.colorYellow400,\r\n        tokens.colorGreen400,\r\n        tokens.colorCyan400,\r\n        tokens.colorBlue400,\r\n        tokens.colorMagenta400,\r\n        tokens.colorPurple400,\r\n        tokens.colorNeutral90,\r\n    ],\r\n    [\r\n        tokens.colorRed500,\r\n        tokens.colorOrange500,\r\n        tokens.colorYellow500,\r\n        tokens.colorGreen500,\r\n        tokens.colorCyan500,\r\n        tokens.colorBlue500,\r\n        tokens.colorMagenta500,\r\n        tokens.colorPurple500,\r\n        tokens.colorNeutral200,\r\n    ],\r\n    [\r\n        tokens.colorRed600,\r\n        tokens.colorOrange600,\r\n        tokens.colorYellow600,\r\n        tokens.colorGreen600,\r\n        tokens.colorCyan600,\r\n        tokens.colorBlue600,\r\n        tokens.colorMagenta600,\r\n        tokens.colorPurple600,\r\n        tokens.colorNeutral400,\r\n    ],\r\n]\r\n    .flat()\r\n    .map(color => color.toLowerCase());\r\n"],"names":["tokens","colorPalette","colorRed200","colorOrange200","colorYellow200","colorGreen200","colorCyan200","colorBlue200","colorMagenta200","colorPurple200","colorNeutral60","colorRed300","colorOrange300","colorYellow300","colorGreen300","colorCyan300","colorBlue300","colorMagenta300","colorPurple300","colorNeutral70","colorRed400","colorOrange400","colorYellow400","colorGreen400","colorCyan400","colorBlue400","colorMagenta400","colorPurple400","colorNeutral90","colorRed500","colorOrange500","colorYellow500","colorGreen500","colorCyan500","colorBlue500","colorMagenta500","colorPurple500","colorNeutral200","colorRed600","colorOrange600","colorYellow600","colorGreen600","colorCyan600","colorBlue600","colorMagenta600","colorPurple600","colorNeutral400","flat","map","color","toLowerCase"],"mappings":"AAAA,SAASA,MAAM,QAAQ,4BAA4B;AAEnD,OAAO,MAAMC,eAAe;IACxB;QACID,OAAOE,WAAW;QAClBF,OAAOG,cAAc;QACrBH,OAAOI,cAAc;QACrBJ,OAAOK,aAAa;QACpBL,OAAOM,YAAY;QACnBN,OAAOO,YAAY;QACnBP,OAAOQ,eAAe;QACtBR,OAAOS,cAAc;QACrBT,OAAOU,cAAc;KACxB;IACD;QACIV,OAAOW,WAAW;QAClBX,OAAOY,cAAc;QACrBZ,OAAOa,cAAc;QACrBb,OAAOc,aAAa;QACpBd,OAAOe,YAAY;QACnBf,OAAOgB,YAAY;QACnBhB,OAAOiB,eAAe;QACtBjB,OAAOkB,cAAc;QACrBlB,OAAOmB,cAAc;KACxB;IACD;QACInB,OAAOoB,WAAW;QAClBpB,OAAOqB,cAAc;QACrBrB,OAAOsB,cAAc;QACrBtB,OAAOuB,aAAa;QACpBvB,OAAOwB,YAAY;QACnBxB,OAAOyB,YAAY;QACnBzB,OAAO0B,eAAe;QACtB1B,OAAO2B,cAAc;QACrB3B,OAAO4B,cAAc;KACxB;IACD;QACI5B,OAAO6B,WAAW;QAClB7B,OAAO8B,cAAc;QACrB9B,OAAO+B,cAAc;QACrB/B,OAAOgC,aAAa;QACpBhC,OAAOiC,YAAY;QACnBjC,OAAOkC,YAAY;QACnBlC,OAAOmC,eAAe;QACtBnC,OAAOoC,cAAc;QACrBpC,OAAOqC,eAAe;KACzB;IACD;QACIrC,OAAOsC,WAAW;QAClBtC,OAAOuC,cAAc;QACrBvC,OAAOwC,cAAc;QACrBxC,OAAOyC,aAAa;QACpBzC,OAAO0C,YAAY;QACnB1C,OAAO2C,YAAY;QACnB3C,OAAO4C,eAAe;QACtB5C,OAAO6C,cAAc;QACrB7C,OAAO8C,eAAe;KACzB;CACJ,CACIC,IAAI,GACJC,GAAG,CAACC,CAAAA,QAASA,MAAMC,WAAW,IAAI"}

package/dist/color-picker/color-picker.js

@@ -1,25 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useCallback, useEffect } from 'react';
-import { Popover, BodyText, Card, ColorPicker as AnvilColorPicker, } from '@servicetitan/design-system';
+import { Popover, BodyText, Card, ColorPicker as AnvilColorPicker } from '@servicetitan/design-system';
 import { colorPalette } from './color-palette';
 import * as Styles from './color-picker.module.css';
-export const ColorPicker = ({ label, colors = colorPalette, value, preview: Preview, onChange, }) => {
+export const ColorPicker = ({ label, colors = colorPalette, value, preview: Preview, onChange })=>{
     const ref = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
-    const handleClickOutside = useCallback((event) => {
+    const handleClickOutside = useCallback((event)=>{
         if (ref.current && !ref.current.contains(event.target)) {
             setIsOpen(false);
         }
     }, []);
-    useEffect(() => {
+    useEffect(()=>{
         document.addEventListener('mousedown', handleClickOutside);
-        return () => {
+        return ()=>{
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [handleClickOutside]);
-    const handleTriggerClick = () => {
-        setIsOpen(isOpen => !isOpen);
+    }, [
+        handleClickOutside
+    ]);
+    const handleTriggerClick = ()=>{
+        setIsOpen((isOpen)=>!isOpen);
     };
-    return (_jsx("div", { ref: ref, className: "d-f", children: _jsxs(Popover, { trigger: _jsx("div", { style: { background: value }, onClick: handleTriggerClick, className: Styles.colorPicker }), open: isOpen, direction: "rb", popoverContentClassName: "p-3", className: Styles.colorPickerPopover, children: [_jsx(BodyText, { size: "medium", className: "m-b-1", children: label }), _jsx(Card, { padding: "thin", children: _jsx(AnvilColorPicker, { colors: colors, value: value === null || value === void 0 ? void 0 : value.toLowerCase(), onChange: onChange }) }), Preview && _jsx(Preview, { color: value })] }) }));
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        className: "d-f",
+        children: /*#__PURE__*/ _jsxs(Popover, {
+            trigger: /*#__PURE__*/ _jsx("div", {
+                style: {
+                    background: value
+                },
+                onClick: handleTriggerClick,
+                className: Styles.colorPicker
+            }),
+            open: isOpen,
+            direction: "rb",
+            popoverContentClassName: "p-3",
+            className: Styles.colorPickerPopover,
+            children: [
+                /*#__PURE__*/ _jsx(BodyText, {
+                    size: "medium",
+                    className: "m-b-1",
+                    children: label
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    padding: "thin",
+                    children: /*#__PURE__*/ _jsx(AnvilColorPicker, {
+                        colors: colors,
+                        value: value === null || value === void 0 ? void 0 : value.toLowerCase(),
+                        onChange: onChange
+                    })
+                }),
+                Preview && /*#__PURE__*/ _jsx(Preview, {
+                    color: value
+                })
+            ]
+        })
+    });
 };
+
 //# sourceMappingURL=color-picker.js.map

package/dist/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../src/color-picker/color-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEpF,OAAO,EACH,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,WAAW,IAAI,gBAAgB,GAClC,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,KAAK,MAAM,MAAM,2BAA2B,CAAC;AAcpD,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAC9C,KAAK,EACL,MAAM,GAAG,YAAY,EACrB,KAAK,EACL,OAAO,EAAE,OAAO,EAChB,QAAQ,GACX,EAAE,EAAE;IACD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QACpD,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YAC7D,SAAS,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAClE,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,YAC1B,MAAC,OAAO,IACJ,OAAO,EACH,cACI,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EAC5B,OAAO,EAAE,kBAAkB,EAC3B,SAAS,EAAE,MAAM,CAAC,WAAW,GAC/B,EAEN,IAAI,EAAE,MAAM,EACZ,SAAS,EAAC,IAAI,EACd,uBAAuB,EAAC,KAAK,EAC7B,SAAS,EAAE,MAAM,CAAC,kBAAkB,aAEpC,KAAC,QAAQ,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,YACpC,KAAK,GACC,EACX,KAAC,IAAI,IAAC,OAAO,EAAC,MAAM,YAChB,KAAC,gBAAgB,IACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,EAAE,EAC3B,QAAQ,EAAE,QAAQ,GACpB,GACC,EACN,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,GAAI,IAC/B,GACR,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../src/color-picker/color-picker.tsx"],"sourcesContent":["import { useRef, useState, useCallback, useEffect, FC, ComponentType } from 'react';\r\n\r\nimport {\r\n    Popover,\r\n    BodyText,\r\n    Card,\r\n    ColorPicker as AnvilColorPicker,\r\n} from '@servicetitan/design-system';\r\n\r\nimport { colorPalette } from './color-palette';\r\n\r\nimport * as Styles from './color-picker.module.css';\r\n\r\nexport interface ColorPickerPreviewProps {\r\n    color?: string;\r\n}\r\n\r\nexport interface ColorPickerProps {\r\n    label?: string;\r\n    colors?: string[];\r\n    value: string | undefined;\r\n    preview?: ComponentType<ColorPickerPreviewProps>;\r\n    onChange(value: string | undefined): void;\r\n}\r\n\r\nexport const ColorPicker: FC<ColorPickerProps> = ({\r\n    label,\r\n    colors = colorPalette,\r\n    value,\r\n    preview: Preview,\r\n    onChange,\r\n}) => {\r\n    const ref = useRef<HTMLDivElement>(null);\r\n\r\n    const [isOpen, setIsOpen] = useState(false);\r\n\r\n    const handleClickOutside = useCallback((event: Event) => {\r\n        if (ref.current && !ref.current.contains(event.target as Node)) {\r\n            setIsOpen(false);\r\n        }\r\n    }, []);\r\n\r\n    useEffect(() => {\r\n        document.addEventListener('mousedown', handleClickOutside);\r\n\r\n        return () => {\r\n            document.removeEventListener('mousedown', handleClickOutside);\r\n        };\r\n    }, [handleClickOutside]);\r\n\r\n    const handleTriggerClick = () => {\r\n        setIsOpen(isOpen => !isOpen);\r\n    };\r\n\r\n    return (\r\n        <div ref={ref} className=\"d-f\">\r\n            <Popover\r\n                trigger={\r\n                    <div\r\n                        style={{ background: value }}\r\n                        onClick={handleTriggerClick}\r\n                        className={Styles.colorPicker}\r\n                    />\r\n                }\r\n                open={isOpen}\r\n                direction=\"rb\"\r\n                popoverContentClassName=\"p-3\"\r\n                className={Styles.colorPickerPopover}\r\n            >\r\n                <BodyText size=\"medium\" className=\"m-b-1\">\r\n                    {label}\r\n                </BodyText>\r\n                <Card padding=\"thin\">\r\n                    <AnvilColorPicker\r\n                        colors={colors}\r\n                        value={value?.toLowerCase()}\r\n                        onChange={onChange}\r\n                    />\r\n                </Card>\r\n                {Preview && <Preview color={value} />}\r\n            </Popover>\r\n        </div>\r\n    );\r\n};\r\n"],"names":["useRef","useState","useCallback","useEffect","Popover","BodyText","Card","ColorPicker","AnvilColorPicker","colorPalette","Styles","label","colors","value","preview","Preview","onChange","ref","isOpen","setIsOpen","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleTriggerClick","div","className","trigger","style","background","onClick","colorPicker","open","direction","popoverContentClassName","colorPickerPopover","size","padding","toLowerCase","color"],"mappings":";AAAA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,QAA2B,QAAQ;AAEpF,SACIC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,eAAeC,gBAAgB,QAC5B,8BAA8B;AAErC,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,YAAYC,YAAY,4BAA4B;AAcpD,OAAO,MAAMH,cAAoC,CAAC,EAC9CI,KAAK,EACLC,SAASH,YAAY,EACrBI,KAAK,EACLC,SAASC,OAAO,EAChBC,QAAQ,EACX;IACG,MAAMC,MAAMjB,OAAuB;IAEnC,MAAM,CAACkB,QAAQC,UAAU,GAAGlB,SAAS;IAErC,MAAMmB,qBAAqBlB,YAAY,CAACmB;QACpC,IAAIJ,IAAIK,OAAO,IAAI,CAACL,IAAIK,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5DL,UAAU;QACd;IACJ,GAAG,EAAE;IAELhB,UAAU;QACNsB,SAASC,gBAAgB,CAAC,aAAaN;QAEvC,OAAO;YACHK,SAASE,mBAAmB,CAAC,aAAaP;QAC9C;IACJ,GAAG;QAACA;KAAmB;IAEvB,MAAMQ,qBAAqB;QACvBT,UAAUD,CAAAA,SAAU,CAACA;IACzB;IAEA,qBACI,KAACW;QAAIZ,KAAKA;QAAKa,WAAU;kBACrB,cAAA,MAAC1B;YACG2B,uBACI,KAACF;gBACGG,OAAO;oBAAEC,YAAYpB;gBAAM;gBAC3BqB,SAASN;gBACTE,WAAWpB,OAAOyB,WAAW;;YAGrCC,MAAMlB;YACNmB,WAAU;YACVC,yBAAwB;YACxBR,WAAWpB,OAAO6B,kBAAkB;;8BAEpC,KAAClC;oBAASmC,MAAK;oBAASV,WAAU;8BAC7BnB;;8BAEL,KAACL;oBAAKmC,SAAQ;8BACV,cAAA,KAACjC;wBACGI,QAAQA;wBACRC,KAAK,EAAEA,kBAAAA,4BAAAA,MAAO6B,WAAW;wBACzB1B,UAAUA;;;gBAGjBD,yBAAW,KAACA;oBAAQ4B,OAAO9B;;;;;AAI5C,EAAE"}

package/dist/color-picker/color-picker.module.css.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const colorPicker: string;
+export const colorPickerPopover: string;
+

package/dist/color-picker/index.js

@@ -1,3 +1,4 @@
 export * from './color-picker';
 export * from './color-palette';
+
 //# sourceMappingURL=index.js.map

package/dist/color-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/color-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}
+{"version":3,"sources":["../../src/color-picker/index.ts"],"sourcesContent":["export * from './color-picker';\r\nexport * from './color-palette';\r\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,kBAAkB"}

package/dist/date-range-picker/date-range-picker.js

@@ -1,161 +1,35 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _ts_decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
+}
+function _ts_metadata(k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
+}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from 'react';
-import { DateRangePicker as DateRangePickerKendo, } from '@progress/kendo-react-dateinputs';
+import { DateRangePicker as DateRangePickerKendo } from '@progress/kendo-react-dateinputs';
 import { Icon, InputDateMask, Stack } from '@servicetitan/design-system';
 import { observable, action, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import moment from 'moment';
 import * as Styles from './date-range-picker.module.css';
-let DateRangePicker = class DateRangePicker extends Component {
-    constructor(props) {
-        super(props);
-        // `HTMLDivElement` leads to issues with Node/SSR
-        Object.defineProperty(this, "wrapElem", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "isFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "showDatePicker", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "isIconClicked", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "isDateRangePickerClicked", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "handleRef", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (wrapElem) => {
-                this.wrapElem = wrapElem;
-            }
-        });
-        Object.defineProperty(this, "handleClickGlobal", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (evt) => {
-                if (!(evt.target instanceof Node)) {
-                    return;
-                }
-                const isPrevFocused = this.isFocused;
-                this.isFocused = this.isDateRangePickerClicked;
-                if (!this.isFocused && isPrevFocused) {
-                    // click outside
-                    this.props.field.enableAutoValidationAndValidate();
-                    this.toggleShow(false);
-                }
-                else if (this.isFocused && !isPrevFocused && !this.isIconClicked) {
-                    // click inside but outside icons
-                    this.props.field.disableAutoValidation();
-                }
-                this.isIconClicked = false;
-                this.isDateRangePickerClicked = false;
-            }
-        });
-        Object.defineProperty(this, "handleClickDateRangePicker", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.isDateRangePickerClicked = true;
-            }
-        });
-        Object.defineProperty(this, "handleClickIcon", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.isIconClicked = true;
-                if (this.showDatePicker) {
-                    this.props.field.enableAutoValidationAndValidate();
-                }
-                else {
-                    this.props.field.disableAutoValidation();
-                }
-                this.toggleShow();
-            }
-        });
-        Object.defineProperty(this, "handleChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (event) => {
-                var _a, _b;
-                const value = event.target.value;
-                if (value.start && value.end && value.start > value.end) {
-                    [value.start, value.end] = [value.end, value.start];
-                }
-                this.props.field.onChange({ from: (_a = value.start) !== null && _a !== void 0 ? _a : undefined, to: (_b = value.end) !== null && _b !== void 0 ? _b : undefined });
-            }
-        });
-        Object.defineProperty(this, "handleFromChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (from) => {
-                const to = this.props.field.value ? this.props.field.value.to : undefined;
-                if (from || to) {
-                    this.props.field.onChange({ from, to });
-                }
-                else {
-                    this.props.field.onChange(undefined);
-                }
-            }
-        });
-        Object.defineProperty(this, "handleToChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (to) => {
-                const from = this.props.field.value ? this.props.field.value.from : undefined;
-                if (from || to) {
-                    this.props.field.onChange({ from, to });
-                }
-                else {
-                    this.props.field.onChange(undefined);
-                }
-            }
-        });
-        Object.defineProperty(this, "handleHiddenInputChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (ev) => {
-                const values = ev.currentTarget.value.split('-').map(v => new Date(v));
-                this.props.field.onChange({ from: values[0] || undefined, to: values[1] || undefined });
-            }
-        });
-        makeObservable(this);
-    }
+export class DateRangePicker extends Component {
     toggleShow(show) {
         this.showDatePicker = show !== undefined ? show : !this.showDatePicker;
     }
@@ -166,15 +40,22 @@ let DateRangePicker = class DateRangePicker extends Component {
         window.removeEventListener('click', this.handleClickGlobal);
     }
     render() {
-        var _a, _b;
         const { hasError } = this.props.field;
-        const { 'qa-testing': qaTestingLocator, placeHolder, inputFormat, className, calendarComponent, headerTitleComponent, cellComponent, minDate, maxDate, calendarMinDate, calendarMaxDate, topView, bottomView, horizontalAlign, disabled = false, small, maskChar, } = this.props;
+        const { 'qa-testing': qaTestingLocator, placeHolder, inputFormat, className, calendarComponent, headerTitleComponent, cellComponent, minDate, maxDate, calendarMinDate, calendarMaxDate, topView, bottomView, horizontalAlign, disabled = false, small, maskChar } = this.props;
         const value = this.props.field.value ? this.props.field.value : {};
         const horizontalAlignClass = classnames({
             [Styles.popupCenter]: horizontalAlign === 'center',
-            [Styles.popupRight]: horizontalAlign === 'right',
+            [Styles.popupRight]: horizontalAlign === 'right'
         });
-        return (_jsxs("div", { className: classnames(Styles.dateRangePicker, className), ref: this.handleRef, onClick: this.handleClickDateRangePicker, children: [_jsx(DateRangePickerKendo, { className: Styles.dateRangePickerKendo, calendarSettings: {
+        var _value_from, _value_to;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: classnames(Styles.dateRangePicker, className),
+            ref: this.handleRef,
+            onClick: this.handleClickDateRangePicker,
+            children: [
+                /*#__PURE__*/ _jsx(DateRangePickerKendo, {
+                    className: Styles.dateRangePickerKendo,
+                    calendarSettings: {
                         min: minDate !== null && minDate !== void 0 ? minDate : calendarMinDate,
                         max: maxDate !== null && maxDate !== void 0 ? maxDate : calendarMaxDate,
                         topView,
@@ -182,15 +63,90 @@ let DateRangePicker = class DateRangePicker extends Component {
                         disabled,
                         mode: 'range',
                         headerTitle: headerTitleComponent,
-                        cell: cellComponent,
-                    }, popupSettings: {
+                        cell: cellComponent
+                    },
+                    popupSettings: {
                         appendTo: this.wrapElem,
-                        className: horizontalAlignClass,
-                    }, startDateInputSettings: {
-                        tabIndex: -1,
-                    }, endDateInputSettings: {
-                        tabIndex: -1,
-                    }, show: this.showDatePicker, value: { start: (_a = value.from) !== null && _a !== void 0 ? _a : null, end: (_b = value.to) !== null && _b !== void 0 ? _b : null }, onChange: this.handleChange, min: minDate, max: maxDate, calendar: calendarComponent }), _jsxs(Stack, { alignItems: "center", className: "flex-grow-1", children: [_jsx(Stack.Item, { fill: true, children: _jsx(InputDateMask, { shortLabel: _jsx(Icon, { name: "today", className: classnames(Styles.icon, `${qaTestingLocator}-icon-from`), onClick: this.handleClickIcon }), placeholder: placeHolder, value: value.from, onChange: this.handleFromChange, onBlur: this.handleFromChange, error: hasError, disabled: disabled, "qa-testing": `${qaTestingLocator}-from`, dateFormat: inputFormat, minDate: minDate, maxDate: this.maxFromDate, small: small, maskChar: maskChar }) }), _jsx(Icon, { name: "arrow_forward", className: Styles.endLabel }), _jsx(Stack.Item, { fill: true, children: _jsx(InputDateMask, { shortLabel: _jsx(Icon, { name: "today", className: classnames(Styles.icon, `${qaTestingLocator}-icon-to`), onClick: this.handleClickIcon }), placeholder: placeHolder, value: value.to, onChange: this.handleToChange, onBlur: this.handleToChange, error: hasError, disabled: disabled, "qa-testing": `${qaTestingLocator}-to`, dateFormat: inputFormat, minDate: this.minToDate, maxDate: maxDate, small: small, maskChar: maskChar }) })] }), _jsx("input", { hidden: true, "qa-testing": qaTestingLocator, onChange: this.handleHiddenInputChange })] }));
+                        className: horizontalAlignClass
+                    },
+                    startDateInputSettings: {
+                        tabIndex: -1
+                    },
+                    endDateInputSettings: {
+                        tabIndex: -1
+                    },
+                    show: this.showDatePicker,
+                    value: {
+                        start: (_value_from = value.from) !== null && _value_from !== void 0 ? _value_from : null,
+                        end: (_value_to = value.to) !== null && _value_to !== void 0 ? _value_to : null
+                    },
+                    onChange: this.handleChange,
+                    min: minDate,
+                    max: maxDate,
+                    calendar: calendarComponent
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    alignItems: "center",
+                    className: "flex-grow-1",
+                    children: [
+                        /*#__PURE__*/ _jsx(Stack.Item, {
+                            fill: true,
+                            children: /*#__PURE__*/ _jsx(InputDateMask, {
+                                shortLabel: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "today",
+                                    className: classnames(Styles.icon, `${qaTestingLocator}-icon-from`),
+                                    onClick: this.handleClickIcon
+                                }),
+                                placeholder: placeHolder,
+                                value: value.from,
+                                onChange: this.handleFromChange,
+                                onBlur: this.handleFromChange,
+                                error: hasError,
+                                disabled: disabled,
+                                "qa-testing": `${qaTestingLocator}-from`,
+                                dateFormat: inputFormat,
+                                minDate: minDate,
+                                maxDate: this.maxFromDate,
+                                small: small,
+                                maskChar: maskChar
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "arrow_forward",
+                            className: Styles.endLabel
+                        }),
+                        /*#__PURE__*/ _jsx(Stack.Item, {
+                            fill: true,
+                            children: /*#__PURE__*/ _jsx(InputDateMask, {
+                                shortLabel: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "today",
+                                    className: classnames(Styles.icon, `${qaTestingLocator}-icon-to`),
+                                    onClick: this.handleClickIcon
+                                }),
+                                placeholder: placeHolder,
+                                value: value.to,
+                                onChange: this.handleToChange,
+                                onBlur: this.handleToChange,
+                                error: hasError,
+                                disabled: disabled,
+                                "qa-testing": `${qaTestingLocator}-to`,
+                                dateFormat: inputFormat,
+                                minDate: this.minToDate,
+                                maxDate: maxDate,
+                                small: small,
+                                maskChar: maskChar
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("input", {
+                    hidden: true,
+                    // eslint-disable-next-line react/no-unknown-property
+                    "qa-testing": qaTestingLocator,
+                    onChange: this.handleHiddenInputChange
+                })
+            ]
+        });
     }
     formatDate(date, inputFormat = 'L') {
         return date ? moment(date).format(inputFormat) : '';
@@ -217,28 +173,103 @@ let DateRangePicker = class DateRangePicker extends Component {
         }
         return minDate !== null && minDate !== void 0 ? minDate : from;
     }
-};
-__decorate([
+    constructor(props){
+        super(props), // `HTMLDivElement` leads to issues with Node/SSR
+        _define_property(this, "wrapElem", void 0), _define_property(this, "isFocused", false), _define_property(this, "showDatePicker", false), _define_property(this, "isIconClicked", false), _define_property(this, "isDateRangePickerClicked", false), _define_property(this, "handleRef", (wrapElem)=>{
+            this.wrapElem = wrapElem;
+        }), _define_property(this, "handleClickGlobal", (evt)=>{
+            if (!(evt.target instanceof Node)) {
+                return;
+            }
+            const isPrevFocused = this.isFocused;
+            this.isFocused = this.isDateRangePickerClicked;
+            if (!this.isFocused && isPrevFocused) {
+                // click outside
+                this.props.field.enableAutoValidationAndValidate();
+                this.toggleShow(false);
+            } else if (this.isFocused && !isPrevFocused && !this.isIconClicked) {
+                // click inside but outside icons
+                this.props.field.disableAutoValidation();
+            }
+            this.isIconClicked = false;
+            this.isDateRangePickerClicked = false;
+        }), _define_property(this, "handleClickDateRangePicker", ()=>{
+            this.isDateRangePickerClicked = true;
+        }), _define_property(this, "handleClickIcon", ()=>{
+            this.isIconClicked = true;
+            if (this.showDatePicker) {
+                this.props.field.enableAutoValidationAndValidate();
+            } else {
+                this.props.field.disableAutoValidation();
+            }
+            this.toggleShow();
+        }), _define_property(this, "handleChange", (event)=>{
+            const value = event.target.value;
+            if (value.start && value.end && value.start > value.end) {
+                [value.start, value.end] = [
+                    value.end,
+                    value.start
+                ];
+            }
+            var _value_start, _value_end;
+            this.props.field.onChange({
+                from: (_value_start = value.start) !== null && _value_start !== void 0 ? _value_start : undefined,
+                to: (_value_end = value.end) !== null && _value_end !== void 0 ? _value_end : undefined
+            });
+        }), _define_property(this, "handleFromChange", (from)=>{
+            const to = this.props.field.value ? this.props.field.value.to : undefined;
+            if (from || to) {
+                this.props.field.onChange({
+                    from,
+                    to
+                });
+            } else {
+                this.props.field.onChange(undefined);
+            }
+        }), _define_property(this, "handleToChange", (to)=>{
+            const from = this.props.field.value ? this.props.field.value.from : undefined;
+            if (from || to) {
+                this.props.field.onChange({
+                    from,
+                    to
+                });
+            } else {
+                this.props.field.onChange(undefined);
+            }
+        }), _define_property(this, "handleHiddenInputChange", (ev)=>{
+            const values = ev.currentTarget.value.split('-').map((v)=>new Date(v));
+            this.props.field.onChange({
+                from: values[0] || undefined,
+                to: values[1] || undefined
+            });
+        });
+        makeObservable(this);
+    }
+}
+_ts_decorate([
     observable,
-    __metadata("design:type", Object)
+    _ts_metadata("design:type", Object)
 ], DateRangePicker.prototype, "wrapElem", void 0);
-__decorate([
-    observable,
-    __metadata("design:type", Object)
+_ts_decorate([
+    observable
 ], DateRangePicker.prototype, "showDatePicker", void 0);
-__decorate([
-    action,
-    __metadata("design:type", Object)
+_ts_decorate([
+    action
 ], DateRangePicker.prototype, "handleRef", void 0);
-__decorate([
+_ts_decorate([
     action,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Boolean]),
-    __metadata("design:returntype", void 0)
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", [
+        Boolean
+    ]),
+    _ts_metadata("design:returntype", void 0)
 ], DateRangePicker.prototype, "toggleShow", null);
-DateRangePicker = __decorate([
+DateRangePicker = _ts_decorate([
     observer,
-    __metadata("design:paramtypes", [Object])
+    _ts_metadata("design:type", Function),
+    _ts_metadata("design:paramtypes", [
+        typeof DateRangePickerProps === "undefined" ? Object : DateRangePickerProps
+    ])
 ], DateRangePicker);
-export { DateRangePicker };
+
 //# sourceMappingURL=date-range-picker.js.map