pixelize-design-library 2.1.6 → 2.1.7

package/dist/Components/ContactForm/ContactForm.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ContactFormProps } from "./ContactFormProps";
+declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, }: ContactFormProps) => React.JSX.Element;
+export default ContactForm;

package/dist/Components/ContactForm/ContactForm.js

@@ -0,0 +1,215 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 TextInput_1 = __importDefault(require("../Input/TextInput"));
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ContactForm = function (_a) {
+    var _b;
+    var apiKey = _a.apiKey, customFields = _a.customFields, getCustomValues = _a.getCustomValues, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, organizationId = _a.organizationId, customerId = _a.customerId;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _d = (0, react_1.useState)({
+        firstName: "",
+        lastName: "",
+        email: "",
+        phone: "",
+        enquiry: "",
+    }), formData = _d[0], setFormData = _d[1];
+    var _e = (0, react_1.useState)({
+        title: "",
+        isSuccess: false,
+    }), response = _e[0], setResponse = _e[1];
+    var _f = (0, react_1.useState)({}), errors = _f[0], setErrors = _f[1];
+    var handleChange = function (field, value) {
+        setFormData(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[field] = value, _a)));
+        });
+        setErrors(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[field] = "", _a)));
+        });
+    };
+    var validate = function () {
+        var newErrors = {};
+        if (!formData.firstName.trim())
+            newErrors.firstName = "First name is required";
+        // if (!formData.email.trim()) {
+        //   newErrors.email = "Email is required";
+        // } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+        //   newErrors.email = "Invalid email format";
+        // }
+        if (!formData.phone.trim()) {
+            newErrors.phone = "Phone is required";
+        }
+        else if (!/^\d{7,15}$/.test(formData.phone)) {
+            newErrors.phone = "Phone must be 7–15 digits";
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var customValues, payload, response_1, result, error_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    e.preventDefault();
+                    if (isDisabled)
+                        return [2 /*return*/];
+                    if (!validate())
+                        return [2 /*return*/];
+                    if (!apiKey) {
+                        setResponse({
+                            title: "API key missing",
+                            isSuccess: false,
+                        });
+                        return [2 /*return*/];
+                    }
+                    customValues = (_a = getCustomValues === null || getCustomValues === void 0 ? void 0 : getCustomValues()) !== null && _a !== void 0 ? _a : {};
+                    payload = __assign(__assign({ name: (formData === null || formData === void 0 ? void 0 : formData.firstName) + " " + (formData === null || formData === void 0 ? void 0 : formData.lastName), firstName: formData === null || formData === void 0 ? void 0 : formData.firstName, lastName: formData === null || formData === void 0 ? void 0 : formData.lastName, email: formData.email, phone: formData.phone, message: formData.enquiry }, customValues), { customerId: customerId, organizationId: organizationId });
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, fetch(apiKey, {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            body: JSON.stringify(payload),
+                        })];
+                case 2:
+                    response_1 = _b.sent();
+                    return [4 /*yield*/, response_1.json()];
+                case 3:
+                    result = _b.sent();
+                    if (!response_1.ok)
+                        throw new Error(result.message || "Submission failed");
+                    // onSubmit(formData);
+                    setFormData({
+                        firstName: "",
+                        lastName: "",
+                        email: "",
+                        phone: "",
+                        enquiry: "",
+                    });
+                    setResponse({
+                        title: "Message Sent Successfully",
+                        isSuccess: true,
+                    });
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _b.sent();
+                    setResponse({
+                        title: "Failed to send message",
+                        isSuccess: false,
+                    });
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(react_2.Box, { maxW: "lg", mx: "auto", p: 8, borderRadius: "2xl", boxShadow: "lg", bg: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[300] },
+        response.title ? (react_1.default.createElement(react_2.Alert, { status: (response === null || response === void 0 ? void 0 : response.isSuccess) ? "success" : "error", fontWeight: "bold", variant: "solid", mb: 1 },
+            (response === null || response === void 0 ? void 0 : response.isSuccess) ? react_1.default.createElement(lucide_react_1.CircleCheck, null) : react_1.default.createElement(lucide_react_1.CircleX, null),
+            " \u00A0",
+            " ",
+            response.title)) : null,
+        react_1.default.createElement(react_2.Heading, { textAlign: "center", size: "lg", mb: 2 }, "Contact Us"),
+        react_1.default.createElement(react_2.Text, { textAlign: "center", mb: 6, color: "gray.500" }, "Fill in the form below to reach out to us."),
+        react_1.default.createElement(react_2.Box, { as: "form", onSubmit: handleSubmit },
+            react_1.default.createElement(react_2.VStack, { spacing: 4 },
+                react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
+                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.firstName, isRequired: true },
+                        react_1.default.createElement(TextInput_1.default, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: function (e) { return handleChange("firstName", e.target.value); }, isRequired: true }),
+                        react_1.default.createElement(react_2.FormErrorMessage, null, errors.firstName)),
+                    react_1.default.createElement(react_2.FormControl, null,
+                        react_1.default.createElement(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: function (e) { return handleChange("lastName", e.target.value); } }))),
+                react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
+                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.phone, isRequired: true },
+                        react_1.default.createElement(TextInput_1.default, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: function (e) { return handleChange("phone", e.target.value); }, isRequired: true }),
+                        react_1.default.createElement(react_2.FormErrorMessage, null, errors.phone)),
+                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.email },
+                        react_1.default.createElement(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: function (e) { return handleChange("email", e.target.value); } }),
+                        react_1.default.createElement(react_2.FormErrorMessage, null, errors.email))),
+                customFields,
+                react_1.default.createElement(react_2.FormControl, { w: "100%" },
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", mb: 1 }, "Enquiry"),
+                    react_1.default.createElement(react_2.Textarea, { placeholder: "Enter your enquiry", rows: 5, value: formData.enquiry, onChange: function (e) { return handleChange("enquiry", e.target.value); } })),
+                react_1.default.createElement(react_2.Button, { type: "submit", disabled: isDisabled, colorScheme: "blue", w: "full", mt: 2 }, "Send Message")))));
+};
+exports.default = ContactForm;

package/dist/Components/ContactForm/ContactFormProps.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface ContactFormProps {
+    apiKey?: string;
+    customerId: string | number;
+    organizationId: string | number;
+    isDisabled?: boolean;
+    customFields?: ReactNode;
+    getCustomValues?: () => Record<string, any>;
+}

package/dist/Components/ContactForm/ContactFormProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SearchSelect/SearchSelect.js

@@ -227,7 +227,7 @@ var SearchSelect = function (_a) {
                 react_1.default.createElement(react_2.Spinner, { size: "sm" }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: "sm", color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, p: 2, px: 3, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : 'transparent', _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
                 isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue" })),
-                option.view ? react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 3 }, option.view) : react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
+                option.view ? react_1.default.createElement(react_1.default.Fragment, null, option.view) : react_1.default.createElement(react_2.Text, { fontSize: "sm" }, option.label))); }))),
             (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { p: 2, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: "white", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
                 addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: 16 }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, addNew.text || 'Add New'))))),

package/dist/Components/Select/Select.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): React.JSX.Element;
+export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, width, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): React.JSX.Element;

package/dist/Components/Select/Select.js

@@ -32,7 +32,7 @@ var FormLabel_1 = require("../Common/FormLabel");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 function Select(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, formControlStyle = _a.formControlStyle, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
+    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, _h = _a.width, width = _h === void 0 ? 500 : _h, _j = _a.height, height = _j === void 0 ? "2.75rem" : _j, formControlStyle = _a.formControlStyle, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
     var getOptionsList = (0, react_1.useCallback)(function () {
         if (!options.length)
             return react_1.default.createElement("option", { value: "" }, "No Options");
@@ -47,7 +47,7 @@ function Select(_a) {
     };
     return (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle }, getOptionsList()),
+        react_1.default.createElement(react_2.Select, { placeholder: placeholder, size: size, variant: variant, icon: icon, isInvalid: error, value: value, onChange: handleOnChange, width: width, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, minH: height }, getOptionsList()),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/Select/SelectProps.d.ts

@@ -7,6 +7,7 @@ export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "vari
     helperText?: string;
     options: OptionProp[];
     width?: string | number;
+    height?: string | number;
     onChange: (selectedOption: OptionProp | undefined) => void;
     formControlStyle?: React.CSSProperties;
     isInformation?: boolean;

package/dist/Layout.js

@@ -66,6 +66,7 @@ var lucide_react_1 = require("lucide-react");
 var Header_1 = __importDefault(require("./Components/Header/Header"));
 var fileUpload_1 = require("./Pages/fileUpload");
 var selectSearch_1 = __importDefault(require("./Pages/selectSearch"));
+var contactForm_1 = __importDefault(require("./Pages/contactForm"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -152,6 +153,8 @@ var Layout = function () {
                 return react_2.default.createElement(TInput_1.default, null);
             case "/kanban":
                 return react_2.default.createElement(kanbanboard_1.default, null);
+            case "/contactForm":
+                return react_2.default.createElement(contactForm_1.default, null);
             case "/header":
                 return (react_2.default.createElement(Header_1.default, { logo: react_2.default.createElement(react_1.Box, { fontSize: "xl", fontWeight: "bold" }, "MyApp"), 
                     // colorScheme="gray"
@@ -237,7 +240,8 @@ var Layout = function () {
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tag"); }, variant: "outline", size: "sm" }, "Tag"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/header"); }, variant: "outline", size: "sm" }, "Header"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/upload"); }, variant: "outline", size: "sm" }, "File Upload"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productCard"); }, variant: "outline" }, "Product Card")),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/productCard"); }, variant: "outline" }, "Product Card"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/contactForm"); }, variant: "outline" }, "contactForm")),
             react_2.default.createElement("br", null),
             react_2.default.createElement("br", null),
             react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),

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/searchSelect.js

@@ -77,20 +77,11 @@ var react_2 = require("@chakra-ui/react");
 var max = 149;
 var rrr = function (start, limit) {
     var end = Math.min(start + limit, max + 1); // +1 to include `max` as valid
-    return Array.from({ length: end - start }, function (_, index) {
-        var _a, _b;
-        return ({
-            id: (start + index).toString(),
-            label: "Option ".concat(start + index),
-            view: react_1.default.createElement(react_2.Box, null,
-                react_1.default.createElement(react_2.Box, { w: "2rem", h: "2rem", borderRadius: "full", bg: 'gray.300', color: "white", display: "flex", justifyContent: "center", alignItems: "center", fontSize: "sm", fontWeight: "medium", overflow: "hidden" }, (_b = (_a = "Option ".concat(start + index)) === null || _a === void 0 ? void 0 : _a.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()),
-                react_1.default.createElement(react_2.Box, null,
-                    react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "semibold", color: "gray.800" },
-                        "Option ",
-                        start + index),
-                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "test@gmail.com")))
-        });
-    });
+    return Array.from({ length: end - start }, function (_, index) { return ({
+        id: (start + index).toString(),
+        label: "Option ".concat(start + index),
+        view: (react_1.default.createElement(react_2.Box, null, " demo"))
+    }); });
 };
 var delay = function (ms) { return new Promise(function (resolve) { return setTimeout(resolve, ms); }); };
 var SearchSelect = function () {

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import Button from "./Components/Button/Button";
 import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
 import Card from "./Components/Card/Card";
 import Checkbox from "./Components/Checkbox/Checkbox";
+import ContactForm from "./Components/ContactForm/ContactForm";
 import DatePicker from "./Components/DatePicker/DatePicker";
 import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Drawer/Drawer";
 import Dropdown from "./Components/Dropdown/DropDown";
@@ -49,5 +50,5 @@ import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
 import ProductCard from "./Components/ProductCard/ProductCard";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProductCard, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProductCard, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = void 0;
+exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -47,6 +47,8 @@ var Card_1 = __importDefault(require("./Components/Card/Card"));
 exports.Card = Card_1.default;
 var Checkbox_1 = __importDefault(require("./Components/Checkbox/Checkbox"));
 exports.Checkbox = Checkbox_1.default;
+var ContactForm_1 = __importDefault(require("./Components/ContactForm/ContactForm"));
+exports.ContactForm = ContactForm_1.default;
 var DatePicker_1 = __importDefault(require("./Components/DatePicker/DatePicker"));
 exports.DatePicker = DatePicker_1.default;
 var Drawer_1 = __importStar(require("./Components/Drawer/Drawer"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",