@quillsql/admin 1.6.2 → 1.6.4

package/dist/esm/components/CardSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/components/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAazE"}
+{"version":3,"file":"CardSection.d.ts","sourceRoot":"","sources":["../../../src/components/CardSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAgBzE"}

package/dist/esm/components/CardSection.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAdmin } from '../AdminProvider';
 export default function CardSection(props) {
+    const { state: { theme }, } = useAdmin();
     return (_jsx("div", { style: {
-            fontFamily: 'Inter; Helvetica',
-            color: '#364153',
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor,
             fontSize: 16,
             fontWeight: '600',
         }, children: props.children }));

package/dist/esm/components/DashboardSelectPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardSelectPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,KAAK,EACL,wBAAwB,EACxB,mBAAmB,EACnB,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CA8J7B"}
+{"version":3,"file":"DashboardSelectPopover.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardSelectPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,UAAU,2BAA2B;IACnC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,wBAAwB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,KAAK,EACL,wBAAwB,EACxB,mBAAmB,EACnB,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CAyK7B"}

package/dist/esm/components/DashboardSelectPopover.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { ListboxRow, ListboxTextInput, Popover } from './OrgSelect';
+import { ListboxRow, Popover } from './OrgSelect';
 import MiniButtonPrimitive from '../primitives/MiniButtonPrimitive';
 import { LoadingSpinner } from './UiComponents';
+import { ListboxTextInput } from './QuillMultiSelectWithCombo';
 export default function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, setSelectedEditDashboard, onClickNewDashboard, parentRef, isLoading, }) {
     const [isOpen, setIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
@@ -19,12 +20,17 @@ export default function DashboardSelectPopover({ dashboards, setDashboard, dashb
                     marginTop: '0px',
                     marginBottom: '4px',
                     fontWeight: '600',
+                    fontFamily: theme.fontFamily,
                     color: theme.secondaryTextColor,
                 }, children: "Dashboard" }), _jsx(Popover, { parentRef: parentRef, label: dashboard ?? 'Select dashboard', isOpen: isOpen, onClose: () => setIsOpen(false), style: {
                     boxSizing: 'border-box',
                     fontSize: 14,
                     maxHeight: '50vh',
-                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsxs("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => (_jsx(ListboxRow, { setSelected: dashboard && dashboard !== item
+                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? (_jsxs(_Fragment, { children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, width: 180, onChange: setSearchQuery }), _jsx("div", { style: {
+                                height: 9,
+                                width: 230,
+                                borderTop: `1px solid ${theme?.borderColor ?? '#e7e7e7'}`,
+                            } }), _jsxs("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => (_jsx(ListboxRow, { setSelected: dashboard && dashboard !== item
                                         ? () => handleItemClick(item)
                                         : undefined, item: item, isSelected: dashboard === item, hoverActions: (item) => (_jsx(MiniButtonPrimitive, { label: "Manage", onClick: () => {
                                             setSelectedEditDashboard(item);
@@ -33,9 +39,11 @@ export default function DashboardSelectPopover({ dashboards, setDashboard, dashb
                                             marginRight: -8,
                                             marginTop: 'auto',
                                             marginBottom: 'auto',
+                                            fontFamily: theme.fontFamily,
+                                            color: theme.secondaryTextColor,
+                                            backgroundColor: theme.backgroundColor,
                                         } })) }, item))), _jsx("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: _jsxs("div", { onClick: onClickNewDashboard, style: {
                                             height: 42,
-                                            color: '#384151',
                                             width: 216,
                                             borderRadius: 6,
                                             textAlign: 'left',
@@ -49,15 +57,18 @@ export default function DashboardSelectPopover({ dashboards, setDashboard, dashb
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
+                                            fontFamily: theme.fontFamily,
                                         }, children: [_jsx("style", { children: `
                     .quill-list-select > div {
-                      background-color: white;
+                      background-color: ${theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
                     }
                     .quill-list-selected > div {
-                      background-color: rgba(56, 65, 81, 0.04);
-                    }
+                      background-color: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     .quill-list-select:hover > div {
-                      background-color: rgba(56, 65, 81, 0.04);
+                      background-color: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }` }), _jsxs("div", { style: {
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',

package/dist/esm/components/DatabaseSelector.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { QuillTheme } from '../Admin';
 interface DatabaseSelectorProps {
     label: string;
     imageUrl: string;
@@ -6,7 +7,8 @@ interface DatabaseSelectorProps {
     onDatabaseSelect: (database: string) => void;
     containerStyle?: CSSProperties;
     databaseType: string;
+    theme: QuillTheme;
 }
-export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType, theme, }: DatabaseSelectorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DatabaseSelector.d.ts.map

package/dist/esm/components/DatabaseSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,EACd,YAAiB,GAClB,EAAE,qBAAqB,2CA6CvB"}
+{"version":3,"file":"DatabaseSelector.d.ts","sourceRoot":"","sources":["../../../src/components/DatabaseSelector.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,cAAc,EACd,YAAiB,EACjB,KAAK,GACN,EAAE,qBAAqB,2CA8CvB"}

package/dist/esm/components/DatabaseSelector.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', }) {
+export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', theme, }) {
     return (_jsxs("div", { style: {
             ...containerStyle,
             height: 128,
@@ -24,7 +24,8 @@ export default function DatabaseSelector({ label, imageUrl, value, onDatabaseSel
                 } }), _jsx("h1", { style: {
                     fontSize: 14,
                     fontWeight: '500',
-                    color: '#212121',
+                    color: theme?.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
                     marginTop: 10,
                 }, children: label })] }));
 }

package/dist/esm/components/DateRangePicker/SingleDatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAiB,GAClB,EAAE,mBAAmB,2CA+VrB"}
+{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAiB,GAClB,EAAE,mBAAmB,2CAqXrB"}

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

@@ -115,10 +115,6 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                     alignItems: 'center',
                     borderColor: theme?.borderColor,
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
-                    backgroundColor: disabled
-                        ? theme?.hoverBackgroundColor
-                        : theme?.backgroundColor,
                     padding: '8px 12px',
                     fontSize: 14,
                     margin: 0,
@@ -132,7 +128,9 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                     minHeight: 40,
                     maxHeight: 40,
                     gap: 10,
-                }, disabled: disabled, onClick: () => setShowModal((prevShowModal) => !prevShowModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _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: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), ignoreYear
+                    opacity: disabled ? 0.5 : 1,
+                }, disabled: disabled, onClick: () => setShowModal((prevShowModal) => !prevShowModal), className: "quill-date-range-picker-button", children: [_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}; }` }), _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: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), ignoreYear
                         ? selectedDate
                             ? `Start on ${format(selectedDate, 'MMM dd')}`
                             : 'Select Date'
@@ -175,7 +173,20 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                                         visibility: ignoreYear && currentMonth.getMonth() === 0
                                             ? 'hidden'
                                             : 'visible',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_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}; 
+                  }
+                ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         fontSize: 14,
                                         color: theme.primaryTextColor,
@@ -198,7 +209,20 @@ export function SingleDatePicker({ selectedDate, onChangeDate, disabled, style,
                                         visibility: ignoreYear && currentMonth.getMonth() === 11
                                             ? 'hidden'
                                             : 'visible',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _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" }) })] })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_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}; 
+                  }
+                ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _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" }) })] })] }), _jsx("div", { style: {
                                 display: 'grid',
                                 gridTemplateColumns: 'repeat(7, 1fr)',
                                 marginTop: 8,

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

@@ -1 +1 @@
-{"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,2CAmI/B"}
+{"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/esm/components/DateRangePicker/YearlessDateRangePicker.js

@@ -40,10 +40,6 @@ export function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, lab
                         alignItems: 'center',
                         borderColor: theme?.borderColor,
                         fontFamily: theme?.fontFamily,
-                        color: theme?.primaryTextColor,
-                        backgroundColor: disabled
-                            ? theme?.hoverBackgroundColor
-                            : theme?.backgroundColor,
                         padding: '8px 12px',
                         fontSize: 14,
                         margin: 0,
@@ -57,7 +53,9 @@ export function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, lab
                         minHeight: 40,
                         maxHeight: 40,
                         gap: 10,
-                    }, disabled: disabled, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _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: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && format(localStartDate, 'MMM dd'), localStartDate ? ' - ' : 'Pick a date', localEndDate && format(localEndDate, 'MMM dd')] }), showModal && (_jsx(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: (date) => {
+                        opacity: disabled ? 0.5 : 1,
+                    }, disabled: disabled, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [_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}; }` }), _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: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && format(localStartDate, 'MMM dd'), localStartDate ? ' - ' : 'Pick a date', localEndDate && format(localEndDate, 'MMM dd')] }), showModal && (_jsx(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: (date) => {
                         setLocalStartDate(date);
                     }, setLocalEndDate: (date) => {
                         setLocalEndDate(date);
@@ -118,7 +116,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         alignItems: 'center',
                                         justifyContent: 'center',
                                         visibility: anchorStartDate.getMonth() === 0 ? 'hidden' : 'visible',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_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}; 
+                }
+              ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         fontSize: 14,
                                         color: theme.primaryTextColor,
@@ -164,7 +175,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         alignItems: 'center',
                                         justifyContent: 'center',
                                         visibility: anchorStartDate.getMonth() === 10 ? 'hidden' : 'visible',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _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" }) })] })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_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}; 
+                }
+              ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _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" }) })] })] }), _jsx("div", { style: {
                                 display: 'grid',
                                 gridTemplateColumns: 'repeat(7, 1fr)',
                                 rowGap: 8,

package/dist/esm/components/DropDownMenuWithLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenuWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/DropDownMenuWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,UAAU,0BAA0B;IAClC,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,GAAG,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,GACN,EAAE,0BAA0B,2CA+F5B"}
+{"version":3,"file":"DropDownMenuWithLabel.d.ts","sourceRoot":"","sources":["../../../src/components/DropDownMenuWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,UAAU,0BAA0B;IAClC,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,WAAW,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,GAAG,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,KAAK,GACN,EAAE,0BAA0B,2CAqG5B"}

package/dist/esm/components/DropDownMenuWithLabel.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { ListboxTextInput, Popover } from './OrgSelect';
+import { Popover } from './OrgSelect';
 import FormTooltip from './FormTooltip';
+import { ListboxTextInput } from './QuillMultiSelectWithCombo';
+import { useAdmin } from '../AdminProvider';
 export default function DropdownMenuWithLabel({ items, setSelected, selected, label, parentRef, tooltipText, style, }) {
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
+    const { state: { theme }, } = useAdmin();
     const filteredItems = useMemo(() => {
         return searchQuery === ''
             ? items.slice(0, 10)
@@ -50,7 +53,11 @@ export default function DropdownMenuWithLabel({ items, setSelected, selected, la
                     boxSizing: 'border-box',
                     fontSize: 14,
                     zIndex: 10,
-                }, setIsOpen: setIsOpen, children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: 'Search', value: searchQuery, onChange: (value) => setSearchQuery(value) }), _jsx("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), _jsx("div", { style: { gap: 2, maxHeight: '50vh' }, children: filteredItems.map((item, index) => (_jsx(ListboxRow, { setSelected: setSelected, setIsOpen: setIsOpen, item: item }, index))) }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
+                }, setIsOpen: setIsOpen, children: [_jsx(ListboxTextInput, { id: "quill-search-bar", placeholder: 'Search', value: searchQuery, onChange: (value) => setSearchQuery(value) }), _jsx("div", { style: {
+                            height: 9,
+                            width: 230,
+                            borderTop: `1px solid ${theme?.borderColor ?? '#e7e7e7'}`,
+                        } }), _jsx("div", { style: { gap: 2, maxHeight: '50vh' }, children: filteredItems.map((item, index) => (_jsx(ListboxRow, { setSelected: setSelected, setIsOpen: setIsOpen, item: item }, index))) }), _jsx("div", { style: { height: 8, width: 230 } })] })] }));
 }
 function ListboxRow({ item, setSelected, setIsOpen, }) {
     return (_jsxs("div", { onClick: setSelected

package/dist/esm/components/DynamicBanner.d.ts

@@ -1,8 +1,9 @@
+import { QuillTheme } from '../Admin';
 interface DynamicBannerProps {
     header: string;
     onExit?: () => void;
-    fontColor?: string;
+    theme: QuillTheme;
 }
-export default function DynamicBanner({ header, onExit, fontColor, }: DynamicBannerProps): JSX.Element;
+export default function DynamicBanner({ header, onExit, theme, }: DynamicBannerProps): JSX.Element;
 export {};
 //# sourceMappingURL=DynamicBanner.d.ts.map

package/dist/esm/components/DynamicBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicBanner.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicBanner.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAmClC"}
+{"version":3,"file":"DynamicBanner.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,MAAM,EACN,KAAK,GACN,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0ClC"}

package/dist/esm/components/DynamicBanner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import XMarkIcon from '../icons/XMarkIcon';
-export default function DynamicBanner({ header, onExit, fontColor, }) {
+export default function DynamicBanner({ header, onExit, theme, }) {
     return (_jsxs("div", { id: "quill-edit-banner", style: {
             width: '100vw',
             height: 70,
@@ -12,5 +12,10 @@ export default function DynamicBanner({ header, onExit, fontColor, }) {
             paddingLeft: 20,
             paddingRight: 20,
             borderBottom: '1px solid #e7e7e7',
-        }, children: [_jsx("h1", { style: { fontSize: 21, fontWeight: 600, color: '#212121' }, children: header }), onExit && (_jsx("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: _jsx(XMarkIcon, { style: { width: '20px', height: '20px' }, fill: fontColor, "aria-hidden": "true" }) }))] }));
+        }, children: [_jsx("h1", { style: {
+                    fontSize: 21,
+                    fontWeight: 600,
+                    color: theme?.primaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                }, children: header }), onExit && (_jsx("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: _jsx(XMarkIcon, { style: { width: '20px', height: '20px' }, fill: theme?.primaryTextColor, "aria-hidden": "true" }) }))] }));
 }

package/dist/esm/components/EmptyDashboardComponent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyDashboardComponent/index.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,uBAAuB,IAAI,GAAG,CAAC,OAAO,CAqF7D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/EmptyDashboardComponent/index.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,uBAAuB,IAAI,GAAG,CAAC,OAAO,CAsF7D"}

package/dist/esm/components/EmptyDashboardComponent/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAdmin } from '../../AdminProvider';
 import { MemoizedButton } from '../UiComponents';
 export default function EmptyDashboardComponent() {
-    const { dispatch } = useAdmin();
+    const { state, dispatch } = useAdmin();
     return (_jsx("div", { style: {
             width: '100%',
             display: 'flex',
@@ -26,7 +26,8 @@ export default function EmptyDashboardComponent() {
                         justifyContent: 'center',
                         width: 260,
                     }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_jsx("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), _jsx("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), _jsx("div", { style: {
-                                fontSize: 16,
+                                fontSize: state.theme.fontSize,
+                                fontFamily: state.theme.fontFamily,
                                 fontWeight: 500,
                                 color: '#565656',
                                 // border: '1px solid #e7e7e7',

package/dist/esm/components/EmptyVirtualTablesComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyVirtualTablesComponent.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyVirtualTablesComponent.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CA+Ed"}
+{"version":3,"file":"EmptyVirtualTablesComponent.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyVirtualTablesComponent.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,OAAO,GACR,EAAE;IACD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,GAAG,CAAC,OAAO,CAmFd"}

package/dist/esm/components/EmptyVirtualTablesComponent.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdmin } from '../AdminProvider';
 import { MemoizedButton } from './UiComponents';
 export default function EmptyVirtualTablesComponent({ onClick, }) {
+    const { state: { theme }, } = useAdmin();
     return (_jsx("div", { style: {
             width: '100%',
             display: 'flex',
@@ -24,7 +26,8 @@ export default function EmptyVirtualTablesComponent({ onClick, }) {
                         justifyContent: 'center',
                         width: 260,
                     }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [_jsx("path", { fillRule: "evenodd", d: "M2.25 13.5a8.25 8.25 0 0 1 8.25-8.25.75.75 0 0 1 .75.75v6.75H18a.75.75 0 0 1 .75.75 8.25 8.25 0 0 1-16.5 0Z", clipRule: "evenodd" }), _jsx("path", { fillRule: "evenodd", d: "M12.75 3a.75.75 0 0 1 .75-.75 8.25 8.25 0 0 1 8.25 8.25.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75V3Z", clipRule: "evenodd" })] }), _jsx("div", { style: {
-                                fontSize: 16,
+                                fontSize: theme?.fontSize,
+                                fontFamily: theme?.fontFamily,
                                 fontWeight: 500,
                                 color: '#565656',
                                 // border: '1px solid #e7e7e7',

package/dist/esm/components/FormTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/FormTooltip.tsx"],"names":[],"mappings":"AAIA,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,2CAwHA;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/FormTooltip.tsx"],"names":[],"mappings":"AAKA,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,2CA4HA;AAED,eAAe,WAAW,CAAC"}

package/dist/esm/components/FormTooltip.js

@@ -2,11 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import InformationCircleIcon from '../icons/InformationCircleIcon';
+import { useAdmin } from '../AdminProvider';
 function FormTooltip({ text, element, color, mirror, }) {
     const [isOpen, setIsOpen] = useState(false);
     const tooltipRef = useRef(null);
     const triggerRef = useRef(null);
     const [tooltipPosition, setTooltipPosition] = useState(undefined);
+    const { state: { theme }, } = useAdmin();
     const updatePosition = () => {
         if (triggerRef.current && tooltipRef.current) {
             const rect = triggerRef.current.getBoundingClientRect();
@@ -66,6 +68,8 @@ function FormTooltip({ text, element, color, mirror, }) {
                         backgroundColor: '#ffffff',
                         // left: mirror ? 'auto' : 0,
                         // right: mirror ? 0 : 'auto',
+                        fontFamily: theme?.fontFamily,
+                        color: theme?.primaryTextColor,
                         padding: 8,
                         borderRadius: 6,
                         fontSize: 14,
@@ -78,7 +82,6 @@ function FormTooltip({ text, element, color, mirror, }) {
                         paddingRight: 12,
                         borderStyle: 'solid',
                         borderColor: '#e7e7e7',
-                        color: '#212121',
                     }, children: text ?? element }), document.body)] }));
 }
 export default FormTooltip;

package/dist/esm/components/InputLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/components/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,KAAK,EAAE,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,GAChE,GAAG,CAAC,OAAO,CA0Bb"}
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../src/components/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,KAAK,EAAE,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,GAChE,GAAG,CAAC,OAAO,CA6Bb"}

package/dist/esm/components/InputLabel.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import FormTooltip from './FormTooltip';
+import { useAdmin } from '../AdminProvider';
 export default function InputLabel(props) {
+    const { state: { theme }, } = useAdmin();
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("div", { style: {
-                    fontFamily: 'Inter; Helvetica',
-                    color: '#6C727F',
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.secondaryTextColor,
                     fontSize: 14,
                     fontWeight: '600',
                     marginBottom: 2,

package/dist/esm/components/InternalDashboard/DateRangePicker/QuillDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/InternalDashboard/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAA+B,MAAM,OAAO,CAAC;AAmBxE,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE;QAAE,SAAS,CAAC,EAAE,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,IAAI,CAAA;KAAE,CAAC;IAChD,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,GACT,EAAE,6BAA6B,2CA0J/B"}
+{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/InternalDashboard/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAA+B,MAAM,OAAO,CAAC;AAmBxE,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE;QAAE,SAAS,CAAC,EAAE,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,IAAI,CAAA;KAAE,CAAC;IAChD,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,GACT,EAAE,6BAA6B,2CAyJ/B"}

package/dist/esm/components/InternalDashboard/DateRangePicker/QuillDateRangePicker.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { startOfMonth, endOfMonth, format, eachDayOfInterval, subMonths, startOfWeek, endOfWeek, differenceInDays, startOfDay, addMonths, isBefore, isAfter, } from 'date-fns';
 import { useAdmin } from '../../../AdminProvider';
-import useOnClickOutside from '../../../hooks/useOnClickOutside';
 import { QuillSelectComponentWithCombo } from '../../QuillSelectWithCombo';
+import { QuillPortal } from '../../UiComponents';
 /**
  * The fallback date range picked used in <Dashboard/>.
  */
@@ -16,9 +16,7 @@ export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptio
     const [localPreset, setLocalPreset] = useState(preset);
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
-    useOnClickOutside(modalRef, () => {
-        setShowModal(false);
-    }, showModal);
+    const buttonRef = useRef(null);
     useEffect(() => {
         setLocalEndDate(dateRange.endDate);
         setLocalStartDate(dateRange.startDate);
@@ -42,10 +40,6 @@ export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptio
                             alignItems: 'center',
                             borderColor: theme?.borderColor,
                             fontFamily: theme?.fontFamily,
-                            color: theme?.primaryTextColor,
-                            backgroundColor: disabled
-                                ? theme?.hoverBackgroundColor
-                                : theme?.backgroundColor,
                             padding: '8px 12px',
                             fontSize: 14,
                             margin: 0,
@@ -59,7 +53,9 @@ export function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptio
                             minHeight: 40,
                             maxHeight: 40,
                             gap: 10,
-                        }, disabled: disabled, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [_jsx("style", { children: ` .quill-date-range-picker-button { background: ${theme?.backgroundColor}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), _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: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && format(localStartDate, 'MMM dd, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && format(localEndDate, 'MMM dd, yyyy')] }), showModal && (_jsx(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: setLocalStartDate, setLocalEndDate: setLocalEndDate, localEndDate: localEndDate, localStartDate: localStartDate, updateDateFilter: onChangeDateRange, setLocalPreset: setLocalPreset, setShowModal: setShowModal }))] }), !hidePreset && (_jsx(QuillSelectComponentWithCombo, { options: client?.featureFlags?.['hideAllTime']
+                            opacity: disabled ? 0.5 : 1,
+                        }, disabled: disabled, ref: buttonRef, onClick: () => setShowModal((showModal) => !showModal), className: "quill-date-range-picker-button", children: [_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}; }` }), _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: [_jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }), _jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }), _jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }), _jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })] }), localStartDate && format(localStartDate, 'MMM dd, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && format(localEndDate, 'MMM dd, yyyy')] }), showModal && (_jsx(QuillPortal, { anchorRef: buttonRef, showModal: showModal, setShowModal: setShowModal, children: _jsx(CalendarRow, { theme: theme, anchorStartDate: anchorStartDate, anchorEndDate: anchorEndDate, setAnchorStartDate: setAnchorStartDate, setAnchorEndDate: setAnchorEndDate, setLocalStartDate: setLocalStartDate, setLocalEndDate: setLocalEndDate, localEndDate: localEndDate, localStartDate: localStartDate, updateDateFilter: onChangeDateRange, setLocalPreset: setLocalPreset, setShowModal: setShowModal }) }))] }), !hidePreset && (_jsx(QuillSelectComponentWithCombo, { options: client?.featureFlags?.['hideAllTime']
                     ? presetOptions
                         .filter((option) => option.value !== 'ALL_TIME')
                         .map((option) => ({
@@ -127,7 +123,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         justifyContent: 'center',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_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}; 
+                }
+              ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _jsx("path", { d: "M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z" }) })] }), _jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         fontSize: 14,
                                         color: theme.primaryTextColor,
@@ -169,7 +178,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         justifyContent: 'center',
-                                    }, className: "quill-calendar-button", children: [_jsx("style", { children: `.quill-calendar-button { background-color: ${theme.backgroundColor}; } .quill-calendar-button:hover { background-color: ${theme.hoverBackgroundColor}; }` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, height: "24px", width: "24px", children: _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" }) })] })] }), _jsx("div", { style: {
+                                    }, className: "quill-calendar-button", children: [_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}; 
+                }
+              ` }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "24px", width: "24px", children: _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" }) })] })] }), _jsx("div", { style: {
                                 display: 'grid',
                                 gridTemplateColumns: 'repeat(7, 1fr)',
                                 rowGap: 8,

package/dist/esm/components/InternalDashboard/InternalDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InternalDashboard.d.ts","sourceRoot":"","sources":["../../../../src/components/InternalDashboard/InternalDashboard.tsx"],"names":[],"mappings":"AA4BA,OAAO,EACL,aAAa,EAOd,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,cAAc,EACd,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AA+EzB,eAAO,MAAM,iBAAiB,iHAa3B;IACD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC3D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,4CAghEA,CAAC"}
+{"version":3,"file":"InternalDashboard.d.ts","sourceRoot":"","sources":["../../../../src/components/InternalDashboard/InternalDashboard.tsx"],"names":[],"mappings":"AA4BA,OAAO,EACL,aAAa,EAOd,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,cAAc,EACd,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AA+EzB,eAAO,MAAM,iBAAiB,iHAa3B;IACD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC3D,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,4CAmhEA,CAAC"}