pixelize-design-library 2.1.16 → 2.1.18

package/dist/Pages/KaTableExample.js

@@ -0,0 +1,259 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
+var KaTable_2 = require("../Components/KaTable/KaTable");
+var icons_1 = require("@chakra-ui/icons");
+var react_2 = require("@chakra-ui/react");
+var menuItems = [
+    { label: "Hide column", action: "hidecolumn" },
+    {
+        label: "Filter",
+        submenu: [
+            { label: "Filter by Date", action: "Filter by Date" },
+            { label: "Filter by Name", action: "Filter by Name" },
+            { label: "Filter by Status", action: "Filter by Status" },
+        ],
+    },
+];
+var DataType = KaTable_2.TableEnums.DataType;
+var dataArray = Array(5)
+    .fill(undefined)
+    .map(function (_, index) { return ({
+    column1: index % 2 === 0,
+    column2: "column:2 row:".concat(index + 1),
+    column3: "column:3 row:".concat(index + 1),
+    column4: "column:4 row:".concat(index + 1),
+    column5: "column:5 row:".concat(index + 1),
+    column6: index + 20,
+    column7: index + 25,
+    column8: index + 30,
+    column9: index + 35,
+    column10: index + 40,
+    column11: index + 45,
+    column12: index + 50,
+    column13: index + 55,
+    column14: index + 60,
+    column15: new Date(2022, 11, index),
+    id: index + 1,
+}); });
+var columns = [
+    {
+        key: "column1",
+        title: "Column 1",
+        dataType: DataType.Boolean,
+        width: 100,
+        columnFreeze: true,
+        customHeader: false,
+    },
+    {
+        key: "column2",
+        title: "Column 2",
+        dataType: DataType.String,
+        width: 250,
+        // visible: false,
+    },
+    {
+        key: "column3",
+        title: "Column 3",
+        dataType: DataType.Number,
+        width: 150,
+        filter: true,
+        menu: [
+            {
+                label: "Filter",
+                onClick: function () { return console.log("MENU Filter clicks"); },
+                submenu: [
+                    {
+                        label: "Filter by Date",
+                        onClick: function () { return console.log("SUBMENU Date clicks"); },
+                    },
+                    { label: "Filter by Name" },
+                    // { label: "Filter by Status", action: "Filter by Status" },
+                ],
+            },
+        ],
+    },
+    {
+        key: "column4",
+        title: "Column 4",
+        dataType: DataType.Number,
+        width: 150,
+        sortable: true,
+    },
+    {
+        key: "column5",
+        title: "Column 5",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column6",
+        title: "Column 6",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column7",
+        title: "Column 7",
+        dataType: DataType.Number,
+        width: 150,
+        sortable: true,
+    },
+    {
+        key: "column8",
+        title: "Column 8",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column9",
+        title: "Column 9",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column10",
+        title: "Column 10",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column11",
+        title: "Column 11",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column12",
+        title: "Column 12",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column13",
+        title: "Column 13",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column14",
+        title: "Column 14",
+        dataType: DataType.Number,
+        width: 150,
+    },
+    {
+        key: "column15",
+        title: "Column 15",
+        dataType: DataType.Date,
+        width: 150,
+    },
+    {
+        key: "editColumn",
+        width: 80,
+        customHeader: false,
+    },
+];
+var KaTableExample = function () {
+    var _a = (0, react_1.useState)(false), actionButtons = _a[0], setActionButtons = _a[1];
+    var _b = (0, react_1.useState)([]), selectedRows = _b[0], setSelectedRows = _b[1];
+    // const kaTableFormat = (props: any) => {
+    //   if (props.column.dataType === DataType.Date) {
+    //     return (
+    //       props.value &&
+    //       props.value.toLocaleDateString("en", {
+    //         month: "2-digit",
+    //         day: "2-digit",
+    //         year: "numeric",
+    //       })
+    //     );
+    //   }
+    // };
+    var EditButton = function (_a) {
+        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
+        return (react_1.default.createElement("div", { className: "edit-cell-button" },
+            react_1.default.createElement(icons_1.EditIcon, null),
+            react_1.default.createElement(icons_1.DeleteIcon, null)));
+    };
+    // const handleSortChange = (newSortState: any, columnName: any) => {
+    //   console.log(`Sort state for ${columnName} changed to:`, newSortState);
+    // };
+    // const handleMenuItemClick = (action: any, columnName: any) => {
+    //   console.log(`Menu item clicked for ${columnName}:`, action);
+    // };
+    var handleCheckSelect = (0, react_1.useCallback)(function (selectedRows) {
+        console.log("CB", selectedRows);
+        if (selectedRows.length !== 0) {
+            setActionButtons(true);
+        }
+        else {
+            setActionButtons(false);
+        }
+        setSelectedRows(selectedRows);
+    }, []);
+    // console.log(actionButtons, "actionButtons");
+    var handleExample = function () {
+        setSelectedRows([]);
+    };
+    // console.log(selectedRows, "selectedRows");
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_2.Button, { onClick: handleExample }, "click here"),
+        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
+                console.log("Row clicked", rowKeyValue);
+            }, selected: selectedRows, onSelectionChange: function (selectedRows) {
+                handleCheckSelect(selectedRows);
+            }, columnVisibility: true, 
+            // onSortChange={handleSortChange}
+            // onMenuItemClick={handleMenuItemClick}
+            // format={kaTableFormat}
+            childComponents: {
+                cellText: {
+                    content: function (props) {
+                        if (props.column.key === "editColumn") {
+                            return react_1.default.createElement(EditButton, __assign({}, props));
+                        }
+                    },
+                },
+            }, loading: {
+                enabled: false,
+                text: "Loading data",
+            } })));
+};
+exports.default = KaTableExample;

package/dist/Pages/TInput.d.ts

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

package/dist/Pages/TInput.js

@@ -0,0 +1,46 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 Input_1 = __importDefault(require("../Components/Input/Input/Input"));
+var Buttons_1 = __importDefault(require("../Components/Buttons/Buttons"));
+var PinInputs_1 = __importDefault(require("../Components/PinInputs/PinInputs"));
+var TInput = function () {
+    var _a = (0, react_1.useState)(""), email = _a[0], setEmail = _a[1];
+    var _b = (0, react_1.useState)(""), password = _b[0], setPassword = _b[1];
+    var errors = (0, react_1.useState)({
+        email: "ddd",
+        password: "",
+    })[0];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Input_1.default, { label: "Email Address", type: "email", value: email, onChange: setEmail, error: errors.email, placeholder: "Email Address", inputBoxClassName: "w-1/6" }),
+        react_1.default.createElement(Input_1.default, { label: "Password", type: "password", value: password, onChange: setPassword, error: errors.password, placeholder: "Password", inputBoxClassName: "w-1/6" }),
+        react_1.default.createElement(PinInputs_1.default, { length: 6, error: "", onComplete: function (value) { console.log(value, "value"); } }),
+        react_1.default.createElement(Buttons_1.default, { label: "Sign In", onClick: function () { } })));
+};
+exports.default = TInput;

package/dist/Pages/accordion.d.ts

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

package/dist/Pages/accordion.js

@@ -0,0 +1,42 @@
+"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 Accordion_1 = __importDefault(require("../Components/Accordion/Accordion"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var Accordions = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Accordion_1.default, { allowToggle: true, items: [
+                {
+                    header: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
+                        react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
+                    content: (react_1.default.createElement("div", null,
+                        react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
+                        react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
+                        react_1.default.createElement(react_2.Flex, { mt: 2 },
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
+                    customStyles: {
+                        buttonStyle: { backgroundColor: "yellow" },
+                        hoverbuttonStyle: { backgroundColor: "orange" },
+                    },
+                    // buttonProps: { backgroundColor: "red" }
+                },
+                {
+                    header: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_2.Box, { as: "span", flex: "1", textAlign: "left" }, "Section 1 title"),
+                        react_1.default.createElement(lucide_react_1.ChevronDown, { style: { marginRight: "8px" } }))),
+                    content: (react_1.default.createElement("div", null,
+                        react_1.default.createElement(react_2.Text, null, "This is text inside Section 1."),
+                        react_1.default.createElement(react_2.Box, { bg: "gray.200", p: 4, mt: 2 }, "This is a box with more content inside Section 1."),
+                        react_1.default.createElement(react_2.Flex, { mt: 2 },
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "blue.200", p: 4 }, "Box 1"),
+                            react_1.default.createElement(react_2.Box, { flex: "1", bg: "green.200", p: 4, ml: 2 }, "Box 2")))),
+                },
+            ] })));
+};
+exports.default = Accordions;

package/dist/Pages/alertdialog.d.ts

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

package/dist/Pages/alertdialog.js

@@ -0,0 +1,44 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 AlertDialog_1 = __importDefault(require("../Components/AlertDialog/AlertDialog"));
+var react_2 = require("@chakra-ui/react");
+var AlertdialogBox = function () {
+    var _a = (0, react_1.useState)(false), alertActive = _a[0], setAlertActive = _a[1];
+    var leastDestructiveRef = react_1.default.useRef();
+    var handleAlert = function () {
+        setAlertActive(!alertActive);
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_2.Button, { onClick: function () {
+                setAlertActive(true);
+            } }, "AlertDialog"),
+        react_1.default.createElement(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: react_1.default.createElement("div", { style: { color: "red", height: "200px" } }, "hellobody"), onConfirm: function () { return handleAlert(); }, size: "500" })));
+};
+exports.default = AlertdialogBox;

package/dist/Pages/button.d.ts

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

package/dist/Pages/button.js

@@ -0,0 +1,29 @@
+"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 ButtonGroupIcon_1 = __importDefault(require("../Components/ButtonGroupIcon/ButtonGroupIcon"));
+var Button_1 = __importDefault(require("../Components/Button/Button"));
+var lucide_react_1 = require("lucide-react");
+var ButtonPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(lucide_react_1.House, null), leftIcon: react_1.default.createElement(lucide_react_1.House, null), size: "md", variant: "solid", 
+            // color="red"
+            rightIconDropdown: true, dropdownOptions: [
+                {
+                    label: "123",
+                    id: "1",
+                    image: react_1.default.createElement(lucide_react_1.House, { style: { marginRight: "20px" } }),
+                },
+                { label: "456", id: "2" },
+            ], onDropdownOptionClick: function (e, option) {
+                console.log(e, option);
+            } }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(Button_1.default, { label: "Button", onClick: function () { }, variant: "solid", size: "xs" })));
+};
+exports.default = ButtonPage;

package/dist/Pages/card.d.ts

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

package/dist/Pages/card.js

@@ -0,0 +1,48 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 = __importDefault(require("react"));
+var Card_1 = __importDefault(require("../Components/Card/Card"));
+var ProfileCard_1 = __importStar(require("../Components/ProfileCard/ProfileCard"));
+var react_2 = require("@chakra-ui/react");
+var CardPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Card_1.default, null,
+            react_1.default.createElement("div", null, "hello")),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(ProfileCard_1.default, { CardStyle: { marginRight: "10px" } },
+            react_1.default.createElement(ProfileCard_1.ProfileCardHeader, null, "Customer dashboard"),
+            react_1.default.createElement(ProfileCard_1.ProfileCardBody, null,
+                react_1.default.createElement(react_2.Text, null, "View a summary of all your customers over the last month.")),
+            react_1.default.createElement(ProfileCard_1.ProfileCardFooter, null,
+                react_1.default.createElement(react_2.Button, { color: "blue" }, "View here")))));
+};
+exports.default = CardPage;

package/dist/Pages/chart.d.ts

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

package/dist/Pages/chart.js

@@ -0,0 +1,28 @@
+"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 ApexBarChart_1 = __importDefault(require("../Components/Apexcharts/ApexBarChart/ApexBarChart"));
+var ApexPieChart_1 = __importDefault(require("../Components/Apexcharts/ApexPieChart/ApexPieChart"));
+var ChartPage = function () {
+    var data = Array.from({ length: 10 }, function () {
+        return Math.floor(Math.random() * 100);
+    });
+    var categories = data.map(function (_, index) { return "Category ".concat(index + 1); });
+    var data1 = Array.from({ length: 10 }, function () {
+        return Math.floor(Math.random() * 100);
+    });
+    var categories1 = data.map(function (_, index) { return "Category ".concat(index + 1); });
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ApexBarChart_1.default, { data: data, labels: categories, title: "Bar Chart", titlePosition: "left", 
+            // barColor={["#00E396"]}
+            // xAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
+            // yAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
+            titleStyle: { color: "#00E396" } }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Pie Chart", titlePosition: "left", 
+            // chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
+            titleStyle: { color: "#00E396" } })));
+};
+exports.default = ChartPage;

package/dist/Pages/checkbox.d.ts

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

package/dist/Pages/checkbox.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 Checkbox_1 = __importDefault(require("../Components/Checkbox/Checkbox"));
+var CheckboxPage = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Checkbox_1.default, { label: "hello world" })));
+};
+exports.default = CheckboxPage;

package/dist/Pages/contactForm.d.ts

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

package/dist/Pages/contactForm.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 });
+var react_1 = __importDefault(require("react"));
+var ContactForm_1 = __importDefault(require("../Components/ContactForm/ContactForm"));
+var contactForm = function () {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ContactForm_1.default, { apiKey: "https://dev.api.pixelizetech.com/api/mks/sendSweet/", 
+            //  customFields={<>Product kjdhfkljh</>}
+            getCustomValues: function () { return ({
+            //  product: "empty",
+            }); }, customerId: 1, organizationId: 1 })));
+};
+exports.default = contactForm;

package/dist/Pages/datePick.d.ts

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

package/dist/Pages/datePick.js

@@ -0,0 +1,70 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 DatePicker_1 = __importDefault(require("../Components/DatePicker/DatePicker"));
+var DatePick = function () {
+    var _a = (0, react_1.useState)(), selectedDate = _a[0], setSelectedDate = _a[1];
+    var _b = (0, react_1.useState)(null), selectedTime = _b[0], setSelectedTime = _b[1];
+    var _c = (0, react_1.useState)(null), selectedDateTime = _c[0], setSelectedDateTime = _c[1];
+    var _d = (0, react_1.useState)(null), selectedDateRange = _d[0], setSelectedDateRange = _d[1];
+    var handleDateChange = function (value) {
+        setSelectedDate(value);
+        console.log("Date selected:", value);
+    };
+    var handleTimeChange = function (value) {
+        setSelectedTime(value);
+        console.log("Time selected:", value);
+    };
+    var handleDateTimeChange = function (value) {
+        setSelectedDateTime(value);
+        console.log("DateTime selected:", value);
+    };
+    var handleDateRangeChange = function (value) {
+        if (value && "from" in value && "to" in value) {
+            setSelectedDateRange(value);
+            console.log("Date range selected:", value.from, value.to);
+        }
+        else {
+            setSelectedDateRange(null);
+            console.log("Date range cleared");
+        }
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h2", null, "Single Date Picker"),
+        react_1.default.createElement("h2", null, "Date "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "dd/MM/yyyy", pickerType: "date", width: "300px", error: true, errorMessage: "Invalid date" }),
+        react_1.default.createElement("h2", null, "time "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedTime, onChange: handleTimeChange, dateFormat: "HH:mm", pickerType: "time", width: "300px", error: true, errorMessage: "Invalid date" }),
+        react_1.default.createElement("h2", null, "datetime "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy hh:mm aa", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("h2", null, "Date Range Picker"),
+        react_1.default.createElement(DatePicker_1.default, { isRange: true, dateFormat: "dd/MM/yyyy", pickerType: "date", onChange: handleDateRangeChange, selectedDate: selectedDateRange, width: "300px", error: true, errorMessage: "Invalid date" })));
+};
+exports.default = DatePick;

package/dist/Pages/drawer.d.ts

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