pixelize-design-library 1.1.31 → 1.1.33

package/dist/Components/DatePicker/DatePicker.js

@@ -32,7 +32,7 @@ function DatePicker(_a) {
                     ? dateTimeFormat
                         ? dateTimeFormat
                         : "MM/dd/yyyy h:mm aa"
-                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light }) })),
+                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "1px solid #DC143C" : "" } }) })),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
-export default function VerifyEmailOtp({ resendMaill, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;
+export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -8,7 +8,7 @@ var react_2 = require("@chakra-ui/react");
 var lu_1 = require("react-icons/lu");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 function VerifyEmailOtp(_a) {
-    var resendMaill = _a.resendMaill, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
+    var resendMail = _a.resendMail, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement("div", { style: styles },
         react_1.default.createElement("div", { style: {
@@ -31,7 +31,7 @@ function VerifyEmailOtp(_a) {
             react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
                 "Didn't receive the code?",
                 " ",
-                react_1.default.createElement("button", { onClick: function () { return resendMaill(); }, style: {
+                react_1.default.createElement("button", { onClick: function () { return resendMail(); }, style: {
                         background: "none",
                         color: theme.colors.primary[700],
                         border: "none",

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export type VerifyEmailOtpProps = {
-    resendMaill: () => void;
+    resendMail: () => void;
     onChange: (value: string) => void;
     onComplete: (value: string) => void;
     placeholder?: string;

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, }: MultiSelectProps): React.JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -1,4 +1,15 @@
 "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);
@@ -34,6 +45,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+var FormLabel_1 = require("../Common/FormLabel");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var generateUniqueId = (function () {
     var counter = 0;
     return function () {
@@ -42,18 +55,32 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange;
-    var _b = (0, react_1.useState)(value), options = _b[0], setOptions = _b[1];
-    var _c = (0, react_1.useState)(""), inputValue = _c[0], setInputValue = _c[1];
+    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var getPadding = function () {
+        return "0.5rem";
+    };
+    var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
+    var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
+    var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setOptions(value);
     }, [value]);
     var handleInputChange = function (e) {
         setInputValue(e.target.value);
+        setError("");
+    };
+    var validateEmail = function (email) {
+        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
     };
     var handleKeyDown = function (e) {
         if (e.key === "Enter" && inputValue.trim() !== "") {
+            if (!validateEmail(inputValue)) {
+                setError("Invalid email address");
+                return;
+            }
             var existingOption = options.find(function (option) { return option.label === inputValue; });
             if (!existingOption) {
                 var newOption = { id: generateUniqueId(), label: inputValue };
@@ -77,10 +104,12 @@ function MultiSelect(_a) {
         setOptions(updatedOptions);
         onValueChange(updatedOptions);
     };
-    return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "md", padding: "2", backgroundColor: "white" },
+    return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", backgroundColor: "white" },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2 }, options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", variant: "solid", colorScheme: "gray" },
             react_1.default.createElement(react_2.TagLabel, null, option.label),
             react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); })),
-        react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Type and press enter", marginTop: 2, marginLeft: 1 })));
+        react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: getPadding(), fontSize: 15, letterSpacing: 0.7, borderRadius: "0.125rem" }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholderText, marginTop: 2, marginLeft: 1 }),
+        error && (react_1.default.createElement(react_2.Text, { color: "red.500", marginTop: 2, marginLeft: 1 }, error))));
 }
 exports.default = MultiSelect;

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -1,6 +1,18 @@
 export type MultiSelectProps = {
     value: MultiSelctOPtions[];
     onValueChange: (options: MultiSelctOPtions[]) => void;
+    width?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
+    placeholderText?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    size?: string;
+    inputStyle?: {};
 };
 export type MultiSelctOPtions = {
     id: string;

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SelectSearchProps } from "./SelectSearchProps";
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -313,12 +313,12 @@ var RenderOptions = function (_a) {
     return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
 };
 function SelectSearch(_a) {
-    var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect;
+    var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect, _h = _a.error, error = _h === void 0 ? false : _h;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _h = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _h[0], setSelectedOptions = _h[1];
-    var _j = (0, react_1.useState)(searchQuery), inputValue = _j[0], setInputValue = _j[1];
-    var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
-    var _l = (0, react_1.useState)("below"), position = _l[0], setPosition = _l[1];
+    var _j = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _j[0], setSelectedOptions = _j[1];
+    var _k = (0, react_1.useState)(searchQuery), inputValue = _k[0], setInputValue = _k[1];
+    var _l = (0, react_1.useState)(false), isOpen = _l[0], setIsOpen = _l[1];
+    var _m = (0, react_1.useState)("below"), position = _m[0], setPosition = _m[1];
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = (0, react_1.useMemo)(function () {
@@ -439,7 +439,7 @@ function SelectSearch(_a) {
             react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
             react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
         react_1.default.createElement(react_2.InputGroup, null,
-            react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+            react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0", variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? "1px solid #DC143C" : "1px solid #e2e8f0" }) }),
             rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
         isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 },
             react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick })))));

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -22,6 +22,7 @@ export type SelectSearchProps = {
     rightElementStyle?: {};
     isMultipleSelect?: boolean;
     isRequired?: boolean | undefined;
+    error?: boolean | undefined;
 };
 export type selectOptions = {
     id: string;

package/dist/Pages/selectSearch.js

@@ -30,7 +30,7 @@ var react_1 = __importStar(require("react"));
 var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
 var fi_1 = require("react-icons/fi");
 var SelectSearchs = function () {
-    var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
+    var _a = (0, react_1.useState)(""), selectSearchText = _a[0], setSelectSearchText = _a[1];
     var _b = (0, react_1.useState)(), selectedOption = _b[0], setSelectedOption = _b[1];
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(SelectSearch_1.default, { options: [
@@ -44,11 +44,9 @@ var SelectSearchs = function () {
                 setSelectSearchText(value.toString());
                 console.log(value);
             }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: function (data) {
-                // setSelectSearchText(label);
-                console.log("Selected option:", data);
-            }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
+                setSelectSearchText(data.label);
+            }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
                 setSelectedOption(data);
-                console.log("Selected option:", data);
             } })));
 };
 exports.default = SelectSearchs;

package/dist/Pages/verifyEmail.js

@@ -7,7 +7,7 @@ var react_1 = __importDefault(require("react"));
 var VerifyEmailOtp_1 = __importDefault(require("../Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
 var VerifyEmailPage = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(VerifyEmailOtp_1.default, { resendMaill: function () {
+        react_1.default.createElement(VerifyEmailOtp_1.default, { resendMail: function () {
                 console.log("hello");
             }, onChange: function (val) {
                 console.log("onchange", val);

package/dist/Theme/Default/fonts.d.ts

@@ -0,0 +1,35 @@
+import "@fontsource/ubuntu-sans";
+declare const fontOptions: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@fontsource/ubuntu-sans");
+var fontOptions = {
+    fonts: {
+        body: "Ubuntu Sans, serif",
+        heading: "Ubuntu Sans, serif",
+        mono: "Ubuntu Sans, monospace",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+};
+exports.default = fontOptions;

package/package.json

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

package/dist/Pages/katable.d.ts

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

package/dist/Pages/katable.js

@@ -1,194 +0,0 @@
-"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 __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 KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
-var KaTable_2 = require("../Components/KaTable/KaTable");
-var icons_1 = require("@chakra-ui/icons");
-var katable = function () {
-    var DataType = KaTable_2.TableEnums.DataType;
-    var dataArray = Array(50)
-        .fill(undefined)
-        .map(function (_, index) { return ({
-        column1: index % 2 === 0,
-        column2: "column:2 row:".concat(index + 1),
-        column3: index + 5,
-        column4: index + 10,
-        column5: index + 15,
-        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: 150,
-            columnFreeze: true,
-            customHeader: false,
-        },
-        {
-            key: "column2",
-            title: "Column 2",
-            dataType: DataType.String,
-            width: 150,
-        },
-        {
-            key: "column3",
-            title: "Column 3",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column4",
-            title: "Column 4",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            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,
-        },
-        {
-            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 kaTableFormat = function (props) {
-        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)));
-    };
-    var handleSortChange = function (newSortState, columnName) {
-        console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
-    };
-    var handleMenuItemClick = function (action, columnName) {
-        console.log("Menu item clicked for ".concat(columnName, ":"), action);
-    };
-    var menuItems = [
-        { label: "Sort", action: "Sort" },
-        { label: "Hide column", action: "Hide column" },
-        {
-            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" },
-            ],
-        },
-    ];
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
-                console.log("Row clicked", rowKeyValue);
-            }, onSelectionChange: function (selectedRows) {
-                console.log("Selected rows:", selectedRows);
-            }, menuItems: menuItems, 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 = katable;