@quillsql/admin 1.7.1 → 1.7.2

package/dist/cjs/components/DateRangePicker/SingleDatePicker.js

@@ -1,287 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SingleDatePicker = SingleDatePicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const date_fns_1 = require("date-fns");
-const react_dom_1 = require("react-dom");
-const useOnClickOutside_1 = __importStar(require("../../hooks/useOnClickOutside"));
-const useAdmin_1 = require("../../hooks/useAdmin");
-function SingleDatePicker({ selectedDate, onChangeDate, disabled, style, ignoreYear = true, }) {
-    const { state } = (0, useAdmin_1.useAdmin)();
-    const { theme } = state;
-    const [currentMonth, setCurrentMonth] = (0, react_1.useState)(selectedDate || new Date());
-    const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const [popoverPosition, setPopoverPosition] = (0, react_1.useState)(null);
-    const [z, setZ] = (0, react_1.useState)(10);
-    const modalRef = (0, react_1.useRef)(null);
-    const buttonRef = (0, react_1.useRef)(null);
-    // const scrollableParentRef = useRef<HTMLElement | Window>(document.body);
-    // Handle clicks outside the modal
-    (0, useOnClickOutside_1.default)(modalRef, (event) => {
-        if (!buttonRef.current?.contains(event.target))
-            setShowModal(false);
-    }, showModal);
-    // Update position based on button
-    const updatePosition = () => {
-        if (buttonRef.current) {
-            requestAnimationFrame(() => {
-                const rect = buttonRef.current?.getBoundingClientRect();
-                if (rect) {
-                    setPopoverPosition({
-                        top: rect.bottom + window.scrollY,
-                        left: rect.left + window.scrollX,
-                    });
-                }
-            });
-        }
-    };
-    // Setup position tracking when modal opens
-    (0, react_1.useEffect)(() => {
-        let resizeObserver;
-        let mutationObserver;
-        const handlePositionUpdate = () => {
-            if (showModal) {
-                updatePosition();
-            }
-        };
-        if (showModal && buttonRef.current) {
-            updatePosition();
-            setZ((0, useOnClickOutside_1.getEffectiveZIndex)(buttonRef.current));
-            // Observe size changes of button
-            resizeObserver = new ResizeObserver(handlePositionUpdate);
-            resizeObserver.observe(buttonRef.current);
-            // Observe DOM mutations that might affect position
-            mutationObserver = new MutationObserver(handlePositionUpdate);
-            mutationObserver.observe(document.body, {
-                attributes: true,
-                childList: true,
-                subtree: true,
-            });
-            // Track scrolling of the entire document
-            window.addEventListener('scroll', handlePositionUpdate, true);
-            // Handle window resize
-            window.addEventListener('resize', handlePositionUpdate, {
-                passive: true,
-            });
-            return () => {
-                resizeObserver.disconnect();
-                mutationObserver.disconnect();
-                window.removeEventListener('scroll', handlePositionUpdate, true);
-                window.removeEventListener('resize', handlePositionUpdate);
-            };
-        }
-    }, [showModal]);
-    const handleDateSelect = (date) => {
-        // If ignoreYear is false and the user clicks on the already selected date, deselect it
-        if (!ignoreYear &&
-            selectedDate &&
-            date.toDateString() === selectedDate.toDateString()) {
-            onChangeDate(undefined);
-        }
-        else {
-            onChangeDate(date);
-        }
-        setShowModal(false);
-    };
-    const daysInMonth = (0, date_fns_1.eachDayOfInterval)({
-        start: (0, date_fns_1.startOfMonth)(currentMonth),
-        end: (0, date_fns_1.endOfMonth)(currentMonth),
-    });
-    const incrementMonth = () => {
-        const nextMonth = (0, date_fns_1.addMonths)(currentMonth, 1);
-        if (ignoreYear &&
-            nextMonth.getFullYear() === currentMonth.getFullYear() &&
-            nextMonth.getMonth() === 0) {
-            return;
-        }
-        setCurrentMonth(nextMonth);
-    };
-    const decrementMonth = () => {
-        const prevMonth = (0, date_fns_1.subMonths)(currentMonth, 1);
-        if (ignoreYear &&
-            prevMonth.getFullYear() === currentMonth.getFullYear() &&
-            prevMonth.getMonth() === 11) {
-            return;
-        }
-        setCurrentMonth(prevMonth);
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            position: 'relative',
-            width: 200,
-            minWidth: 200,
-            borderRadius: '6px',
-            ...style,
-        }, children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, style: {
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    borderColor: theme?.borderColor,
-                    fontFamily: theme?.fontFamily,
-                    padding: '8px 12px',
-                    fontSize: 14,
-                    margin: 0,
-                    boxSizing: 'border-box',
-                    borderWidth: 1,
-                    borderStyle: 'solid',
-                    borderRadius: 6,
-                    paddingTop: 11,
-                    paddingBottom: 11,
-                    height: 40,
-                    minHeight: 40,
-                    maxHeight: 40,
-                    gap: 10,
-                    opacity: disabled ? 0.5 : 1,
-                }, disabled: disabled, onClick: () => setShowModal((prevShowModal) => !prevShowModal), className: "quill-date-range-picker-button", children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
-        .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }` }), (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), ignoreYear
-                        ? selectedDate
-                            ? `Start on ${(0, date_fns_1.format)(selectedDate, 'MMM dd')}`
-                            : 'Select Date'
-                        : selectedDate
-                            ? `back to ${(0, date_fns_1.format)(selectedDate, 'MMM dd, yyyy')}`
-                            : 'Select Cutoff Date'] }), showModal &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: modalRef, "data-portal-ignore": "true", style: {
-                        position: 'absolute',
-                        top: `${popoverPosition?.top ?? 0}px`,
-                        left: `${popoverPosition?.left ?? 0}px`,
-                        visibility: popoverPosition ? 'visible' : 'hidden',
-                        zIndex: z,
-                        borderWidth: theme.borderWidth,
-                        borderColor: theme.borderColor,
-                        borderStyle: 'solid',
-                        borderRadius: 6,
-                        backgroundColor: '#fff',
-                        padding: 12,
-                        boxShadow: '0px 2px 6px #e7e7e7',
-                        // Allow the popover to size to its content
-                        width: 'auto',
-                        minWidth: 280,
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                                position: 'relative',
-                            }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: decrementMonth, style: {
-                                        height: 32,
-                                        width: 32,
-                                        borderWidth: theme.borderWidth,
-                                        borderColor: theme.borderColor,
-                                        fontFamily: theme.fontFamily,
-                                        borderStyle: 'solid',
-                                        borderRadius: 6,
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        visibility: ignoreYear && currentMonth.getMonth() === 0
-                                            ? 'hidden'
-                                            : 'visible',
-                                    }, className: "quill-calendar-button", children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                  .quill-calendar-button { 
-                    background-color: ${theme.backgroundColor}; 
-                  } 
-                  .quill-calendar-button:hover { 
-                    background-color: ${theme.hoverBackgroundColor}; 
-                  }
-                  .quill-calendar-button svg { 
-                    fill: ${theme.chartLabelColor}; 
-                  }
-                  .quill-calendar-button:hover svg { 
-                    fill: ${theme.hoverTextColor}; 
-                  }
-                ` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontFamily: theme.fontFamily,
-                                        fontSize: 14,
-                                        color: theme.primaryTextColor,
-                                        fontWeight: 600,
-                                        position: 'absolute',
-                                        left: '50%',
-                                        transform: 'translateX(-50%)',
-                                        userSelect: 'none',
-                                    }, children: (0, date_fns_1.format)(currentMonth, ignoreYear ? 'MMMM' : 'MMMM yyyy') }), (0, jsx_runtime_1.jsxs)("button", { onClick: incrementMonth, style: {
-                                        height: 32,
-                                        width: 32,
-                                        borderWidth: theme.borderWidth,
-                                        borderColor: theme.borderColor,
-                                        borderStyle: 'solid',
-                                        borderRadius: 6,
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        visibility: ignoreYear && currentMonth.getMonth() === 11
-                                            ? 'hidden'
-                                            : 'visible',
-                                    }, className: "quill-calendar-button", children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                  .quill-calendar-button { 
-                    background-color: ${theme.backgroundColor}; 
-                  } 
-                  .quill-calendar-button:hover { 
-                    background-color: ${theme.hoverBackgroundColor}; 
-                  }
-                  .quill-calendar-button svg { 
-                    fill: ${theme.chartLabelColor}; 
-                  }
-                  .quill-calendar-button:hover svg { 
-                    fill: ${theme.hoverTextColor}; 
-                  }
-                ` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: (0, jsx_runtime_1.jsx)("path", { d: "M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'grid',
-                                gridTemplateColumns: 'repeat(7, 1fr)',
-                                marginTop: 8,
-                            }, children: daysInMonth.map((date) => ((0, jsx_runtime_1.jsx)("button", { style: {
-                                    height: 36,
-                                    width: 36,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    fontFamily: theme.fontFamily,
-                                    fontSize: 14,
-                                    border: 'none',
-                                    color: selectedDate &&
-                                        date.toDateString() === selectedDate.toDateString()
-                                        ? 'white'
-                                        : theme.secondaryTextColor,
-                                    backgroundColor: selectedDate &&
-                                        date.toDateString() === selectedDate.toDateString()
-                                        ? theme.primaryTextColor
-                                        : theme.backgroundColor,
-                                    borderRadius: selectedDate &&
-                                        date.toDateString() === selectedDate.toDateString()
-                                        ? 6
-                                        : 0,
-                                }, onClick: () => handleDateSelect(date), children: (0, date_fns_1.format)(date, 'd') }, date.toDateString()))) })] }), document.body)] }));
-}

package/dist/cjs/components/DateRangePicker/YearlessDateRangePicker.d.ts

@@ -1,18 +0,0 @@
-export interface DateRangePickerComponentProps {
-    label?: string;
-    dateRange: {
-        startDate?: Date;
-        endDate?: Date;
-    };
-    onChangeDateRange: ({ startDate, endDate, }: {
-        startDate?: Date;
-        endDate?: Date;
-    }) => void;
-    disabled?: boolean;
-    style?: React.CSSProperties;
-}
-/**
- * The fallback date range picked used in <Dashboard/>.
- */
-export declare function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, label, disabled, style, }: DateRangePickerComponentProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=YearlessDateRangePicker.d.ts.map

package/dist/cjs/components/DateRangePicker/YearlessDateRangePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"YearlessDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/YearlessDateRangePicker.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,6BAA6B;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAE,SAAS,CAAC,EAAE,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,IAAI,CAAA;KAAE,CAAC;IAChD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,CAAC,EAAE,IAAI,CAAC;QACjB,OAAO,CAAC,EAAE,IAAI,CAAC;KAChB,KAAK,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,iBAAiB,EACjB,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,6BAA6B,2CAiI/B"}

package/dist/cjs/components/DateRangePicker/YearlessDateRangePicker.js

@@ -1,312 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QuillYearlessDateRangePicker = QuillYearlessDateRangePicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const date_fns_1 = require("date-fns");
-const useAdmin_1 = require("../../hooks/useAdmin");
-const useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
-/**
- * The fallback date range picked used in <Dashboard/>.
- */
-function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, label, disabled, style, }) {
-    const { state: { theme }, } = (0, useAdmin_1.useAdmin)();
-    const [anchorStartDate, setAnchorStartDate] = (0, react_1.useState)(getAnchorStartDate(dateRange.startDate, dateRange.endDate));
-    const [anchorEndDate, setAnchorEndDate] = (0, react_1.useState)(getAnchorEndDate(dateRange.startDate, dateRange.endDate));
-    const [localStartDate, setLocalStartDate] = (0, react_1.useState)(dateRange.startDate);
-    const [localEndDate, setLocalEndDate] = (0, react_1.useState)(dateRange.endDate);
-    const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const modalRef = (0, react_1.useRef)(null);
-    (0, useOnClickOutside_1.default)(modalRef, () => {
-        setShowModal(false);
-    }, showModal);
-    (0, react_1.useEffect)(() => {
-        setLocalEndDate(dateRange.endDate);
-        setLocalStartDate(dateRange.startDate);
-    }, [dateRange.startDate, dateRange.endDate]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 12,
-            alignItems: 'flex-end',
-            flexWrap: 'wrap',
-            ...style,
-        }, children: (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: 200 }, ref: modalRef, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
-                        fontSize: 14,
-                        color: theme?.secondaryTextColor,
-                        fontFamily: theme?.fontFamily,
-                        paddingBottom: 5,
-                        fontWeight: 600,
-                    }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
-                        width: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        borderColor: theme?.borderColor,
-                        fontFamily: theme?.fontFamily,
-                        padding: '8px 12px',
-                        fontSize: 14,
-                        margin: 0,
-                        boxSizing: 'border-box',
-                        borderWidth: 1,
-                        borderStyle: 'solid',
-                        borderRadius: 6,
-                        paddingTop: 11,
-                        paddingBottom: 11,
-                        height: 40,
-                        minHeight: 40,
-                        maxHeight: 40,
-                        gap: 10,
-                        opacity: disabled ? 0.5 : 1,
-                    }, disabled: disabled, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
-          .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }` }), (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", height: "15.5px", width: "15.5px", style: { marginTop: -1.5 }, children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), (0, jsx_runtime_1.jsx)("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && (0, date_fns_1.format)(localStartDate, 'MMM dd'), localStartDate ? ' - ' : 'Pick a date', localEndDate && (0, date_fns_1.format)(localEndDate, 'MMM dd')] }), showModal && ((0, jsx_runtime_1.jsx)(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: (date) => {
-                        setLocalStartDate(date);
-                    }, setLocalEndDate: (date) => {
-                        setLocalEndDate(date);
-                    }, localEndDate: localEndDate, localStartDate: localStartDate, updateDateFilter: onChangeDateRange, setShowModal: setShowModal }))] }) }));
-}
-function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate, setAnchorEndDate, localStartDate, localEndDate, setLocalStartDate, setLocalEndDate, updateDateFilter, }) {
-    const firstMonthDisplayedDates = (0, date_fns_1.eachDayOfInterval)({
-        start: (0, date_fns_1.startOfMonth)(anchorStartDate),
-        end: (0, date_fns_1.endOfMonth)(anchorStartDate),
-    });
-    const secondMonthDisplayedDates = (0, date_fns_1.eachDayOfInterval)({
-        start: (0, date_fns_1.startOfMonth)(anchorEndDate),
-        end: (0, date_fns_1.endOfMonth)(anchorEndDate),
-    });
-    const incrementAnchorDates = () => {
-        setAnchorStartDate((0, date_fns_1.startOfMonth)((0, date_fns_1.addMonths)(anchorStartDate, 1)));
-        setAnchorEndDate((0, date_fns_1.endOfMonth)((0, date_fns_1.addMonths)(anchorEndDate, 1)));
-    };
-    const decrementAnchorDates = () => {
-        setAnchorStartDate((0, date_fns_1.startOfMonth)((0, date_fns_1.subMonths)(anchorStartDate, 1)));
-        setAnchorEndDate((0, date_fns_1.endOfMonth)((0, date_fns_1.subMonths)(anchorEndDate, 1)));
-    };
-    const [firstClick, setFirstClick] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', zIndex: 100, marginTop: 10, right: 0 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                border: `1px solid ${theme.borderColor}`,
-                borderRadius: 6,
-                boxShadow: '0px 2px 6px #e7e7e7',
-                backgroundColor: theme.backgroundColor,
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        padding: 12,
-                        // border: "1px solid #e7e7e7",
-                        // borderRadius: 6,
-                        // boxShadow: "0px 2px 6px #e7e7e7",
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                position: 'relative',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                height: 40,
-                                marginBottom: 10,
-                            }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: decrementAnchorDates, style: {
-                                        position: 'absolute',
-                                        left: 0,
-                                        height: 32,
-                                        width: 32,
-                                        borderWidth: theme.borderWidth,
-                                        borderColor: theme.borderColor,
-                                        fontFamily: theme.fontFamily,
-                                        borderStyle: 'solid',
-                                        borderRadius: 6,
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        visibility: anchorStartDate.getMonth() === 0 ? 'hidden' : 'visible',
-                                    }, className: "quill-calendar-button", children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                .quill-calendar-button { 
-                  background-color: ${theme.backgroundColor}; 
-                } 
-                .quill-calendar-button:hover { 
-                  background-color: ${theme.hoverBackgroundColor}; 
-                }
-                .quill-calendar-button svg { 
-                  fill: ${theme.chartLabelColor}; 
-                }
-                .quill-calendar-button:hover svg { 
-                  fill: ${theme.hoverTextColor}; 
-                }
-              ` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontFamily: theme.fontFamily,
-                                        fontSize: 14,
-                                        color: theme.primaryTextColor,
-                                        fontWeight: 600,
-                                    }, children: (0, date_fns_1.format)(anchorStartDate, 'MMMM') })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'grid',
-                                gridTemplateColumns: 'repeat(7, 1fr)',
-                                rowGap: 8,
-                            }, children: firstMonthDisplayedDates.map((date) => ((0, jsx_runtime_1.jsx)(DayPicker, { theme: theme, date: date, localStartDate: localStartDate, localEndDate: localEndDate, setLocalStartDate: (date) => {
-                                    setLocalStartDate(date);
-                                    setFirstClick(false);
-                                }, setLocalEndDate: (date) => {
-                                    setLocalEndDate(date);
-                                    setFirstClick(false);
-                                }, updateDateFilter: updateDateFilter, firstClick: firstClick }, 'first-' + date.toISOString()))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        padding: 12,
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                position: 'relative',
-                                justifyContent: 'center',
-                                alignItems: 'center',
-                                height: 40,
-                                marginBottom: 10,
-                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                        fontFamily: theme.fontFamily,
-                                        fontSize: 14,
-                                        color: theme.primaryTextColor,
-                                        fontWeight: 600,
-                                    }, children: (0, date_fns_1.format)(anchorEndDate, 'MMMM') }), (0, jsx_runtime_1.jsxs)("button", { onClick: incrementAnchorDates, style: {
-                                        position: 'absolute',
-                                        right: 0,
-                                        height: 32,
-                                        width: 32,
-                                        borderWidth: theme.borderWidth,
-                                        borderColor: theme.borderColor,
-                                        borderStyle: 'solid',
-                                        borderRadius: 6,
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        visibility: anchorStartDate.getMonth() === 10 ? 'hidden' : 'visible',
-                                    }, className: "quill-calendar-button", children: [(0, jsx_runtime_1.jsx)("style", { children: `
-                .quill-calendar-button { 
-                  background-color: ${theme.backgroundColor}; 
-                } 
-                .quill-calendar-button:hover { 
-                  background-color: ${theme.hoverBackgroundColor}; 
-                }
-                .quill-calendar-button svg { 
-                  fill: ${theme.chartLabelColor}; 
-                }
-                .quill-calendar-button:hover svg { 
-                  fill: ${theme.hoverTextColor}; 
-                }
-              ` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: (0, jsx_runtime_1.jsx)("path", { d: "M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'grid',
-                                gridTemplateColumns: 'repeat(7, 1fr)',
-                                rowGap: 8,
-                            }, children: secondMonthDisplayedDates.map((date) => ((0, jsx_runtime_1.jsx)(DayPicker, { theme: theme, date: date, localStartDate: localStartDate, localEndDate: localEndDate, setLocalStartDate: setLocalStartDate, setLocalEndDate: setLocalEndDate, updateDateFilter: updateDateFilter, firstClick: firstClick }, 'second-' + date.toISOString()))) })] })] }) }));
-}
-function DayPicker({ date, localStartDate, setLocalStartDate, localEndDate, setLocalEndDate, updateDateFilter, theme, firstClick, }) {
-    // USE ZERO FOR UNDEFINED DATES
-    const isStartDate = (0, date_fns_1.differenceInDays)((0, date_fns_1.startOfDay)(date), (0, date_fns_1.startOfDay)(localStartDate || 0)) === 0;
-    const isEndDate = (0, date_fns_1.differenceInDays)((0, date_fns_1.startOfDay)(date), (0, date_fns_1.startOfDay)(localEndDate || 0)) === 0;
-    const isBetweenStartAndEnd = (0, date_fns_1.isBefore)(date, localEndDate || 0) && (0, date_fns_1.isAfter)(date, localStartDate || 0);
-    const isBeginningOfWeek = date.getDate() % 7 === 1;
-    // last day of the week OR last day of the month
-    const isEndOfWeek = date.getDate() % 7 === 0 || date.getDate() === (0, date_fns_1.endOfMonth)(date).getDate();
-    return ((0, jsx_runtime_1.jsx)("button", { style: {
-            height: 36,
-            width: 36,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontFamily: theme.fontFamily,
-            fontSize: 14,
-            border: 'none',
-            color: isStartDate || isEndDate ? 'white' : theme.secondaryTextColor,
-            borderTopLeftRadius: isStartDate || isEndDate || isBeginningOfWeek ? 6 : 0,
-            borderBottomLeftRadius: isStartDate || isEndDate || isBeginningOfWeek ? 6 : 0,
-            borderTopRightRadius: isStartDate || isEndDate || isEndOfWeek ? 6 : 0,
-            borderBottomRightRadius: isStartDate || isEndDate || isEndOfWeek ? 6 : 0,
-            backgroundColor: isStartDate || isEndDate
-                ? theme.primaryTextColor
-                : isBetweenStartAndEnd
-                    ? theme.hoverBackgroundColor
-                    : theme.backgroundColor,
-        }, onClick: () => {
-            if (!localStartDate) {
-                setLocalStartDate(date);
-                updateDateFilter({
-                    startDate: date,
-                    endDate: localEndDate || date,
-                });
-            }
-            else if (localStartDate && !localEndDate) {
-                setLocalEndDate(date);
-                updateDateFilter({
-                    startDate: localStartDate,
-                    endDate: date,
-                });
-            }
-            else if (firstClick) {
-                setLocalStartDate(date);
-                setLocalEndDate(undefined);
-                updateDateFilter({
-                    startDate: date,
-                    endDate: undefined,
-                });
-            }
-            else if (localStartDate &&
-                localEndDate &&
-                (0, date_fns_1.isAfter)(date, localStartDate)) {
-                setLocalEndDate(date);
-                updateDateFilter({
-                    startDate: localStartDate,
-                    endDate: date,
-                });
-            }
-            else if (localStartDate &&
-                localEndDate &&
-                (0, date_fns_1.isBefore)(date, localStartDate)) {
-                setLocalStartDate(date);
-                updateDateFilter({
-                    startDate: date,
-                    endDate: localEndDate,
-                });
-            }
-            else if (localStartDate &&
-                localEndDate &&
-                (0, date_fns_1.differenceInDays)((0, date_fns_1.startOfDay)(date), (0, date_fns_1.startOfDay)(localStartDate)) === 0) {
-                setLocalStartDate(undefined);
-                setLocalEndDate(undefined);
-                updateDateFilter({
-                    startDate: undefined,
-                    endDate: undefined,
-                });
-            }
-        }, children: (0, date_fns_1.format)(date, 'd') }));
-}
-function getAnchorStartDate(startDate, endDate) {
-    if (!startDate && !endDate) {
-        return (0, date_fns_1.startOfMonth)((0, date_fns_1.subMonths)(new Date(), 1));
-    }
-    if (startDate && !endDate) {
-        return (0, date_fns_1.startOfMonth)(startDate);
-    }
-    if (!startDate && endDate) {
-        return (0, date_fns_1.startOfMonth)((0, date_fns_1.subMonths)(endDate, 1));
-    }
-    if (startDate && endDate) {
-        return (0, date_fns_1.startOfMonth)(startDate);
-    }
-    return new Date();
-}
-function getAnchorEndDate(startDate, endDate) {
-    if (!startDate && !endDate) {
-        return (0, date_fns_1.endOfMonth)(new Date());
-    }
-    if (startDate && !endDate) {
-        return (0, date_fns_1.endOfMonth)((0, date_fns_1.addMonths)(startDate, 1));
-    }
-    if (!startDate && endDate) {
-        return (0, date_fns_1.endOfMonth)(endDate);
-    }
-    if (startDate && endDate) {
-        return (0, date_fns_1.endOfMonth)((0, date_fns_1.addMonths)(startDate, 1));
-    }
-    return new Date();
-}