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

package/dist/App.d.ts

@@ -0,0 +1,4 @@
+import "./global.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Loading_1 = __importDefault(require("./Components/Loading/Loading"));
+const SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
+const NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
+const useSidebarPrefs_1 = require("./Hooks/useSidebarPrefs");
+const provider_1 = require("./Theme/provider");
+const useCustomTheme_1 = require("./Theme/useCustomTheme");
+const Layout_1 = __importDefault(require("./Layout"));
+require("./global.css");
+// --- Static demo data (module scope so it isn't re-created each render) ------
+const menu = [
+    {
+        id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "", group: "Main",
+        secondaryItems: [
+            { id: 11, title: "SubMenu", url: "submenu1", icon: lucide_react_1.Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
+            { id: 12, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
+        ],
+    },
+    {
+        id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog",
+        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
+    },
+    {
+        id: 3, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 31, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.FileText },
+            { id: 32, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
+        ],
+    },
+    {
+        id: 4, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 33, title: "SubMenu1", url: "submenu1" },
+            { id: 34, title: "SubMenu2", url: "submenu2" },
+        ],
+    },
+    {
+        id: 8, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu", group: "Tools",
+        subMenu: [
+            { id: 41, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.Cuboid },
+            { id: 42, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
+        ],
+    },
+];
+const navmenus = [
+    { title: "Account Settings", url: "myaccount", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Cuboid, {}) },
+    { title: "Reset password", url: "resetpassword" },
+    { title: "Billing", url: "billing" },
+    { title: "Notifications", url: "notifications" },
+];
+function useWindowSize() {
+    const [windowSize, setWindowSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
+}
+function App() {
+    const { height } = useWindowSize();
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Persisted layout choices — restored to exactly the same state on reload/new
+    // session via localStorage. `collapsed` = mini-rail; `mobileNav` = navbar mode
+    // forced on a big screen; `mobileOpen` = whether the overlay drawer is open.
+    // Composed handlers (onToggleMobileNav / closeMobile) come straight from the hook,
+    // so this app does not re-implement the navbar-mode/drawer behavior.
+    const { collapsed: toggle, toggleCollapsed, mobileNav, mobileOpen, toggleMobileOpen, onToggleMobileNav, closeMobile, } = (0, useSidebarPrefs_1.useSidebarPrefs)();
+    const [activeMenu, setActiveMenu] = (0, react_1.useState)(2);
+    const [activeSecondaryItem, setActiveSecondaryItem] = (0, react_1.useState)(null);
+    const handleMenuClick = (menu) => {
+        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.id);
+        setActiveSecondaryItem(null);
+    };
+    const handleSecondaryNavClick = (item) => {
+        var _a, _b;
+        setActiveSecondaryItem((_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : null);
+    };
+    const handleNavOnClick = () => { };
+    const handleLogout = () => { };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "App", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, handleSecondaryNavClick: handleSecondaryNavClick, toggle: toggle, changeToggle: toggleCollapsed, companyName: "PIXELIZE Technologies Pvt., Ltd.", selectedSecondaryItem: activeSecondaryItem, mobileOpen: mobileOpen, onMobileClose: closeMobile, mobileNav: mobileNav, onToggleMobileNav: onToggleMobileNav }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", userRole: "Admin", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", sideBarToggole: mobileOpen, onSideBarToggole: toggleMobileOpen, forceSideBarToggle: mobileNav, navigationBarText: {
+                                        text: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Dashboard" }),
+                                        onIconClick: () => { },
+                                    }, moreIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Calendar, {}) }, "navbar"), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-testid": "theme-controls", px: "50px", pb: 3, gap: 4, align: "center", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: true }), (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "icon" })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { p: "50px", pt: 0, height: height - 200, overflowY: "scroll", overflowX: "hidden", width: "100%", "data-testid": "playground-surface", bg: theme.colors.backgroundColor.main, children: (0, jsx_runtime_1.jsx)(Layout_1.default, {}) })] })] })] }) }));
+}
+exports.default = App;

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/Components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,QAAA,MAAM,WAAW,GAAI,+OAmBlB,iBAAiB,4CAkCnB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../src/Components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD,QAAA,MAAM,WAAW,GAAI,+OAmBlB,iBAAiB,4CAqCnB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/AlertDialog/AlertDialog.js

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

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Button>;
 export default _default;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,iBAAS,MAAM,CAAC,EACZ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAiB,EACjB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAkB,EAClB,SAAiB,EACjB,WAAuB,EACvB,IAAI,EACJ,KAAK,EACL,EAAE,EACF,WAAW,EACX,GAAG,EACH,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,YAAY,GACf,EAAE,WAAW,2CAyBb;;AAED,wBAA4B"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,iBAAS,MAAM,CAAC,EACZ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAiB,EACjB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,UAAkB,EAClB,SAAiB,EACjB,WAAuB,EACvB,IAAI,EACJ,KAAK,EACL,EAAE,EACF,WAAW,EACX,GAAG,EACH,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,GAAG,IAAI,EACV,EAAE,WAAW,2CA0Bb;;AAED,wBAA4B"}

package/dist/Components/Button/Button.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
-function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }) {
-    return ((0, jsx_runtime_1.jsx)(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
+function Button({ label, children, onClick, opacity, variant = "solid", leftIcon, rightIcon, size, isDisabled = false, isLoading = false, loadingText = "Loading", type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, ...aria }) {
+    return ((0, jsx_runtime_1.jsx)(react_2.Button, { ...aria, type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children !== null && children !== void 0 ? children : label }));
 }
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave"> & {
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-expanded" | "aria-haspopup" | "aria-controls" | "aria-pressed" | "aria-current" | "id" | "title"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs" | "xl";

package/dist/Components/Button/ButtonProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/ButtonProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,iBAAiB,EACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,YAAY,GACZ,WAAW,GACX,aAAa,GACb,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,cAAc,GACd,cAAc,GACd,cAAc,CACjB,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3E,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnJ,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}
+{"version":3,"file":"ButtonProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/ButtonProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,iBAAiB,EACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,YAAY,GACZ,WAAW,GACX,aAAa,GACb,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,cAAc,GACd,cAAc,GACd,cAAc,GAGd,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,eAAe,GACf,eAAe,GACf,eAAe,GACf,cAAc,GACd,cAAc,GACd,IAAI,GACJ,OAAO,CACV,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IAC3E,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnJ,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroupIcon.d.ts","sourceRoot":"","sources":["../../../src/Components/ButtonGroupIcon/ButtonGroupIcon.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAI7D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EAAE,gCAAgC;AACjD,qBAAqB,EAAE,mCAAmC;AAC1D,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,SAAS,EACT,OAAc,EACb,eAAe,EACf,gBAAgB,GAEjB,EAAE,oBAAoB,2CA0MtB"}
+{"version":3,"file":"ButtonGroupIcon.d.ts","sourceRoot":"","sources":["../../../src/Components/ButtonGroupIcon/ButtonGroupIcon.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAK7D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACvC,QAAQ,EACR,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,wBAAwB,EACxB,yBAAyB,EACzB,WAAW,EACX,cAAc,EACd,eAAe,EACf,eAAe,EAAE,gCAAgC;AACjD,qBAAqB,EAAE,mCAAmC;AAC1D,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,SAAS,EACT,OAAc,EACb,eAAe,EACf,gBAAgB,GAEjB,EAAE,oBAAoB,2CA4MtB"}

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
@@ -23,10 +24,12 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
         };
         // Use setTimeout to ensure DOM is fully rendered
         const timeoutId = setTimeout(checkTruncation, 0);
-        window.addEventListener("resize", checkTruncation);
+        const onResize = (0, rafThrottle_1.rafThrottle)(checkTruncation);
+        window.addEventListener("resize", onResize);
         return () => {
             clearTimeout(timeoutId);
-            window.removeEventListener("resize", checkTruncation);
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
         };
     }, [buttonText]);
     const handleRightIconClick = () => {

package/dist/Components/Checkbox/Checkbox.d.ts

@@ -1,3 +1,3 @@
 import { CheckboxProps } from "./CheckboxProps";
-export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export default function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size, value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,UAAU,EACV,IAAW,EACX,KAAK,EACL,cAAc,EACd,EAAE,EACF,KAAK,EACL,YAAY,EACZ,UAAU,EACV,OAAO,EACP,OAAO,GACR,EAAE,aAAa,2CAkFf"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,UAAU,EACV,IAAW,EACX,KAAK,EACL,cAAc,EACd,EAAE,EACF,KAAK,EACL,YAAY,EACZ,UAAU,EACV,OAAO,EACP,OAAO,EACP,GAAG,IAAI,EACR,EAAE,aAAa,2CAmFf"}

package/dist/Components/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, }) {
+function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelClampLines, spacing, isInvalid, color, iconColor, iconSize, isChecked, isIndeterminate, onChange, isDisabled, size = "md", value, defaultChecked, sx, error, errorMessage, helperText, onClick, labelSx, ...aria }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const controlSize = size === "sm" ? "1rem"
         : size === "md" ? "1.25rem"
@@ -27,7 +27,7 @@ function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelC
             ...labelSx,
         }
         : { ...labelSx };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
                     ...sx,
                     ".chakra-checkbox__control": { w: controlSize, h: controlSize },
                 }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

package/dist/Components/Checkbox/CheckboxProps.d.ts

@@ -1,5 +1,5 @@
 import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
-export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick"> & {
+export type CheckboxProps = Pick<ChakraButtonProps, "spacing" | "isInvalid" | "size" | "iconColor" | "iconSize" | "isChecked" | "isIndeterminate" | "onChange" | "isDisabled" | "value" | "defaultChecked" | "sx" | "onClick" | "aria-label" | "aria-labelledby" | "aria-describedby" | "id"> & {
     label?: string;
     labelFontSize?: string;
     showLabelTooltip?: boolean;

package/dist/Components/Checkbox/CheckboxProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/CheckboxProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,iBAAiB,EACf,SAAS,GACT,WAAW,GACX,MAAM,GACN,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,UAAU,GACV,YAAY,GACZ,OAAO,GACP,gBAAgB,GAChB,IAAI,GACJ,SAAS,CACZ,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IAC9D,KAAK,CAAC,EACF,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,YAAY,GACZ,YAAY,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B,CAAC"}
+{"version":3,"file":"CheckboxProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/CheckboxProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,iBAAiB,EACf,SAAS,GACT,WAAW,GACX,MAAM,GACN,WAAW,GACX,UAAU,GACV,WAAW,GACX,iBAAiB,GACjB,UAAU,GACV,YAAY,GACZ,OAAO,GACP,gBAAgB,GAChB,IAAI,GACJ,SAAS,GAIT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,IAAI,CACP,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;IAC9D,KAAK,CAAC,EACF,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,MAAM,GACN,YAAY,GACZ,YAAY,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B,CAAC"}

package/dist/Components/Common/ErrorMessage.d.ts

@@ -1,5 +1,6 @@
-declare const ErrorMessage: ({ errorMessage }: {
+declare const ErrorMessage: ({ errorMessage, id }: {
     errorMessage?: string;
+    id?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;
 //# sourceMappingURL=ErrorMessage.d.ts.map

package/dist/Components/Common/ErrorMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/ErrorMessage.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,YAAY,GAAI,kBAAkB;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,4CAkBhE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/ErrorMessage.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,YAAY,GAAI,sBAAsB;IAAE,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,4CAmBjF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/Common/ErrorMessage.js

@@ -5,13 +5,15 @@ const react_1 = 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 ErrorMessage = ({ errorMessage }) => {
+// `id` lets a field point `aria-describedby` here so the message is part of the control's
+// description on every focus. `role="alert"` alone announces once, when it first renders.
+const ErrorMessage = ({ errorMessage, id }) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // red[500] alone fails AA on the page canvas (~3.4:1 vs the ~4.5 bar) in every brand — step
     // to a darker rung of the same scale instead of hardcoding one, since a manual retune of a
     // vivid-alert red collides with its own darker rungs before it clears AA (see red/error
     // scale comments in each brand's palette.light.ts).
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff"), fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: id, align: "center", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff"), fontSize: "0.875rem", role: "alert", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Info, { width: "0.875rem" }), (0, jsx_runtime_1.jsx)(react_1.Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
 };
 exports.default = ErrorMessage;

package/dist/Components/Common/FormLabel.d.ts

@@ -1,4 +1,4 @@
-export declare const TextLabel: ({ label, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
+export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, inline, }: {
     label: string;
     id?: string;
     isInformation?: boolean;

package/dist/Components/Common/FormLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/FormLabel.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,GAAI,oHAUvB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,4CAiDA,CAAC"}
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/FormLabel.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,SAAS,GAAI,wHAWvB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAIpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,4CA6DA,CAAC"}

package/dist/Components/Common/FormLabel.js

@@ -10,7 +10,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-const TextLabel = ({ label, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
+const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const clampStyles = clampLines ? {
@@ -21,6 +21,19 @@ const TextLabel = ({ label, isRequired = false, isInformation = false, informati
         textOverflow: "ellipsis",
         whiteSpace: "normal",
     } : {};
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: inline ? "inline-flex" : "block", alignItems: inline ? "center" : undefined, mb: inline ? 0 : "0.375rem", color: theme.colors.text[700], fontWeight: 500, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem", lineHeight: "1.2", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: (0, accentText_1.accentTextOnCanvas)((_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error, (_c = (_b = theme.colors.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff"), marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }) }));
+    const wrapperStyles = {
+        display: inline ? "inline-flex" : "block",
+        alignItems: inline ? "center" : undefined,
+        mb: inline ? 0 : "0.375rem",
+        color: theme.colors.text[700],
+        fontWeight: 500,
+        fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem",
+        lineHeight: "1.2",
+    };
+    const content = ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, children: label })), isRequired && ((0, jsx_runtime_1.jsx)("span", { style: { color: (0, accentText_1.accentTextOnCanvas)((_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error, (_c = (_b = theme.colors.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff"), marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    // A real <label> only when there is a control id to point at. Without one it would name
+    // nothing, and TextLabel also renders `inline` inside controls that are themselves a <label>
+    // (Checkbox/Radio) — nesting labels there would be invalid markup.
+    return id ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ...wrapperStyles, children: content }));
 };
 exports.TextLabel = TextLabel;

package/dist/Components/Common/Label.d.ts

@@ -1,5 +1,7 @@
-declare const Label: ({ label, labelClassName, isRequired, }: {
+declare const Label: ({ label, htmlFor, labelClassName, isRequired, }: {
     label: string;
+    /** id of the control being labelled. Omit rather than guess — `label` text is not an id. */
+    htmlFor?: string;
     labelClassName?: string;
     isRequired?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Common/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/Label.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,KAAK,GAAI,wCAIZ;IACD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,4CA0BA,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/Components/Common/Label.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,KAAK,GAAI,iDAKZ;IACD,KAAK,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,4CA0BA,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/Components/Common/Label.js

@@ -4,12 +4,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = require("@chakra-ui/react");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const Label = ({ label, labelClassName, isRequired, }) => {
+const Label = ({ label, htmlFor, labelClassName, isRequired, }) => {
     var _a, _b, _c, _d, _e, _f;
     const theme = (0, react_2.useTheme)();
     const headerColor = (_b = (_a = theme.colors.header) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[500];
     // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
     const errorColor = (0, accentText_1.accentTextOnCanvas)((_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error, (_f = (_e = theme.colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : "#ffffff");
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: label, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: headerColor, children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: errorColor, ml: 1, children: "*" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormLabel, { htmlFor: htmlFor, mb: 1, fontSize: "sm", fontWeight: "medium", className: labelClassName, color: headerColor, children: [label, isRequired && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: errorColor, ml: 1, children: "*" }))] }));
 };
 exports.default = Label;

package/dist/Components/Dropdown/DropDown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../src/Components/Dropdown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAWpF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAqBhD,QAAA,MAAM,QAAQ,sFA0Qb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../src/Components/Dropdown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAW3F,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAsBhD,QAAA,MAAM,QAAQ,sFAkZb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/Components/Dropdown/DropDown.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
 // Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
 const SIZE_MAP = {
@@ -15,18 +16,122 @@ const SIZE_MAP = {
     lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
     xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
 };
-const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, }, ref) => {
+const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const { isOpen, onToggle, onClose } = (0, react_2.useDisclosure)();
+    const { isOpen, onOpen, onToggle, onClose } = (0, react_2.useDisclosure)();
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [menuPos, setMenuPos] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
     const s = (_b = SIZE_MAP[(_a = size !== null && size !== void 0 ? size : optionsSize) !== null && _a !== void 0 ? _a : "md"]) !== null && _b !== void 0 ? _b : SIZE_MAP.md;
+    const menuId = (0, react_1.useId)();
+    // Roving-tabindex keyboard nav for the menu (ARIA APG menu-button pattern):
+    // real DOM focus moves through the items, so no aria-activedescendant is needed.
+    const buttonTriggerRef = (0, react_1.useRef)(null);
+    const textTriggerRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const pendingFocusIndex = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    // The trigger is never unmounted, so — unlike focusing into the portaled
+    // menu on open — this can focus synchronously.
+    const focusTrigger = () => {
+        var _a, _b;
+        (_b = ((_a = buttonTriggerRef.current) !== null && _a !== void 0 ? _a : textTriggerRef.current)) === null || _b === void 0 ? void 0 : _b.focus();
+    };
+    const openAndFocus = (index) => {
+        var _a;
+        if (isOpen) {
+            // Already open (trigger still holds focus, e.g. after Enter/Space) — the
+            // portal is already mounted, so focus directly; no need to wait a frame,
+            // and the effect below only reacts to isOpen *changing* anyway.
+            setActiveIndex(index);
+            (_a = itemRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            pendingFocusIndex.current = index;
+            onOpen();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            const idx = pendingFocusIndex.current;
+            pendingFocusIndex.current = null;
+            if (idx !== null) {
+                setActiveIndex(idx);
+                // Chakra's <Portal> mounts its children a tick after this effect runs
+                // (it resolves its target node via its own effect first), so the menu
+                // item ref isn't attached yet here — a frame gets us past that.
+                requestAnimationFrame(() => { var _a; return (_a = itemRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus(); });
+            }
+        }
+        else {
+            setActiveIndex(0);
+        }
+    }, [isOpen]);
     const handleListItemClick = (optionId, optionLabel) => {
         onClose();
         handleOptionSelect(optionId, optionLabel);
     };
+    const handleTriggerKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            openAndFocus(0);
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            openAndFocus(options.length - 1);
+        }
+        else if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            onClose();
+        }
+        else if (e.key === "Enter" || e.key === " ") {
+            // Explicit rather than relying on native button activation: the text
+            // trigger is a styled Flex (no default action to rely on), and jsdom's
+            // `fireEvent` does not simulate a real browser's Enter/Space-activates-
+            // button default action either.
+            e.preventDefault();
+            onToggle();
+        }
+    };
+    const handleMenuKeyDown = (e) => {
+        var _a, _b, _c;
+        if (options.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            const next = (activeIndex + step + options.length) % options.length;
+            setActiveIndex(next);
+            (_a = itemRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            setActiveIndex(0);
+            (_b = itemRefs.current[0]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            const last = options.length - 1;
+            setActiveIndex(last);
+            (_c = itemRefs.current[last]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+            focusTrigger();
+        }
+        else if (e.key === "Tab") {
+            onClose();
+        }
+    };
+    const handleItemKeyDown = (e, optionId, optionLabel) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleListItemClick(optionId, optionLabel);
+            focusTrigger();
+        }
+    };
     // The menu is portaled to <body> (so it sits above everything). Anchor it to
     // the trigger, then clamp to the viewport so it never overflows off-screen
     // (e.g. when the trigger sits near the right or bottom edge).
@@ -62,11 +167,16 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
         if (!isOpen)
             return;
         updateMenuPos();
-        window.addEventListener("scroll", updateMenuPos, true);
-        window.addEventListener("resize", updateMenuPos);
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updateMenuPos);
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
         return () => {
-            window.removeEventListener("scroll", updateMenuPos, true);
-            window.removeEventListener("resize", updateMenuPos);
+            onReposition.cancel();
+            window.removeEventListener("scroll", onReposition, true);
+            window.removeEventListener("resize", onReposition);
         };
     }, [isOpen, updateMenuPos]);
     (0, react_1.useEffect)(() => {
@@ -98,13 +208,13 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     const Chevron = isVisibleIconShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
         var _a, _b, _c, _d;
-        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onToggle, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { onClick: onToggle, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen, children: [DropdownIcon, text, Chevron] }));
+        const ButtonToggle = ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: buttonTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        return ((0, jsx_runtime_1.jsx)(react_2.List, { bg: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[200]}`, borderRadius: "0.625rem", boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
+        return ((0, jsx_runtime_1.jsx)(react_2.List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_f = (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[200]}`, borderRadius: "0.625rem", boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
                 scrollbarWidth: "thin",
                 scrollbarColor: `${(_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[300]} transparent`,
                 "&::-webkit-scrollbar": { width: "6px" },
@@ -115,14 +225,22 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
                 "&::-webkit-scrollbar-thumb:hover": {
                     background: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[400],
                 },
-            }, style: ListStyle, children: options.map((option) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-                return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { onClick: () => handleListItemClick(option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+            }, style: ListStyle, children: options.map((option, index) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+                return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
+                        itemRefs.current[index] = node;
+                    }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
+                        handleListItemClick(option.id, option.label);
+                        focusTrigger();
+                    }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
                         bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
                         color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
+                    }, _focus: {
+                        bg: (_u = (_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s.opacity) === null || _t === void 0 ? void 0 : _t[8]) !== null && _u !== void 0 ? _u : (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray[100],
+                        color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.primary) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.primary) === null || _0 === void 0 ? void 0 : _0[600],
                     }, borderBottom: divider
-                        ? `0.063rem solid ${(_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.boxborder) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray[200]}`
-                        : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
+                        ? `0.063rem solid ${(_3 = (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.boxborder) === null || _2 === void 0 ? void 0 : _2[100]) !== null && _3 !== void 0 ? _3 : (_4 = theme.colors) === null || _4 === void 0 ? void 0 : _4.gray[200]}`
+                        : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_6 = (_5 = theme.colors) === null || _5 === void 0 ? void 0 : _5.gray) === null || _6 === void 0 ? void 0 : _6[500], style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
                             // fontWeight={400}
                             style: LabelStyle, children: option.label })] }, option.id));
             }) }));

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -19,6 +19,8 @@ export type DropdownProps = {
     /** @deprecated Use `size` instead. Kept for backward compatibility. */
     optionsSize?: "sm" | "md" | "lg";
     divider?: boolean;
+    /** Accessible name for the trigger when it renders icon-only (no `ButtonText`/`text`). */
+    ariaLabel?: string;
 };
 type Option = {
     id: string | number;