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

package/dist/Pages/rolesPermission.js

@@ -0,0 +1,144 @@
+"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 RolesPermission_1 = __importDefault(require("../Components/RolesPermission/RolesPermission"));
+const basePermissions = [
+    {
+        module: "Leads",
+        read: true,
+        create: true,
+        edit: true,
+        delete: false,
+        import: false,
+        export: false,
+    },
+    {
+        module: "Contacts",
+        read: true,
+        create: true,
+        edit: false,
+        delete: false,
+        import: true,
+        export: true,
+    },
+    {
+        module: "Deals",
+        read: true,
+        create: false,
+        edit: false,
+        delete: false,
+        import: false,
+        export: false,
+    },
+    {
+        module: "Automation",
+        read: false,
+        create: false,
+        edit: false,
+        delete: false,
+        automation: true,
+    },
+];
+const demoRoles = [
+    {
+        roleName: "Super Admin",
+        createdBy: "Aisha Khan",
+        created_at: "Jun 6, 2026 10:00 AM",
+        permission: basePermissions,
+        roles_id: "1",
+        designation: "Army",
+        makeSuperAdmin: true,
+    },
+    {
+        roleName: "Sales Manager",
+        createdBy: "Marcus Reed",
+        created_at: "Jun 5, 2026 09:12 AM",
+        permission: basePermissions,
+        roles_id: "2",
+        designation: "Army",
+        trackLocation: true,
+    },
+    {
+        roleName: "Support Agent",
+        createdBy: "Lena Fischer",
+        created_at: "Jun 4, 2026 04:45 PM",
+        permission: basePermissions,
+        roles_id: "3",
+        designation: "Army",
+    },
+];
+const RolesPermissionPage = () => {
+    const [view, setView] = (0, react_1.useState)("list");
+    const [mode, setMode] = (0, react_1.useState)("create");
+    const [roleName, setRoleName] = (0, react_1.useState)("");
+    const [roleNameError, setRoleNameError] = (0, react_1.useState)("");
+    const [isSuperAdmin, setIsSuperAdmin] = (0, react_1.useState)(false);
+    const [isTrackLocation, setIsTrackLocation] = (0, react_1.useState)(false);
+    const [isShowRecords, setIsShowRecords] = (0, react_1.useState)(false);
+    const [permissions, setPermissions] = (0, react_1.useState)(basePermissions);
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const resetForm = () => {
+        setRoleName("");
+        setRoleNameError("");
+        setIsSuperAdmin(false);
+        setIsTrackLocation(false);
+        setIsShowRecords(false);
+        setPermissions(basePermissions);
+        setEditing(false);
+    };
+    const openRole = (role, viewMode) => {
+        setRoleName(role.roleName);
+        setIsSuperAdmin(!!role.makeSuperAdmin);
+        setIsTrackLocation(!!role.trackLocation);
+        setIsShowRecords(!!role.show_records);
+        setPermissions(role.permission);
+        setEditing(true);
+        setMode(viewMode ? "view" : "edit");
+        setView("form");
+    };
+    const handlePermissionChange = (module, key) => {
+        setPermissions((prev) => prev.map((perm) => perm.module === module ? { ...perm, [key]: !perm[key] } : perm));
+        if (isSuperAdmin)
+            setIsSuperAdmin(false);
+    };
+    const roles = (0, react_1.useMemo)(() => demoRoles, []);
+    return ((0, jsx_runtime_1.jsx)(RolesPermission_1.default, { view: view, mode: mode, roles: roles, permissions: permissions, roleName: roleName, roleNameError: roleNameError, isSuperAdmin: isSuperAdmin, isTrackLocation: isTrackLocation, isShowRecords: isShowRecords, isEditing: editing, onNewRole: () => {
+            resetForm();
+            setMode("create");
+            setView("form");
+        }, onViewRole: (role) => openRole(role, true), onEditRole: (role) => openRole(role, false), onDeleteRole: (id) => console.log("[RolesPermissionPage] delete", id), onBack: () => console.log("[RolesPermissionPage] back"), onRoleNameChange: (value) => {
+            setRoleName(value);
+            if (roleNameError)
+                setRoleNameError("");
+        }, onToggleSuperAdmin: (checked) => {
+            setIsSuperAdmin(checked);
+            if (checked) {
+                setPermissions((prev) => prev.map((perm) => ({
+                    ...perm,
+                    read: true,
+                    create: true,
+                    edit: true,
+                    delete: true,
+                    import: true,
+                    export: true,
+                    automation: true,
+                })));
+            }
+        }, onToggleTrackLocation: setIsTrackLocation, onToggleShowRecords: setIsShowRecords, onPermissionChange: handlePermissionChange, onSave: () => {
+            if (!roleName.trim()) {
+                setRoleNameError("Role name is required");
+                return;
+            }
+            console.log("[RolesPermissionPage] save", {
+                roleName,
+                isSuperAdmin,
+                permissions,
+            });
+            setView("list");
+        }, onCancelForm: () => setView("list") }));
+};
+exports.default = RolesPermissionPage;

package/dist/Pages/search.d.ts

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

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

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

package/dist/Pages/search.js

@@ -0,0 +1,21 @@
+"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 Search_1 = __importDefault(require("../Components/Search/Search"));
+const SearchPage = () => {
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
+    const handleSearch = (event) => {
+        console.log("Search query:", event.target.value);
+        setSearchQuery(event.target.value);
+    };
+    const handleRemoveSearch = () => {
+        console.log("Search query removed");
+        setSearchQuery("");
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Search_1.default, { onSearch: handleSearch, onclose: handleRemoveSearch, query: searchQuery, label: "Search", placeholder: "Search...", isRequired: true, error: false, errorMessage: "Error message", helperText: "Helper text", isInformation: true, informationMessage: "Information message", shortcut: "Ctrl+K" }) }));
+};
+exports.default = SearchPage;

package/dist/Pages/searchSelect.d.ts

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

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

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

package/dist/Pages/searchSelect.js

@@ -0,0 +1,97 @@
+"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 SearchSelect_1 = __importDefault(require("../Components/SearchSelect/SearchSelect"));
+// import { Plus } from "lucide-react";
+const react_2 = require("@chakra-ui/react");
+const TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
+const max = 3;
+const rrr = (start, limit) => {
+    const end = Math.min(start + limit, max + 1); // +1 to include `max` as valid
+    return Array.from({ length: end - start }, (_, index) => ({
+        id: (start + index).toString(),
+        label: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.   ${start + index}`,
+        view: ((0, jsx_runtime_1.jsx)(react_2.Box, { children: " demo" }))
+    }));
+};
+const SearchSelect = () => {
+    const [selectedOptions, setselectedOptions] = (0, react_1.useState)(undefined);
+    const [insideSelectValue, setInsideSelectValue] = (0, react_1.useState)(undefined);
+    const [soptions] = (0, react_1.useState)(rrr(1, 50)); // initial 50
+    const [search, setSearch] = (0, react_1.useState)("");
+    // const [customSelectValue, setCustomSelectValue] = useState<any>({});
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { width: "250px" }, children: [(0, jsx_runtime_1.jsx)(SearchSelect_1.default
+            // width={"250px"}
+            , { 
+                // width={"250px"}
+                label: "Users", id: "user-select", options: soptions, value: selectedOptions, isMultiple: true, onSelect: (val) => {
+                    console.log("val", val);
+                    setselectedOptions(val);
+                }, onSearch: (query) => setSearch(query), searchQuery: search, isOptionLoading: false, placeholder: "Search users...", chip: {
+                    maxChips: 3,
+                    onClick: () => console.log("chip removed"),
+                }, isSelectAll: true, isRequired: true, size: "sm", 
+                // onSearch={(query) => setSearch(query)}
+                insideSelect: {
+                    width: "5rem",
+                    placeholder: "Type",
+                    onSelect: (val) => setInsideSelectValue(val),
+                    value: insideSelectValue,
+                    option: [
+                        { id: 1, label: "Option 1" },
+                        { id: 2, label: "Option 2" },
+                    ],
+                }, 
+                // pagination={{
+                //   limit: 50,
+                //   scrollLoading: paginationLoading,
+                //   onScroll: async (startIndex, limit, query) => {
+                //     console.log("Fetching:", startIndex, limit, query);
+                //     if (startIndex > max) {
+                //       console.log("No more data to load.");
+                //       return;
+                //     }
+                //     setpaginationLoading(true);
+                //     await delay(1000);
+                //     const newOptions = rrr(startIndex, limit);
+                //     setpaginationLoading(false);
+                //     if (newOptions.length === 0) {
+                //       console.log("No new options returned.");
+                //       return;
+                //     }
+                //     setSoptions((prev: any[]) => [...prev, ...newOptions]);
+                //   },
+                // }}
+                // width={"500px"}
+                addNew: {
+                    enabled: true,
+                    text: "Add new user",
+                    onClick: () => console.log("Add New User"),
+                } }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: "My Label", id: "input1", name: "hello", 
+                //helperText="Hello"
+                // errorMessage="Required"
+                // error={true}
+                type: "email", 
+                // border={"0px solid"}
+                // padding={"0px"}
+                // inputStyle={{ border: "0px solid", padding: "0px" }}
+                // inputGroupStyle={{ border: "0px solid", padding: "0px" }}
+                // error={true}
+                // errorMessage="Required"
+                onChange: (e) => {
+                    console.log(e.target.files);
+                }, onKeyDown: () => {
+                    console.log("keydown");
+                }, onBlur: () => {
+                    console.log("blur");
+                }, 
+                // helperText="sometibg"
+                isRequired: true, informationMessage: "This is information", isInformation: true, 
+                // isDisabled
+                minW: "200px", maxW: "300px" }, "input1")] }));
+};
+exports.default = SearchSelect;

package/dist/Pages/select.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/Pages/select.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,UAAU,+CAsBf,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/Pages/select.js

@@ -0,0 +1,20 @@
+"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 Select_1 = __importDefault(require("../Components/Select/Select"));
+const SelectPage = () => {
+    const [selected, setSelected] = (0, react_1.useState)("");
+    const handleOnChange = (selectedOption) => {
+        const checked = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id;
+        setSelected(checked != null ? String(checked) : "");
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: [
+                { id: 1, label: "magesssssss" },
+                { id: 2, label: "sjdfg" },
+            ], onChange: handleOnChange, value: selected }) }));
+};
+exports.default = SelectPage;

package/dist/Pages/selectSearch.d.ts

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

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

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

package/dist/Pages/selectSearch.js

@@ -0,0 +1,58 @@
+"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 SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
+const lucide_react_1 = require("lucide-react");
+const SelectSearchs = () => {
+    const [selectSearchText, setSelectSearchText] = (0, react_1.useState)("Option 1");
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)({
+        id: "1",
+        label: "Option 1",
+    });
+    const [multiSelectSearchText, setMultiSelectSearchText] = (0, react_1.useState)("Option 1");
+    const [multiselectedOption, setMultiSelectedOption] = (0, react_1.useState)([{ id: "1", label: "Option 1" }]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectSearch_1.default, { BottomText: "Add Check", isBottomIcon: true, isProfile: true, isOptionLoading: false, loadingText: "Loading...", BottomIcon: false, options: [
+                        {
+                            id: "1",
+                            label: "Option 1",
+                            profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                            email: "kavinKumar0298@gggmail.com",
+                        },
+                        {
+                            id: "2",
+                            label: "select 2",
+                            profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                            email: "kavinKumar0298@gggmail.com",
+                        },
+                        {
+                            id: "3",
+                            label: "clone 3",
+                            profileUrl: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo",
+                            email: "kavinKumar0298@gggmail.com",
+                        },
+                    ], inputOnchange: (value) => {
+                        setSelectSearchText(value.toString());
+                        console.log(value);
+                    }, initialSelectedOption: selectedOption, onOptionSelect: (data) => {
+                        setSelectSearchText(data.label);
+                        setSelectedOption(data);
+                    }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: false, handleBottomClick: () => console.log("clg") }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectSearch_1.default, { BottomText: "Add Check", options: [
+                        { id: "1", label: "Option 1jhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh" },
+                        { id: "2", label: "select 2" },
+                        { id: "3", label: "clone 3" },
+                    ], inputOnchange: (value) => {
+                        setMultiSelectSearchText(value.toString());
+                        // console.log(value);
+                    }, initialSelectedOption: multiselectedOption[0], 
+                    // onOptionSelect={(data) => {
+                    //   setMultiSelectSearchText(data.label);
+                    // }}
+                    name: "hai", label: "MultiSelectSearch", searchQuery: multiSelectSearchText, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: (data) => {
+                        setMultiSelectedOption(data);
+                    } }) })] }));
+};
+exports.default = SelectSearchs;

package/dist/Pages/signInActivityTable.d.ts

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

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

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

package/dist/Pages/signInActivityTable.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 SignInActivityTable_1 = __importDefault(require("../Components/SignInActivityTable/SignInActivityTable"));
+const demoDevices = [
+    { browser: "Chrome 124", device: "MacBook Pro", activity: "2 minutes ago" },
+    { browser: "Safari 17", device: "iPhone 15 Pro", activity: "Yesterday, 8:14 PM" },
+    { browser: "Edge 124", device: "Windows 11", activity: "Jun 3, 2026 10:02 AM" },
+];
+const SignInActivityTablePage = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { maxW: "720px", children: (0, jsx_runtime_1.jsx)(SignInActivityTable_1.default, { devices: demoDevices }) }));
+};
+exports.default = SignInActivityTablePage;

package/dist/Pages/skeleton.d.ts

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

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

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

package/dist/Pages/skeleton.js

@@ -0,0 +1,12 @@
+"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 Skeletons_1 = __importDefault(require("../Components/Skeletons/Skeletons"));
+const SkeletonPage = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "circle" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "text", mt: 4 }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { height: "10px", isLoaded: false, fadeDuration: 4, bg: "blue.500", color: "white", type: "skeleton", children: (0, jsx_runtime_1.jsx)(react_1.Box, { children: "Hello ChakraUI!" }) })] }) }));
+};
+exports.default = SkeletonPage;

package/dist/Pages/stageProgress.d.ts

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

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

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

package/dist/Pages/stageProgress.js

@@ -0,0 +1,31 @@
+"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 StageProgress_1 = __importDefault(require("../Components/StageProgress/StageProgress"));
+const useCustomTheme_1 = require("../Theme/useCustomTheme");
+const DEAL_STAGES = [
+    { id: "qualification", label: "Qualification" },
+    { id: "needs", label: "Needs Analysis" },
+    { id: "proposal", label: "Value Proposition" },
+    { id: "decision", label: "Identify Decision Makers" },
+    { id: "quote", label: "Proposal / Price Quote" },
+    { id: "negotiation", label: "Negotiation / Review" },
+    { id: "won", label: "Closed Won" },
+];
+const Section = ({ title, children, }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: 10, 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_2.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 StageProgressPage = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [dealStage, setDealStage] = (0, react_1.useState)("proposal");
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "1000px", mx: "auto", py: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "lg", mb: 6, children: "Stage Progress" }), (0, jsx_runtime_1.jsxs)(Section, { title: "Variants \u2014 all interactive, click a stage", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", gap: 7, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : "gray.500", mb: 2, children: "chevron" }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES, variant: "chevron", value: dealStage, onChange: (id) => setDealStage(id), showCheck: true })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : "gray.500", mb: 2, children: "bar" }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES, variant: "bar", value: dealStage, onChange: (id) => setDealStage(id) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : "gray.500", mb: 2, children: "pills" }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES, variant: "pills", value: dealStage, onChange: (id) => setDealStage(id) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: (_h = (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "gray.500", mb: 2, children: "stepper" }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES, variant: "stepper", value: dealStage, onChange: (id) => setDealStage(id), showCheck: true })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { mt: 4, fontSize: "sm", color: "gray.500", children: ["Active: ", (0, jsx_runtime_1.jsx)("b", { children: dealStage })] })] }), (0, jsx_runtime_1.jsx)(Section, { title: "Sizes", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", gap: 5, children: [(0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", size: "sm", isReadOnly: true }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", size: "md", isReadOnly: true }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", size: "lg", isReadOnly: true })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Color schemes", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", gap: 4, children: [(0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", colorScheme: "primary", isReadOnly: true }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", colorScheme: "success", isReadOnly: true, showCheck: true }), (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: DEAL_STAGES.slice(0, 5), value: "proposal", colorScheme: "warning", isReadOnly: true })] }) }), (0, jsx_runtime_1.jsx)(Section, { title: "Loading", children: (0, jsx_runtime_1.jsx)(StageProgress_1.default, { stages: [], isLoading: true }) })] }));
+};
+exports.default = StageProgressPage;

package/dist/Pages/switch.d.ts

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

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

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

package/dist/Pages/switch.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("react");
+const Switch_1 = __importDefault(require("../Components/Switch/Switch"));
+const SwitchPage = () => {
+    const [switchActive, setSwitchActive] = (0, react_1.useState)("left");
+    const handleSwitchToggle = (value) => {
+        // console.log(value);
+        setSwitchActive(value);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Switch_1.default, { leftText: "Overview", rightText: "Timeline", switchActive: switchActive, onSwitchToggle: handleSwitchToggle }) }));
+};
+exports.default = SwitchPage;

package/dist/Pages/table.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/Pages/table.tsx"],"names":[],"mappings":"AAgHA,eAAO,MAAM,YAAY,+CAuIxB,CAAC;AAEF,eAAe,YAAY,CAAC"}