@quillsql/react 2.11.20 → 2.11.23

package/dist/cjs/SQLEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACV,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5C,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AAgCD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QACxB,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE;QACjC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE;QAC3B,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;KAChE,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,IAAI,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,EAAE,CAAC;QAC/B,OAAO,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC,6EAA6E;IAC7E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,QAAQ,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;KACvB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,MAAM,EAAE,OAAO,CAAC;QAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;QACrC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,SAAS,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE5C;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtC;;;;;;OAMG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IAEvC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,GAAG,GAAG,CAAC;IAEpC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,eAAgC,EAChC,wBAAkD,EAClD,kBAAmC,EACnC,cAAoC,EACpC,iBAAyB,EACzB,gBAAgB,EAChB,cAA8B,EAC9B,aAAyB,EACzB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,qBAA6B,EAC7B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,EAC5B,4BAAmC,EACnC,cAAoC,EACpC,SAAS,GACV,EAAE,cAAc,2CA0WhB;AAyID,eAAO,MAAM,mBAAmB;;;;;;;6CAqG/B,CAAC"}

package/dist/cjs/SQLEditor.js

@@ -138,7 +138,7 @@ function setEditorTheme(editor, monaco) {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, TextInputComponent = UiComponents_2.QuillTextInput, TableComponent = UiComponents_1.QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = UiComponents_1.MemoizedModal, CardComponent = QuillCard_1.QuillCard, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, }) {
+function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, TextInputComponent = UiComponents_2.QuillTextInput, TableComponent = UiComponents_1.QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = UiComponents_1.MemoizedModal, CardComponent = QuillCard_1.QuillCard, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, }) {
     const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
@@ -297,7 +297,7 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
             onChangeQuery(query);
         }
     }, [query]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerStyle, children: [(!isChartBuilderHorizontalView ||
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
                 (isChartBuilderHorizontalView && !isChartBuilderOpen)) && ((0, jsx_runtime_1.jsx)("div", { style: {
                     height: '100%',
                     display: 'flex',
@@ -357,12 +357,11 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
                                             justifyContent: 'flex-end',
                                             width: '100%',
                                             height: '70px',
-                                        }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, horizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, Modal: ModalComponent, Button: ButtonComponent })] }));
+                                        }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: columns, fields: fields, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, button: chartBuilderButtonLabel, buttonLabel: addToDashboardButtonLabel, dashboardItem: dashboardItem, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent })] }));
 }
 exports.default = SQLEditor;
 const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, isNewQueryEnabled, theme, loading, LoadingComponent, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            background: theme.backgroundColor,
             // maxHeight: 700,
             width: '100%',
             height: '100%',
@@ -400,7 +399,6 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI,
 const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, onClick = () => { }, }) => {
     if (loading) {
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                background: theme.backgroundColor,
                 // maxHeight: 700,
                 width: width || 250,
                 minWidth: 250,
@@ -416,7 +414,6 @@ const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width,
             }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 100 } }), LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 6)", stroke: theme?.primaryTextColor || '#364153', fill: "none", transform: "rotate(-90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9.375", strokeWidth: "3.75", strokeDasharray: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 1 / 3)", strokeDashoffset: "calc(2 * 3.14 * 9.375 / 3) calc(2 * 3.14 * 9.375 * 2 / 3)", stroke: '#ADB1B9', fill: "none", transform: "rotate(90 12 12)", children: (0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
-            background: theme.backgroundColor,
             // maxHeight: 700,
             width: width || 250,
             minWidth: 250,

package/dist/cjs/Table.d.ts

@@ -90,6 +90,12 @@ export interface TableProps {
      * A loading component to show when the table is loading.
      */
     LoadingComponent?: () => JSX.Element;
+    /**
+     * Styles the top-level container of the Table.
+     *
+     * This can be useful for TailwindCSS-style classname strings.
+     */
+    className?: string;
     /**
      * Styles the top-level container of the Table.
      */

package/dist/cjs/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAuBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAiC/B,CAAC;AA8FF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAmC/B,CAAC;AAiGF,eAAe,KAAK,CAAC"}

package/dist/cjs/Table.js

@@ -48,11 +48,11 @@ const Table = (props) => {
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
     if ('rows' in data && 'columns' in data) {
-        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { showDownloadCSVButton: data.showDownloadCSVButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
+        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { showDownloadCSVButton: data.showDownloadCSVButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
     }
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { showDownloadCSVButton: data.showDownloadCSVButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { showDownloadCSVButton: data.showDownloadCSVButton, dispatch: dispatch, dashboard: dashboard, chartId: data.chartId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
 };
-const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, dashboardFilters, csvFilename, showDownloadCSVButton = true, LoadingComponent, }) => {
+const ChartUpdater = ({ chartId, containerStyle, className, dashboard, dispatch, client, dashboardFilters, csvFilename, showDownloadCSVButton = true, LoadingComponent, }) => {
     const { rows, loading } = (0, useFormat_1.useMemoizedRows)(chartId);
     const { downloadCSV } = (0, useExport_1.useExport)(chartId);
     (0, react_1.useEffect)(() => {
@@ -105,6 +105,6 @@ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, da
         // @ts-ignore
         columns: dashboard[chartId]?.columns || [], 
         // @ts-ignore
-        rows: rows || dashboard[chartId]?.rows || [], containerStyle: containerStyle, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
+        rows: rows || dashboard[chartId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
 };
 exports.default = Table;

package/dist/cjs/components/Chart/BarChart.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { type ColorMapType } from '../../Chart';
-export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
+export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
     colors?: string[];
     colorMap?: ColorMapType;
     yAxisFields: any[];
     data: any[];
     containerStyle?: React.CSSProperties;
+    className?: string;
     xAxisField: string;
     xAxisLabel: string;
     xAxisFormat: string;

package/dist/cjs/components/Chart/BarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAgLA"}
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAuLA"}

package/dist/cjs/components/Chart/BarChart.js

@@ -12,7 +12,7 @@ const color_1 = require("../../utils/color");
 const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTooltip"));
 const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const react_1 = require("react");
-function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     const [formattedData, setFormattedData] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         if (!data || data.length === 0) {
@@ -46,12 +46,12 @@ function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisFi
                 fontSize: 13,
                 color: theme.secondaryTextColor,
                 ...containerStyle,
-            }, children: "No results found for specified time period." }));
+            }, className: className, children: "No results found for specified time period." }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             boxSizing: 'content-box',
             ...containerStyle,
-        }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: (0, getDomain_1.default)(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
+        }, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: (0, getDomain_1.default)(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
                         }, tickFormatter: (tick) => (0, axisFormatter_1.axisFormatter)({
@@ -86,7 +86,9 @@ function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisFi
                         return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
                                 (elem.field?.replace('comparison_', '') ??
                                     'unknown'), type: "linear", fill: getCustomColor(elem.field) ??
-                                (0, color_1.selectColor)(elem, colors, yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));
+                                (0, color_1.selectColor)(elem, colors.length >= yAxisFields.length / (comparison ? 2 : 1)
+                                    ? colors
+                                    : (0, color_1.generateArrayFromColor)(colors.slice(0, 2), yAxisFields.length), yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));
                     })] }) }) }));
 }
 exports.default = BarChart;

package/dist/cjs/components/Chart/BarList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { type ColorMapType } from '../../Chart';
 interface YAxisField {
     label: string;
@@ -12,7 +12,8 @@ export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
     showAnimation?: boolean;
     xAxisField: string;
     yAxisFields: YAxisField[];
-    containerStyle: any;
+    containerStyle?: CSSProperties;
+    className?: string;
     xAxisFormat: string;
     colors?: string[];
     colorMap?: ColorMapType;

package/dist/cjs/components/Chart/BarList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,GAAG,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFAwdX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"BarList.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAcvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAuBhD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;CACZ;AAYD,wBAAgB,2BAA2B,CAAC,GAAG,KAAA,UAW9C;AAED,QAAA,MAAM,OAAO,qFA2dX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/cjs/components/Chart/BarList.js

@@ -57,11 +57,11 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                 fontSize: 13,
                 color: theme.secondaryTextColor,
                 ...containerStyle,
-            }, children: "No results found for specified time period." }));
+            }, className: className, children: "No results found for specified time period." }));
     }
     if (yAxisFields.length > 1) {
         const widths2 = getWidthsFromValues(data.map((item) => item[yAxisFields[1].field]));
-        return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: className, style: {
                 ...containerStyle,
                 // width: '100%',
                 // height: '100%',
@@ -212,7 +212,7 @@ const BarList = react_1.default.forwardRef((props, ref) => {
                                 }) }) }, item[xAxisField] + 'label' + idx));
                     }) })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, style: {
             // width: '100%',
             boxSizing: 'content-box',
             height: '100%',

package/dist/cjs/components/Chart/ChartError.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function ChartError({ containerStyle }: any): JSX.Element;
+export default function ChartError({ className, containerStyle }: any): JSX.Element;
 //# sourceMappingURL=ChartError.d.ts.map

package/dist/cjs/components/Chart/ChartError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAoCvE"}
+{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAqClF"}

package/dist/cjs/components/Chart/ChartError.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Context_1 = require("../../Context");
-function ChartError({ containerStyle }) {
+function ChartError({ className, containerStyle }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             boxSizing: 'content-box',
             height: '100%',
             ...containerStyle,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        }, className: className, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 height: containerStyle?.height,
                 width: '100%',
                 boxSizing: 'content-box',

package/dist/cjs/components/Chart/ChartSkeleton.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 export interface SkeletonComponentProps {
     conatinerStyle?: CSSProperties;
+    className?: string;
 }
-export default function ChartSkeleton({ containerStyle }: any): JSX.Element;
+export default function ChartSkeleton({ className, containerStyle }: any): JSX.Element;
 //# sourceMappingURL=ChartSkeleton.d.ts.map

package/dist/cjs/components/Chart/ChartSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAyE1E"}
+{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA0ErF"}

package/dist/cjs/components/Chart/ChartSkeleton.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Context_1 = require("../../Context");
-function ChartSkeleton({ containerStyle }) {
+function ChartSkeleton({ className, containerStyle }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             boxSizing: 'content-box',
             height: '100%',
             ...containerStyle,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+        }, className: className, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 height: '100%',
                 width: '100%',
                 boxSizing: 'content-box',

package/dist/cjs/components/Chart/LineChart.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { type ColorMapType } from '../../Chart';
-export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, }: {
+export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, comparisonLineStyle, }: {
     colors?: string[];
     colorMap?: ColorMapType;
     yAxisFields: any[];
     data: any[];
     containerStyle?: React.CSSProperties;
+    className?: string;
     xAxisField: string;
     xAxisLabel: string;
     xAxisFormat: string;

package/dist/cjs/components/Chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAA6B,GAC9B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;CACzC,kDAgPA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,mBAA6B,GAC9B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;CACzC,kDAiPA"}

package/dist/cjs/components/Chart/LineChart.js

@@ -13,7 +13,7 @@ const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTool
 const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const react_1 = require("react");
 const crypto_1 = require("../../utils/crypto");
-function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', }) {
+function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', }) {
     const [formattedData, setFormattedData] = (0, react_1.useState)([]);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
@@ -50,7 +50,7 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, x
                 fontSize: 13,
                 color: theme.secondaryTextColor,
                 ...containerStyle,
-            }, children: "No results" }));
+            }, className: className, children: "No results" }));
     }
     // Allows the users to override the color scheme on a per-chart basis.
     const getCustomColor = (index, field, gradient) => {
@@ -69,7 +69,7 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, x
         }
         return undefined; // use the default colors from the theme
     };
-    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: formattedData, children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: formattedData, children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
                                 theme?.fontFamily ||

package/dist/cjs/components/Chart/PieChart.d.ts

@@ -53,6 +53,7 @@ export interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {
     showAnimation?: boolean;
     showTooltip?: boolean;
     containerStyle?: CSSProperties;
+    className?: string;
     theme?: any;
 }
 declare const PieChartWrapper: React.ForwardRefExoticComponent<DonutChartProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Chart/PieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAA+B,aAAa,EAAE,MAAM,OAAO,CAAC;AAQ1E,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,iBAAiB,6DAMb,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,QAAA,MAAM,eAAe,wFAMX,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,QAAA,MAAM,UAAU,yCAA0C,CAAC;AAE3D,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/C,QAAA,MAAM,WAAW,gNAuBP,CAAC;AAEX,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,QAAA,MAAM,oBAAoB,oEAOhB,CAAC;AACX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnE,QAAA,MAAM,gBAAgB,4DAMZ,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,aAAa,GAAG,aAAa,CAAC;AAE1E,eAAO,MAAM,qBAAqB,EAAE,cACN,CAAC;AAE/B,eAAO,MAAM,eAAe,QAAS,MAAM,EAAE,WACO,CAAC;AAGrD,eAAO,MAAM,SAAS,kEA2CrB,CAAC;AAKF,eAAO,MAAM,eAAe,eACd,MAAM,GAAG,SAAS,kBACd,cAAc,QACxB,GAAG,EAAE,YACD,MAAM,WAIyC,CAAC;AAE5D,eAAO,MAAM,iBAAiB;cAIlB,MAAM,SAAS;6CAgB1B,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,eAAe,mCAKzB,oBAAoB,4CA+DtB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,GAAG,CAAC;IACb,cAAc,EAAE,cAAc,CAAC;IAC/B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,iBAAiB,gDAK3B,sBAAsB,mDAwBxB,CAAC;AAEF,KAAK,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AA+GD,QAAA,MAAM,eAAe,wFAsGpB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/PieChart.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Chart/PieChart.js

@@ -173,102 +173,6 @@ const DonutChartTooltip = ({ active, payload, valueFormatter, theme, }) => {
     return null;
 };
 exports.DonutChartTooltip = DonutChartTooltip;
-function hexToRgb(hex) {
-    const r = parseInt(hex.substring(1, 3), 16);
-    const g = parseInt(hex.substring(3, 5), 16);
-    const b = parseInt(hex.substring(5, 7), 16);
-    return { r, g, b };
-}
-function rgbToHex(rgb) {
-    const rHex = rgb.r.toString(16).padStart(2, '0');
-    const gHex = rgb.g.toString(16).padStart(2, '0');
-    const bHex = rgb.b.toString(16).padStart(2, '0');
-    return `#${rHex}${gHex}${bHex}`;
-}
-function colorToHSL(color) {
-    const colorHex = (0, color_1.namedColorToHex)(color);
-    const { r, g, b } = hexToRgb(colorHex);
-    return (0, color_1.rgbToHsl)(r, g, b);
-}
-/**
- * Interpolates between two colors using HSL color space.
- * @param leftColor - The left color in hexadecimal format.
- * @param rightColor - The right color in hexadecimal format.
- * @param length - The number of interpolated colors to generate between the
- * left and right colors.
- */
-function interpolateBetween(leftColor, rightColor, length = 3) {
-    const [h, s, _l] = colorToHSL(leftColor);
-    const [h2, s2, _l2] = colorToHSL(rightColor);
-    const hues = linspace(h, h2, length);
-    const saturations = linspace(s, s2, length);
-    const lightnesses = linspace(_l, _l2, length);
-    return Array.from({ length }).map((_, i) => {
-        const [r, g, b] = (0, color_1.HSLtoRGB)(hues[i], saturations[i], lightnesses[i]);
-        return rgbToHex({ r: Math.round(r), g: Math.round(g), b: Math.round(b) });
-    });
-}
-/**
- * Generates monochromatic interpolation of a given color.
- * @param color - The base color in hexadecimal format.
- * @param length - The number of interpolated colors to generate.
- */
-function monochromaticInterpolation(color, length) {
-    const [h, s, _l] = colorToHSL(color);
-    const hues = linspace(h, h, length);
-    const saturations = linspace(s, s, length);
-    const lightnesses = linspace(0.6, 0.9, length);
-    return Array.from({ length }).map((_, i) => {
-        const [r, g, b] = (0, color_1.HSLtoRGB)(hues[i], saturations[i], lightnesses[i]);
-        return rgbToHex({ r: Math.round(r), g: Math.round(g), b: Math.round(b) });
-    });
-}
-/**
- * Generates an array of colors by interpolating between colors in the given array.
- * @param colors - The array of colors to interpolate between.
- * @param length - The desired length of the resulting array.
- */
-function generateArrayFromColor(colors, length) {
-    if (typeof colors === 'string') {
-        return monochromaticInterpolation(colors, length);
-    }
-    if (colors.length === 1) {
-        return monochromaticInterpolation(colors[0], length);
-    }
-    const pairs = colors.length - 1;
-    const needed = length - colors.length;
-    const baseAmount = Math.floor(needed / pairs);
-    const extras = needed % pairs;
-    let result = [];
-    let i = 0;
-    let j = 1;
-    while (j < colors.length) {
-        const additional = i < extras ? 1 : 0;
-        const interpLength = 2 + baseAmount + additional;
-        const interp = interpolateBetween(colors[i], colors[j], interpLength);
-        const lastIndex = j === colors.length - 1 ? undefined : -1;
-        result = result.concat(interp.slice(0, lastIndex));
-        i++;
-        j++;
-    }
-    return result;
-}
-/**
- * Generates an array of numbers linearly spaced between start and end.
- * @param start - The starting number of the sequence.
- * @param end - The end number of the sequence.
- * @param num - The number of samples to generate.
- */
-function linspace(start, end, num) {
-    if (num <= 1)
-        return [start];
-    const step = (end - start) / (num - 1);
-    const result = new Array(num);
-    for (let i = 0; i < num; i++) {
-        result[i] = start + step * i;
-    }
-    return result;
-}
 const PieChartWrapper = react_1.default.forwardRef((props, ref) => {
     const { category = 'pct_of_the_total', index = 'status', data, colors = [], colorMap = {}, variant = 'donut', valueFormatter = exports.defaultValueFormatter, label, showLabel = true, showAnimation = true, showTooltip = true, className, containerStyle, theme, ...other } = props;
     const isDonut = variant == 'donut';
@@ -283,9 +187,9 @@ const PieChartWrapper = react_1.default.forwardRef((props, ref) => {
                 fontSize: 13,
                 color: theme.secondaryTextColor,
                 ...containerStyle,
-            }, children: "No results found for specified time period." }));
+            }, className: className, children: "No results found for specified time period." }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, style: {
             width: '100%',
             display: 'flex',
             flexDirection: 'row',
@@ -294,10 +198,10 @@ const PieChartWrapper = react_1.default.forwardRef((props, ref) => {
             ...containerStyle,
         }, ...other, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { children: [(0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: (0, exports.parseData)(data, (colorMap[category] &&
                             colorMap[category]['primary'] &&
-                            generateArrayFromColor(colorMap[category]['primary'], data.length)) ??
+                            (0, color_1.generateArrayFromColor)(colorMap[category]['primary'], data.length)) ??
                             (colors.length >= data.length
                                 ? colors
-                                : generateArrayFromColor(colors.slice(0, 2), data.length)), index, category), cx: "50%", cy: "50%", startAngle: 90, endAngle: -270, innerRadius: isDonut ? '70%' : '0%', outerRadius: "100%", paddingAngle: 0, dataKey: category, nameKey: index, isAnimationActive: true }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: {
+                                : (0, color_1.generateArrayFromColor)(colors.slice(0, 2), data.length)), index, category), cx: "50%", cy: "50%", startAngle: 90, endAngle: -270, innerRadius: isDonut ? '70%' : '0%', outerRadius: "100%", paddingAngle: 0, dataKey: category, nameKey: index, isAnimationActive: true }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: {
                             outline: 'none',
                         }, content: ({ active, payload }) => {
                             return ((0, jsx_runtime_1.jsx)(exports.DonutChartTooltip, { active: active, payload: payload, valueFormatter: valueFormatter, theme: theme }));

package/dist/cjs/components/Dashboard/DashboardFilter.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { type DateRangePickerComponentProps } from '../../DateRangePicker/QuillDateRangePicker';
-type SelectComponentType = ({ label, value, options, onChange, }: {
+type SelectComponentType = ({ label, value, options, onChange, width, }: {
     value: string;
     label?: string | undefined;
+    width: number;
     options: {
         value: string;
         label: string;

package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAEhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,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;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,GACP,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDA+GtB"}
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAEhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,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;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,GACP,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAiHtB"}

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

@@ -32,7 +32,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
                     label: elem[filter.labelField],
                     value: elem[filter.field],
                 })),
-            ] }));
+            ], width: 200 }));
     }
     if (filter.filterType == 'date_range') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -68,7 +68,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
                                 }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => ({
                                     value: compareOption.value,
                                     label: compareOption.text,
-                                })) })] }) }))] }));
+                                })), width: 200 })] }) }))] }));
     }
     return null;
 }

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

@@ -4,6 +4,6 @@ interface QuillCardProps {
     onClick?: () => void;
     onDelete?: () => void;
 }
-export declare function QuillCard({ children, onClick, onDelete, }: QuillCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillCard({ children, onClick, onDelete }: QuillCardProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=QuillCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillCard.d.ts","sourceRoot":"","sources":["../../../src/components/QuillCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,cAAc;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,cAAc,2CA4EhB"}
+{"version":3,"file":"QuillCard.d.ts","sourceRoot":"","sources":["../../../src/components/QuillCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,cAAc;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,cAAc,2CA4ExE"}

package/dist/cjs/components/QuillCard.js

@@ -4,7 +4,7 @@ exports.QuillCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const assets_1 = require("../assets");
 const hooks_1 = require("../hooks");
-function QuillCard({ children, onClick, onDelete, }) {
+function QuillCard({ children, onClick, onDelete }) {
     const theme = (0, hooks_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)("div", { className: onClick ? 'quill-card-hover' : '', style: {
             backgroundColor: theme.backgroundColor || 'white',

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

@@ -2,5 +2,5 @@ import { SelectComponentProps } from './UiComponents';
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-export declare function QuillSelectComponent({ options, value, onChange, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function QuillSelectComponent({ options, value, width, onChange, label, }: SelectComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAKtD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CA0MtB"}
+{"version":3,"file":"QuillSelect.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAKtD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CA4MtB"}

package/dist/cjs/components/QuillSelect.js

@@ -8,16 +8,18 @@ const Context_1 = require("../Context");
 /**
  * A robust select component that implements the new minimal Select interface.
  */
-function QuillSelectComponent({ options, value, onChange, label, }) {
+function QuillSelectComponent({ options, value, width, onChange, label, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const modalRef = (0, react_1.useRef)(null);
     (0, hooks_1.useOnClickOutside)(modalRef, (e) => setShowModal(false));
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             position: 'relative',
-            width: 200,
-            minWidth: 200,
+            // width: 200,
+            // minWidth: 200,
             borderRadius: '6px',
+            width: width,
+            minWidth: width,
         }, children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
                     fontSize: 14,
                     color: theme.primaryTextColor,