@quillsql/react 2.13.49 → 2.13.50

package/dist/cjs/components/Dashboard/MetricComponent.js

@@ -69,11 +69,12 @@ function QuillMetricComponent({ report, onClick, error, isLoading, children, })
                         report.rows[0][report.xAxisField] === null ? ((0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flex: '1 0 auto',
-                            height: '100%',
+                            // height: '100%',
                             margin: 'auto',
                             justifyContent: 'center',
                             alignItems: 'center',
                             fontSize: 13,
+                            fontFamily: theme?.fontFamily,
                             color: theme?.secondaryTextColor,
                             maxWidth: '100%',
                             width: '100%',

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

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAgP3B;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,4CAyDA,CAAC"}
+{"version":3,"file":"QuillMultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3E;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAiP3B;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,4CA8DA,CAAC"}

package/dist/cjs/components/QuillMultiSelect.js

@@ -80,7 +80,6 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     fontWeight: 600,
                 }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -100,8 +99,8 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     height: 40,
                     minHeight: 40,
                     maxHeight: 40,
-                }, className: "quill-select-button", onClick: () => setShowModal((showModal) => !showModal), 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), 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}; }
         ` }), (0, jsx_runtime_1.jsx)("span", { style: {
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
@@ -119,7 +118,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                     borderStyle: 'solid',
                     borderColor: theme?.borderColor,
                     borderRadius: 6,
-                    background: 'white',
+                    background: theme?.backgroundColor,
                     marginTop: 12,
                     zIndex: 100,
                     padding: 6,
@@ -165,10 +164,12 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                         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', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
                                 textOverflow: 'ellipsis',
@@ -177,6 +178,7 @@ function QuillMultiSelectComponent({ options, width, onChange, label, value, isL
                             }, children: option.label ?? nullLabel })] }, option.value)))) : ((0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {})) }))] }));
 }
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             display: 'flex',
@@ -189,7 +191,7 @@ const ListboxTextInput = ({ value, onChange, placeholder, }) => {
           height: 40px;
          width: 180px;
          z-index: 2;
-         color: #384151;
+         color: ${theme?.primaryTextColor ?? '#384151'};
          border-radius: 4px;
          text-align: left;
          padding-right: 12px;
@@ -197,10 +199,14 @@ const ListboxTextInput = ({ value, onChange, placeholder, }) => {
          padding-bottom: 0px;
          box-sizing: content-box;
          margin-left: 6px;
-         border: 0 solid #e5e7eb;
+         border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
       }
       .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", { 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/QuillMultiSelectSectionList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectSectionList.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectSectionList.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAC;IAC3C,OAAO,EAAE;QACP,CAAC,WAAW,EAAE,MAAM,GAAG;YACrB,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;IACF,gBAAgB,CAAC,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACrD,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,MAAM,EAAE;YAAE,KAAK,EAAE;gBAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;aAAE,CAAA;SAAE,CAAC;KACxD,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CA8bA;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":"QuillMultiSelectSectionList.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectSectionList.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAC;IAC3C,OAAO,EAAE;QACP,CAAC,WAAW,EAAE,MAAM,GAAG;YACrB,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;IACF,gBAAgB,CAAC,EAAE;QAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACrD,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,MAAM,EAAE;YAAE,KAAK,EAAE;gBAAE,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;aAAE,CAAA;SAAE,CAAC;KACxD,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,2CAicA;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,4CA8DA,CAAC"}

package/dist/cjs/components/QuillMultiSelectSectionList.js

@@ -143,7 +143,6 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                     fontWeight: 600,
                 }, children: label })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -163,8 +162,8 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                     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};
@@ -186,7 +185,7 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                     borderStyle: 'solid',
                     borderColor: theme?.borderColor,
                     borderRadius: 6,
-                    background: 'white',
+                    background: theme?.backgroundColor,
                     marginTop: 12,
                     zIndex: 100,
                     padding: 6,
@@ -220,10 +219,10 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                             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',
@@ -264,10 +263,12 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                                     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: options[key]?.length === value[key]?.length, style: { width: '14px', height: '14px', margin: 'auto 0' }, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { style: {
                                             textOverflow: 'ellipsis',
@@ -314,10 +315,12 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                                     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: value[key]?.includes(option.value) ?? false, style: {
                                             width: '14px',
@@ -330,6 +333,7 @@ function QuillMultiSelectSectionList({ options, width, onChange, label, sectionH
                                         }, children: option.label })] }, 'v-' + key + '-' + option.value)))] }, 'sp-' + key)))) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) }))] }))] }));
 }
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             display: 'flex',
@@ -349,10 +353,14 @@ const ListboxTextInput = ({ value, onChange, placeholder, }) => {
          padding-bottom: 0px;
          box-sizing: content-box;
          margin-left: 6px;
-         border: 0 solid #e5e7eb;
+         border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
       }
       .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", { 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/QuillMultiSelectWithCombo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAc,EAEZ,aAAa,EAMd,MAAM,OAAO,CAAC;AAKf;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,GACN,EAAE,yBAAyB,GAAG;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,2CAwmBA;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":"AAGA,OAAO,EAAkB,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3E,OAAc,EAEZ,aAAa,EAMd,MAAM,OAAO,CAAC;AAKf;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,KAAK,GACN,EAAE,yBAAyB,GAAG;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,2CAwmBA;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,4CA8DA,CAAC"}

package/dist/cjs/components/QuillMultiSelectWithCombo.js

@@ -244,7 +244,6 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                     fontWeight: 600,
                 }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -264,8 +263,8 @@ 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};
@@ -278,9 +277,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: selectedOptionsLabel }), (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { style: {
                         position: 'absolute',
@@ -297,7 +293,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                         borderStyle: 'solid',
                         borderColor: theme?.borderColor,
                         borderRadius: 6,
-                        background: 'white',
+                        background: theme?.backgroundColor,
                         marginTop: 12,
                         zIndex: z,
                         padding: 6,
@@ -333,10 +329,12 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                 overflow: 'hidden',
                             }, 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',
@@ -386,10 +384,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", { ref: selectAllRef, type: "checkbox", checked: selectAllCheckboxState === CheckboxState.SELECTED, style: {
                                                 width: '14px',
@@ -400,7 +400,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',
@@ -457,10 +456,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',
@@ -473,6 +474,7 @@ function QuillMultiSelectComponentWithCombo({ options, width, onChange, label, v
                                             }, children: option.label ?? nullLabel })] }, option.value)))] })) : isLoading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null] }), document.body)] }));
 }
 const ListboxTextInput = ({ value, onChange, placeholder, }) => {
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
             display: 'flex',
@@ -485,17 +487,21 @@ const ListboxTextInput = ({ value, onChange, placeholder, }) => {
           height: 40px;
          width: 145px;
          z-index: 2;
-         color: #384151;
+         color: ${theme?.primaryTextColor ?? '#384151'};
          border-radius: 4px;
          text-align: left;
          padding-top: 0px;
          padding-bottom: 0px;
          box-sizing: content-box;
          margin-left: 6px;
-         border: 0 solid #e5e7eb;
+         border: 0 solid ${theme?.borderColor ?? '#e5e7eb'};
       }
       .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", { 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/QuillSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAatE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,2CA2TtB"}
+{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAatE;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE,oBAAoB,2CA0TtB"}

package/dist/cjs/components/QuillSelect.js

@@ -128,7 +128,6 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                     fontWeight: 600,
                 }, children: label ?? nullLabel })), (0, jsx_runtime_1.jsxs)("button", { style: {
                     fontFamily: theme?.fontFamily,
-                    color: theme?.primaryTextColor,
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
@@ -148,8 +147,8 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                     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, {
               background: ${theme?.hoverBackgroundColor};
               cursor: not-allowed;
@@ -176,7 +175,7 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                         borderStyle: 'solid',
                         borderColor: theme?.borderColor,
                         borderRadius: 6,
-                        background: 'white',
+                        background: theme?.backgroundColor,
                         marginTop: 12,
                         zIndex: z,
                         padding: 6,
@@ -207,12 +206,14 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                                 setShowModal(false);
                             }, disabled: disabled, 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 ? (options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
+                ` }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 300 }, children: "Select" })] })), !isLoading ? (options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'space-between',
@@ -236,10 +237,12 @@ function QuillSelectComponent({ options, value, width, onChange, label, isLoadin
                                 setShowModal(false);
                             }, disabled: disabled, 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',

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAWtE;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,QAAQ,GACT,EAAE,oBAAoB,2CAkUtB"}
+{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,oBAAoB,EACrB,MAAM,gBAAgB,CAAC;AAWxB;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,eAAe,EACf,QAAQ,GACT,EAAE,oBAAoB,2CA0TtB"}