pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Components/Form/FormWrapper.js

@@ -4,8 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormWrapper = ({ icon, text, children, }) => {
-    var _a, _b, _c, _d, _e;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: (_a = colors === null || colors === void 0 ? void 0 : colors.header) === null || _a === void 0 ? void 0 : _a[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "0.25rem", bg: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[50], border: `0.075rem solid ${(_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${(_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary}`, p: "1.5rem", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "base", bg: colors.background[50], border: `0.075rem solid ${colors.border[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${colors.boxShadow.primary}`, p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/Header/Header.d.ts

@@ -19,4 +19,3 @@ import { HeaderProps } from "./HeaderProps";
 export declare const pickActiveAccent: (primary: ColorScale, canvas: string) => string;
 declare const Header: FC<HeaderProps>;
 export default Header;
-//# sourceMappingURL=Header.d.ts.map

package/dist/Components/Header/Header.js

@@ -73,15 +73,15 @@ const pickActiveAccent = (primary, canvas) => {
 };
 exports.pickActiveAccent = pickActiveAccent;
 const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobileMenuClose }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e;
     const { isOpen, onOpen, onClose } = (0, react_1.useDisclosure)();
     const [hoveredMenu, setHoveredMenu] = (0, react_2.useState)(null);
     const { colors: themeColor } = (0, useCustomTheme_1.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 : (0, exports.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 bg = (_a = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _a !== void 0 ? _a : themeColor.sidebar.background[500];
+    const color = (_b = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _b !== void 0 ? _b : themeColor.white;
+    const activeBg = (_c = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _c !== void 0 ? _c : themeColor.sidebar.activeIcon;
+    const hoverBg = (_d = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _d !== void 0 ? _d : themeColor.sidebar.background[400];
+    const hoverText = (_e = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _e !== void 0 ? _e : themeColor.white;
     const isActive = (href) => href && active === href;
     const closeMobileMenu = () => {
         onClose();

package/dist/Components/Header/HeaderActions.d.ts

@@ -20,4 +20,3 @@ declare const HeaderActions: ({ select, edit, create, }: {
     };
 }) => import("react/jsx-runtime").JSX.Element;
 export default HeaderActions;
-//# sourceMappingURL=HeaderActions.d.ts.map

package/dist/Components/Header/HeaderActions.js

@@ -12,17 +12,17 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const Select_1 = __importDefault(require("../Select/Select"));
 const Divider_1 = __importDefault(require("../Divider/Divider"));
 const HeaderActions = ({ select, edit, create, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
         elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { 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((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[500] }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.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"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: colors.text[500] }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500] }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (0, accentText_1.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"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: colors.text[500] }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };

package/dist/Components/Header/HeaderProps.d.ts

@@ -46,4 +46,3 @@ export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pic
     onClose?: () => void;
 };
 export {};
-//# sourceMappingURL=HeaderProps.d.ts.map

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -1,4 +1,3 @@
 import { DesktopMenuProps } from "../HeaderProps";
 declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }: DesktopMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default DesktopMenu;
-//# sourceMappingURL=desktopMenu.d.ts.map

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

@@ -8,27 +8,14 @@ const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.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;
+            var _a, _b, _c, _d;
             const hasChildren = !!item.children;
             const isHovered = hoveredMenu === item.label;
             return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? (0, jsx_runtime_1.jsx)(lucide_react_1.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: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsx)(react_1.Text
+                        // `activeBg` is the rail's 3:1 non-text accent; label ink stays on `color`.
+                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: color, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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", px: 2, py: 0.5, children: (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "100%", bg: colors.background[50], color: colors.text[900], rounded: "md", shadow: "md", minW: "10rem", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 1, p: 2, children: (_d = item.children) === null || _d === void 0 ? void 0 : _d.map((subItem) => {
+                                    var _a, _b, _c;
+                                    return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.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", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.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.
@@ -37,8 +24,8 @@ const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg,
                                                     // fill this row switches to — onFilled picks whichever of white/black
                                                     // actually clears AA against that fill instead.
                                                     color: isActive(subItem.href)
-                                                        ? (0, accentText_1.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));
+                                                        ? (0, accentText_1.onFilled)(activeBg, colors.white, colors.black)
+                                                        : colors.text[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
                                 }) }) }) }))] }, item.label));
         }) }));
 };

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -1,4 +1,3 @@
 import { MobileMenuProps } from "../HeaderProps";
 declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, onClose, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default MobileMenu;
-//# sourceMappingURL=mobileMenu.d.ts.map

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

@@ -17,26 +17,14 @@ const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rig
                         var _a, _b, _c, _d, _e;
                         return item.children ? ((0, jsx_runtime_1.jsxs)(react_1.Box, { px: 2, children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                        : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 })), px: 2, children: (0, jsx_runtime_1.jsx)(react_1.HStack, { w: "full", justify: "space-between", align: "center", children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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", px: 2, py: 0.5, children: item.badge.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: "bold", children: item.label })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
                                             var _a, _b, _c;
                                             return ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
-                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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 })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
+                                                }, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.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", px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                        }) }) })] }, item.label)) : ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.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", px: 2, py: 0.5, children: (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }, item.label));
                     }), rightSlot && (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 4, children: rightSlot })] }) }) }));
 };
 exports.default = MobileMenu;

package/dist/Components/Input/Input/Input.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { InputProps } from "./InputProps";
 declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }: InputProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
-//# sourceMappingURL=Input.d.ts.map

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

@@ -44,35 +44,31 @@ const FormLabel_1 = require("../../Common/FormLabel");
 const fieldStyles_1 = require("../../Common/fieldStyles");
 const ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 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 = (0, react_2.useTheme)();
-    const { colors } = theme;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [showPassword, setShowPassword] = (0, react_1.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]
+        ? colors.semanticText.error
         : 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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { className: inputBoxClassName, mb: 4, children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, (_g = colors.backgroundColor) === null || _g === void 0 ? void 0 : _g.main), pr: isPassword ? 10 : 4, _hover: {
+            ? colors.primary[500]
+            : colors.boxborder[500];
+    const shadowPrimary = colors.boxShadow.primary;
+    const shadowError = colors.boxShadow.error;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { className: inputBoxClassName, mb: 4, children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.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]
+                                ? colors.semantic.error[600]
                                 : value
-                                    ? (_k = colors.primary) === null || _k === void 0 ? void 0 : _k[600]
-                                    : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[400],
+                                    ? colors.primary[600]
+                                    : colors.gray[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],
+                            borderColor: error ? colors.semanticText.error : colors.primary[500],
                             boxShadow: error
                                 ? `0 0 0 0.125rem ${shadowError}`
                                 : `0 0 0 0.125rem ${shadowPrimary}`,
                             outline: "none",
-                        }, required: isRequired }), isPassword && ((0, jsx_runtime_1.jsx)(react_2.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[400] }))] }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
+                        }, required: isRequired }), isPassword && ((0, jsx_runtime_1.jsx)(react_2.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { size: 20 }), onClick: () => setShowPassword((prev) => !prev), color: colors.textMuted }))] }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
 };
 exports.default = react_1.default.memo(Input);

package/dist/Components/Input/Input/InputProps.d.ts

@@ -17,4 +17,3 @@ export type InputProps = {
     isInformation?: boolean;
     informationMessage?: string;
 };
-//# sourceMappingURL=InputProps.d.ts.map

package/dist/Components/Input/PhoneNumberInput.d.ts

@@ -1,4 +1,3 @@
 import { PhoneNumberInputProps } from "./PhoneNumberInputProps";
 declare const PhoneNumberInput: ({ size, value, codeValueReturn, country, countries, placeholder, onChange, inputId, selectId, error, errorMessage, helperText, label, id, width, isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect, ref, name, minW, maxW, ...rest }: PhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default PhoneNumberInput;
-//# sourceMappingURL=PhoneNumberInput.d.ts.map

package/dist/Components/Input/PhoneNumberInputProps.d.ts

@@ -34,4 +34,3 @@ export type PhoneNumberInputProps = {
     maxW?: string;
     showCountrySelect?: boolean;
 };
-//# sourceMappingURL=PhoneNumberInputProps.d.ts.map

package/dist/Components/Input/Switch/InputSwitch.d.ts

@@ -9,4 +9,3 @@ export interface ThemedSwitchProps extends SwitchProps {
     size?: "sm" | "md" | "lg";
 }
 export declare const InputSwitch: ({ switchText, switchTextPosition, id, isChecked, label, isInformation, informationMessage, isRequired, size, ...props }: ThemedSwitchProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=InputSwitch.d.ts.map

package/dist/Components/Input/TextInput.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { TextInputProps } from "./TextInputProps";
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-//# sourceMappingURL=TextInput.d.ts.map

package/dist/Components/Input/TextInput.styles.d.ts

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Input: ComponentStyleConfig;
-//# sourceMappingURL=TextInput.styles.d.ts.map

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

@@ -11,7 +11,7 @@ exports.Input = {
             pb: "0.813rem",
             display: "flex",
             alignItems: "center",
-            borderRadius: "0.5rem",
+            borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
                 fontStyle: "italic",
@@ -40,23 +40,20 @@ exports.Input = {
     },
     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";
+            const errorColor = theme.colors.semanticText.error;
+            const borderColor = theme.colors.boxborder[500];
+            const shadowPrimary = theme.colors.boxShadow.primary;
+            const shadowError = theme.colors.boxShadow.error;
+            const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    bg: theme.colors.gray[50],
                     border: "0.063rem solid",
                     borderColor,
+                    _placeholder: {
+                        color: theme.colors.textMuted,
+                    },
                     _hover: {
                         borderColor: primary,
                         // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
@@ -85,7 +82,7 @@ exports.Input = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                        bg: theme.colors.gray[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

package/dist/Components/Input/TextInputProps.d.ts

@@ -22,4 +22,3 @@ export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "p
     minW?: string;
     maxW?: string;
 };
-//# sourceMappingURL=TextInputProps.d.ts.map

package/dist/Components/Input/textInputIconSize.d.ts

@@ -8,4 +8,3 @@ export declare function getTextInputIconSizePx(size: string | undefined): number
  * affect them because they set explicit width/height.
  */
 export declare function getTextInputIconWrapperSx(size: string | undefined): SystemStyleObject;
-//# sourceMappingURL=textInputIconSize.d.ts.map

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -1,3 +1,12 @@
-import { InputTextAreaProps } from "./InputTextAreaProps";
-export default function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete }: InputTextAreaProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=InputTextArea.d.ts.map
+declare const InputTextArea: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").TextareaProps, "placeholder" | "resize" | "id" | "onBlur" | "onChange" | "variant" | "size" | "isDisabled" | "name" | "value" | "isReadOnly" | "isRequired" | "autoComplete"> & {
+    label?: string;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    width?: string | number;
+    rows?: number;
+    height?: string | number;
+    isInformation?: boolean;
+    informationMessage?: string;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.js

@@ -3,12 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = InputTextArea;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
-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 ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_1.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 && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
-}
+const InputTextArea = (0, react_1.forwardRef)(function InputTextArea({ label, placeholder, value, onChange, onBlur, name, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: ref, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+});
+exports.default = InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.style.d.ts

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Textarea: ComponentStyleConfig;
-//# sourceMappingURL=InputTextArea.style.d.ts.map

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

@@ -8,7 +8,7 @@ exports.Textarea = {
         letterSpacing: "0.044rem",
         pt: "0.813rem",
         pb: "0.813rem",
-        borderRadius: "0.5rem",
+        borderRadius: "lg",
         transition: "border-color 0.2s, box-shadow 0.2s",
         _placeholder: {
             fontStyle: "italic",
@@ -22,20 +22,19 @@ exports.Textarea = {
     },
     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";
+            const errorColor = theme.colors.semanticText.error;
+            const borderColor = theme.colors.boxborder[500];
+            const shadowPrimary = theme.colors.boxShadow.primary;
+            const shadowError = theme.colors.boxShadow.error;
+            const primary = theme.colors.primary[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",
+                bg: theme.colors.gray[50],
+                _placeholder: {
+                    color: theme.colors.textMuted,
+                },
                 _hover: {
                     borderColor: primary,
                     outline: "0",
@@ -62,7 +61,7 @@ exports.Textarea = {
                     boxShadow: 'inherit',
                 },
                 _disabled: {
-                    bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                    bg: theme.colors.gray[100],
                     opacity: 1,
                     cursor: "not-allowed",
                     _hover: {

package/dist/Components/InputTextArea/InputTextAreaProps.d.ts

@@ -1,5 +1,5 @@
 import { TextareaProps } from "@chakra-ui/react";
-export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "id" | "size" | "resize" | "isDisabled" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
+export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "onBlur" | "name" | "id" | "size" | "resize" | "isDisabled" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
     label?: string;
     error?: boolean;
     errorMessage?: string;
@@ -10,4 +10,3 @@ export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "
     isInformation?: boolean;
     informationMessage?: string;
 };
-//# sourceMappingURL=InputTextAreaProps.d.ts.map

package/dist/Components/KanbanBoard/AccountCard.d.ts

@@ -10,4 +10,3 @@ declare const AccountCard: React.MemoExoticComponent<({ account, onDelete, onOpe
     isDeletable?: boolean;
 }) => import("react/jsx-runtime").JSX.Element>;
 export default AccountCard;
-//# sourceMappingURL=AccountCard.d.ts.map

package/dist/Components/KanbanBoard/AccountCard.js

@@ -41,20 +41,26 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const AccountRow_1 = __importDefault(require("./AccountRow"));
 const excludeKeys = ["id", "details"];
 const AccountCard = react_1.default.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
     const keys = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_2.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)",
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "lg", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: "sm", 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: colors.primary[300],
+            boxShadow: "md",
             transform: "translateY(-0.063rem)",
-        }, children: (0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.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 }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.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 ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: colors.primary[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: {
+                                            bg: colors.primary[50],
+                                            color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]),
+                                        }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));
 });
 exports.default = AccountCard;

package/dist/Components/KanbanBoard/AccountRow.d.ts

@@ -3,4 +3,3 @@ declare const AccountRow: ({ label, value }: {
     value: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default AccountRow;
-//# sourceMappingURL=AccountRow.d.ts.map

package/dist/Components/KanbanBoard/AccountRow.js

@@ -5,8 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const functions_1 = require("../../Utils/functions");
 const AccountRow = ({ label, value }) => {
-    var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));
 };
 exports.default = AccountRow;

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.d.ts

@@ -6,4 +6,3 @@ declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate, }: {
     onCreate?: () => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default KanbanActions;
-//# sourceMappingURL=KanbanActions.d.ts.map

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -9,10 +9,10 @@ const Select_1 = __importDefault(require("../../Select/Select"));
 const lucide_react_1 = require("lucide-react");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Button_1 = __importDefault(require("../../Button/Button"));
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
-    var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20, color: (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500] }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [(0, jsx_runtime_1.jsx)(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "solid", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 20, color: (0, accentText_1.onFilled)(colors.primary[500], colors.white, colors.black) }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 exports.default = KanbanActions;

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,4 +1,3 @@
 import { KanbanBoardProps } from "./KanbanBoardProps";
 declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default KanbanBoard;
-//# sourceMappingURL=KanbanBoard.d.ts.map