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

package/dist/esm/Components/Header/Header.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, HStack, IconButton, Spacer, useDisclosure } from "@chakra-ui/react";
+import { HEADER_HEIGHT } from "../../Constants/Sidebar";
+import { MenuIcon, X } from "lucide-react";
+import React, { useState } from "react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { contrastRatio, relativeLuminance } from "../../Theme/tokens/builders/color";
+import DesktopMenu from "./components/desktopMenu";
+import MobileMenu from "./components/mobileMenu";
+/** Non-text UI accent (WCAG 1.4.11, >=3:1) — the underline/highlight, not running text. */
+const ACTIVE_ACCENT_TARGET = 3;
+/**
+ * Header's sidebar canvas (`bg`) is always dark regardless of app mode — `buildDarkPalette`
+ * deliberately leaves `sidebar` unchanged ("already near-black in light mode, so it needs no
+ * inversion"). But `themeColor.primary` follows whichever mode is active, so it can be either
+ * light-mode-shaped (50 lightest -> 900 darkest) or dark-mode-shaped (50 darkest -> 900 lightest).
+ * `accentTextOnCanvas` picks its search direction from the CANVAS's darkness, assuming that always
+ * implies a dark-mode-shaped scale — true everywhere else (canvas darkness there tracks app mode),
+ * false here, where the canvas never inverts but the scale still does. Walking toward 900 on a
+ * light-mode-shaped scale therefore walks toward darker, not lighter, and can land near-black.
+ *
+ * This detects the scale's own direction from its own data (`primary[50]` vs `primary[900]`
+ * luminance) rather than from the canvas or from theme-mode context, so it's correct in both app
+ * modes and has no dependency on being mounted inside `PixelizeThemeProvider` (Header must keep
+ * working for legacy `withTheme`-only consumers too).
+ */
+export const pickActiveAccent = (primary, canvas) => {
+    const runsDarkToLight = relativeLuminance(primary[50]) < relativeLuminance(primary[900]);
+    const order = runsDarkToLight
+        ? [500, 600, 700, 800, 900]
+        : [500, 400, 300, 200, 100, 50];
+    const found = order.find((rung) => contrastRatio(primary[rung], canvas) >= ACTIVE_ACCENT_TARGET);
+    return primary[found !== null && found !== void 0 ? found : order[order.length - 1]];
+};
+const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobileMenuClose }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [hoveredMenu, setHoveredMenu] = useState(null);
+    const { colors: themeColor } = useCustomTheme();
+    const bg = (_a = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _a !== void 0 ? _a : (_c = (_b = themeColor === null || themeColor === void 0 ? void 0 : themeColor.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[500];
+    const color = (_d = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _d !== void 0 ? _d : themeColor === null || themeColor === void 0 ? void 0 : themeColor.white;
+    const activeBg = (_e = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _e !== void 0 ? _e : pickActiveAccent(themeColor.primary, bg);
+    const hoverBg = (_f = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _f !== void 0 ? _f : (_h = (_g = themeColor === null || themeColor === void 0 ? void 0 : themeColor.sidebar) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[400];
+    const hoverText = (_j = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _j !== void 0 ? _j : themeColor === null || themeColor === void 0 ? void 0 : themeColor.white;
+    const isActive = (href) => href && active === href;
+    const closeMobileMenu = () => {
+        onClose();
+        onMobileMenuClose === null || onMobileMenuClose === void 0 ? void 0 : onMobileMenuClose();
+    };
+    const rightSlotWithApi = React.isValidElement(rightSlot)
+        ? React.cloneElement(rightSlot, { closeMobileMenu })
+        : rightSlot;
+    return (_jsxs(Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky", children: [_jsxs(Flex, { h: HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [_jsxs(HStack, { spacing: 6, align: "center", children: [_jsx(Box, { cursor: "pointer", children: logo }), _jsx(DesktopMenu, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })] }), _jsx(Spacer, {}), _jsxs(HStack, { spacing: 3, align: "center", children: [_jsx(HStack, { spacing: 4, display: { base: "none", md: "flex" }, children: rightSlotWithApi }), _jsx(HStack, { spacing: 2, display: { base: "flex", md: "none" }, children: rightSlotWithApi }), _jsx(IconButton, { variant: "unstyled", icon: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), _jsx(MobileMenu, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, rightSlot: rightSlotWithApi, onClose: closeMobileMenu })] }));
+};
+export default Header;

package/dist/esm/Components/Header/HeaderActions.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "@chakra-ui/react";
+import React from "react";
+import { CirclePlus, SquarePen } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText";
+import Select from "../Select/Select";
+import VeritcalDivider from "../Divider/Divider";
+const HeaderActions = ({ select, edit, create, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { colors } = useCustomTheme();
+    const elements = [];
+    if (select === null || select === void 0 ? void 0 : select.isSelect) {
+        elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
+    }
+    if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
+        elements.push(_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[500] }), _jsx(Text, { color: accentTextOnCanvas(colors === null || colors === void 0 ? void 0 : colors.secondary, (_d = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.main), children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+    }
+    if (create === null || create === void 0 ? void 0 : create.isCreatable) {
+        elements.push(_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500] }), _jsxs(Text, { color: accentTextOnCanvas(colors === null || colors === void 0 ? void 0 : colors.secondary, (_f = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _f === void 0 ? void 0 : _f.main), children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+    }
+    return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VeritcalDivider, {}), el] }, i))) }));
+};
+export default HeaderActions;

package/dist/esm/Components/Header/HeaderProps.js

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

package/dist/esm/Components/Header/components/desktopMenu.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, HStack, Stack, Button, Badge, Text, VStack, Collapse, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { onFilled } from "../../../Theme/tokens/builders/accentText";
+const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem", children: menuItems.map((item) => {
+            var _a, _b, _c, _d, _e, _f;
+            const hasChildren = !!item.children;
+            const isHovered = hoveredMenu === item.label;
+            return (_jsxs(Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [_jsx(Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? _jsx(ChevronDown, { size: 14 }) : undefined, 
+                        // bg={isActive(item.href) ? activeBg : "transparent"}
+                        // `activeBg` is only readable as an underline accent (WCAG 1.4.11, 3:1) — it comes
+                        // from accentTextOnCanvas walking a LIGHT-oriented scale (`themeColor.primary`)
+                        // against this ALWAYS-dark sidebar canvas, which searches the wrong direction and
+                        // can land near-black (measured ~1.0-1.1 contrast). Text stays on `color`, the
+                        // white-family ink Header already uses for every other item on this same canvas.
+                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: color, children: _jsxs(VStack, { spacing: 0, children: [item.badge && (_jsx(Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+                                    // backdropFilter="saturate(180%) blur(6px)"
+                                    // bg="whiteAlpha.800"
+                                    // color="gray.800"
+                                    px: 2, py: 0.5, children: (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label })), _jsx(Text, { children: item.label })] }) }), hasChildren && (_jsx(Collapse, { in: isHovered, animateOpacity: true, children: _jsx(Box, { position: "absolute", top: "100%", bg: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50], color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[900], rounded: "md", shadow: "md", minW: "10rem", zIndex: 10, children: _jsx(Stack, { spacing: 1, p: 2, children: (_f = item.children) === null || _f === void 0 ? void 0 : _f.map((subItem) => {
+                                    var _a, _b, _c, _d, _e, _f;
+                                    return (_jsx(Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "md", boxShadow: "sm", 
+                                                    // backdropFilter="saturate(180%) blur(6px)"
+                                                    // bg="whiteAlpha.800"
+                                                    // color="gray.800"
+                                                    px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), _jsx(Text
+                                                // text[800] is tuned for the background[50] canvas, not the activeBg
+                                                // fill this row switches to — onFilled picks whichever of white/black
+                                                // actually clears AA against that fill instead.
+                                                , { 
+                                                    // text[800] is tuned for the background[50] canvas, not the activeBg
+                                                    // fill this row switches to — onFilled picks whichever of white/black
+                                                    // actually clears AA against that fill instead.
+                                                    color: isActive(subItem.href)
+                                                        ? onFilled(activeBg, (_d = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _d !== void 0 ? _d : "#fff", (_e = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _e !== void 0 ? _e : "#000")
+                                                        : (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
+                                }) }) }) }))] }, item.label));
+        }) }));
+};
+export default DesktopMenu;

package/dist/esm/Components/Header/components/mobileMenu.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Button, Badge, Text, VStack, Collapse, HStack, } from "@chakra-ui/react";
+import React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }) => {
+    const [openMenuLabel, setOpenMenuLabel] = React.useState(null);
+    React.useEffect(() => {
+        if (!isOpen)
+            setOpenMenuLabel(null);
+    }, [isOpen]);
+    return (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { pb: 4, display: { md: "none" }, children: _jsxs(Stack, { spacing: 4, children: [menuItems.map((item) => {
+                        var _a, _b, _c, _d, _e;
+                        return item.children ? (_jsxs(Box, { px: 2, children: [_jsx(Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: item.children.some((subItem) => isActive(subItem.href))
+                                        ? activeBg
+                                        : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+                                                    // backdropFilter="saturate(180%) blur(6px)"
+                                                    // bg="whiteAlpha.800"
+                                                    // color="gray.800"
+                                                    px: 2, py: 0.5, children: item.badge.label })), _jsx(Text, { fontWeight: "bold", children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                            var _a, _b, _c;
+                                            return (_jsx(Button, { onClick: () => {
+                                                    var _a;
+                                                    (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
+                                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+                                                            // backdropFilter="saturate(180%) blur(6px)"
+                                                            // bg="whiteAlpha.800"
+                                                            // color="gray.800"
+                                                            px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), _jsx(Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                        }) }) })] }, item.label)) : (_jsx(Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+                                        // backdropFilter="saturate(180%) blur(6px)"
+                                        // bg="whiteAlpha.800"
+                                        // color="gray.800"
+                                        px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), _jsx(Text, { children: item.label })] }) }, item.label));
+                    }), rightSlot && _jsx(Box, { mt: 4, children: rightSlot })] }) }) }));
+};
+export default MobileMenu;

package/dist/esm/Components/Input/Input/Input.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Box, Input as ChakraInput, IconButton, useTheme } from "@chakra-ui/react";
+import { Eye, EyeOff } from "lucide-react";
+import { TextLabel } from "../../Common/FormLabel";
+import { FIELD_RADIUS } from "../../Common/fieldStyles";
+import ErrorComponent from "../../Common/ErrorComponent";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText";
+const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const theme = useTheme();
+    const { colors } = theme;
+    const [showPassword, setShowPassword] = useState(false);
+    const isPassword = type === "password";
+    const inputType = isPassword ? (showPassword ? "text" : "password") : type;
+    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured against the
+    // parent surface — up to `muted` (lightest). [500] fails there; [800] clears all named
+    // surfaces with margin (3.44-3.90).
+    const borderColor = error
+        ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
+        : value
+            ? (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[500]
+            : (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[800];
+    const shadowPrimary = (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
+    const shadowError = (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error;
+    return (_jsxs(Box, { className: inputBoxClassName, mb: 4, children: [_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), _jsxs(Box, { position: "relative", w: "100%", overflow: "hidden", children: [_jsx(ChakraInput, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: accentTextOnCanvas(colors.secondary, (_g = colors.backgroundColor) === null || _g === void 0 ? void 0 : _g.main), pr: isPassword ? 10 : 4, _hover: {
+                            borderColor: error
+                                ? (_j = (_h = colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[600]
+                                : value
+                                    ? (_k = colors.primary) === null || _k === void 0 ? void 0 : _k[600]
+                                    : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[400],
+                        }, _focus: {
+                            borderColor: error ? (_o = (_m = colors.semantic) === null || _m === void 0 ? void 0 : _m.error) === null || _o === void 0 ? void 0 : _o[500] : (_p = colors.primary) === null || _p === void 0 ? void 0 : _p[500],
+                            boxShadow: error
+                                ? `0 0 0 0.125rem ${shadowError}`
+                                : `0 0 0 0.125rem ${shadowPrimary}`,
+                            outline: "none",
+                        }, required: isRequired }), isPassword && (_jsx(IconButton, { type: "button", "aria-label": showPassword ? "Hide password" : "Show password", variant: "ghost", size: "sm", position: "absolute", right: 2, top: "50%", transform: "translateY(-50%)", icon: showPassword ? _jsx(Eye, { size: 20 }) : _jsx(EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[400] }))] }), error && _jsx(ErrorComponent, { error: error })] }));
+};
+export default React.memo(Input);

package/dist/esm/Components/Input/Input/InputProps.js

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

package/dist/esm/Components/Input/PhoneNumberInput.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { Box, Flex, Icon, Input, Select, InputGroup, InputLeftElement, FormControl, } from "@chakra-ui/react";
+import ErrorMessage from "../Common/ErrorMessage";
+import HelperText from "../Common/HelperText";
+import { TextLabel } from "../Common/FormLabel";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const getFlagEmoji = (countryCode) => {
+    if (!countryCode)
+        return "";
+    return countryCode
+        .toUpperCase()
+        .replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)));
+};
+const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
+const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
+const PhoneNumberInput = ({ size = "md", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, ref, name, minW, maxW, ...rest }) => {
+    const theme = useCustomTheme();
+    const getCountryTelCode = useCallback((countryCode) => {
+        var _a;
+        if (!countryCode)
+            return undefined;
+        return (_a = countries === null || countries === void 0 ? void 0 : countries.find(({ code }) => countryCode === code)) === null || _a === void 0 ? void 0 : _a.dial_code;
+    }, [countries]);
+    const [number, setNumber] = useState(value);
+    const [selectedCountry, setSelectedCountry] = useState(country);
+    const [countryCode, setCountryCode] = useState(country);
+    useEffect(() => {
+        if (country) {
+            const code = getCountryTelCode(country);
+            setSelectedCountry(country);
+            setCountryCode(code);
+        }
+    }, [country, getCountryTelCode]);
+    const handleCountryChange = (e) => {
+        const selected = e.target.value;
+        if (!selected) {
+            setSelectedCountry("");
+            setCountryCode("");
+            setNumber("");
+            onChange("");
+            return;
+        }
+        const code = getCountryTelCode(selected) || "";
+        setSelectedCountry(selected);
+        setCountryCode(code);
+        onChange(codeValueReturn ? `${code} ${number}`.trim() : `${number}`);
+    };
+    const handleNumberChange = (e) => {
+        if (countryCode) {
+            let numValue = e.target.value;
+            numValue = numValue.replace(/[^+\d\s]/g, "");
+            setNumber(numValue);
+            onChange(codeValueReturn ? `${countryCode} ${numValue}`.trim() : `${numValue}`);
+        }
+        else {
+            return;
+        }
+    };
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { size: size, ...rest, children: [_jsxs(InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%", children: [showCountrySelect && _jsx(_Fragment, { children: _jsxs(Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, width: sizeToWidth[size], opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, size: size, pt: sizeToPt[size], iconColor: theme.colors.gray[500], children: [_jsx("option", { value: "", children: "Select Country" }), countries.map((option) => (_jsx("option", { value: option.code, children: option.country }, option.code)))] }) }), _jsx(Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between", children: selectedCountry ? (_jsx(Box, { fontSize: "1.2rem", children: getFlagEmoji(selectedCountry) })) : (_jsx(Icon, { viewBox: "0 0 24 24", boxSize: "1rem", children: _jsx("path", { fill: "currentColor", d: "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.79,14.8 16.33,14.67 16.8,14.82C18.17,15.27 19.65,15.5 21,15.5C21.55,15.5 22,15.95 22,16.5V20C22,20.55 21.55,21 21,21C10.61,21 3,13.39 3,3C3,2.45 3.45,2 4,2H7.5C8.05,2 8.5,2.45 8.5,3C8.5,4.35 8.73,5.83 9.18,7.2C9.33,7.67 9.2,8.21 8.82,8.59L6.62,10.79Z" }) })) })] }), _jsx(Input, { type: "tel", pl: showCountrySelect ? "4rem" : "2rem", value: number, id: inputId, onChange: handleNumberChange, onBlur: onBlur, onFocus: onFocus, isReadOnly: isReadOnly, name: name, size: size, height: height, ref: ref, autoComplete: autoComplete, placeholder: placeholder, disabled: !selectedCountry, isInvalid: error })] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+};
+export default PhoneNumberInput;

package/dist/esm/Components/Input/PhoneNumberInputProps.js

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

package/dist/esm/Components/Input/Switch/InputSwitch.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch, FormControl, FormLabel, HStack, Box, } from "@chakra-ui/react";
+import { TextLabel } from "../../Common/FormLabel";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+export const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, label, isInformation, informationMessage, isRequired, size = "md", ...props }) => {
+    const theme = useCustomTheme();
+    // Read the palette directly — it is already swapped for the active mode, so pairing the rungs
+    // through useColorModeValue would adapt twice and pick the wrong rung on the dark canvas.
+    const activeColor = theme.colors.primary[500];
+    const inactiveColor = theme.colors.gray[300];
+    const sizeStyles = {
+        sm: { fontSize: "sm", spacing: 1 },
+        md: { fontSize: "md", spacing: 2 },
+        lg: { fontSize: "lg", spacing: 3 },
+    };
+    return (_jsxs(FormControl, { children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsx(Box, { display: "flex", alignItems: "center", flexGrow: 1, children: _jsxs(HStack, { spacing: sizeStyles[size].spacing, children: [switchText && switchTextPosition === "left" && (_jsx(FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText })), _jsx(Switch, { id: id, size: size, isChecked: isChecked, colorScheme: "blue", sx: {
+                                "span.chakra-switch__track": {
+                                    bg: isChecked ? activeColor : inactiveColor,
+                                },
+                            }, ...props }), switchText && switchTextPosition === "right" && (_jsx(FormLabel, { mb: "0", htmlFor: id, fontSize: sizeStyles[size].fontSize, cursor: "pointer", children: switchText }))] }) })] }));
+};

package/dist/esm/Components/Input/TextInput.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { Box, FormControl, Input, InputGroup, InputLeftElement, InputRightElement, } from "@chakra-ui/react";
+import { getTextInputIconWrapperSx } from "./textInputIconSize";
+import { TextLabel } from "../Common/FormLabel";
+import HelperText from "../Common/HelperText";
+import ErrorMessage from "../Common/ErrorMessage";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder = "Placeholder", width = "100%", height, error, errorMessage, helperText, onRightIconclick, inputRightIcon, inputLeftIcon, onLeftIconClick, inputGroupStyle, inputStyle, size = "md", isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, ...props }, ref) => {
+    const theme = useCustomTheme();
+    const sizeKey = typeof size === "string" ? size : "md";
+    const iconScaleSx = getTextInputIconWrapperSx(sizeKey);
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { style: inputGroupStyle, size: size, height: height, children: [inputLeftIcon && (_jsx(InputLeftElement, { onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none", ...leftElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconScaleSx, color: theme.colors.gray[500], children: inputLeftIcon }) })), _jsx(Input, { type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, ...(height != null && { height }), isInvalid: error, ref: ref, autoComplete: autoComplete, ...inputStyle, ...props }), inputRightIcon && (_jsx(InputRightElement, { onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none", ...rightElementStyle, height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconScaleSx, children: inputRightIcon }) }))] }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+});
+TextInput.displayName = "TextInput";
+export default React.memo(TextInput);

package/dist/esm/Components/Input/TextInput.stories.js

@@ -0,0 +1,7 @@
+// import React from "react";
+// import type { Meta, StoryObj } from "@storybook/react";
+// import { fn } from "@storybook/test";
+// import { TextInputProps } from "./TextInputProps";
+// import TextInput from "./TextInput";
+// import { useState } from "react";
+export {};

package/dist/esm/Components/Input/TextInput.styles.js

@@ -0,0 +1,101 @@
+export const Input = {
+    baseStyle: {
+        field: {
+            fontWeight: 500,
+            fontSize: "0.875rem",
+            letterSpacing: "0.044rem",
+            pt: "0.813rem",
+            pb: "0.813rem",
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "0.5rem",
+            transition: "border-color 0.2s, box-shadow 0.2s",
+            _placeholder: {
+                fontStyle: "italic",
+            },
+        },
+    },
+    sizes: {
+        sm: {
+            field: {
+                h: "2rem",
+                fontSize: "0.8125rem",
+            },
+        },
+        md: {
+            field: {
+                h: "2.75rem",
+                fontSize: "0.875rem",
+            },
+        },
+        lg: {
+            field: {
+                h: "3.25rem",
+                fontSize: "0.9375rem",
+            },
+        },
+    },
+    variants: {
+        outline: (props) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            const { theme } = props;
+            const errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            // [800], not [500]/[700]: the resting border IS the control boundary (WCAG 1.4.11
+            // needs >=3.0), measured against the control's actual parent surface — which can be
+            // any named elevation up to `muted` (the lightest). [700] only clears the canvas-level
+            // surfaces (main/base); it fails (2.41-2.72) against `muted` in every brand. [800]
+            // clears all 12 named surfaces with margin (3.44-3.90) and improves light mode too.
+            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800]) !== null && _e !== void 0 ? _e : "gray.400";
+            const shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            const shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            const primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                field: {
+                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    border: "0.063rem solid",
+                    borderColor,
+                    _hover: {
+                        borderColor: primary,
+                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        _hover: {
+                            borderColor: errorColor,
+                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                    },
+                    _readOnly: {
+                        boxShadow: 'inherit',
+                    },
+                    _disabled: {
+                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                        opacity: 1,
+                        cursor: "not-allowed",
+                        _hover: {
+                            border: "0.063rem solid",
+                            borderColor,
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/esm/Components/Input/TextInputProps.js

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

package/dist/esm/Components/Input/textInputIconSize.js

@@ -0,0 +1,36 @@
+/** Pixels: aligned with `Input` field density (Chakra `sizes.6`–`12` and typical Lucide use). */
+const TEXT_INPUT_ICON_PX = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 24,
+};
+/**
+ * Returns icon target width/height in px for a Chakra `Input` / `InputGroup` `size`.
+ */
+export function getTextInputIconSizePx(size) {
+    var _a;
+    if (!size)
+        return TEXT_INPUT_ICON_PX.md;
+    return (_a = TEXT_INPUT_ICON_PX[size]) !== null && _a !== void 0 ? _a : TEXT_INPUT_ICON_PX.md;
+}
+/**
+ * Scales SVG icons in the icon slot (e.g. Lucide) to match field size; plain `fontSize` does not
+ * affect them because they set explicit width/height.
+ */
+export function getTextInputIconWrapperSx(size) {
+    const px = getTextInputIconSizePx(size);
+    return {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 0,
+        flexShrink: 0,
+        // Override Lucide/inline width on SVG; cover direct or nested (e.g. one wrapper) icons
+        "& > svg, & > * svg, & svg": {
+            width: `${px}px !important`,
+            height: `${px}px !important`,
+        },
+    };
+}

package/dist/esm/Components/InputTextArea/InputTextArea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, Textarea, } from "@chakra-ui/react";
+import { TextLabel } from "../Common/FormLabel";
+import ErrorMessage from "../Common/ErrorMessage";
+import HelperText from "../Common/HelperText";
+export default function InputTextArea({ label, placeholder, value, onChange, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }) {
+    return (_jsxs(FormControl, { children: [label && _jsx(TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), _jsx(Textarea, { id: id, placeholder: placeholder, value: value, onChange: onChange, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+}

package/dist/esm/Components/InputTextArea/InputTextArea.style.js

@@ -0,0 +1,77 @@
+export const Textarea = {
+    baseStyle: {
+        fontWeight: 500,
+        fontSize: "0.875rem",
+        letterSpacing: "0.044rem",
+        pt: "0.813rem",
+        pb: "0.813rem",
+        borderRadius: "0.5rem",
+        transition: "border-color 0.2s, box-shadow 0.2s",
+        _placeholder: {
+            fontStyle: "italic",
+        },
+    },
+    sizes: {
+        md: {
+            fontSize: "0.875rem",
+            h: "2.75rem",
+        },
+    },
+    variants: {
+        outline: (props) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            const { theme } = props;
+            const errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            // [800], not [500]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
+            // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
+            // [800] clears all named surfaces with margin (3.44-3.90).
+            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800]) !== null && _e !== void 0 ? _e : "gray.400";
+            const shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            const shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            const primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                border: "0.063rem solid",
+                borderColor,
+                bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                _hover: {
+                    borderColor: primary,
+                    outline: "0",
+                },
+                _focus: {
+                    borderColor: primary,
+                    boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                    outline: "0",
+                },
+                _invalid: {
+                    borderColor: errorColor,
+                    boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                    _hover: {
+                        borderColor: errorColor,
+                        outline: "0",
+                    },
+                    _focus: {
+                        borderColor: errorColor,
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        outline: "0",
+                    },
+                },
+                _readOnly: {
+                    boxShadow: 'inherit',
+                },
+                _disabled: {
+                    bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                    opacity: 1,
+                    cursor: "not-allowed",
+                    _hover: {
+                        border: "0.063rem solid",
+                        borderColor,
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/esm/Components/InputTextArea/InputTextAreaProps.js

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

package/dist/esm/Components/KanbanBoard/AccountCard.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from "react";
+import { Box, Flex, Text, Tooltip, HStack, VStack, Collapse, Spacer, } from "@chakra-ui/react";
+import { ChevronDown, ChevronUp, ExternalLink, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import AccountRow from "./AccountRow";
+const excludeKeys = ["id", "details"];
+const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const { colors } = useCustomTheme();
+    const keys = useMemo(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
+    const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
+    const handleToggle = () => {
+        onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
+    };
+    return (_jsx(Box, { role: "group", width: "100%", borderRadius: "0.625rem", background: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, boxShadow: "0 0.063rem 0.125rem rgba(0,0,0,0.04)", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+            borderColor: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[300],
+            boxShadow: "0 0.25rem 0.75rem rgba(0,0,0,0.08)",
+            transform: "translateY(-0.063rem)",
+        }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[700], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "0.8125rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[600], fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[50], color: (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[600] }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[50], color: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[600] }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: _jsx(ExternalLink, { size: 15 }) }) })] })] })] }) }));
+});
+export default AccountCard;