@quillsql/react 2.11.19 → 2.11.21

package/dist/esm/SQLEditor.js

@@ -131,7 +131,7 @@ function setEditorTheme(editor, monaco) {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = MemoizedModal, CardComponent = 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' }, }) {
+export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, TextInputComponent = QuillTextInput, TableComponent = QuillTableComponent, isNewQueryEnabled = false, LoadingComponent, ModalComponent = MemoizedModal, CardComponent = 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] = useState('');
     const [client] = useContext(ClientContext);
     const [theme] = useContext(ThemeContext);
@@ -290,7 +290,7 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
             onChangeQuery(query);
         }
     }, [query]);
-    return (_jsxs("div", { style: containerStyle, children: [(!isChartBuilderHorizontalView ||
+    return (_jsxs("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
                 (isChartBuilderHorizontalView && !isChartBuilderOpen)) && (_jsx("div", { style: {
                     height: '100%',
                     display: 'flex',
@@ -350,11 +350,10 @@ export default function SQLEditor({ ButtonComponent = MemoizedButton, SecondaryB
                                             justifyContent: 'flex-end',
                                             width: '100%',
                                             height: '70px',
-                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), _jsx(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, Modal: ModalComponent, Button: ButtonComponent })] }));
+                                        }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), _jsx(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 })] }));
 }
 const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, isNewQueryEnabled, theme, loading, LoadingComponent, }) => {
     return (_jsxs("div", { style: {
-            background: theme.backgroundColor,
             // maxHeight: 700,
             width: '100%',
             height: '100%',
@@ -392,7 +391,6 @@ const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI,
 export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent, width, onClick = () => { }, }) => {
     if (loading) {
         return (_jsxs("div", { style: {
-                background: theme.backgroundColor,
                 // maxHeight: 700,
                 width: width || 250,
                 minWidth: 250,
@@ -408,7 +406,6 @@ export const SchemaListComponent = ({ schema, theme, loading, LoadingComponent,
             }, children: [_jsx("div", { style: { height: 100 } }), LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsxs("svg", { width: "24", height: "24", children: [_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: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "-180 12 12", to: "180 12 12", dur: "0.8s", repeatCount: "indefinite" }) }), _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: _jsx("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" }) })] }))] }));
     }
     return (_jsx("div", { style: {
-            background: theme.backgroundColor,
             // maxHeight: 700,
             width: width || 250,
             minWidth: 250,

package/dist/esm/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/esm/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/esm/Table.js

@@ -43,11 +43,11 @@ const Table = (props) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [client, _] = useContext(ClientContext);
     if ('rows' in data && 'columns' in data) {
-        return (_jsx(QuillTable, { 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 (_jsx(QuillTable, { 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 (_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 (_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 } = useMemoizedRows(chartId);
     const { downloadCSV } = useExport(chartId);
     useEffect(() => {
@@ -100,6 +100,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 }));
 };
 export default Table;

package/dist/esm/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/esm/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/esm/components/Chart/BarChart.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, } from 'recharts';
 import { valueFormatter } from '../../utils/valueFormatter';
 import { axisFormatter } from '../../utils/axisFormatter';
-import { selectColor } from '../../utils/color';
+import { generateArrayFromColor, selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
-export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+export default function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     const [formattedData, setFormattedData] = useState([]);
     useEffect(() => {
         if (!data || data.length === 0) {
@@ -41,12 +41,12 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                 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 (_jsx("div", { style: {
             boxSizing: 'content-box',
             ...containerStyle,
-        }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
+        }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, tickCount: 5, style: {
                             fontSize: '12px',
                             fontFamily: theme.chartLabelFontFamily,
                         }, tickFormatter: (tick) => axisFormatter({
@@ -81,6 +81,8 @@ export default function BarChart({ colors, colorMap, yAxisFields, data, containe
                         return (_jsx(Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
                                 (elem.field?.replace('comparison_', '') ??
                                     'unknown'), type: "linear", fill: getCustomColor(elem.field) ??
-                                selectColor(elem, colors, yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));
+                                selectColor(elem, colors.length >= yAxisFields.length / (comparison ? 2 : 1)
+                                    ? colors
+                                    : generateArrayFromColor(colors.slice(0, 2), yAxisFields.length), yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field));
                     })] }) }) }));
 }

package/dist/esm/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/esm/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/esm/components/Chart/BarList.js

@@ -50,11 +50,11 @@ const BarList = React.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 (_jsxs("div", { ref: ref, style: {
+        return (_jsxs("div", { ref: ref, className: className, style: {
                 ...containerStyle,
                 // width: '100%',
                 // height: '100%',
@@ -205,7 +205,7 @@ const BarList = React.forwardRef((props, ref) => {
                                 }) }) }, item[xAxisField] + 'label' + idx));
                     }) })] }));
     }
-    return (_jsx("div", { ref: ref, style: {
+    return (_jsx("div", { ref: ref, className: className, style: {
             // width: '100%',
             boxSizing: 'content-box',
             height: '100%',

package/dist/esm/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/esm/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/esm/components/Chart/ChartError.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { ThemeContext } from '../../Context';
-export default function ChartError({ containerStyle }) {
+export default function ChartError({ className, containerStyle }) {
     const [theme] = useContext(ThemeContext);
     return (_jsx("div", { style: {
             boxSizing: 'content-box',
             height: '100%',
             ...containerStyle,
-        }, children: _jsx("div", { style: {
+        }, className: className, children: _jsx("div", { style: {
                 height: containerStyle?.height,
                 width: '100%',
                 boxSizing: 'content-box',

package/dist/esm/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/esm/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/esm/components/Chart/ChartSkeleton.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { ThemeContext } from '../../Context';
-export default function ChartSkeleton({ containerStyle }) {
+export default function ChartSkeleton({ className, containerStyle }) {
     const [theme] = useContext(ThemeContext);
     return (_jsx("div", { style: {
             boxSizing: 'content-box',
             height: '100%',
             ...containerStyle,
-        }, children: _jsx("div", { style: {
+        }, className: className, children: _jsx("div", { style: {
                 height: '100%',
                 width: '100%',
                 boxSizing: 'content-box',

package/dist/esm/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/esm/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/esm/components/Chart/LineChart.js

@@ -8,7 +8,7 @@ import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
 import { hashCode } from '../../utils/crypto';
-export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', }) {
+export default 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] = useState([]);
     if (!yAxisFields || !yAxisFields.length) {
         return null;
@@ -45,7 +45,7 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                 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) => {
@@ -64,7 +64,7 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
         }
         return undefined; // use the default colors from the theme
     };
-    return (_jsx("div", { style: { ...containerStyle }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
+    return (_jsx("div", { style: { ...containerStyle }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
                                 theme?.fontFamily ||

package/dist/esm/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/esm/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/esm/components/Chart/PieChart.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import React from 'react';
 import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { namedColorToHex, rgbToHsl as RGBToHSL, HSLtoRGB, } from '../../utils/color';
+import { generateArrayFromColor } from '../../utils/color';
 const iconVariantValues = [
     'simple',
     'light',
@@ -160,102 +160,6 @@ export const DonutChartTooltip = ({ active, payload, valueFormatter, theme, }) =
     }
     return null;
 };
-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 = namedColorToHex(color);
-    const { r, g, b } = hexToRgb(colorHex);
-    return 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] = 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] = 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.forwardRef((props, ref) => {
     const { category = 'pct_of_the_total', index = 'status', data, colors = [], colorMap = {}, variant = 'donut', valueFormatter = defaultValueFormatter, label, showLabel = true, showAnimation = true, showTooltip = true, className, containerStyle, theme, ...other } = props;
     const isDonut = variant == 'donut';
@@ -270,9 +174,9 @@ const PieChartWrapper = React.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 (_jsx("div", { ref: ref, style: {
+    return (_jsx("div", { ref: ref, className: className, style: {
             width: '100%',
             display: 'flex',
             flexDirection: 'row',

package/dist/esm/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/esm/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/esm/components/Dashboard/DashboardFilter.js

@@ -29,7 +29,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
                     label: elem[filter.labelField],
                     value: elem[filter.field],
                 })),
-            ] }));
+            ], width: 200 }));
     }
     if (filter.filterType == 'date_range') {
         return (_jsxs("div", { style: {
@@ -65,7 +65,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
                                 }, options: COMPARISON_OPTIONS.map((compareOption) => ({
                                     value: compareOption.value,
                                     label: compareOption.text,
-                                })) })] }) }))] }));
+                                })), width: 200 })] }) }))] }));
     }
     return null;
 }

package/dist/esm/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/esm/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/esm/components/QuillCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { XIcon } from '../assets';
 import { useTheme } from '../hooks';
-export function QuillCard({ children, onClick, onDelete, }) {
+export function QuillCard({ children, onClick, onDelete }) {
     const theme = useTheme();
     return (_jsxs("div", { className: onClick ? 'quill-card-hover' : '', style: {
             backgroundColor: theme.backgroundColor || 'white',

package/dist/esm/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/esm/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/esm/components/QuillSelect.js

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

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

@@ -3,6 +3,7 @@ import { ButtonComponentProps } from './UiComponents';
 export interface TableComponentProps {
     rows: any[];
     columns: any[];
+    className?: string;
     containerStyle?: React.CSSProperties;
     isLoading?: boolean;
     showDownloadCSVButton?: boolean;
@@ -13,5 +14,5 @@ export interface TableComponentProps {
     rowsPerPage?: number;
     emptyStateLabel?: string;
 }
-export default function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
+export default function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadFileName, containerStyle, className, LoadingComponent, rowsPerPage, emptyStateLabel, downloadCSV, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA0C,EAC1C,WAAgB,EAChB,eAA8B,EAC9B,WAAW,GACZ,EAAE,mBAAmB,2CAwZrB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,gBAA0C,EAC1C,WAAgB,EAChB,eAA8B,EAC9B,WAAW,GACZ,EAAE,mBAAmB,2CA0ZrB"}