@quillsql/admin 1.6.2 → 1.6.4

package/dist/cjs/components/DashboardSelectPopover.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const OrgSelect_1 = require("./OrgSelect");
 const MiniButtonPrimitive_1 = __importDefault(require("../primitives/MiniButtonPrimitive"));
 const UiComponents_1 = require("./UiComponents");
+const QuillMultiSelectWithCombo_1 = require("./QuillMultiSelectWithCombo");
 function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, setSelectedEditDashboard, onClickNewDashboard, parentRef, isLoading, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
@@ -25,12 +26,17 @@ function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, se
                     marginTop: '0px',
                     marginBottom: '4px',
                     fontWeight: '600',
+                    fontFamily: theme.fontFamily,
                     color: theme.secondaryTextColor,
                 }, children: "Dashboard" }), (0, jsx_runtime_1.jsx)(OrgSelect_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, onChange: setSearchQuery }), (0, jsx_runtime_1.jsx)("div", { style: { height: 9, width: 230, borderTop: '1px solid #e7e7e7' } }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => ((0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxRow, { setSelected: dashboard && dashboard !== item
+                }, setIsOpen: setIsOpen, onClick: () => { }, children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.ListboxTextInput, { id: "quill-search-bar", placeholder: "Search", value: searchQuery, width: 180, onChange: setSearchQuery }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                height: 9,
+                                width: 230,
+                                borderTop: `1px solid ${theme?.borderColor ?? '#e7e7e7'}`,
+                            } }), (0, jsx_runtime_1.jsxs)("div", { style: { paddingTop: 8, paddingBottom: 8 }, children: [filteredDashboards.map((item) => ((0, jsx_runtime_1.jsx)(OrgSelect_1.ListboxRow, { setSelected: dashboard && dashboard !== item
                                         ? () => handleItemClick(item)
                                         : undefined, item: item, isSelected: dashboard === item, hoverActions: (item) => ((0, jsx_runtime_1.jsx)(MiniButtonPrimitive_1.default, { label: "Manage", onClick: () => {
                                             setSelectedEditDashboard(item);
@@ -39,9 +45,11 @@ function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, se
                                             marginRight: -8,
                                             marginTop: 'auto',
                                             marginBottom: 'auto',
+                                            fontFamily: theme.fontFamily,
+                                            color: theme.secondaryTextColor,
+                                            backgroundColor: theme.backgroundColor,
                                         } })) }, item))), (0, jsx_runtime_1.jsx)("div", { className: 'quill-list-select', style: { paddingBottom: 6, cursor: 'pointer' }, children: (0, jsx_runtime_1.jsxs)("div", { onClick: onClickNewDashboard, style: {
                                             height: 42,
-                                            color: '#384151',
                                             width: 216,
                                             borderRadius: 6,
                                             textAlign: 'left',
@@ -55,15 +63,18 @@ function DashboardSelectPopover({ dashboards, setDashboard, dashboard, theme, se
                                             textOverflow: 'ellipsis',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
+                                            fontFamily: theme.fontFamily,
                                         }, children: [(0, jsx_runtime_1.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};
                     }` }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',

package/dist/cjs/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/cjs/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/cjs/components/DatabaseSelector.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = DatabaseSelector;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', }) {
+function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerStyle, databaseType = '', theme, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             ...containerStyle,
             height: 128,
@@ -27,7 +27,8 @@ function DatabaseSelector({ label, imageUrl, value, onDatabaseSelect, containerS
                 } }), (0, jsx_runtime_1.jsx)("h1", { style: {
                     fontSize: 14,
                     fontWeight: '500',
-                    color: '#212121',
+                    color: theme?.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
                     marginTop: 10,
                 }, children: label })] }));
 }

package/dist/cjs/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/cjs/components/DateRangePicker/SingleDatePicker.js

@@ -151,10 +151,6 @@ function SingleDatePicker({ selectedDate, onChangeDate, disabled, style, ignoreY
                     alignItems: 'center',
                     borderColor: theme?.borderColor,
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
-                    backgroundColor: disabled
-                        ? theme?.hoverBackgroundColor
-                        : theme?.backgroundColor,
                     padding: '8px 12px',
                     fontSize: 14,
                     margin: 0,
@@ -168,7 +164,9 @@ function SingleDatePicker({ selectedDate, onChangeDate, disabled, style, ignoreY
                     minHeight: 40,
                     maxHeight: 40,
                     gap: 10,
-                }, 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}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), (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
+                    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'
@@ -211,7 +209,20 @@ function SingleDatePicker({ selectedDate, onChangeDate, disabled, style, ignoreY
                                         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}; }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, 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: {
+                                    }, 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,
@@ -234,7 +245,20 @@ function SingleDatePicker({ selectedDate, onChangeDate, disabled, style, ignoreY
                                         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}; }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, 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: {
+                                    }, 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,

package/dist/cjs/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/cjs/components/DateRangePicker/YearlessDateRangePicker.js

@@ -46,10 +46,6 @@ function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, label, dis
                         alignItems: 'center',
                         borderColor: theme?.borderColor,
                         fontFamily: theme?.fontFamily,
-                        color: theme?.primaryTextColor,
-                        backgroundColor: disabled
-                            ? theme?.hoverBackgroundColor
-                            : theme?.backgroundColor,
                         padding: '8px 12px',
                         fontSize: 14,
                         margin: 0,
@@ -63,7 +59,9 @@ function QuillYearlessDateRangePicker({ dateRange, onChangeDateRange, label, dis
                         minHeight: 40,
                         maxHeight: 40,
                         gap: 10,
-                    }, 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}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), (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) => {
+                        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);
@@ -124,7 +122,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         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}; }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, 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: {
+                                    }, 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,
@@ -170,7 +181,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         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}; }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, 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: {
+                                    }, 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,

package/dist/cjs/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/cjs/components/DropDownMenuWithLabel.js

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

package/dist/cjs/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/cjs/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/cjs/components/DynamicBanner.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = DynamicBanner;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const XMarkIcon_1 = __importDefault(require("../icons/XMarkIcon"));
-function DynamicBanner({ header, onExit, fontColor, }) {
+function DynamicBanner({ header, onExit, theme, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { id: "quill-edit-banner", style: {
             width: '100vw',
             height: 70,
@@ -18,5 +18,10 @@ function DynamicBanner({ header, onExit, fontColor, }) {
             paddingLeft: 20,
             paddingRight: 20,
             borderBottom: '1px solid #e7e7e7',
-        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: { fontSize: 21, fontWeight: 600, color: '#212121' }, children: header }), onExit && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: (0, jsx_runtime_1.jsx)(XMarkIcon_1.default, { style: { width: '20px', height: '20px' }, fill: fontColor, "aria-hidden": "true" }) }))] }));
+        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
+                    fontSize: 21,
+                    fontWeight: 600,
+                    color: theme?.primaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                }, children: header }), onExit && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onExit, style: { padding: '6px', margin: '-6px' }, children: (0, jsx_runtime_1.jsx)(XMarkIcon_1.default, { style: { width: '20px', height: '20px' }, fill: theme?.primaryTextColor, "aria-hidden": "true" }) }))] }));
 }

package/dist/cjs/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/cjs/components/EmptyDashboardComponent/index.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const AdminProvider_1 = require("../../AdminProvider");
 const UiComponents_1 = require("../UiComponents");
 function EmptyDashboardComponent() {
-    const { dispatch } = (0, AdminProvider_1.useAdmin)();
+    const { state, dispatch } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             width: '100%',
             display: 'flex',
@@ -29,7 +29,8 @@ function EmptyDashboardComponent() {
                         justifyContent: 'center',
                         width: 260,
                     }, children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                fontSize: 16,
+                                fontSize: state.theme.fontSize,
+                                fontFamily: state.theme.fontFamily,
                                 fontWeight: 500,
                                 color: '#565656',
                                 // border: '1px solid #e7e7e7',

package/dist/cjs/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/cjs/components/EmptyVirtualTablesComponent.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = EmptyVirtualTablesComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const AdminProvider_1 = require("../AdminProvider");
 const UiComponents_1 = require("./UiComponents");
 function EmptyVirtualTablesComponent({ onClick, }) {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             width: '100%',
             display: 'flex',
@@ -27,7 +29,8 @@ function EmptyVirtualTablesComponent({ onClick, }) {
                         justifyContent: 'center',
                         width: 260,
                     }, children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#565656", height: 26, width: 26, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                fontSize: 16,
+                                fontSize: theme?.fontSize,
+                                fontFamily: theme?.fontFamily,
                                 fontWeight: 500,
                                 color: '#565656',
                                 // border: '1px solid #e7e7e7',

package/dist/cjs/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/cjs/components/FormTooltip.js

@@ -7,11 +7,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const InformationCircleIcon_1 = __importDefault(require("../icons/InformationCircleIcon"));
+const AdminProvider_1 = require("../AdminProvider");
 function FormTooltip({ text, element, color, mirror, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const tooltipRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const [tooltipPosition, setTooltipPosition] = (0, react_1.useState)(undefined);
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     const updatePosition = () => {
         if (triggerRef.current && tooltipRef.current) {
             const rect = triggerRef.current.getBoundingClientRect();
@@ -71,6 +73,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,
@@ -83,7 +87,6 @@ function FormTooltip({ text, element, color, mirror, }) {
                         paddingRight: 12,
                         borderStyle: 'solid',
                         borderColor: '#e7e7e7',
-                        color: '#212121',
                     }, children: text ?? element }), document.body)] }));
 }
 exports.default = FormTooltip;

package/dist/cjs/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/cjs/components/InputLabel.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = InputLabel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FormTooltip_1 = __importDefault(require("./FormTooltip"));
+const AdminProvider_1 = require("../AdminProvider");
 function InputLabel(props) {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    fontFamily: 'Inter; Helvetica',
-                    color: '#6C727F',
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.secondaryTextColor,
                     fontSize: 14,
                     fontWeight: '600',
                     marginBottom: 2,

package/dist/cjs/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/cjs/components/InternalDashboard/DateRangePicker/QuillDateRangePicker.js

@@ -1,15 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuillDateRangePicker = QuillDateRangePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const date_fns_1 = require("date-fns");
 const AdminProvider_1 = require("../../../AdminProvider");
-const useOnClickOutside_1 = __importDefault(require("../../../hooks/useOnClickOutside"));
 const QuillSelectWithCombo_1 = require("../../QuillSelectWithCombo");
+const UiComponents_1 = require("../../UiComponents");
 /**
  * The fallback date range picked used in <Dashboard/>.
  */
@@ -22,9 +19,7 @@ function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onC
     const [localPreset, setLocalPreset] = (0, react_1.useState)(preset);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
-    (0, useOnClickOutside_1.default)(modalRef, () => {
-        setShowModal(false);
-    }, showModal);
+    const buttonRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setLocalEndDate(dateRange.endDate);
         setLocalStartDate(dateRange.startDate);
@@ -48,10 +43,6 @@ function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onC
                             alignItems: 'center',
                             borderColor: theme?.borderColor,
                             fontFamily: theme?.fontFamily,
-                            color: theme?.primaryTextColor,
-                            backgroundColor: disabled
-                                ? theme?.hoverBackgroundColor
-                                : theme?.backgroundColor,
                             padding: '8px 12px',
                             fontSize: 14,
                             margin: 0,
@@ -65,7 +56,9 @@ function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onC
                             minHeight: 40,
                             maxHeight: 40,
                             gap: 10,
-                        }, 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}; } .quill-date-range-picker-button:hover { background: ${theme?.hoverBackgroundColor}; }` }), (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, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && (0, date_fns_1.format)(localEndDate, 'MMM dd, yyyy')] }), showModal && ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.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: [(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, yyyy'), localStartDate ? ' - ' : 'Pick a date', localEndDate && (0, date_fns_1.format)(localEndDate, 'MMM dd, yyyy')] }), showModal && ((0, jsx_runtime_1.jsx)(UiComponents_1.QuillPortal, { anchorRef: buttonRef, showModal: showModal, setShowModal: setShowModal, children: (0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { options: client?.featureFlags?.['hideAllTime']
                     ? presetOptions
                         .filter((option) => option.value !== 'ALL_TIME')
                         .map((option) => ({
@@ -133,7 +126,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         justifyContent: 'center',
-                                    }, 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}; }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, 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: {
+                                    }, 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,
@@ -175,7 +181,20 @@ function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate
                                         flexDirection: 'row',
                                         alignItems: 'center',
                                         justifyContent: 'center',
-                                    }, 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}; }` }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme.chartLabelColor, 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: {
+                                    }, 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,

package/dist/cjs/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"}