pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -1,115 +1,73 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-var react_2 = require("@chakra-ui/react");
-var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
-var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
-var ApexLineChart = function (_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, height = _a.height, width = _a.width, lineColors = _a.lineColors, _b = _a.titlePosition, titlePosition = _b === void 0 ? "center" : _b, titleStyle = _a.titleStyle, _c = _a.compact, compact = _c === void 0 ? false : _c, _d = _a.toolbarBreakpointPct, toolbarBreakpointPct = _d === void 0 ? 0.6 : _d, titleClampLines = _a.titleClampLines, _e = _a.showTitleEllipsis, showTitleEllipsis = _e === void 0 ? true : _e, _f = _a.showSeries, showSeries = _f === void 0 ? true : _f, seriesNames = _a.series, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
-    var theme = (0, react_2.useTheme)();
-    var palette = theme.colors;
-    var resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
-    var resolvedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
-    var initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
-    var _h = (0, react_1.useState)([
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const react_2 = require("@chakra-ui/react");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
+    const theme = (0, react_2.useTheme)();
+    const palette = theme.colors;
+    const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
+    const resolvedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
+    const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
+    const [apexSeries, setApexSeries] = (0, react_1.useState)([
         {
             name: initialName,
             data: Array.isArray(data) ? data : [],
         },
-    ]), apexSeries = _h[0], setApexSeries = _h[1];
-    (0, react_1.useEffect)(function () {
+    ]);
+    (0, react_1.useEffect)(() => {
         if (variant === "realtime") {
-            var interval_1 = setInterval(function () {
-                setApexSeries(function (prev) {
-                    var newData = __spreadArray([], prev[0].data, true);
+            const interval = setInterval(() => {
+                setApexSeries((prev) => {
+                    const newData = [...prev[0].data];
                     newData.push(Math.floor(Math.random() * 100) + 10);
                     if (newData.length > 20)
                         newData.shift();
                     return [{ name: prev[0].name, data: newData }];
                 });
             }, 1000);
-            return function () { return clearInterval(interval_1); };
+            return () => clearInterval(interval);
         }
     }, [variant]);
-    var wrapperRef = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)(0), containerW = _j[0], setContainerW = _j[1];
-    (0, react_1.useEffect)(function () {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const [containerW, setContainerW] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
         if (!wrapperRef.current)
             return;
-        var ro = new ResizeObserver(function (entries) {
+        const ro = new ResizeObserver((entries) => {
             var _a, _b;
-            var w = ((_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width) || 0;
+            const w = ((_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.width) || 0;
             setContainerW(w);
         });
         ro.observe(wrapperRef.current);
-        return function () { return ro.disconnect(); };
+        return () => ro.disconnect();
     }, []);
-    var parsePercent = function (v) {
-        var n = parseFloat(v.replace("%", ""));
+    const parsePercent = (v) => {
+        const n = parseFloat(v.replace("%", ""));
         return isNaN(n) ? 0 : n / 100;
     };
-    var chartW = typeof width === "number"
+    const chartW = typeof width === "number"
         ? width
         : typeof width === "string" && width.trim().endsWith("%")
             ? containerW * parsePercent(width.trim())
             : containerW;
-    var hNum = typeof height === "number" ? height : 0;
-    var isSmall = compact || (chartW > 0 && chartW < 280) || (hNum > 0 && hNum < 220);
-    var computedFontSize = (resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontSize) ||
+    const hNum = typeof height === "number" ? height : 0;
+    const isSmall = compact || (chartW > 0 && chartW < 280) || (hNum > 0 && hNum < 220);
+    const computedFontSize = (resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontSize) ||
         (chartW
-            ? "".concat(Math.max(12, Math.min(18, Math.floor(chartW / 18))), "px")
+            ? `${Math.max(12, Math.min(18, Math.floor(chartW / 18)))}px`
             : "14px");
-    var clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
-    var titleRef = (0, react_1.useRef)(null);
-    var _k = (0, react_1.useState)(false), isTruncated = _k[0], setIsTruncated = _k[1];
-    (0, react_1.useEffect)(function () {
-        var el = titleRef.current;
+    const clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
+    const titleRef = (0, react_1.useRef)(null);
+    const [isTruncated, setIsTruncated] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const el = titleRef.current;
         if (!el)
             return;
         if (clampLines > 1) {
@@ -119,13 +77,13 @@ var ApexLineChart = function (_a) {
             setIsTruncated(el.scrollWidth > el.clientWidth);
         }
     }, [title, chartW, width, clampLines]);
-    var ratio = containerW > 0
+    const ratio = containerW > 0
         ? chartW / containerW
         : typeof width === "string" && width.trim().endsWith("%")
             ? parsePercent(width.trim())
             : 1;
-    var showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
-    var options = (0, react_1.useMemo)(function () { return ({
+    const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
+    const options = (0, react_1.useMemo)(() => ({
         chart: {
             type: "line",
             animations: variant === "realtime"
@@ -155,7 +113,7 @@ var ApexLineChart = function (_a) {
         markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
         dataLabels: { enabled: false },
         grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
-    }); }, [
+    }), [
         variant,
         showToolbar,
         resolvedLineColors,
@@ -166,32 +124,29 @@ var ApexLineChart = function (_a) {
         resolvedTitleStyle,
         showSeries,
     ]);
-    var tooltipBg = (0, chartColorsFromTheme_1.chartTooltipBackground)(palette);
-    var tooltipFg = (0, chartColorsFromTheme_1.chartTooltipForeground)(palette);
-    return (react_1.default.createElement("div", { ref: wrapperRef },
-        title && isSmall && (react_1.default.createElement(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: tooltipBg, color: tooltipFg, isDisabled: !isTruncated },
-            react_1.default.createElement("div", { ref: titleRef, style: {
-                    textAlign: "left",
-                    color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
-                    fontSize: computedFontSize,
-                    fontWeight: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontWeight,
-                    fontFamily: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontFamily,
-                    marginBottom: 4,
-                    width: typeof width === "string"
-                        ? width
-                        : typeof width === "number"
-                            ? "".concat(width, "px")
-                            : "100%",
-                    whiteSpace: clampLines > 1 ? "normal" : "nowrap",
-                    overflow: "hidden",
-                    textOverflow: showTitleEllipsis && clampLines === 1 ? "ellipsis" : "clip",
-                    display: clampLines > 1 ? "-webkit-box" : undefined,
-                    WebkitLineClamp: clampLines > 1 ? clampLines : undefined,
-                    WebkitBoxOrient: clampLines > 1 ? "vertical" : undefined,
-                    wordBreak: clampLines > 1 ? "break-word" : undefined,
-                    lineHeight: clampLines > 1 ? "1.2em" : undefined,
-                    maxHeight: clampLines > 1 ? "".concat(1.2 * clampLines, "em") : undefined,
-                } }, title))),
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: apexSeries, type: "line", height: height, width: width })));
+    const tooltipBg = (0, chartColorsFromTheme_1.chartTooltipBackground)(palette);
+    const tooltipFg = (0, chartColorsFromTheme_1.chartTooltipForeground)(palette);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: tooltipBg, color: tooltipFg, isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
+                        textAlign: "left",
+                        color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
+                        fontSize: computedFontSize,
+                        fontWeight: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontWeight,
+                        fontFamily: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontFamily,
+                        marginBottom: 4,
+                        width: typeof width === "string"
+                            ? width
+                            : typeof width === "number"
+                                ? `${width}px`
+                                : "100%",
+                        whiteSpace: clampLines > 1 ? "normal" : "nowrap",
+                        overflow: "hidden",
+                        textOverflow: showTitleEllipsis && clampLines === 1 ? "ellipsis" : "clip",
+                        display: clampLines > 1 ? "-webkit-box" : undefined,
+                        WebkitLineClamp: clampLines > 1 ? clampLines : undefined,
+                        WebkitBoxOrient: clampLines > 1 ? "vertical" : undefined,
+                        wordBreak: clampLines > 1 ? "break-word" : undefined,
+                        lineHeight: clampLines > 1 ? "1.2em" : undefined,
+                        maxHeight: clampLines > 1 ? `${1.2 * clampLines}em` : undefined,
+                    }, children: title }) })), (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
 };
 exports.default = ApexLineChart;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -26,3 +26,4 @@ export type ApexLineChartProps = {
     toolbarBreakpointPct?: number;
 };
 export type LineChartVariant = "basic" | "realtime";
+//# sourceMappingURL=ApexLineChartProps.d.ts.map

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApexLineChartProps.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexLineChart/ApexLineChartProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;KAChD,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GACzB,OAAO,GACP,UAAU,CAAC"}

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { ApexPieChartProps } from "./ApexPieChartProps";
-declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPieChart;
+//# sourceMappingURL=ApexPieChart.d.ts.map

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApexPieChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPieChart/ApexPieChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAkBxD,QAAA,MAAM,YAAY,GAAI,mIAanB,iBAAiB,4CA4KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -1,72 +1,28 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-var react_2 = require("@chakra-ui/react");
-var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
-var getValidLegendPosition = function (position) {
-    var validPositions = ["left", "right", "top", "bottom"];
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const react_2 = require("@chakra-ui/react");
+const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const getValidLegendPosition = (position) => {
+    const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
         return position;
     }
-    console.warn("Invalid legend position: ".concat(position, ". Defaulting to 'bottom'."));
+    console.warn(`Invalid legend position: ${position}. Defaulting to 'bottom'.`);
     return "bottom";
 };
-var ApexPieChart = function (_a) {
-    var _b;
-    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.height, height = _c === void 0 ? 400 : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, donutColors = _a.donutColors, chartColor = _a.chartColor, _e = _a.titlePosition, titlePosition = _e === void 0 ? "center" : _e, titleStyle = _a.titleStyle, _f = _a.legendPosition, legendPosition = _f === void 0 ? "bottom" : _f, legendStyle = _a.legendStyle, _g = _a.variant, variant = _g === void 0 ? "pie" : _g;
-    var theme = (0, react_2.useTheme)();
-    var palette = theme.colors;
-    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
-    var mergedLegendStyle = (0, react_1.useMemo)(function () {
-        var defaults = {
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", }) => {
+    var _a;
+    const theme = (0, react_2.useTheme)();
+    const palette = theme.colors;
+    const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
+    const mergedLegendStyle = (0, react_1.useMemo)(() => {
+        const defaults = {
             colors: palette.text[900],
             useSeriesColors: false,
             horizontalGap: 10,
@@ -75,12 +31,12 @@ var ApexPieChart = function (_a) {
             markerOffsetX: -5,
             markerOffsetY: 0,
         };
-        return __assign(__assign({}, defaults), legendStyle);
+        return { ...defaults, ...legendStyle };
     }, [palette, legendStyle]);
-    var seriesColors = (0, react_1.useMemo)(function () { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColor, donutColors, palette]);
-    var validLegendPosition = getValidLegendPosition(legendPosition);
-    var options = (0, react_1.useMemo)(function () {
-        var extraOptions = {};
+    const seriesColors = (0, react_1.useMemo)(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColor, donutColors, palette]);
+    const validLegendPosition = getValidLegendPosition(legendPosition);
+    const options = (0, react_1.useMemo)(() => {
+        let extraOptions = {};
         switch (variant) {
             case "semi-donut":
                 extraOptions = {
@@ -159,9 +115,13 @@ var ApexPieChart = function (_a) {
             default:
                 break;
         }
-        return __assign({ chart: {
+        return {
+            chart: {
                 type: variant.includes("pie") ? "pie" : "donut",
-            }, labels: labels, colors: seriesColors, legend: {
+            },
+            labels,
+            colors: seriesColors,
+            legend: {
                 position: validLegendPosition,
                 labels: {
                     colors: mergedLegendStyle.colors,
@@ -178,11 +138,15 @@ var ApexPieChart = function (_a) {
                     horizontal: mergedLegendStyle.horizontalGap,
                     vertical: mergedLegendStyle.verticalGap,
                 },
-            }, title: {
+            },
+            title: {
                 text: title,
                 align: titlePosition,
                 style: mergedTitleStyle,
-            }, dataLabels: { enabled: true } }, extraOptions);
+            },
+            dataLabels: { enabled: true },
+            ...extraOptions,
+        };
     }, [
         variant,
         labels,
@@ -193,7 +157,6 @@ var ApexPieChart = function (_a) {
         titlePosition,
         mergedTitleStyle,
     ]);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: (_b = options.chart) === null || _b === void 0 ? void 0 : _b.type, height: height, width: width })));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
 };
 exports.default = ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -26,3 +26,4 @@ export type ApexPieChartProps = {
     };
 };
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";
+//# sourceMappingURL=ApexPieChartProps.d.ts.map

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApexPieChartProps.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPieChart/ApexPieChartProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC/B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C,UAAU,CAAC,EAAE;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACrD,WAAW,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,eAAe,GACxB,KAAK,GACL,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,YAAY,GACZ,oBAAoB,GACpB,gBAAgB,CAAC"}

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { ApexPolarChartProps } from "./ApexPolarChartsProps";
-declare const ApexPolarChart: ({ data, labels, title, height, width, chartColors, titlePosition, titleStyle, legendStyle, variant, }: ApexPolarChartProps) => React.JSX.Element;
+declare const ApexPolarChart: ({ data, labels, title, height, width, chartColors, titlePosition, titleStyle, legendStyle, variant, }: ApexPolarChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPolarChart;
+//# sourceMappingURL=ApexPolarCharts.d.ts.map

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApexPolarCharts.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAO7D,QAAA,MAAM,cAAc,GAAI,uGAWrB,mBAAmB,4CA6FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

@@ -1,72 +1,28 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-var react_2 = require("@chakra-ui/react");
-var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
-var ApexPolarChart = function (_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, chartColors = _a.chartColors, _d = _a.titlePosition, titlePosition = _d === void 0 ? "center" : _d, titleStyle = _a.titleStyle, legendStyle = _a.legendStyle, _e = _a.variant, variant = _e === void 0 ? "basic" : _e;
-    var theme = (0, react_2.useTheme)();
-    var palette = theme.colors;
-    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
-    var mergedLegendStyle = (0, react_1.useMemo)(function () {
-        var defaults = {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+const react_2 = require("@chakra-ui/react");
+const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
+    const theme = (0, react_2.useTheme)();
+    const palette = theme.colors;
+    const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
+    const mergedLegendStyle = (0, react_1.useMemo)(() => {
+        const defaults = {
             colors: palette.text[900],
             position: "bottom",
             useSeriesColors: false,
         };
-        return __assign(__assign({}, defaults), legendStyle);
+        return { ...defaults, ...legendStyle };
     }, [palette, legendStyle]);
-    var resolvedChartColors = (0, react_1.useMemo)(function () { return chartColors !== null && chartColors !== void 0 ? chartColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColors, palette]);
-    var options = (0, react_1.useMemo)(function () {
-        var extraOptions = {};
+    const resolvedChartColors = (0, react_1.useMemo)(() => chartColors !== null && chartColors !== void 0 ? chartColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette), [chartColors, palette]);
+    const options = (0, react_1.useMemo)(() => {
+        let extraOptions = {};
         switch (variant) {
             case "basic":
                 extraOptions = {
@@ -90,17 +46,25 @@ var ApexPolarChart = function (_a) {
             default:
                 break;
         }
-        return __assign({ chart: { type: "polarArea" }, labels: labels, colors: resolvedChartColors, legend: {
+        return {
+            chart: { type: "polarArea" },
+            labels,
+            colors: resolvedChartColors,
+            legend: {
                 position: mergedLegendStyle.position,
                 labels: {
                     colors: mergedLegendStyle.colors,
                     useSeriesColors: mergedLegendStyle.useSeriesColors,
                 },
-            }, title: {
+            },
+            title: {
                 text: title,
                 align: titlePosition,
                 style: mergedTitleStyle,
-            }, dataLabels: { enabled: true } }, extraOptions);
+            },
+            dataLabels: { enabled: true },
+            ...extraOptions,
+        };
     }, [
         variant,
         labels,
@@ -111,7 +75,6 @@ var ApexPolarChart = function (_a) {
         mergedTitleStyle,
         palette.white,
     ]);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width })));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
 };
 exports.default = ApexPolarChart;

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.d.ts

@@ -20,3 +20,4 @@ export type ApexPolarChartProps = {
     };
 };
 export type PolarVariant = "basic" | "monochrome";
+//# sourceMappingURL=ApexPolarChartsProps.d.ts.map

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApexPolarChartsProps.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;QAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;KAChD,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAC"}

package/dist/Components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { BreadcrumbsProps } from "./BreadcrumbsProps";
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): React.JSX.Element;
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/Components/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/Components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,SAAS,EACT,UAAU,EACV,QAAQ,EACR,aAAa,EACb,WAAW,EACX,KAAK,GACN,EAAE,gBAAgB,2CA6BlB"}

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -1,17 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Breadcrumbs;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-function Breadcrumbs(_a) {
-    var spacing = _a.spacing, separator = _a.separator, fontWeight = _a.fontWeight, fontSize = _a.fontSize, isCurrentPage = _a.isCurrentPage, handleClick = _a.handleClick, items = _a.items;
-    var theme = (0, react_2.useTheme)();
-    return (react_1.default.createElement(react_2.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body }, items.map(function (item, index) { return (react_1.default.createElement(react_2.BreadcrumbItem, { key: index, isCurrentPage: isCurrentPage && index === items.length - 1 },
-        react_1.default.createElement(react_2.BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: function (event) {
-                event.preventDefault();
-                handleClick(item.path);
-            } }, item.label))); })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
+    const theme = (0, react_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isCurrentPage && index === items.length - 1, children: (0, jsx_runtime_1.jsx)(react_1.BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: (event) => {
+                    event.preventDefault();
+                    handleClick(item.path);
+                }, children: item.label }) }, index))) }));
 }

package/dist/Components/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=Breadcrumbs.stories.d.ts.map

package/dist/Components/Breadcrumbs/Breadcrumbs.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/Components/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,CAAC"}