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

package/dist/Pages/tooltip.d.ts

@@ -0,0 +1,3 @@
+declare const TooltipPage: () => import("react/jsx-runtime").JSX.Element;
+export default TooltipPage;
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/Pages/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/Pages/tooltip.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,+CAgBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Pages/tooltip.js

@@ -0,0 +1,11 @@
+"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 ToolTip_1 = __importDefault(require("../Components/ToolTip/ToolTip"));
+const TooltipPage = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Hello", placement: "top", hasArrow: true, children: "hai" }) }));
+};
+exports.default = TooltipPage;

package/dist/Pages/toster.d.ts

@@ -0,0 +1,3 @@
+declare const TosterPage: () => import("react/jsx-runtime").JSX.Element;
+export default TosterPage;
+//# sourceMappingURL=toster.d.ts.map

package/dist/Pages/toster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toster.d.ts","sourceRoot":"","sources":["../../src/Pages/toster.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,+CA+Ff,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/Pages/toster.js

@@ -0,0 +1,53 @@
+"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 Button_1 = __importDefault(require("../Components/Button/Button"));
+const Toaster_1 = require("../Components/Toaster/Toaster");
+const TosterPage = () => {
+    const { showToast } = (0, Toaster_1.useToaster)();
+    const handleOnclick = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "success",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick1 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "error",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick2 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "warning",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick3 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "info",
+        });
+        //setIsOpen(true);
+    };
+    const handleOnclick4 = () => {
+        showToast({
+            title: "Hello",
+            duration: 3000,
+            status: "loading",
+        });
+        //setIsOpen(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick1, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick2, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick3, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Success", onClick: handleOnclick4, variant: "solid", size: "md", width: 100 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), " ", (0, jsx_runtime_1.jsx)("br", {}), " ", (0, jsx_runtime_1.jsx)("br", {})] }));
+};
+exports.default = TosterPage;

package/dist/Pages/upgradeButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const UpgradeButtonPage: React.FC;
+export default UpgradeButtonPage;
+//# sourceMappingURL=upgradeButton.d.ts.map

package/dist/Pages/upgradeButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upgradeButton.d.ts","sourceRoot":"","sources":["../../src/Pages/upgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4B1B,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAqE9B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/Pages/upgradeButton.js

@@ -0,0 +1,17 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const UpgradeButton_1 = __importDefault(require("../Components/UpgradeButton/UpgradeButton"));
+const useCustomTheme_1 = require("../Theme/useCustomTheme");
+const Section = ({ title, children, }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 8, p: 6, borderRadius: "16px", border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#E2E8F0", bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { size: "sm", mb: 4, color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900]) !== null && _d !== void 0 ? _d : "gray.700", children: title }), children] }));
+};
+const UpgradeButtonPage = () => ((0, jsx_runtime_1.jsxs)(react_1.Box, { maxW: "900px", mx: "auto", py: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { size: "lg", mb: 6, children: "Upgrade Button" }), (0, jsx_runtime_1.jsx)(Section, { title: "Plan states (label + subtitle, sparkle, hover sheen)", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Free Trial", mobileLabel: "Free Trial", subtitle: "12 days left", onClick: () => console.log("trial") }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Choose Your Plan", mobileLabel: "Choose", subtitle: "No active plan", onClick: () => console.log("choose") }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade Your Plan", mobileLabel: "Upgrade", subtitle: "Expires on 30 Jun", onClick: () => console.log("upgrade") })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Sizes", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade", size: "sm" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade", size: "md" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade", size: "lg" })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Theme variants (blend with the active theme)", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Brand", variant: "brand" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Primary", variant: "primary" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Secondary", variant: "secondary" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Success", variant: "success" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Warning", variant: "warning" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Danger", variant: "danger" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Info", variant: "info" })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Custom gradients & icons (explicit gradient overrides variant)", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Go Pro", icon: lucide_react_1.Crown, gradient: { from: "#f7971e", to: "#ffd200" }, iconColor: "#7a4f01" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Boost", icon: lucide_react_1.Rocket, gradient: { from: "#11998e", to: "#38ef7d" }, iconColor: "#ffffff" }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Premium", icon: lucide_react_1.Sparkles, gradient: { from: "#ee0979", to: "#ff6a00" } })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Loading / disabled / no shimmer", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 5, align: "center", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrading\u2026", isLoading: true }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Unavailable", isDisabled: true }), (0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "No shimmer", shimmer: false })] }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.500", children: "Hover any enabled button to see the light sweep." })] }));
+exports.default = UpgradeButtonPage;

package/dist/Pages/userDetails.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const UserDetailsPage: React.FC;
+export default UserDetailsPage;
+//# sourceMappingURL=userDetails.d.ts.map

package/dist/Pages/userDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"userDetails.d.ts","sourceRoot":"","sources":["../../src/Pages/userDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AA0EjD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EA+B5B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Pages/userDetails.js

@@ -0,0 +1,79 @@
+"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 lucide_react_1 = require("lucide-react");
+const UserDetails_1 = __importDefault(require("../Components/UserDetails/UserDetails"));
+const demoUsers = [
+    {
+        id: 1,
+        firstName: "Aisha",
+        lastName: "Khan",
+        email: "aisha.khan@pixelize.dev",
+        role: "Super Admin",
+        isActive: true,
+        isCurrent: true,
+        isSuperAdmin: true,
+    },
+    {
+        id: 2,
+        firstName: "Marcus",
+        lastName: "Reed",
+        email: "marcus.reed@pixelize.dev",
+        role: "Sales Manager",
+        isActive: true,
+    },
+    {
+        id: 3,
+        firstName: "Lena",
+        lastName: "Fischer",
+        email: "lena.fischer@pixelize.dev",
+        role: "Support Agent",
+        isActive: false,
+        isPending: true,
+    },
+    {
+        id: 4,
+        firstName: "Diego",
+        lastName: "Santos",
+        email: "diego.santos@pixelize.dev",
+        role: "Marketing",
+        isActive: true,
+    },
+];
+const demoRoleOptions = [
+    { id: 10, label: "Super Admin" },
+    { id: 11, label: "Sales Manager" },
+    { id: 12, label: "Support Agent" },
+    { id: 13, label: "Marketing" },
+];
+function buildSelectedUser(user) {
+    return {
+        userId: user.id,
+        name: `${user.firstName} ${user.lastName}`,
+        role: user.role,
+        email: user.email,
+        isActive: user.isActive,
+        isPending: user.isPending,
+        isCurrent: user.isCurrent,
+        isSuperAdmin: user.isSuperAdmin,
+        details: [
+            { label: "First Name", value: user.firstName, icon: lucide_react_1.UserRound },
+            { label: "Last Name", value: user.lastName, icon: lucide_react_1.UserRound },
+            { label: "Email", value: user.email, icon: lucide_react_1.Mail },
+            { label: "Role", value: user.role, icon: lucide_react_1.BriefcaseBusiness },
+        ],
+    };
+}
+const UserDetailsPage = () => {
+    const [selectedId, setSelectedId] = (0, react_1.useState)(demoUsers[0].id);
+    const selectedUser = (0, react_1.useMemo)(() => {
+        const user = demoUsers.find((u) => u.id === selectedId);
+        return user ? buildSelectedUser(user) : null;
+    }, [selectedId]);
+    return ((0, jsx_runtime_1.jsx)(UserDetails_1.default, { users: demoUsers, selectedUser: selectedUser, selectedUserId: selectedId, roleOptions: demoRoleOptions, canManageUsers: true, onSelectUser: (user) => setSelectedId(user.id), onRefresh: () => console.log("[UserDetailsPage] refresh"), onAddUserSubmit: (values) => console.log("[UserDetailsPage] add user", values), onChangeRoleSubmit: (payload) => console.log("[UserDetailsPage] change role", payload), onReinvite: (userId) => console.log("[UserDetailsPage] reinvite", userId), onDeactivate: (userId) => console.log("[UserDetailsPage] deactivate", userId), onAddRoleClick: () => console.log("[UserDetailsPage] add role"), minHeight: "70vh" }));
+};
+exports.default = UserDetailsPage;

package/dist/Pages/verifyEmail.d.ts

@@ -0,0 +1,3 @@
+declare const VerifyEmailPage: () => import("react/jsx-runtime").JSX.Element;
+export default VerifyEmailPage;
+//# sourceMappingURL=verifyEmail.d.ts.map

package/dist/Pages/verifyEmail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"verifyEmail.d.ts","sourceRoot":"","sources":["../../src/Pages/verifyEmail.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe,+CAoBpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Pages/verifyEmail.js

@@ -0,0 +1,17 @@
+"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 VerifyEmailOtp_1 = __importDefault(require("../Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
+const VerifyEmailPage = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(VerifyEmailOtp_1.default, { resendMail: () => {
+                console.log("hello");
+            }, onChange: (val) => {
+                console.log("onchange", val);
+            }, onComplete: (val) => {
+                console.log("onComplete", val);
+            }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify", styles: { width: "70%", padding: "2px" } }) }));
+};
+exports.default = VerifyEmailPage;

package/dist/Theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEnE;;;;;GAKG;AACH,QAAA,MAAM,QAAQ,qBAA2C,CAAC;AAC1D,QAAA,MAAM,MAAM,qBAAyC,CAAC;AACtD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,KAAK,qBAAwC,CAAC;AACpD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,QAAQ,qBAA2C,CAAC;AAC1D,QAAA,MAAM,UAAU,qBAA6C,CAAC;AAC9D,QAAA,MAAM,IAAI,qBAAuC,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAE1F;;;;;GAKG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;CAUtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,SAAS,EACT,MAAM,CAAC,iBAAiB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAC/D,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,WAAW,EAAE,WAUzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,2BAA2B,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEnE;;;;;GAKG;AACH,QAAA,MAAM,QAAQ,qBAA2C,CAAC;AAC1D,QAAA,MAAM,MAAM,qBAAyC,CAAC;AACtD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,KAAK,qBAAwC,CAAC;AACpD,QAAA,MAAM,OAAO,qBAA0C,CAAC;AACxD,QAAA,MAAM,QAAQ,qBAA2C,CAAC;AAC1D,QAAA,MAAM,UAAU,qBAA6C,CAAC;AAC9D,QAAA,MAAM,IAAI,qBAAuC,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAE1F;;;;;GAKG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;CAUtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,CAC9B,SAAS,EACT,MAAM,CAAC,iBAAiB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAC/D,CAAC;AAsBF,iFAAiF;AACjF,eAAO,MAAM,WAAW,EAAE,WAUzB,CAAC"}

package/dist/Theme/index.js

@@ -47,15 +47,31 @@ exports.ThemesList = {
     storefront: storefront,
     zinc: zinc,
 };
+/**
+ * `dark` is built on first read, not at import. Nine `createBrandTheme` calls measure ~15ms on a
+ * dev machine, and a light-only app (tickets, and every app before it opts in) never reads one.
+ * A getter — rather than a lazy map — keeps `Object.keys(brandThemes)` and its order intact,
+ * which `ThemeSwitcher` iterates to render the brand picker.
+ */
+const withLazyDark = (brand, light) => {
+    let dark;
+    return {
+        light,
+        get dark() {
+            dark !== null && dark !== void 0 ? dark : (dark = (0, createBrandTheme_1.default)(brands_1.darkPalettes[brand], { colorMode: "dark" }));
+            return dark;
+        },
+    };
+};
 /** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
 exports.brandThemes = {
-    lavender: { light: lavender, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.lavender, { colorMode: "dark" }) },
-    meadow: { light: meadow, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.meadow, { colorMode: "dark" }) },
-    radiant: { light: radiant, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.radiant, { colorMode: "dark" }) },
-    skyline: { light: skyline, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.skyline, { colorMode: "dark" }) },
-    slate: { light: slate, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.slate, { colorMode: "dark" }) },
-    emerald: { light: emerald, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.emerald, { colorMode: "dark" }) },
-    rosewood: { light: rosewood, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.rosewood, { colorMode: "dark" }) },
-    storefront: { light: storefront, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.storefront, { colorMode: "dark" }) },
-    zinc: { light: zinc, dark: (0, createBrandTheme_1.default)(brands_1.darkPalettes.zinc, { colorMode: "dark" }) },
+    lavender: withLazyDark("lavender", lavender),
+    meadow: withLazyDark("meadow", meadow),
+    radiant: withLazyDark("radiant", radiant),
+    skyline: withLazyDark("skyline", skyline),
+    slate: withLazyDark("slate", slate),
+    emerald: withLazyDark("emerald", emerald),
+    rosewood: withLazyDark("rosewood", rosewood),
+    storefront: withLazyDark("storefront", storefront),
+    zinc: withLazyDark("zinc", zinc),
 };

package/dist/Theme/provider/PixelizeThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kGAAkG;IAClG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,sGAAsG;IACtG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,2HASnC,0BAA0B,4CA8K5B,CAAC"}
+{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kGAAkG;IAClG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,sGAAsG;IACtG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,2HASnC,0BAA0B,4CAyL5B,CAAC"}

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -116,11 +116,15 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
     // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
-    // invalidate the context value on every render of the consuming app.
+    // invalidate the context value on every render of the consuming app. Written in a layout
+    // effect, not during render — a render-phase write is unsafe under StrictMode's double
+    // invocation, and this still lands before any click handler can fire.
     const onModeChangeRef = (0, react_1.useRef)(onModeChange);
-    onModeChangeRef.current = onModeChange;
     const onBrandChangeRef = (0, react_1.useRef)(onBrandChange);
-    onBrandChangeRef.current = onBrandChange;
+    (0, react_1.useLayoutEffect)(() => {
+        onModeChangeRef.current = onModeChange;
+        onBrandChangeRef.current = onBrandChange;
+    }, [onModeChange, onBrandChange]);
     const setMode = (0, react_1.useCallback)((next) => {
         var _a;
         setModeState(next);
@@ -135,12 +139,18 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
     // visibly changes the UI.
     const toggle = (0, react_1.useCallback)(() => setMode(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode, setMode]);
     const value = (0, react_1.useMemo)(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
+    // `themeOverrides` is caller-supplied, and the idiomatic way to pass it is an inline object
+    // literal — a new identity every render. Keying the memo on identity would re-run `extendTheme`
+    // and hand `ChakraProvider` a new theme on every render of the consuming app, invalidating
+    // emotion's style resolution for everything beneath it. Compare by value instead.
+    const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
     const resolvedTheme = (0, react_1.useMemo)(() => {
         const base = index_1.brandThemes[brand][resolvedMode];
-        return themeOverrides
-            ? (0, react_2.extendTheme)(base, themeOverrides)
-            : base;
-    }, [brand, resolvedMode, themeOverrides]);
+        return themeOverrides ? (0, react_2.extendTheme)(base, themeOverrides) : base;
+        // Keyed on the serialized overrides, not their identity. `brand`/`resolvedMode` must stay:
+        // overrides re-layer onto the CURRENT palette (see the prop's doc comment above).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [brand, resolvedMode, overridesKey]);
     /**
      * The library ships its `var(--color-*)` tokens light-only on `:root` (global.css), so any
      * consumer that styles with those CSS vars rather than Chakra tokens stays light in dark mode —

package/dist/Utils/rafThrottle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Coalesces bursts of calls into one per animation frame.
+ *
+ * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
+ * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
+ * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
+ * which is what makes menus judder while the page moves. One frame is also the fastest rate the
+ * screen can show a change, so nothing is lost by dropping the rest.
+ *
+ * The trailing call wins: the last arguments before the frame fires are the current ones.
+ */
+export declare const rafThrottle: <A extends unknown[]>(fn: (...args: A) => void) => ((...args: A) => void) & {
+    cancel: () => void;
+};
+//# sourceMappingURL=rafThrottle.d.ts.map

package/dist/Utils/rafThrottle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rafThrottle.d.ts","sourceRoot":"","sources":["../../src/Utils/rafThrottle.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,OAAO,EAAE,EAC7C,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,KACvB,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,MAAM,EAAE,MAAM,IAAI,CAAA;CAmB/C,CAAC"}

package/dist/Utils/rafThrottle.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rafThrottle = void 0;
+/**
+ * Coalesces bursts of calls into one per animation frame.
+ *
+ * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
+ * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
+ * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
+ * which is what makes menus judder while the page moves. One frame is also the fastest rate the
+ * screen can show a change, so nothing is lost by dropping the rest.
+ *
+ * The trailing call wins: the last arguments before the frame fires are the current ones.
+ */
+const rafThrottle = (fn) => {
+    let frame = null;
+    let latest;
+    const throttled = (...args) => {
+        latest = args;
+        if (frame !== null)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = null;
+            fn(...latest);
+        });
+    };
+    throttled.cancel = () => {
+        if (frame !== null)
+            cancelAnimationFrame(frame);
+        frame = null;
+    };
+    return throttled;
+};
+exports.rafThrottle = rafThrottle;

package/dist/Utils/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/Utils/table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/Utils/table.ts"],"names":[],"mappings":"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"}

package/dist/Utils/table.js

@@ -45,6 +45,13 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+// Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
+// collator is orders of magnitude dearer than using one.
+const COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: "base",
+});
+const HAS_DIGIT = /\d/;
 /**
  * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
  * back to a numeric-aware locale string compare. Empty/null values sort last.
@@ -67,11 +74,15 @@ function compareValues(aRaw, bRaw, direction) {
     const bn = Number(b);
     if (!Number.isNaN(an) && !Number.isNaN(bn))
         return (an - bn) * dir;
-    const ad = Date.parse(a);
-    const bd = Date.parse(b);
-    if (!Number.isNaN(ad) && !Number.isNaN(bd))
-        return (ad - bd) * dir;
-    return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }) * dir;
+    // No digit means no date, so this skips two Date.parse calls per comparison on the common
+    // text columns (names, emails, statuses) without changing which strings parse as dates.
+    if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
+        const ad = Date.parse(a);
+        const bd = Date.parse(b);
+        if (!Number.isNaN(ad) && !Number.isNaN(bd))
+            return (ad - bd) * dir;
+    }
+    return COLLATOR.compare(a, b) * dir;
 }
 function SortMultiColumnData(data, sortConfig) {
     const active = sortConfig.filter((s) => s.direction !== "none");

package/dist/bootstrap.d.ts

@@ -0,0 +1,2 @@
+import "./index.css";
+//# sourceMappingURL=bootstrap.d.ts.map

package/dist/bootstrap.js

@@ -0,0 +1,16 @@
+"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 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+const App_1 = __importDefault(require("./App"));
+const provider_1 = require("./Theme/provider");
+require("./index.css");
+const root = client_1.default.createRoot(document.getElementById("root"));
+// The playground uses the provider (rather than the legacy `withTheme` HOC) so the
+// light/dark/brand switcher is exercisable here. `withTheme` is still the shipped
+// default export and is unchanged.
+root.render((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(provider_1.PixelizeThemeProvider, { children: (0, jsx_runtime_1.jsx)(App_1.default, {}) }) }));

package/dist/esm/App.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { Calendar, Cuboid, FileText, House, Link2 } from "lucide-react";
+import Loading from "./Components/Loading/Loading";
+import Sidebar from "./Components/SideBar/SideBar";
+import NavBar from "./Components/NavigationBar/NavigationBar";
+import { useSidebarPrefs } from "./Hooks/useSidebarPrefs";
+import { ThemeSwitcher } from "./Theme/provider";
+import { useCustomTheme } from "./Theme/useCustomTheme";
+import Layout from "./Layout";
+import "./global.css";
+// --- Static demo data (module scope so it isn't re-created each render) ------
+const menu = [
+    {
+        id: 1, title: "Dashboard", icon: House, url: "", group: "Main",
+        secondaryItems: [
+            { id: 11, title: "SubMenu", url: "submenu1", icon: Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
+            { id: 12, title: "SubMenu2", url: "submenu2", icon: Cuboid },
+        ],
+    },
+    {
+        id: 2, title: "AlertDialog", icon: Calendar, url: "alertdialog",
+        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
+    },
+    {
+        id: 3, title: "SideMenu", icon: Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 31, title: "SubMenu1", url: "submenu1", icon: FileText },
+            { id: 32, title: "SubMenu2", url: "submenu2", icon: Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
+        ],
+    },
+    {
+        id: 4, title: "SideMenu", icon: Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 33, title: "SubMenu1", url: "submenu1" },
+            { id: 34, title: "SubMenu2", url: "submenu2" },
+        ],
+    },
+    {
+        id: 8, title: "SideMenu", icon: Cuboid, url: "sidemenu", group: "Tools",
+        subMenu: [
+            { id: 41, title: "SubMenu1", url: "submenu1", icon: Cuboid },
+            { id: 42, title: "SubMenu2", url: "submenu2", icon: Cuboid },
+        ],
+    },
+];
+const navmenus = [
+    { title: "Account Settings", url: "myaccount", icon: _jsx(Cuboid, {}) },
+    { title: "Reset password", url: "resetpassword" },
+    { title: "Billing", url: "billing" },
+    { title: "Notifications", url: "notifications" },
+];
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
+    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 = 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, } = useSidebarPrefs();
+    const [activeMenu, setActiveMenu] = useState(2);
+    const [activeSecondaryItem, setActiveSecondaryItem] = 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 (_jsx("div", { className: "App", children: _jsxs(Box, { minH: "100vh", bg: "gray.100", overflow: "hidden", children: [_jsx(Loading, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }), _jsxs(Flex, { children: [_jsx(Box, { children: _jsx(Sidebar, { 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 }) }), _jsxs(Box, { flex: "1", minW: 0, overflow: "hidden", children: [_jsx(NavBar, { 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: _jsx(_Fragment, { children: "Dashboard" }),
+                                        onIconClick: () => { },
+                                    }, moreIcon: _jsx(Calendar, {}) }, "navbar"), _jsx("br", {}), _jsxs(Flex, { "data-testid": "theme-controls", px: "50px", pb: 3, gap: 4, align: "center", justify: "flex-end", children: [_jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: true }), _jsx(ThemeSwitcher, { variant: "icon" })] }), _jsx(Box, { p: "50px", pt: 0, height: height - 200, overflowY: "scroll", overflowX: "hidden", width: "100%", "data-testid": "playground-surface", bg: theme.colors.backgroundColor.main, children: _jsx(Layout, {}) })] })] })] }) }));
+}
+export default App;

package/dist/esm/Assets/defaultLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultLogo = () => {
+    return (_jsxs("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_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" }), _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" }), _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" })] }));
+};
+export default DefaultLogo;

package/dist/esm/Components/Accordion/Accordion.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, AccordionPanel, Box, Flex, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText";
+import { getAccordionHoverColors } from "./accordionColors";
+const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const theme = useCustomTheme();
+    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
+    const isDark = 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 } = useMemo(() => { var _a; return getAccordionHoverColors((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
+            var _a, _b, _c, _d, _e, _f;
+            return (_jsx(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 (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(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",
+                                    }, ...item.buttonProps, sx: {
+                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        "&:hover": {
+                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
+                                        },
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(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: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(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));
+        }) }));
+};
+export default Accordion;

package/dist/esm/Components/Accordion/AccordionProps.js

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