@quillsql/admin 1.6.3 → 1.6.4

package/dist/cjs/components/InternalDashboard/InternalDashboard.js

@@ -1189,6 +1189,7 @@ containerStyle, parentLoading, onManageDashboard, }) => {
         
         .section-grid-container.empty::after {
           content: 'Drop reports here';
+          font-family: ${state.theme?.fontFamily};
           color: #9CA3AF;
           font-size: 16px;
           opacity: 0.8;
@@ -1443,7 +1444,7 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                                             alignItems: 'top',
                                             borderRadius: '10px',
                                             border: '1px solid #E7E7E7',
-                                            background: 'white',
+                                            background: state.theme.backgroundColor,
                                             height: activeItem.chartType === 'metric'
                                                 ? '150px'
                                                 : activeItem.chartType === 'table'
@@ -1464,6 +1465,8 @@ containerStyle, parentLoading, onManageDashboard, }) => {
                                                 marginBottom: 'auto',
                                             }, children: (0, jsx_runtime_1.jsx)("h1", { style: {
                                                     fontSize: 18,
+                                                    fontFamily: state.theme?.fontFamily,
+                                                    color: state.theme?.primaryTextColor,
                                                     fontWeight: '500',
                                                     margin: 0,
                                                     textOverflow: 'ellipsis',
@@ -1484,6 +1487,7 @@ const DeleteButton = ({ onClick }) => {
 };
 const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, tables, data, previewSectionOrder, onClickReport, onSectionNameUpdate, onSectionDelete, activeId, overId, draggedIndex, isHighlighted, isDraggingAnySection, }) => {
     const { attributes, listeners, setNodeRef: setSortableNodeRef, isDragging, } = (0, sortable_1.useSortable)({ id, animateLayoutChanges: () => false });
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     const [isEditing, setIsEditing] = (0, react_1.useState)(false);
     const [editedName, setEditedName] = (0, react_1.useState)(sectionName);
     const [inputWidth, setInputWidth] = (0, react_1.useState)('auto');
@@ -1655,6 +1659,8 @@ const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, table
                         } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 20 }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "section-header", style: { marginTop: sectionIndex > 0 ? 20 : 0 }, children: [sectionName ? (isEditing ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, className: "section-name-input", value: editedName, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleSave, style: {
                                             fontSize: 22,
                                             fontWeight: 'bold',
+                                            color: theme.primaryTextColor,
+                                            fontFamily: theme.fontFamily,
                                             width: inputWidth,
                                             minWidth: '20px',
                                             textAlign: 'left',
@@ -1663,6 +1669,8 @@ const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, table
                                             margin: 0,
                                             padding: 0,
                                         } })) : ((0, jsx_runtime_1.jsx)("h1", { className: isDefaultSection ? '' : 'section-name-display', onClick: isDefaultSection ? undefined : handleStartEditing, ref: h1Ref, style: {
+                                            color: theme?.primaryTextColor,
+                                            fontFamily: theme?.fontFamily,
                                             fontSize: 22,
                                             fontWeight: 'bold',
                                             textAlign: 'left',
@@ -1734,6 +1742,7 @@ const SortableSection = ({ id, sectionName, sectionIndex, metrics, charts, table
                 } })] }));
 };
 const SortableItem = ({ id, section, chartType, value, onClickReport, }) => {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     const compoundId = `${section}::${id}`;
     const { attributes, listeners, setNodeRef, transform, isDragging } = (0, sortable_1.useSortable)({
         id: compoundId,
@@ -1786,6 +1795,8 @@ const SortableItem = ({ id, section, chartType, value, onClickReport, }) => {
                                     fontSize: 18,
                                     fontWeight: '500',
                                     flexGrow: 1,
+                                    color: theme?.primaryTextColor,
+                                    fontFamily: theme?.fontFamily,
                                 }, children: value }), (0, jsx_runtime_1.jsx)("div", { className: "quill-report-edit-buttons", style: {
                                     display: 'flex',
                                     flexDirection: 'column',
@@ -1847,6 +1858,7 @@ function HandleButton(props) {
                         } })] })] }));
 }
 const NewSectionButton = ({ onAddSection, existingSections, isEditing, setIsEditing, }) => {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     const [sectionName, setSectionName] = (0, react_1.useState)('');
     const [error, setError] = (0, react_1.useState)('');
     const inputRef = (0, react_1.useRef)(null);
@@ -1912,6 +1924,7 @@ const NewSectionButton = ({ onAddSection, existingSections, isEditing, setIsEdit
                         marginTop: '8px',
                         fontSize: '16px',
                         fontWeight: 300,
+                        fontFamily: theme?.fontFamily,
                         color: '#9CA0A7',
                     }, children: "New section" })] }));
     }

package/dist/cjs/components/OrgSelect.d.ts

@@ -11,12 +11,6 @@ interface PopoverComponentProps {
     setIsOpen: (isOpen: boolean) => void;
 }
 export declare function Popover({ onClose, parentRef, children, style, onClick, label, showTrigger, isOpen, setIsOpen, }: PopoverComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare const ListboxTextInput: ({ value, onChange, placeholder, id, }: {
-    value: string;
-    onChange: (e: string) => void;
-    placeholder: string;
-    id: string;
-}) => import("react/jsx-runtime").JSX.Element;
 export default function OrgSelect({ isLoading }: {
     isLoading: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/OrgSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AASpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,2CA4HvB;AAED,eAAO,MAAM,gBAAgB,0CAK1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,4CAyDA,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,2CAsJtE;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,GACd,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CAwEA"}
+{"version":3,"file":"OrgSelect.d.ts","sourceRoot":"","sources":["../../../src/components/OrgSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAUpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAU,EACV,OAAO,EACP,KAAK,EACL,WAAkB,EAClB,MAAM,EACN,SAAS,GACV,EAAE,qBAAqB,2CAsIvB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,2CA6JtE;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,GACd,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,2CA8EA"}

package/dist/cjs/components/OrgSelect.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListboxTextInput = void 0;
 exports.Popover = Popover;
 exports.default = OrgSelect;
 exports.ListboxRow = ListboxRow;
@@ -16,9 +15,11 @@ const QuillSelectWithCombo_1 = require("./QuillSelectWithCombo");
 const QuillMultiSelectWithCombo_1 = require("./QuillMultiSelectWithCombo");
 const useDashboardManager_1 = require("../hooks/useDashboardManager");
 const GlobeIcon_1 = __importDefault(require("../icons/GlobeIcon"));
+const AdminProvider_1 = require("../AdminProvider");
 function Popover({ onClose, parentRef, children, style = {}, onClick, label, showTrigger = true, isOpen, setIsOpen, }) {
     const modalRef = (0, react_1.useRef)(null);
     const [maxHeight, setMaxHeight] = (0, react_1.useState)('40vh');
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     (0, useOnClickOutside_1.default)(modalRef, (e) => {
         // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
         const isTriggerElem = parentRef
@@ -52,7 +53,7 @@ function Popover({ onClose, parentRef, children, style = {}, onClick, label, sho
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showTrigger && ((0, jsx_runtime_1.jsxs)("button", { 
                 //   onMouseEnter={() => setIsOpen(true)}
-                onClick: (e) => {
+                className: "quill-select-button", onClick: (e) => {
                     setIsOpen(!isOpen);
                     if (onClick) {
                         onClick(e);
@@ -68,31 +69,36 @@ function Popover({ onClose, parentRef, children, style = {}, onClick, label, sho
                     textOverflow: 'ellipsis',
                     borderRadius: 6,
                     WebkitAppearance: 'none',
-                    borderTop: '1px solid #e7e7e7',
-                    borderLeft: '1px solid #e7e7e7',
-                    borderRight: '1px solid #e7e7e7',
-                    borderBottom: '1px solid #e7e7e7',
+                    borderTop: `1px solid ${theme.borderColor}`,
+                    borderLeft: `1px solid ${theme.borderColor}`,
+                    borderRight: `1px solid ${theme.borderColor}`,
+                    borderBottom: `1px solid ${theme.borderColor}`,
                     paddingLeft: 12,
                     paddingRight: 12,
                     height: 40,
-                    background: 'white',
-                    color: '#384151',
+                    fontFamily: theme.fontFamily,
                     fontWeight: 500,
                     fontSize: 14,
                     position: 'relative',
-                }, children: [label, (0, jsx_runtime_1.jsx)(icons_1.ArrowDownHeadIcon, { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
+              .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
+              .quill-select-button:disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+              }
+          ` }), label, (0, jsx_runtime_1.jsx)(icons_1.ArrowDownHeadIcon, { style: {
                             height: '20px',
                             width: '20px',
                             flex: 'none',
                             position: 'absolute',
                             right: 8,
                             top: 8,
-                            color: '#6C727F',
+                            color: theme.primaryTextColor,
                         }, "aria-hidden": "true" })] })), (0, jsx_runtime_1.jsx)("div", { id: "quill-popover-modal", ref: modalRef, style: { position: 'relative', display: isOpen ? 'block' : 'none' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                        background: 'white',
+                        background: theme.backgroundColor,
                         position: 'absolute',
                         boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
-                        border: '1px solid #e7e7e7',
+                        border: `1px solid ${theme.borderColor}`,
                         boxSizing: 'content-box',
                         zIndex: 1,
                         top: showTrigger ? 8 : 0,
@@ -106,33 +112,6 @@ function Popover({ onClose, parentRef, children, style = {}, onClick, label, sho
                         ...style,
                     }, children: children }) })] }));
 }
-const ListboxTextInput = ({ value, onChange, placeholder, id, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginTop: 2,
-        }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
-      .quill-text-input {
-          background-color: white;
-          height: 40px;
-         width: 180px;
-         z-index: 2;
-         color: #384151;
-         border-radius: 4px;
-         text-align: left;
-         padding-right: 12px;
-         padding-top: 0px;
-         padding-bottom: 0px;
-         box-sizing: content-box;
-         margin-left: 6px;
-      }
-      .quill-text-input:focus {
-        outline: none;
-    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), (0, jsx_runtime_1.jsx)("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
-};
-exports.ListboxTextInput = ListboxTextInput;
 function OrgSelect({ isLoading }) {
     const { dashboardTenants, dashboardOwnerTenant, selectedTenantType, selectedTenantValues, setSelectedTenantValues, selectedDashboardTenantIds, setSelectedTenantType, setSelectedDashboardTenantIds, dashboardTenantIdsLoading, } = (0, useTenants_1.useTenants)();
     const { selectedDashboard } = (0, useDashboardManager_1.useDashboardManager)();
@@ -177,7 +156,12 @@ function OrgSelect({ isLoading }) {
                 value: id.id,
             })) ?? []);
     }, [selectedTenantType]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: 16 }, children: [dashboardTenantOptions?.length > 1 && ((0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { label: 'Tenant Type', width: 230, value: selectedTenantType?.tenantField, options: dashboardTenantOptions, onChange: (e) => setSelectedTenantType(e.target.value), isLoading: isLoading, disabled: isLoading, hideEmptyOption: true, badge: ownerIsSelected ? 'Owner' : undefined })), (0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 16,
+            fontWeight: 500,
+        }, children: [dashboardTenantOptions?.length > 1 && ((0, jsx_runtime_1.jsx)(QuillSelectWithCombo_1.QuillSelectComponentWithCombo, { label: 'Tenant Type', width: 230, value: selectedTenantType?.tenantField, options: dashboardTenantOptions, onChange: (e) => setSelectedTenantType(e.target.value), isLoading: isLoading, disabled: isLoading, hideEmptyOption: true, badge: ownerIsSelected ? 'Owner' : undefined })), (0, jsx_runtime_1.jsx)(QuillMultiSelectWithCombo_1.QuillMultiSelectComponentWithCombo, { label: selectedTenantType?.scope === 'database'
                     ? 'Tags'
                     : (selectedTenantType?.name ?? 'Tenant'), width: 230, value: !tenantValueOptions.length ? [] : (selectedTenantValues ?? []), options: tenantValueOptions, onChange: (e) => debouncedSetSelectedTenantValues(e.target.value), emptyLabel: selectedTenantType?.scope === 'database'
                     ? 'No tags provided'
@@ -194,6 +178,7 @@ function OrgSelect({ isLoading }) {
                             } }), (0, jsx_runtime_1.jsx)("div", { children: "All Tenants" })] })) }))] }));
 }
 function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect, }) {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsx)("div", { className: 'quill-list-select' + (isSelected ? ' quill-list-selected' : ''), style: {
             paddingBottom: 6,
             cursor: isSelected && !allowUnselect ? 'default' : 'pointer',
@@ -202,7 +187,6 @@ function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect
                 ? () => setSelected(item)
                 : undefined, className: "quill-list-select-title", style: {
                 height: 42,
-                color: '#384151',
                 width: 216,
                 borderRadius: 6,
                 textAlign: 'left',
@@ -219,13 +203,16 @@ function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect
                 overflow: 'hidden',
             }, 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};
     }
     .quill-list-select-hover-actions {
       display: none;
@@ -239,5 +226,6 @@ function ListboxRow({ item, isSelected, setSelected, hoverActions, allowUnselect
                         whiteSpace: 'nowrap',
                         overflow: 'hidden',
                         display: 'block',
+                        fontFamily: theme.fontFamily,
                     }, children: item }), (0, jsx_runtime_1.jsx)("div", { className: isSelected ? '' : 'quill-list-select-hover-actions', children: hoverActions && hoverActions(item) })] }) }));
 }

package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts

@@ -22,9 +22,11 @@ export interface MultiSelectComponentProps {
  * A robust select component that implements the new minimal Select interface.
  */
 export declare function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, value, isLoading, disabled, emptyLabel, allSelectedLabel, noneSelectedLabel, mimicReactSelect, }: MultiSelectComponentProps): import("react/jsx-runtime").JSX.Element;
-export declare const ListboxTextInput: ({ value, onChange, placeholder, }: {
+export declare const ListboxTextInput: ({ value, onChange, placeholder, id, width, }: {
     value: string;
     onChange: (e: string) => void;
     placeholder: string;
+    width?: number;
+    id?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillMultiSelectWithCombo.d.ts.map

package/dist/cjs/components/QuillMultiSelectWithCombo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,yBAAyB,2CAumB3B;AAED,eAAO,MAAM,gBAAgB,sCAI1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB,4CAwDA,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAClC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,EAAE,yBAAyB,2CAomB3B;AAED,eAAO,MAAM,gBAAgB,iDAM1B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,4CAkEA,CAAC"}

package/dist/cjs/components/QuillMultiSelectWithCombo.js

@@ -242,11 +242,10 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     fontSize: 14,
                     color: theme?.secondaryTextColor,
                     fontFamily: theme?.fontFamily,
-                    paddingBottom: 5,
+                    paddingBottom: 4,
                     fontWeight: 600,
                 }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -266,11 +265,11 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; } 
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+                }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; } 
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
           .quill-select-button:disabled {
             cursor: not-allowed;
-            background: ${theme?.hoverBackgroundColor};
+            opacity: 0.5;
           }
         ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                             textOverflow: 'ellipsis',
@@ -280,9 +279,6 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                             textAlign: 'left',
                             zIndex: 1,
                             fontWeight: value?.length || isLoading ? undefined : 300,
-                            color: value?.length || isLoading
-                                ? undefined
-                                : theme?.secondaryTextColor,
                         }, children: isLoading
                             ? 'Loading...'
                             : value?.length
@@ -307,7 +303,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                         borderStyle: 'solid',
                         borderColor: theme?.borderColor,
                         borderRadius: 6,
-                        background: 'white',
+                        background: theme?.backgroundColor,
                         marginTop: 12,
                         zIndex: z + 1,
                         padding: 6,
@@ -343,16 +339,16 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                 overflow: 'hidden',
                             }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
-                  background: white;
-                }
+                  background: ${theme?.backgroundColor};
                 .quill-option:hover {
-                  background: #F4F4F5;
+                  background: ${theme?.hoverBackgroundColor};
                 }
               ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                                         textOverflow: 'ellipsis',
                                         whiteSpace: 'nowrap',
                                         overflow: 'hidden',
                                         cursor: 'default',
+                                        color: theme?.secondaryTextColor,
                                     }, children: exceedsLimit
                                         ? 'Too many options'
                                         : (emptyLabel ?? 'No options available') })] })), !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchQuery === '' && potentialOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("button", { style: {
@@ -394,10 +390,11 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                         debounce(updatedChangeEvent);
                                     }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                   .quill-option {
-                    background: white;
+                    background: ${theme?.backgroundColor};
                   }
                   .quill-option:hover {
-                    background: #F4F4F5;
+                    background: ${theme?.hoverBackgroundColor};
+                    color: ${theme?.hoverTextColor};
                   }
                 ` }), (0, jsx_runtime_1.jsx)("input", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: {
                                                 width: '14px',
@@ -408,7 +405,6 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                                 whiteSpace: 'nowrap',
                                                 overflow: 'hidden',
                                             }, children: (0, jsx_runtime_1.jsx)("span", { style: {
-                                                    color: theme?.secondaryTextColor,
                                                     fontWeight: 300,
                                                 }, children: "Select all" }) })] })), filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                                         display: 'flex',
@@ -452,10 +448,12 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                         debounce(updatedChangeEvent);
                                     }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                     .quill-option {
-                      background: white;
+                      background: ${theme?.backgroundColor};
+                      color: ${theme?.primaryTextColor};
                     }
                     .quill-option:hover {
-                      background: #F4F4F5;
+                      background: ${theme?.hoverBackgroundColor};
+                      color: ${theme?.hoverTextColor};
                     }
                   ` }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedOptions.includes(option.value), style: {
                                                 width: '14px',
@@ -475,30 +473,37 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                 padding: 8,
                             }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }), document.body)] }));
 }
-const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+const ListboxTextInput = ({ value, onChange, placeholder, id, width, }) => {
+    const { state: { theme }, } = (0, AdminProvider_1.useAdmin)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
             marginTop: 2,
+            background: theme.backgroundColor,
         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
       .quill-text-input {
           background-color: white;
           height: 40px;
-         width: 145px;
+         width: ${width ?? 145}px;
          z-index: 2;
-         color: #384151;
+         color: ${theme.primaryTextColor};
          border-radius: 4px;
          text-align: left;
          padding-top: 0px;
          padding-bottom: 0px;
+         padding-right: 12px;
          box-sizing: content-box;
          margin-left: 6px;
-         border: 0 solid #e5e7eb;
+         border: 0 solid ${theme.borderColor};
       }
       .quill-text-input:focus {
         outline: none;
-    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), (0, jsx_runtime_1.jsx)("input", { className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder })] }));
+    }` }), (0, jsx_runtime_1.jsx)("div", { style: { width: 6 } }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "rgba(56, 65, 81, 0.7)", height: "16", width: "16", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z", clipRule: "evenodd" }) }), (0, jsx_runtime_1.jsx)("input", { id: id, className: "quill-text-input", type: "text", value: value, onChange: (event) => onChange(event.target.value), placeholder: placeholder, style: {
+                    fontFamily: theme.fontFamily,
+                    color: theme.primaryTextColor,
+                    background: theme.backgroundColor,
+                } })] }));
 };
 exports.ListboxTextInput = ListboxTextInput;

package/dist/cjs/components/QuillPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillPopover.d.ts","sourceRoot":"","sources":["../../../src/components/QuillPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAK1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,YAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,2CAuNvB"}
+{"version":3,"file":"QuillPopover.d.ts","sourceRoot":"","sources":["../../../src/components/QuillPopover.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAK1E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,YAAY,EACZ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,2CAsNvB"}

package/dist/cjs/components/QuillPopover.js

@@ -114,7 +114,6 @@ function QuillPopover({ style, popoverStyle, label, isLoading, disabled, childre
                     fontWeight: 600,
                 }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -134,11 +133,11 @@ function QuillPopover({ style, popoverStyle, label, isLoading, disabled, childre
                     minHeight: 40,
                     maxHeight: 40,
                 }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [(0, jsx_runtime_1.jsx)("style", { children: ` 
-          .quill-select-button { background: ${theme?.backgroundColor}; }
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; }
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
           .quill-select-button:disabled { 
             cursor: not-allowed;
-            background: ${theme?.hoverBackgroundColor}; 
+            opacity: 0.5;
           }
 
         ` }), (0, jsx_runtime_1.jsx)("span", { style: {
@@ -154,7 +153,7 @@ function QuillPopover({ style, popoverStyle, label, isLoading, disabled, childre
                         borderStyle: 'solid',
                         borderColor: theme?.borderColor,
                         borderRadius: 6,
-                        background: 'white',
+                        background: theme?.backgroundColor,
                         marginTop: 12,
                         zIndex: z,
                         padding: 12,

package/dist/cjs/components/QuillSelect.js

@@ -46,7 +46,6 @@ function QuillSelectComponent({ style, options, value, onChange, theme = Admin_1
                     fontWeight: 600,
                 }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme.fontFamily,
-                    color: theme.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -67,11 +66,11 @@ function QuillSelectComponent({ style, options, value, onChange, theme = Admin_1
                     minHeight: 40,
                     maxHeight: 40,
                 }, className: 'quill-select-button', disabled: disabled, onClick: () => !disabled && setShowModal((showModal) => !showModal), children: [(0, jsx_runtime_1.jsx)("style", { children: `
-          .quill-select-button { background: ${theme.backgroundColor}; } 
-          .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; }
+          .quill-select-button { background: ${theme.backgroundColor}; color: ${theme.primaryTextColor}; } 
+          .quill-select-button:hover { background: ${theme.hoverBackgroundColor}; color: ${theme.hoverTextColor}; }
           .quill-select-button:disabled {
             cursor: not-allowed;
-            background: ${theme.hoverBackgroundColor};
+            opacity: 0.5;
           }
         ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                             textOverflow: 'ellipsis',
@@ -87,7 +86,7 @@ function QuillSelectComponent({ style, options, value, onChange, theme = Admin_1
                     borderStyle: 'solid',
                     borderColor: theme.borderColor,
                     borderRadius: 6,
-                    background: 'white',
+                    background: theme.backgroundColor,
                     marginTop: 12,
                     zIndex: 100,
                     padding: 6,
@@ -118,10 +117,10 @@ function QuillSelectComponent({ style, options, value, onChange, theme = Admin_1
                             setShowModal(false);
                         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
-                  background: white;
+                  background: ${theme.backgroundColor};
                 }
                   .quill-option:hover {
-                    background: #F4F4F5;
+                    background: ${theme.hoverBackgroundColor};
                   }
                 ` }), 'Select'] })), options?.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                             display: 'flex',
@@ -141,15 +140,16 @@ function QuillSelectComponent({ style, options, value, onChange, theme = Admin_1
                             height: 34,
                             minHeight: 34,
                             overflow: 'hidden',
+                            color: theme.primaryTextColor,
                         }, className: "quill-option", onClick: () => {
                             onChange(option.value);
                             setShowModal(false);
                         }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
-                  background: white;
+                  background: ${theme.backgroundColor};
                 }
                   .quill-option:hover {
-                    background: #F4F4F5;
+                    background: ${theme.hoverBackgroundColor};
                   }
                 ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                                     textOverflow: 'ellipsis',

package/dist/cjs/components/QuillSelectWithCombo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AAIA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,SAAS,GACV,EAAE,oBAAoB,2CAqatB"}
+{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AAIA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,SAAS,GACV,EAAE,oBAAoB,2CAkatB"}

package/dist/cjs/components/QuillSelectWithCombo.js

@@ -177,7 +177,6 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
                     fontWeight: 600,
                 }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -197,22 +196,18 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
                     minHeight: 40,
                     maxHeight: 40,
                 }, className: 'quill-select-button', onClick: () => setShowModal((showModal) => !showModal), disabled: disabled, ref: buttonRef, children: [(0, jsx_runtime_1.jsx)("style", { children: ` 
-          .quill-select-button { background: ${theme?.backgroundColor}; }
-          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; }
+          .quill-select-button { background: ${theme?.backgroundColor}; color: ${theme?.primaryTextColor}; }
+          .quill-select-button:hover { background: ${theme?.hoverBackgroundColor}; color: ${theme?.hoverTextColor}; }
           .quill-select-button:disabled { 
             cursor: not-allowed;
-            background: ${theme?.hoverBackgroundColor}; 
+            opacity: 0.5;
           }
-
         ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',
                             fontWeight: value?.length || isLoading ? undefined : 300,
-                            color: value?.length || isLoading
-                                ? undefined
-                                : theme?.secondaryTextColor,
-                        }, children: selectedLabel }), badge && ((0, jsx_runtime_1.jsx)("span", { style: {
+                        }, children: isLoading ? 'Loading...' : selectedLabel }), badge && ((0, jsx_runtime_1.jsx)("span", { style: {
                             color: 'white',
                             backgroundColor: 'black',
                             borderRadius: 10,
@@ -237,7 +232,7 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
                         borderStyle: 'solid',
                         borderColor: theme?.borderColor,
                         borderRadius: 6,
-                        background: 'white',
+                        background: theme?.backgroundColor,
                         marginTop: 12,
                         zIndex: z,
                         padding: 6,
@@ -273,13 +268,14 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
                                 setShowModal(false);
                             }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
-                  background: white;
+                  background: ${theme?.backgroundColor};
+                  color: ${theme?.secondaryTextColor};
                 }
                   .quill-option:hover {
-                    background: #F4F4F5;
+                    background: ${theme?.hoverBackgroundColor};
+                    color: ${theme?.hoverTextColor};
                   }
                 ` }), (0, jsx_runtime_1.jsx)("span", { style: {
-                                        color: theme?.secondaryTextColor,
                                         fontWeight: 300,
                                     }, children: "Select" })] })), !isLoading ? (filteredItems.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                                 display: 'flex',
@@ -306,10 +302,12 @@ function QuillSelectComponentWithCombo({ options, value, width, onChange, label,
                                 setShowModal(false);
                             }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
                 .quill-option {
-                  background: white;
+                  background: ${theme?.backgroundColor};
+                  color: ${theme?.primaryTextColor};
                 }
                   .quill-option:hover {
-                    background: #F4F4F5;
+                    background: ${theme?.hoverBackgroundColor};
+                    color: ${theme?.hoverTextColor};
                   }
                 ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                                         textOverflow: 'ellipsis',