pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/Accordion/accordionColors.js

@@ -0,0 +1,30 @@
+import { compositeOver } from "../../Theme/tokens/builders/color";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung";
+/**
+ * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
+ * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
+ * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
+ * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
+ * the rest surface so light and dark actually agree on "you can see this".
+ */
+const MIN_HOVER_STEP = 1.15;
+export const getAccordionHoverColors = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    if (isDark) {
+        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
+        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
+        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
+        return {
+            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
+            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+        };
+    }
+    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#ffffff";
+    const expandedTint = ((_p = (_o = colors.primary) === null || _o === void 0 ? void 0 : _o.opacity) === null || _p === void 0 ? void 0 : _p[8])
+        ? compositeOver(colors.primary.opacity[8], rest)
+        : ((_r = (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[50]) !== null && _r !== void 0 ? _r : rest);
+    return {
+        expandedBg: liftToContrast(expandedTint, rest, "light", MIN_HOVER_STEP),
+        softHover: liftToContrast((_u = (_t = (_s = colors.table) === null || _s === void 0 ? void 0 : _s.hover) === null || _t === void 0 ? void 0 : _t[100]) !== null && _u !== void 0 ? _u : (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[50], rest, "light", MIN_HOVER_STEP),
+    };
+};

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+};
+export default AlertDialog;

package/dist/esm/Components/AlertDialog/AlertDialogProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { chartAxisLabelColor, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText";
+export default function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, }) {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const resolvedBarColors = useMemo(() => barColor !== null && barColor !== void 0 ? barColor : [getDefaultSeriesColors(palette)[0]], [barColor, palette]);
+    const axisColor = chartAxisLabelColor(palette);
+    const mergedXAxis = useMemo(() => { var _a; return ({ ...xAxisStyle, color: (_a = xAxisStyle === null || xAxisStyle === void 0 ? void 0 : xAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [axisColor, xAxisStyle]);
+    const mergedYAxis = useMemo(() => { var _a; return ({ ...yAxisStyle, color: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [axisColor, yAxisStyle]);
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const dataLabelColor = palette.primary[500];
+    const chartThemeMode = isDarkCanvas(palette.backgroundColor.main) ? "dark" : "light";
+    const options = useMemo(() => ({
+        chart: {
+            type: "bar",
+            height: 350,
+        },
+        plotOptions: {
+            bar: {
+                borderRadius: 4,
+                horizontal: false,
+            },
+        },
+        dataLabels: {
+            enabled: false,
+            style: {
+                fontSize: "12px",
+                colors: [dataLabelColor],
+            },
+        },
+        xaxis: {
+            categories: labels,
+            labels: {
+                style: mergedXAxis,
+            },
+        },
+        yaxis: {
+            labels: {
+                style: mergedYAxis,
+            },
+        },
+        title: {
+            text: title,
+            align: titlePosition,
+            style: mergedTitleStyle,
+        },
+        colors: resolvedBarColors,
+        theme: { mode: chartThemeMode },
+    }), [
+        labels,
+        mergedXAxis,
+        mergedYAxis,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        resolvedBarColors,
+        dataLabelColor,
+        chartThemeMode,
+    ]);
+    const series = [
+        {
+            name: "Data",
+            data: data,
+        },
+    ];
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: series, type: "bar", height: height, width: width }) }));
+}

package/dist/esm/Components/Apexcharts/ApexBarChart/ApexBarChartProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import ToolTip from "../../ToolTip/ToolTip";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText";
+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 = useTheme();
+    const palette = theme.colors;
+    const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : getDefaultSeriesColors(palette);
+    const chartThemeMode = isDarkCanvas(palette.backgroundColor.main) ? "dark" : "light";
+    const resolvedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
+    const [apexSeries, setApexSeries] = useState([
+        {
+            name: initialName,
+            data: Array.isArray(data) ? data : [],
+        },
+    ]);
+    useEffect(() => {
+        if (variant === "realtime") {
+            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 () => clearInterval(interval);
+        }
+    }, [variant]);
+    const wrapperRef = useRef(null);
+    const [containerW, setContainerW] = useState(0);
+    useEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        const ro = new ResizeObserver((entries) => {
+            var _a, _b;
+            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 () => ro.disconnect();
+    }, []);
+    const parsePercent = (v) => {
+        const n = parseFloat(v.replace("%", ""));
+        return isNaN(n) ? 0 : n / 100;
+    };
+    const chartW = typeof width === "number"
+        ? width
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? containerW * parsePercent(width.trim())
+            : containerW;
+    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
+            ? `${Math.max(12, Math.min(18, Math.floor(chartW / 18)))}px`
+            : "14px");
+    const clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
+    const titleRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const el = titleRef.current;
+        if (!el)
+            return;
+        if (clampLines > 1) {
+            setIsTruncated(el.scrollHeight > el.clientHeight);
+        }
+        else {
+            setIsTruncated(el.scrollWidth > el.clientWidth);
+        }
+    }, [title, chartW, width, clampLines]);
+    const ratio = containerW > 0
+        ? chartW / containerW
+        : typeof width === "string" && width.trim().endsWith("%")
+            ? parsePercent(width.trim())
+            : 1;
+    const showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
+    const options = useMemo(() => ({
+        chart: {
+            type: "line",
+            animations: variant === "realtime"
+                ? {
+                    enabled: true,
+                    speed: 1000,
+                    dynamicAnimation: { speed: 1000 },
+                }
+                : { enabled: false },
+            zoom: { enabled: true },
+            toolbar: { show: showToolbar },
+        },
+        stroke: { curve: "smooth" },
+        colors: resolvedLineColors,
+        xaxis: labels
+            ? { categories: labels }
+            : { type: variant === "realtime" ? "numeric" : "category" },
+        title: {
+            text: isSmall ? undefined : title,
+            align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
+            style: resolvedTitleStyle,
+        },
+        tooltip: {
+            enabled: !!showSeries,
+            marker: { show: !!showSeries },
+        },
+        markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
+        dataLabels: { enabled: false },
+        grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
+        theme: { mode: chartThemeMode },
+    }), [
+        variant,
+        showToolbar,
+        resolvedLineColors,
+        labels,
+        isSmall,
+        title,
+        titlePosition,
+        resolvedTitleStyle,
+        showSeries,
+        chartThemeMode,
+    ]);
+    return (_jsxs("div", { ref: wrapperRef, children: [title && isSmall && (_jsx(ToolTip, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: _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 }) })), _jsx(ReactApexChart, { options: options, series: apexSeries, type: "line", height: height, width: width })] }));
+};
+export default ApexLineChart;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,161 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText";
+const getValidLegendPosition = (position) => {
+    const validPositions = ["left", "right", "top", "bottom"];
+    if (validPositions.includes(position)) {
+        return position;
+    }
+    console.warn(`Invalid legend position: ${position}. Defaulting to 'bottom'.`);
+    return "bottom";
+};
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", }) => {
+    var _a;
+    const theme = useTheme();
+    const palette = theme.colors;
+    const chartThemeMode = isDarkCanvas(palette.backgroundColor.main) ? "dark" : "light";
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const mergedLegendStyle = useMemo(() => {
+        const defaults = {
+            colors: palette.text[900],
+            useSeriesColors: false,
+            horizontalGap: 10,
+            verticalGap: 5,
+            markerSize: 8,
+            markerOffsetX: -5,
+            markerOffsetY: 0,
+        };
+        return { ...defaults, ...legendStyle };
+    }, [palette, legendStyle]);
+    const seriesColors = useMemo(() => { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : getDefaultSeriesColors(palette); }, [chartColor, donutColors, palette]);
+    const validLegendPosition = getValidLegendPosition(legendPosition);
+    const options = useMemo(() => {
+        let extraOptions = {};
+        switch (variant) {
+            case "semi-donut":
+                extraOptions = {
+                    plotOptions: {
+                        pie: {
+                            startAngle: -90,
+                            endAngle: 90,
+                            offsetY: 10,
+                        },
+                    },
+                };
+                break;
+            case "monochrome-pie":
+                extraOptions = {
+                    theme: {
+                        monochrome: {
+                            enabled: true,
+                            shadeTo: "light",
+                            shadeIntensity: 0.65,
+                        },
+                    },
+                };
+                break;
+            case "gradient-donut":
+                extraOptions = {
+                    fill: {
+                        type: "gradient",
+                    },
+                };
+                break;
+            case "donut-with-pattern":
+                extraOptions = {
+                    fill: {
+                        type: "pattern",
+                        pattern: {
+                            style: ["verticalLines", "squares", "horizontalLines", "circles"],
+                        },
+                    },
+                };
+                break;
+            case "pie-with-image":
+                extraOptions = {
+                    fill: {
+                        type: "image",
+                        image: {
+                            src: [
+                                "https://i.imgur.com/UM3mrju.jpg",
+                                "https://i.imgur.com/NpPOqQq.jpg",
+                            ],
+                        },
+                    },
+                };
+                break;
+            case "update-donut":
+                extraOptions = {
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                labels: {
+                                    show: true,
+                                    total: {
+                                        show: true,
+                                        label: "Total",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                };
+                break;
+            case "pie":
+                extraOptions = {
+                    chart: { type: "pie" },
+                };
+                break;
+            default:
+                break;
+        }
+        return {
+            chart: {
+                type: variant.includes("pie") ? "pie" : "donut",
+            },
+            labels,
+            colors: seriesColors,
+            legend: {
+                position: validLegendPosition,
+                labels: {
+                    colors: mergedLegendStyle.colors,
+                    useSeriesColors: mergedLegendStyle.useSeriesColors,
+                },
+                markers: {
+                    size: mergedLegendStyle.markerSize,
+                    offsetX: mergedLegendStyle.markerOffsetX,
+                    offsetY: mergedLegendStyle.markerOffsetY,
+                    strokeWidth: 0,
+                    shape: "circle",
+                },
+                itemMargin: {
+                    horizontal: mergedLegendStyle.horizontalGap,
+                    vertical: mergedLegendStyle.verticalGap,
+                },
+            },
+            title: {
+                text: title,
+                align: titlePosition,
+                style: mergedTitleStyle,
+            },
+            dataLabels: { enabled: true },
+            ...extraOptions,
+            theme: { mode: chartThemeMode, ...extraOptions.theme },
+        };
+    }, [
+        variant,
+        labels,
+        seriesColors,
+        validLegendPosition,
+        mergedLegendStyle,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        chartThemeMode,
+    ]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
+};
+export default ApexPieChart;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import ReactApexChart from "react-apexcharts";
+import { useTheme } from "@chakra-ui/react";
+import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText";
+const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
+    const theme = useTheme();
+    const palette = theme.colors;
+    const chartThemeMode = isDarkCanvas(palette.backgroundColor.main) ? "dark" : "light";
+    const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);
+    const mergedLegendStyle = useMemo(() => {
+        const defaults = {
+            colors: palette.text[900],
+            position: "bottom",
+            useSeriesColors: false,
+        };
+        return { ...defaults, ...legendStyle };
+    }, [palette, legendStyle]);
+    const resolvedChartColors = useMemo(() => chartColors !== null && chartColors !== void 0 ? chartColors : getDefaultSeriesColors(palette), [chartColors, palette]);
+    const options = useMemo(() => {
+        let extraOptions = {};
+        switch (variant) {
+            case "basic":
+                extraOptions = {
+                    stroke: { colors: [palette.white] },
+                    fill: { opacity: 0.8 },
+                };
+                break;
+            case "monochrome":
+                extraOptions = {
+                    theme: {
+                        monochrome: {
+                            enabled: true,
+                            shadeTo: "light",
+                            shadeIntensity: 0.6,
+                        },
+                    },
+                    stroke: { colors: [palette.white] },
+                    fill: { opacity: 0.8 },
+                };
+                break;
+            default:
+                break;
+        }
+        return {
+            chart: { type: "polarArea" },
+            labels,
+            colors: resolvedChartColors,
+            legend: {
+                position: mergedLegendStyle.position,
+                labels: {
+                    colors: mergedLegendStyle.colors,
+                    useSeriesColors: mergedLegendStyle.useSeriesColors,
+                },
+            },
+            title: {
+                text: title,
+                align: titlePosition,
+                style: mergedTitleStyle,
+            },
+            dataLabels: { enabled: true },
+            ...extraOptions,
+            theme: { mode: chartThemeMode, ...extraOptions.theme },
+        };
+    }, [
+        variant,
+        labels,
+        resolvedChartColors,
+        mergedLegendStyle,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        palette.white,
+        chartThemeMode,
+    ]);
+    return (_jsx("div", { children: _jsx(ReactApexChart, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
+};
+export default ApexPolarChart;

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
+    const theme = useTheme();
+    return (_jsx(Breadcrumb, { spacing: spacing, separator: separator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => (_jsx(BreadcrumbItem, { isCurrentPage: isCurrentPage && index === items.length - 1, children: _jsx(BreadcrumbLink, { href: item.path, sx: { "&:hover, &:active": { textDecoration: "none" } }, onClick: (event) => {
+                    event.preventDefault();
+                    handleClick(item.path);
+                }, children: item.label }) }, index))) }));
+}

package/dist/esm/Components/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,5 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import Breadcrumbs from './Breadcrumbs';
+// import { BreadcrumbsProps } from './BreadcrumbsProps';
+export {};

package/dist/esm/Components/Breadcrumbs/BreadcrumbsProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Button/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Button as ChakraButton } from "@chakra-ui/react";
+function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }) {
+    return (_jsx(ChakraButton, { ...aria, type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+}
+export default memo(Button);

package/dist/esm/Components/Button/Button.stories.js

@@ -0,0 +1,5 @@
+// import React from 'react';
+// import { Meta, StoryObj } from '@storybook/react';
+// import Button from './Button';
+// import { fn } from '@storybook/test';
+export {};