pixelize-design-library 2.3.31 → 2.4.1-beta.10

package/README.md

@@ -191,17 +191,84 @@ function DataTable() {
 
 ## Theming
 
-The library supports custom theming through CSS variables:
-
-```css
-:root {
-  --primary-color: #007bff;
-  --secondary-color: #6c757d;
-  --success-color: #28a745;
-  --danger-color: #dc3545;
-  --warning-color: #ffc107;
-  --info-color: #17a2b8;
+The library ships **7 brand themes** (`lavender`, `meadow`, `radiant`, `skyline`, `slate`,
+`emerald`, `rosewood`), each with a **light and a dark palette**.
+
+### Existing apps (unchanged)
+
+`withTheme` is the original default export and still renders **light only**. Upgrading the package
+changes nothing visually:
+
+```tsx
+import withTheme, { ThemesList } from 'pixelize-design-library';
+
+export default withTheme(App, ThemesList.lavender);
+```
+
+### Opting into light / dark / system
+
+Wrap the app in `PixelizeThemeProvider` instead. It defaults to **`system`** (follows the OS) and
+persists the user's choice to `localStorage`.
+
+```tsx
+import { PixelizeThemeProvider, ThemeSwitcher } from 'pixelize-design-library';
+
+function Root() {
+  return (
+    <PixelizeThemeProvider brand="lavender" defaultMode="system">
+      <App />
+    </PixelizeThemeProvider>
+  );
 }
+
+// Drop the switcher anywhere inside the provider:
+<ThemeSwitcher />                                    // icon toggle
+<ThemeSwitcher variant="segmented" />                // Light / System / Dark
+<ThemeSwitcher variant="menu" showBrandPicker />     // + brand picker
+```
+
+| `PixelizeThemeProvider` prop | Default | Meaning |
+| ---------------------------- | ------- | ------- |
+| `brand` | `"lavender"` | Which brand theme to use |
+| `defaultMode` | `"system"` | `"light"` \| `"dark"` \| `"system"` |
+| `storageKey` | `"pixelize-theme"` | localStorage key |
+| `disablePersistence` | `false` | Don't read/write localStorage |
+
+### Reading or changing the theme in code
+
+```tsx
+import { useThemeMode, useCustomTheme } from 'pixelize-design-library';
+
+const { mode, resolvedMode, setMode, toggle, brand, setBrand } = useThemeMode();
+const theme = useCustomTheme(); // returns the palette for the ACTIVE color mode
+```
+
+`useCustomTheme()` returns the dark palette automatically in dark mode, so components that read
+their colors from it are dark-aware with no extra work.
+
+### Building components
+
+Read colors from the theme — never hardcode a hex, or the component will be stuck in light mode:
+
+```tsx
+const theme = useCustomTheme();
+<Box bg={theme.colors.background[50]} color={theme.colors.text[900]} />  // ✅ adapts
+<Box bg="#ffffff" color="#26213c" />                                     // ❌ breaks in dark
+```
+
+`colors.white` is a **foreground** token (the label on a filled button) and stays white in dark
+mode. For a white **surface**, use `colors.background[50]`.
+
+### Design tokens (shared with the mobile library)
+
+`lightPalettes`, `darkPalettes`, `palettes`, `themeNames`, and `buildDarkPalette` are exported for
+apps that build custom themes. The token source (`src/Theme/tokens/`) is pure TypeScript with no
+Chakra, React, or CSS imports, so it is portable to React Native.
+
+```ts
+import { lightPalettes, buildDarkPalette } from 'pixelize-design-library';
+
+const myDark = buildDarkPalette(lightPalettes.emerald);
 ```
 
 ## TypeScript Support

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AASA,OAAO,cAAc,CAAC;AAyDtB,iBAAS,GAAG,4CAiFX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAWA,OAAO,cAAc,CAAC;AAyDtB,iBAAS,GAAG,4CAsGX;AAED,eAAe,GAAG,CAAC"}

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/Assets/defaultLogo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLogo.d.ts","sourceRoot":"","sources":["../../src/Assets/defaultLogo.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,+CAyBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"defaultLogo.d.ts","sourceRoot":"","sources":["../../src/Assets/defaultLogo.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,WAAW,+CAuBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Assets/defaultLogo.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useCustomTheme_1 = require("../Theme/useCustomTheme");
 const DefaultLogo = () => {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: theme.colors.black }), (0, jsx_runtime_1.jsx)("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: theme.colors.black }), (0, jsx_runtime_1.jsx)("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: theme.colors.black })] }));
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: "currentColor" })] }));
 };
 exports.default = DefaultLogo;

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,26 @@
+const DefaultLogo = () => {
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill="currentColor"
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default DefaultLogo;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAalD,QAAA,MAAM,SAAS,GAAI,+EAQhB,cAAc,4CA+FhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAelD,QAAA,MAAM,SAAS,GAAI,+EAQhB,cAAc,4CAkGhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Components/Accordion/Accordion.js

@@ -1,23 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 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 lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const accordionColors_1 = require("./accordionColors");
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
-    const border = (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[200];
-    const headingColor = (_f = (_e = c.text) === null || _e === void 0 ? void 0 : _e[800]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[800];
-    const bodyColor = (_j = (_h = c.text) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[600];
-    const softHover = (_o = (_m = (_l = c.table) === null || _l === void 0 ? void 0 : _l.hover) === null || _m === void 0 ? void 0 : _m[100]) !== null && _o !== void 0 ? _o : (_p = c.gray) === null || _p === void 0 ? void 0 : _p[50];
-    const expandedBg = (_s = (_r = (_q = c.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[8]) !== null && _s !== void 0 ? _s : (_t = c.gray) === null || _t === void 0 ? void 0 : _t[50];
-    return ((0, jsx_runtime_1.jsx)(react_1.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
-            var _a, _b, _c, _d, _e;
-            return ((0, jsx_runtime_1.jsx)(react_1.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "0.625rem", bg: (_a = c.white) !== null && _a !== void 0 ? _a : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_c = (_b = c.boxborder) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : (_d = c.gray) === null || _d === void 0 ? void 0 : _d[300] }, ...item.itemProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.itemStyle, children: ({ isExpanded }) => {
+    const isDark = (0, accentText_1.isDarkCanvas)((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff");
+    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
+    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
+    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
+    const { expandedBg, softHover } = (0, react_1.useMemo)(() => { var _a; return (0, accordionColors_1.getAccordionHoverColors)((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
+            var _a, _b, _c, _d, _e, _f;
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "0.625rem", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[300] }, ...item.itemProps, sx: (_f = item.customStyles) === null || _f === void 0 ? void 0 : _f.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_1.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
                                         outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
                                         outlineOffset: "-0.125rem",
@@ -26,7 +29,7 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
                                         "&:hover": {
                                             ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
                                         },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "0.375rem", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/Accordion/accordionColors.d.ts

@@ -0,0 +1,6 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const getAccordionHoverColors: (colors: PaletteProps, isDark: boolean) => {
+    expandedBg: string;
+    softHover: string;
+};
+//# sourceMappingURL=accordionColors.d.ts.map

package/dist/Components/Accordion/accordionColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionColors.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/accordionColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAW7D,eAAO,MAAM,uBAAuB,GAClC,QAAQ,YAAY,EACpB,QAAQ,OAAO,KACd;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAuBzC,CAAC"}

package/dist/Components/Accordion/accordionColors.js

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

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;AAEvD,QAAA,MAAM,WAAW,GAAI,+OAmBlB,iBAAiB,4CAiCnB,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,4CAkCnB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/AlertDialog/AlertDialog.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+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, }) => {
-    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, { 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));
+    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));
 };
 exports.default = AlertDialog;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexBarChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexBarChart/ApexBarChart.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AASxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,MAAY,EACZ,KAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,2CAqFnB"}
+{"version":3,"file":"ApexBarChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexBarChart/ApexBarChart.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,MAAY,EACZ,KAAW,EACX,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,2CAwFnB"}

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

@@ -8,7 +8,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 function ApexBarChart({ data, labels, title, titlePosition, height = 400, width = 500, barColor, xAxisStyle, yAxisStyle, titleStyle, }) {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
@@ -18,6 +19,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
     const mergedYAxis = (0, react_1.useMemo)(() => { var _a; return ({ ...yAxisStyle, color: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor }); }, [axisColor, yAxisStyle]);
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const dataLabelColor = palette.primary[500];
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const options = (0, react_1.useMemo)(() => ({
         chart: {
             type: "bar",
@@ -53,6 +55,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
             style: mergedTitleStyle,
         },
         colors: resolvedBarColors,
+        theme: { mode: chartThemeMode },
     }), [
         labels,
         mergedXAxis,
@@ -62,6 +65,7 @@ function ApexBarChart({ data, labels, title, titlePosition, height = 400, width
         mergedTitleStyle,
         resolvedBarColors,
         dataLabelColor,
+        chartThemeMode,
     ]);
     const series = [
         {

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexLineChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexLineChart/ApexLineChart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAU1D,QAAA,MAAM,aAAa,GAAI,6LAgBpB,kBAAkB,4CAqLpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ApexLineChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexLineChart/ApexLineChart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAS1D,QAAA,MAAM,aAAa,GAAI,6LAgBpB,kBAAkB,4CAmLpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -8,11 +8,13 @@ const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePosition = "center", titleStyle, compact = false, toolbarBreakpointPct = 0.6, titleClampLines, showTitleEllipsis = true, showSeries = true, series: seriesNames, variant = "basic", }) => {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
     const resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const resolvedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
     const [apexSeries, setApexSeries] = (0, react_1.useState)([
@@ -113,6 +115,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
         dataLabels: { enabled: false },
         grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
+        theme: { mode: chartThemeMode },
     }), [
         variant,
         showToolbar,
@@ -123,10 +126,9 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         titlePosition,
         resolvedTitleStyle,
         showSeries,
+        chartThemeMode,
     ]);
-    const tooltipBg = (0, chartColorsFromTheme_1.chartTooltipBackground)(palette);
-    const tooltipFg = (0, chartColorsFromTheme_1.chartTooltipForeground)(palette);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: tooltipBg, color: tooltipFg, isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, children: [title && isSmall && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: (0, jsx_runtime_1.jsx)("div", { ref: titleRef, style: {
                         textAlign: "left",
                         color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
                         fontSize: computedFontSize,

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexPieChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPieChart/ApexPieChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAkBxD,QAAA,MAAM,YAAY,GAAI,mIAanB,iBAAiB,4CA4KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ApexPieChart.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPieChart/ApexPieChart.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAmBxD,QAAA,MAAM,YAAY,GAAI,mIAanB,iBAAiB,4CA+KnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -7,7 +7,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -20,6 +21,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
     var _a;
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = (0, react_1.useMemo)(() => {
         const defaults = {
@@ -146,6 +148,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             },
             dataLabels: { enabled: true },
             ...extraOptions,
+            theme: { mode: chartThemeMode, ...extraOptions.theme },
         };
     }, [
         variant,
@@ -156,6 +159,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         title,
         titlePosition,
         mergedTitleStyle,
+        chartThemeMode,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }));
 };

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApexPolarCharts.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAO7D,QAAA,MAAM,cAAc,GAAI,uGAWrB,mBAAmB,4CA6FrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ApexPolarCharts.d.ts","sourceRoot":"","sources":["../../../../src/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAQ7D,QAAA,MAAM,cAAc,GAAI,uGAWrB,mBAAmB,4CAgGrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -7,10 +7,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 const react_2 = require("@chakra-ui/react");
-const chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColorsFromTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartColors, titlePosition = "center", titleStyle, legendStyle, variant = "basic", }) => {
     const theme = (0, react_2.useTheme)();
     const palette = theme.colors;
+    const chartThemeMode = (0, accentText_1.isDarkCanvas)(palette.backgroundColor.main) ? "dark" : "light";
     const mergedTitleStyle = (0, react_1.useMemo)(() => (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle), [palette, titleStyle]);
     const mergedLegendStyle = (0, react_1.useMemo)(() => {
         const defaults = {
@@ -64,6 +66,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
             },
             dataLabels: { enabled: true },
             ...extraOptions,
+            theme: { mode: chartThemeMode, ...extraOptions.theme },
         };
     }, [
         variant,
@@ -74,6 +77,7 @@ const ApexPolarChart = ({ data, labels, title, height = 400, width = 500, chartC
         titlePosition,
         mergedTitleStyle,
         palette.white,
+        chartThemeMode,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width }) }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,MAAM,EAAE,oBA6JpB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAsB,MAAM,kBAAkB,CAAC;AA+C5E,eAAO,MAAM,MAAM,EAAE,oBA+KpB,CAAC"}