pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/ProductDetails/ProductImageSlider.js

@@ -1,188 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Badge, Box, Flex, IconButton, Image, AspectRatio, VStack, HStack, useBreakpointValue, } from "@chakra-ui/react";
-import React, { useState } from "react";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Play, } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-export default function ProductImageSlider({ images, thumbHeight = 60, imageSize = 480, thumbnailsToShow = 6, batch, }) {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [thumbStartIndex, setThumbStartIndex] = useState(0);
-    const [transformOrigin, setTransformOrigin] = useState("center center");
-    const [isHovered, setIsHovered] = useState(false);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const theme = useCustomTheme();
-    const isMobile = useBreakpointValue({ base: true, md: false });
-    const getYouTubeId = (url) => {
-        const patterns = [
-            /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/watch\?[^#]*v=([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/shorts\/([A-Za-z0-9_-]{6,})/i,
-            /youtube\.com\/live\/([A-Za-z0-9_-]{6,})/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const getVimeoId = (url) => {
-        const patterns = [
-            /vimeo\.com\/(\d+)/i,
-            /player\.vimeo\.com\/video\/(\d+)/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const getDailymotionId = (url) => {
-        const patterns = [
-            /dailymotion\.com\/video\/([A-Za-z0-9]+)/i,
-            /dai\.ly\/([A-Za-z0-9]+)/i,
-        ];
-        for (const re of patterns) {
-            const m = url.match(re);
-            if (m === null || m === void 0 ? void 0 : m[1])
-                return m[1];
-        }
-        return undefined;
-    };
-    const isVideoUrl = (url) => /\.(mp4|webm|ogg)(\?|#|$)/i.test(url) ||
-        !!(getYouTubeId(url) || getVimeoId(url) || getDailymotionId(url));
-    const getThumbForItem = (url) => {
-        const yt = getYouTubeId(url);
-        if (yt)
-            return `https://img.youtube.com/vi/${yt}/hqdefault.jpg`;
-        const vm = getVimeoId(url);
-        if (vm)
-            return `https://vumbnail.com/${vm}.jpg`;
-        const dm = getDailymotionId(url);
-        if (dm)
-            return `https://www.dailymotion.com/thumbnail/video/${dm}`;
-        return undefined;
-    };
-    React.useEffect(() => {
-        setIsPlaying(false);
-    }, [activeIndex]);
-    const totalThumbs = (images === null || images === void 0 ? void 0 : images.length) || 0;
-    const hasMultiple = totalThumbs > 1;
-    const visibleThumbnails = images === null || images === void 0 ? void 0 : images.slice(thumbStartIndex, thumbStartIndex + thumbnailsToShow);
-    const canScrollUp = thumbStartIndex > 0;
-    const canScrollDown = thumbStartIndex + thumbnailsToShow < totalThumbs;
-    const handleThumbScroll = (direction) => {
-        if (direction === "up" && canScrollUp) {
-            setThumbStartIndex((prev) => {
-                const newStart = Math.max(prev - 1, 0);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-        else if (direction === "down" && canScrollDown) {
-            setThumbStartIndex((prev) => {
-                const newStart = Math.min(prev + 1, totalThumbs - thumbnailsToShow);
-                setActiveIndex(newStart);
-                return newStart;
-            });
-        }
-    };
-    const updateActiveIndex = (newIndex) => {
-        setActiveIndex(newIndex);
-        // Scroll thumbnails window if active index is outside the current visible range
-        if (newIndex < thumbStartIndex) {
-            setThumbStartIndex(newIndex);
-        }
-        else if (newIndex >= thumbStartIndex + thumbnailsToShow) {
-            setThumbStartIndex(newIndex - thumbnailsToShow + 1);
-        }
-    };
-    return (_jsx(Flex, { maxW: "6xl", mx: "auto", gap: 4, direction: isMobile ? "column" : "row", children: isMobile ? (_jsxs(_Fragment, { children: [_jsxs(Box, { w: "full", 
-                    // h={`${imageSize}px`}
-                    position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
-                        if (isMobile)
-                            return;
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                        setTransformOrigin(`${x}% ${y}%`);
-                    }, onMouseEnter: () => !isMobile && setIsHovered(true), onMouseLeave: () => {
-                        setIsHovered(false);
-                        setTransformOrigin("center center");
-                    }, children: [_jsx(Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: _jsx(Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
-                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                            const yt = getYouTubeId(url);
-                            const vimeo = getVimeoId(url);
-                            const dm = getDailymotionId(url);
-                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                            if (isVideo) {
-                                if (!isPlaying) {
-                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: _jsx(Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
-                                }
-                                return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: !isMobile && isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease" }));
-                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] }), hasMultiple && (_jsxs(HStack, { spacing: 2, align: "center", justify: "center", children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Left", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm" }), visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
-                            const actualIndex = thumbStartIndex + index;
-                            const url = src.imageUrl;
-                            const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                            const thumb = src.thumb || getThumbForItem(url);
-                            return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                    ? `0.125rem solid ${theme.colors.gray[500]}`
-                                    : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover" })) }, actualIndex));
-                        }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Right", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm" })] }))] })) : (_jsxs(_Fragment, { children: [hasMultiple && (_jsxs(Box, { w: `${thumbHeight}px`, h: `${thumbHeight * thumbnailsToShow}px`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", borderRadius: "md", overflow: "hidden", children: [_jsx(IconButton, { icon: _jsx(ChevronUp, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Up", onClick: () => handleThumbScroll("up"), isDisabled: !canScrollUp, variant: "ghost", size: "sm", m: 1 }), _jsx(VStack, { spacing: 2, flex: "1", overflow: "hidden", children: visibleThumbnails === null || visibleThumbnails === void 0 ? void 0 : visibleThumbnails.map((src, index) => {
-                                const actualIndex = thumbStartIndex + index;
-                                const url = src.imageUrl;
-                                const isVideo = src.isImage !== undefined ? src.isImage === false : isVideoUrl(url);
-                                const thumb = src.thumb || getThumbForItem(url);
-                                return (_jsx(Box, { w: `${thumbHeight}px`, h: `${thumbHeight}px`, borderRadius: "md", overflow: "hidden", cursor: "pointer", border: actualIndex === activeIndex
-                                        ? `0.125rem solid ${theme.colors.gray[500]}`
-                                        : "0.125rem solid transparent", opacity: actualIndex === activeIndex ? 1 : 0.5, onClick: () => setActiveIndex(actualIndex), _hover: { opacity: 1 }, transition: "all 0.2s", position: "relative", children: isVideo ? (thumb ? (_jsxs(_Fragment, { children: [_jsx(Image, { src: thumb, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) })] })) : (_jsx(Flex, { w: "100%", h: "100%", align: "center", justify: "center", bg: theme.colors.gray[100], children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "md", p: 1.5, children: _jsx(Play, { size: 14, color: theme.colors.red[500] }) }) }))) : (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", alt: `Thumb ${actualIndex}` })) }, actualIndex));
-                            }) }), _jsx(IconButton, { icon: _jsx(ChevronDown, { size: 16, color: theme.colors.gray[500] }), "aria-label": "Scroll Down", onClick: () => handleThumbScroll("down"), isDisabled: !canScrollDown, variant: "ghost", size: "sm", m: 1 })] })), _jsxs(Box, { w: `${imageSize}px`, h: `${imageSize}px`, position: "relative", overflow: "hidden", borderRadius: "md", boxShadow: "md", onMouseMove: (e) => {
-                        const bounds = e.currentTarget.getBoundingClientRect();
-                        const x = ((e.clientX - bounds.left) / bounds.width) * 100;
-                        const y = ((e.clientY - bounds.top) / bounds.height) * 100;
-                        setTransformOrigin(`${x}% ${y}%`);
-                    }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
-                        setIsHovered(false);
-                        setTransformOrigin("center center");
-                    }, children: [_jsx(Box, { position: "absolute", top: "2", left: "2", zIndex: "1", children: _jsx(Badge, { colorScheme: batch === null || batch === void 0 ? void 0 : batch.color, variant: "solid", children: batch === null || batch === void 0 ? void 0 : batch.label }) }), (() => {
-                            const item = images === null || images === void 0 ? void 0 : images[activeIndex];
-                            const url = (item === null || item === void 0 ? void 0 : item.imageUrl) || "";
-                            const isVideo = (item === null || item === void 0 ? void 0 : item.isImage) !== undefined ? item.isImage === false : isVideoUrl(url);
-                            const yt = getYouTubeId(url);
-                            const vimeo = getVimeoId(url);
-                            const dm = getDailymotionId(url);
-                            const thumb = (item === null || item === void 0 ? void 0 : item.thumb) || getThumbForItem(url);
-                            if (isVideo) {
-                                if (!isPlaying) {
-                                    return (_jsxs(Box, { position: "relative", w: "100%", h: `${imageSize}px`, children: [_jsx(Image, { src: thumb || url, w: "100%", h: "100%", objectFit: "cover" }), _jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", children: _jsx(Box, { bg: theme.colors.background[50], borderRadius: "full", boxShadow: "lg", p: 3, cursor: "pointer", onClick: () => setIsPlaying(true), children: _jsx(Play, { size: 24, color: theme.colors.red[500] }) }) })] }));
-                                }
-                                return yt ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.youtube.com/embed/${yt}?rel=0&autoplay=1`, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, border: "0" }) })) : vimeo ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://player.vimeo.com/video/${vimeo}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : dm ? (_jsx(AspectRatio, { ratio: 16 / 9, w: "100%", children: _jsx(Box, { as: "iframe", src: `https://www.dailymotion.com/embed/video/${dm}?autoplay=1`, allow: "autoplay; fullscreen; picture-in-picture", allowFullScreen: true, border: "0" }) })) : (_jsx(Box, { as: "video", src: url, w: "100%", h: `${imageSize}px`, controls: true, autoPlay: true, sx: { objectFit: "contain", backgroundColor: "black" } }));
-                            }
-                            return (_jsx(Image, { src: url, w: "100%", h: "100%", objectFit: "cover", transformOrigin: transformOrigin, transform: isHovered ? "scale(1.6)" : "scale(1)", transition: "transform 0.3s ease", cursor: isHovered ? "zoom-in" : "default" }));
-                        })(), hasMultiple && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Previous", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === 0 ? max - 1 : activeIndex - 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", left: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" }), _jsx(IconButton, { icon: _jsx(ChevronRight, { size: 20, color: theme.colors.gray[500] }), "aria-label": "Next", onClick: () => {
-                                        var _a;
-                                        const max = ((_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 1);
-                                        const newIndex = activeIndex === max - 1 ? 0 : activeIndex + 1;
-                                        updateActiveIndex(newIndex);
-                                    }, position: "absolute", right: "2", top: "50%", transform: "translateY(-50%)", variant: "ghost", colorScheme: "gray" })] }))] })] })) }));
-}

package/dist/esm/Components/Table/hooks/useDebounce.js

@@ -1,22 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-// First, create a custom debounce hook
-const useDebounce = (callback, delay) => {
-    const timeoutRef = useRef();
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    const debouncedCallback = useCallback((...args) => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-            callback(...args);
-        }, delay);
-    }, [callback, delay]);
-    return debouncedCallback;
-};
-export default useDebounce;

package/dist/esm/Components/Trail/EditableCell.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { Box, Input, Button, Menu, MenuButton, MenuList, MenuItem, useOutsideClick, } from "@chakra-ui/react";
-import { ChevronDown } from "lucide-react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-export const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
-    const { colors } = useCustomTheme();
-    const cellRef = useRef(null);
-    useOutsideClick({
-        ref: cellRef,
-        handler: () => {
-            var _a;
-            return handleCellChange(row.id, column.label, String((_a = row[column.label]) !== null && _a !== void 0 ? _a : ""));
-        },
-    });
-    const value = row[column.label] || "-";
-    if (isEditable) {
-        if (column.label === "dueDate") {
-            return (_jsx(Box, { width: "50%", ref: cellRef, children: _jsx(Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
-        }
-        else if (column.label === "priority") {
-            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsxs(Menu, { isOpen: true, children: [_jsx(MenuButton, { as: Button, rightIcon: _jsx(ChevronDown, {}), bg: colors.teal[50], color: accentTextOnCanvas(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), _jsxs(MenuList, { children: [_jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: colors.teal[100] }, children: "Low" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.teal[100] }, children: "High" })] })] }) }));
-        }
-        else {
-            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsx(Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
-        }
-    }
-    return (_jsx("span", { onClick: () => handleCellClick(row.id, column.id), children: value }));
-};

package/dist/esm/Components/Trail/SelectAllCheckbox.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox } from "@chakra-ui/react";
-export const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
-    return (_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
-};

package/dist/esm/Components/Trail/TrailWorks.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const TrailWorks = () => {
-    const { colors } = useCustomTheme();
-    const cellBorder = colors.boxborder[200];
-    const data = [
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-        {
-            contact: "John Doe",
-            type: "Customer",
-            deals: 5,
-            phone: "555-555-5555",
-            email: "hhhhh@gmail.com",
-        },
-    ];
-    const columns = [
-        {
-            Header: "Contact",
-            accessor: "contact",
-        },
-        {
-            Header: "Type",
-            accessor: "type",
-        },
-        {
-            Header: "Deals",
-            accessor: "deals",
-        },
-        {
-            Header: "Phone",
-            accessor: "phone",
-        },
-        {
-            Header: "Email",
-            accessor: "email",
-        },
-    ];
-    const renderRow = (row, index) => {
-        return (_jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Td, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, colIndex) => {
-                    return (_jsx(Td, { border: "1px solid", borderColor: cellBorder, children: row[column.accessor] }, colIndex));
-                })] }, index));
-    };
-    return (_jsx(Box, { width: "100%", overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "md", border: "1px solid", borderColor: cellBorder, children: [_jsx(Thead, { border: "1px solid", borderColor: cellBorder, children: _jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Th, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, index) => {
-                                return (_jsx(Th, { border: "1px solid", borderColor: cellBorder, children: column.Header }, index));
-                            })] }) }), _jsx(Tbody, { border: "1px solid", borderColor: cellBorder, children: data.map((row, index) => renderRow(row, index)) })] }) }));
-};
-export default TrailWorks;

package/dist/esm/Components/Trail/data.js

@@ -1,26 +0,0 @@
-export const initialColumns = [
-    { id: 1, label: "project" },
-    { id: 2, label: "owner" },
-    { id: 3, label: "status" },
-    { id: 4, label: "priority" },
-    { id: 5, label: "dueDate" },
-];
-export const initialRows = [
-    {
-        id: 1,
-        project: "Project A",
-        owner: "Owner A",
-        status: "In Progress",
-        priority: "High",
-        dueDate: "2023-12-31",
-    },
-    {
-        id: 2,
-        project: "Project B",
-        owner: "Owner B",
-        status: "Completed",
-        priority: "Medium",
-        dueDate: "2023-11-30",
-    },
-    // Add more initial rows as needed
-];

package/dist/esm/Theme/chakra/Avatar.styles.js

@@ -1,25 +0,0 @@
-import { paletteOf } from "./paletteFromTheme.js";
-import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
-import { avatarAnatomy } from "@chakra-ui/anatomy";
-const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(avatarAnatomy.keys);
-const $badgeBorder = cssVar("avatar-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
- * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
- * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
- * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
- */
-const baseStyle = definePartsStyle(({ theme }) => {
-    const border = paletteOf(theme).backgroundColor.light;
-    return {
-        badge: {
-            [$badgeBorder.variable]: border,
-        },
-        container: {
-            [$badgeBorder.variable]: border,
-        },
-    };
-});
-export const Avatar = defineMultiStyleConfig({
-    baseStyle,
-});

package/dist/esm/Theme/chakra/Switch.styles.js

@@ -1,19 +0,0 @@
-import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
-import { switchAnatomy } from "@chakra-ui/anatomy";
-import { paletteOf } from "./paletteFromTheme.js";
-const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
-const $thumbBg = cssVar("switch-thumb-bg");
-/**
- * Same bug as Slider's thumb: Chakra's own Switch thumb baseStyle hardcodes `bg: "white"` with no
- * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
- * regardless of mode.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    thumb: {
-        [$thumbBg.variable]: paletteOf(theme).backgroundColor.light,
-        bg: $thumbBg.reference,
-    },
-}));
-export const Switch = defineMultiStyleConfig({
-    baseStyle,
-});

package/dist/esm/Theme/chakra/Tabs.styles.js

@@ -1,33 +0,0 @@
-import { paletteOf } from "./paletteFromTheme.js";
-import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
-import { tabsAnatomy } from "@chakra-ui/anatomy";
-const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
-const $bg = cssVar("tabs-bg");
-const $border = cssVar("tabs-border-color");
-/**
- * Same bug class as Menu/Modal/Popover: Chakra's own Tabs baseStyle hardcodes the selected tab's
- * "cutout" color to `colors.white` outside `_dark` for two variants — `enclosed`'s selected border
- * (meant to match the panel it sits against) and `enclosed-colored`'s selected background — both
- * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
- * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
- */
-const variantEnclosed = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$border.variable]: paletteOf(theme).backgroundColor.light,
-        },
-    },
-}));
-const variantEnclosedColored = definePartsStyle(({ theme }) => ({
-    tab: {
-        _selected: {
-            [$bg.variable]: paletteOf(theme).backgroundColor.light,
-        },
-    },
-}));
-export const Tabs = defineMultiStyleConfig({
-    variants: {
-        enclosed: variantEnclosed,
-        "enclosed-colored": variantEnclosedColored,
-    },
-});

package/dist/esm/services/feedback.js

@@ -1,15 +0,0 @@
-export async function submitFeedback(options) {
-    const { endpoint, payload, headers } = options;
-    const res = await fetch(endpoint, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            ...(headers !== null && headers !== void 0 ? headers : {}),
-        },
-        body: JSON.stringify(payload),
-    });
-    if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        throw new Error(`Feedback submit failed: ${res.status} ${text}`);
-    }
-}

package/dist/services/feedback.d.ts

@@ -1,12 +0,0 @@
-export type SubmitFeedbackOptions = {
-    endpoint: string;
-    payload: {
-        type: "comments" | "suggestions" | "questions";
-        message: string;
-        firstName: string;
-        lastName: string;
-        email: string;
-    };
-    headers?: Record<string, string>;
-};
-export declare function submitFeedback(options: SubmitFeedbackOptions): Promise<void>;

package/dist/services/feedback.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.submitFeedback = submitFeedback;
-async function submitFeedback(options) {
-    const { endpoint, payload, headers } = options;
-    const res = await fetch(endpoint, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            ...(headers !== null && headers !== void 0 ? headers : {}),
-        },
-        body: JSON.stringify(payload),
-    });
-    if (!res.ok) {
-        const text = await res.text().catch(() => "");
-        throw new Error(`Feedback submit failed: ${res.status} ${text}`);
-    }
-}