pixelize-design-library 2.2.198 → 2.3.1-beta.1

package/dist/Pages/input.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var TextInput_1 = __importDefault(require("../Components/Input/TextInput"));
+var PhoneNumberInput_1 = __importDefault(require("../Components/Input/PhoneNumberInput"));
+var InputSwitch_1 = require("../Components/Input/Switch/InputSwitch");
+var lucide_react_1 = require("lucide-react");
+var InputPage = function () {
+    var _a = (0, react_1.useState)([]), countries = _a[0], setCountries = _a[1];
+    var _b = (0, react_1.useState)(false), switchState = _b[0], setSwitchState = _b[1];
+    (0, react_1.useEffect)(function () {
+        fetch("https://dev.api.pixelizetech.com/account/api/allCountries")
+            .then(function (res) { return res.json(); })
+            .then(function (data) {
+            setCountries(data);
+        })
+            .catch(function (err) { return console.error("Error fetching countries:", err); });
+    }, []);
+    return (react_1.default.createElement("div", { style: { width: "500px" } },
+        react_1.default.createElement(TextInput_1.default, { label: "My Label", id: "input1", name: "hello", 
+            //helperText="Hello"
+            //errorMessage="Required"
+            // error={true}
+            type: "email", 
+            // inputRightIcon={<User color="#FF0000" />}
+            // onRightIconclick={() => {
+            //   console.log("icon click");
+            // }}
+            // inputLeftIcon={<User color="#FF0000" />}
+            // onLeftIconClick={() => {
+            //   console.log("icon click");
+            // }}
+            key: "input1", 
+            // border={"0px solid"}
+            // padding={"0px"}
+            // inputStyle={{ border: "0px solid", padding: "0px" }}
+            // inputGroupStyle={{ border: "0px solid", padding: "0px" }}
+            // error={true}
+            // errorMessage="Required"
+            onChange: function (e) {
+                console.log(e.target.files);
+            }, onKeyDown: function () {
+                console.log("keydown");
+            }, onBlur: function () {
+                console.log("blur");
+            }, 
+            // helperText="sometibg"
+            isRequired: true, informationMessage: "This is information", isInformation: true, 
+            // isDisabled
+            minW: "200px", maxW: "300px", inputLeftIcon: react_1.default.createElement(lucide_react_1.Mail, null) }),
+        react_1.default.createElement(PhoneNumberInput_1.default, { label: "Phone", id: "input1", name: "hello", country: "IN", value: "", codeValueReturn: false, countries: countries, onChange: function (val) {
+                console.log(val, "hello");
+            }, isRequired: true, informationMessage: "This is information", isInformation: true, error: true, errorMessage: "Required", showCountrySelect: true, minW: "200px", maxW: "300px" }),
+        react_1.default.createElement(InputSwitch_1.InputSwitch, { id: "repeat-switch", isChecked: switchState, onChange: function (e) { return setSwitchState(e.target.checked); }, switchText: "Repeat", switchTextPosition: "right", label: "My Switch", isInformation: true, informationMessage: "This is information", isRequired: true, size: "md" })));
+};
+exports.default = InputPage;

package/dist/Pages/kanbanboard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const KanbanBoardExample: () => React.JSX.Element;
+export default KanbanBoardExample;

package/dist/Pages/kanbanboard.js

@@ -0,0 +1,224 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var KanbanBoard_1 = __importDefault(require("../Components/KanbanBoard/KanbanBoard"));
+var createItems = function (count, prefix) {
+    return Array.from({ length: count }, function (_, i) { return ({
+        id: "".concat(prefix, "-").concat(i),
+        rating: "Acquired",
+        name: "".concat(prefix, " Item ").concat(i),
+        // customNode: () => <div style={{ backgroundColor: "red", padding: "10px", borderRadius: "5px" }}>Custom Node {i}</div>,
+    }); });
+};
+var buildKanbanData = function (primaryColumnColor, successColumnColor) {
+    return ({
+        acquired: {
+            id: "acquired",
+            title: "Acquired",
+            color: primaryColumnColor,
+            items: createItems(1000, "acq"),
+        },
+        active: {
+            id: "requested",
+            title: "Requested",
+            color: successColumnColor,
+            items: createItems(4, "req"),
+            customNode: function () { return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 2 },
+                react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600" }, "Total items: 4"),
+                react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "Drag cards to move"))); },
+        },
+        closed: {
+            id: "closed",
+            title: "close",
+            color: successColumnColor,
+            items: createItems(3, "cls"),
+        },
+        open: {
+            id: "open",
+            title: "Open",
+            color: successColumnColor,
+            items: createItems(5, "OP"),
+            customNode: function () { return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 2 },
+                react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.600" }, "Total items: 4"),
+                react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "Drag cards to move"))); },
+        },
+        done: {
+            id: "done",
+            title: "Done",
+            color: successColumnColor,
+            items: createItems(6, "done"),
+        },
+    });
+};
+var viewListData = [
+    {
+        view_id: 5,
+        type: "contact",
+        viewName: "status",
+        groupBy: "Lead Source",
+        selectedField: [
+            "contact_owner",
+            "first_name",
+            "last_name",
+            "title",
+            "assistant",
+            "email",
+            "mobile",
+            "lead_source",
+            "dob",
+            "skype_id",
+            "twitter",
+            "sec_email",
+            "mail_street",
+            "mail_city",
+            "mail_state",
+            "mail_zip",
+            "mail_country",
+            "other_street",
+            "other_city",
+            "other_state",
+            "other_zip",
+            "other_country",
+            "fax",
+            "description",
+        ],
+        moduleId: null,
+        created_at: 1756720852175,
+        updated_at: 1756720852175,
+    },
+    {
+        view_id: 4,
+        type: "contact",
+        viewName: "demo",
+        groupBy: "Lead Source",
+        selectedField: [
+            "contact_owner",
+            "first_name",
+            "last_name",
+            "title",
+            "assistant",
+            "email",
+            "mobile",
+            "lead_source",
+            "dob",
+            "skype_id",
+            "twitter",
+            "sec_email",
+            "mail_street",
+            "mail_city",
+            "mail_state",
+            "mail_zip",
+            "mail_country",
+            "other_street",
+            "other_city",
+            "other_state",
+            "other_zip",
+            "other_country",
+            "fax",
+            "description",
+        ],
+        moduleId: null,
+        created_at: 1756720474429,
+        updated_at: 1756720474429,
+    },
+    {
+        view_id: 2,
+        type: "contact",
+        viewName: "kanabana",
+        groupBy: "Lead Source",
+        selectedField: [
+            "contact_owner",
+            "first_name",
+            "last_name",
+            "title",
+            "assistant",
+            "email",
+            "mobile",
+            "lead_source",
+            "dob",
+            "skype_id",
+            "twitter",
+            "sec_email",
+            "mail_street",
+            "mail_city",
+            "mail_state",
+            "mail_zip",
+            "mail_country",
+            "other_street",
+            "other_city",
+            "other_state",
+            "other_zip",
+            "other_country",
+            "fax",
+            "description",
+        ],
+        moduleId: null,
+        created_at: 1756457931264,
+        updated_at: 1756457931264,
+    },
+];
+var KanbanBoardExample = function () {
+    var theme = (0, react_2.useTheme)();
+    var data = (0, react_1.useMemo)(function () {
+        return buildKanbanData(theme.colors.primary[500], theme.colors.semantic.success[500]);
+    }, [theme]);
+    return (react_1.default.createElement(KanbanBoard_1.default, { data: data, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); }, isLoading: false, virtualization: true, kanbanCreate: {
+            isCreatable: true,
+            onCreate: function () { },
+        }, kanbanEdit: {
+            isEditable: true,
+            onEdit: function () { },
+            label: "Edit",
+        }, kanbanSelect: {
+            isSelect: true,
+            options: viewListData === null || viewListData === void 0 ? void 0 : viewListData.map(function (item) { return ({
+                label: item === null || item === void 0 ? void 0 : item.viewName,
+                id: String(item === null || item === void 0 ? void 0 : item.view_id),
+            }); }),
+            onSelectChange: function () { },
+            selectPlaceholderText: "",
+            width: "200px",
+            value: "kanbanSelectValue",
+        }, enableColumnCollapse: true, enableColumnReorder: true, onColumnReorder: function (columns) { return console.log("New Order", columns); }, collapsedColumns: {
+            active: true,
+            closed: true,
+        }, onColumnCollapseChange: function (columns) { return console.log("New Collapse", columns); } }));
+};
+exports.default = KanbanBoardExample;

package/dist/Pages/modal.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ModalPage: () => React.JSX.Element;
+export default ModalPage;

package/dist/Pages/modal.js

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Modal_1 = __importStar(require("../Components/Modal/Modal"));
+var Button_1 = __importDefault(require("../Components/Button/Button"));
+var ModalPage = function () {
+    var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
+    var _b = (0, react_1.useState)(false), isModelLoading = _b[0], setIsModelLoading = _b[1];
+    (0, react_1.useEffect)(function () {
+        var timer = setTimeout(function () {
+            setIsModelLoading(false);
+        }, 5000);
+        // Cleanup the timer on component unmount
+        return function () { return clearTimeout(timer); };
+    }, []);
+    var handleOnclick2 = function () {
+        setIsOpen(true);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Button_1.default, { label: "ModelButton", onClick: handleOnclick2, width: 250, variant: "solid" }),
+        react_1.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, 
+            // overlaybg={"blackAlpha.300"}
+            // overlaybackdropFilter={"blur(10px) hue-rotate(90deg)"}
+            size: "sm", isCentered: true, isLoading: isModelLoading },
+            react_1.default.createElement(Modal_1.ModalHeader, null, "hai"),
+            react_1.default.createElement(Modal_1.ModalBody, null, "heelo"),
+            react_1.default.createElement(Modal_1.ModalFooter, null, "welcome"))));
+};
+exports.default = ModalPage;

package/dist/Pages/multiSelect.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MultiSelectPage: () => React.JSX.Element;
+export default MultiSelectPage;

package/dist/Pages/multiSelect.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var MultiSelect_1 = __importDefault(require("../Components/MultiSelect/MultiSelect"));
+var MultiSelectPage = function () {
+    var _a = (0, react_1.useState)([
+        {
+            id: "1721664346718-1",
+            label: "Testing",
+        },
+    ]), selectedOptions = _a[0], setSelectedOptions = _a[1];
+    var handleValueSelectChange = function (options) {
+        setSelectedOptions(options);
+        console.log("Selected options updated:", options);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(MultiSelect_1.default, { value: selectedOptions, onValueChange: handleValueSelectChange, error: true, errorMessage: 'frr' })));
+};
+exports.default = MultiSelectPage;

package/dist/Pages/noteArea.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NoteAreaPage: () => React.JSX.Element;
+export default NoteAreaPage;

package/dist/Pages/noteArea.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var NoteTextArea_1 = __importDefault(require("../Components/NoteTextArea/NoteTextArea"));
+var NoteAreaPage = function () {
+    var _a = (0, react_1.useState)(false), saveButtonLoading = _a[0], setSaveButtonLoading = _a[1];
+    var handleNoteValue = function (noteValue, titleValue, file) {
+        console.log("Title: ", titleValue);
+        console.log("Note: ", noteValue);
+        console.log("File: ", file);
+        setSaveButtonLoading(true);
+        setTimeout(function () {
+            setSaveButtonLoading(false);
+        }, 2000);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(NoteTextArea_1.default, { width: "720px", handleSubmit: function (noteValue, titleValue, file) {
+                handleNoteValue(noteValue, titleValue, file);
+            }, value: "text", title: "hello", isEditable: false, saveButtonLoading: saveButtonLoading, handleCancel: function (isActive) {
+                console.log("isActive", isActive);
+            }, customPlaceholder: "Add a note..." })));
+};
+exports.default = NoteAreaPage;

package/dist/Pages/notification.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const notificationPage: () => React.JSX.Element;
+export default notificationPage;

package/dist/Pages/notification.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Notification_1 = __importDefault(require("../Components/Notification/Notification"));
+var notificationPage = function () {
+    var kavinNotification = {
+        id: 1,
+        title: "Send Proposal",
+        startDate: "2025-10-07T06:30:00.000Z",
+        dueDate: "2025-10-07T07:30:00.000Z",
+        // endDate: "2025-10-07T08:30:00.000Z",
+        description: "Test Deal for Tour",
+        type: "task",
+        host: "Kavin",
+    };
+    var handleClose = function () {
+        console.log("Notification closed");
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Notification_1.default, { notification: kavinNotification, onClose: handleClose, showStatus: true })));
+};
+exports.default = notificationPage;

package/dist/Pages/numberInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const NumberInputPage: () => React.JSX.Element;
+export default NumberInputPage;

package/dist/Pages/numberInput.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var NumberInput_1 = __importDefault(require("../Components/NumberInput/NumberInput"));
+var NumberInputPage = function () {
+    var _a = (0, react_1.useState)("0"), numbetInputValue = _a[0], setNumbetInputValue = _a[1];
+    var handleNumberinput = function (value) {
+        setNumbetInputValue(value);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(NumberInput_1.default, { min: 0, max: 20, value: numbetInputValue, onChange: handleNumberinput })));
+};
+exports.default = NumberInputPage;

package/dist/Pages/photoViewer.d.ts

@@ -0,0 +1,3 @@
+export default PhotoViewer;
+declare function PhotoViewer(): React.JSX.Element;
+import React from 'react';

package/dist/Pages/photoViewer.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 });
+var react_1 = __importDefault(require("react"));
+var ProfilePhotoViewer_1 = __importDefault(require("../Components/ProfilePhotoViewer/ProfilePhotoViewer"));
+var PhotoViewer = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ProfilePhotoViewer_1.default, { photoUrl: "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" !== null && "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" !== void 0 ? "https://media.istockphoto.com/id/2000672702/photo/happy-smiling-mature-indian-or-latin-business-man-ceo-trader-using-computer-typing-working-in.jpg?s=1024x1024&w=is&k=20&c=D1vOFvPH5YG87jlDs8g9THoClPfmdbAsHx2J4PdDtcI=" : "https://bit.ly/dan-abramov", onPhotoChange: function (file) { return console.log(file); }, isEditable: true, isView: true, fallbackText: "" })));
+};
+exports.default = PhotoViewer;

package/dist/Pages/pinInputs.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const PinInputPage: () => React.JSX.Element;
+export default PinInputPage;

package/dist/Pages/pinInputs.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 });
+var react_1 = __importDefault(require("react"));
+var PinInput_1 = __importDefault(require("../Components/PinInput/PinInput"));
+var PinInputPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(PinInput_1.default, { pins: 5, label: "Enter pin", color: "primary" })));
+};
+exports.default = PinInputPage;

package/dist/Pages/productCaard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const productCaard: () => React.JSX.Element;
+export default productCaard;