pixelize-design-library 2.2.52 → 2.2.53

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexBarChart from './ApexBarChart';
+// import { ApexBarChartProps } from './ApexBarChartProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ApexDonutChartProps } from "./ApexDonutChartProps";
+declare const ApexDonutChart: ({ data, labels, title, titlePosition, height, width, donutColors, chartColor, titleStyle, legendStyle, }: ApexDonutChartProps) => React.JSX.Element;
+export default ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.js

@@ -0,0 +1,58 @@
+"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 react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var ApexDonutChart = function (_a) {
+    var _b;
+    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _f, _g = _a.legendStyle, legendStyle = _g === void 0 ? {
+        colors: "#000",
+        position: "bottom",
+        useSeriesColors: false,
+    } : _g;
+    var options = {
+        chart: {
+            type: "donut",
+        },
+        labels: labels,
+        colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"],
+        legend: {
+            position: legendStyle.position,
+            labels: {
+                colors: legendStyle.colors,
+                useSeriesColors: legendStyle.useSeriesColors,
+            },
+        },
+        title: {
+            text: title,
+            align: titlePosition,
+            style: __assign(__assign({}, titleStyle), { fontSize: (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize)
+                    ? String(titleStyle.fontSize) // ✅ ensures string if number passed
+                    : undefined }),
+        },
+        dataLabels: {
+            enabled: true,
+        },
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "donut", height: height, width: width })));
+};
+exports.default = ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.d.ts

@@ -0,0 +1,21 @@
+export type ApexDonutChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    donutColors?: string[];
+    chartColor?: string[];
+    titleStyle?: {
+        color?: string;
+        fontSize?: string | number;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
+};

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.js

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

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.js

@@ -0,0 +1,6 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import ApexPieChart from './ApexPieChart';
+// import { ApexPieChartProps } from './ApexPieChartProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/DatePicker/CalendarPanel.js

@@ -13,6 +13,8 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var CalendarPanel = function (_a) {
     var currentMonth = _a.currentMonth, setCurrentMonth = _a.setCurrentMonth, today = _a.today, isRange = _a.isRange, tempDate = _a.tempDate, tempRangeStart = _a.tempRangeStart, tempRangeEnd = _a.tempRangeEnd, isSameDay = _a.isSameDay, isBefore = _a.isBefore, isAfter = _a.isAfter, minDate = _a.minDate, maxDate = _a.maxDate, disablePastDates = _a.disablePastDates, disableFutureDates = _a.disableFutureDates, disableToday = _a.disableToday, onDaySelect = _a.onDaySelect, renderWeekdays = _a.renderWeekdays;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
     var renderDays = function () {
         var monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         var monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
@@ -96,8 +98,15 @@ var CalendarPanel = function (_a) {
                     var year = new Date().getFullYear() - 50 + i;
                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                 }))),
-            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
-                react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 20 }))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 2 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "sm", color: "gray.600", py: 2 }, day)); }))),
+            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
+                !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
+                        setCurrentMonth(function (_prev) { return new Date(today.getFullYear(), today.getMonth(), 1); });
+                        if (!disableToday) {
+                            onDaySelect(new Date(today));
+                        }
+                    }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday }, "Today")),
+                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
+                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 20 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 2 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "sm", color: "gray.600", py: 2 }, day)); }))),
         renderDays()));
 };
 exports.CalendarPanel = CalendarPanel;

package/dist/Components/DatePicker/DatePicker.js

@@ -75,6 +75,8 @@ function CustomDatePicker(props) {
     var _m = (0, react_1.useState)(rangeStart), tempRangeStart = _m[0], setTempRangeStart = _m[1];
     var _o = (0, react_1.useState)(rangeEnd), tempRangeEnd = _o[0], setTempRangeEnd = _o[1];
     var popoverRef = (0, react_1.useRef)(null);
+    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
     var handleOpen = function () {
         if (!isRange && !selectedDate) {
             // setTempDate(new Date());
@@ -234,8 +236,15 @@ function CustomDatePicker(props) {
                                     var year = new Date().getFullYear() - 50 + i;
                                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                                 }))),
-                            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
-                                react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
+                            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
+                                !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
+                                        setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+                                        if (!disableToday && !isRange) {
+                                            handleDaySelect(new Date(today));
+                                        }
+                                    }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday }, "Today")),
+                                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
+                                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, null)))),
                         react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
                         renderDays())),
                     !isRange && showTime && (react_1.default.createElement(TimePicker_1.default

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -266,10 +266,10 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
     return { value: buf, completed: buf.length >= segmentLength };
 };
 var SingleDatePicker = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _k = props.dateFormat, dateFormat = _k === void 0 ? "dd/MM/yyyy" : _k, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _l = props.autoComplete, autoComplete = _l === void 0 ? "off" : _l, disabled = props.disabled, _m = props.width, width = _m === void 0 ? "100%" : _m, _o = props.disableToday, disableToday = _o === void 0 ? false : _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _p = (0, react_2.useDisclosure)(), isOpen = _p.isOpen, onOpen = _p.onOpen, onClose = _p.onClose;
+    var _q = (0, react_2.useDisclosure)(), isOpen = _q.isOpen, onOpen = _q.onOpen, onClose = _q.onClose;
     var inputRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
@@ -327,18 +327,18 @@ var SingleDatePicker = function (props) {
         resolvedDateFormat.toLowerCase().includes("mm") ||
         resolvedDateFormat.toLowerCase().includes("ss");
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _q = (0, react_1.useState)(selectedDate
+    var _r = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
             : selectedDate
         : disableToday
             ? tomorrow
-            : today), currentMonth = _q[0], setCurrentMonth = _q[1];
-    var _r = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _r[0], setTempDate = _r[1];
-    var _s = (0, react_1.useState)(""), inputValue = _s[0], setInputValue = _s[1];
-    var _t = (0, react_1.useState)(false), isTyping = _t[0], setIsTyping = _t[1];
-    var _u = (0, react_1.useState)(false), isMaskActive = _u[0], setIsMaskActive = _u[1];
-    var _v = (0, react_1.useState)(0), currentSegmentIndex = _v[0], setCurrentSegmentIndex = _v[1];
+            : today), currentMonth = _r[0], setCurrentMonth = _r[1];
+    var _s = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _s[0], setTempDate = _s[1];
+    var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
+    var _u = (0, react_1.useState)(false), isTyping = _u[0], setIsTyping = _u[1];
+    var _v = (0, react_1.useState)(false), isMaskActive = _v[0], setIsMaskActive = _v[1];
+    var _w = (0, react_1.useState)(0), currentSegmentIndex = _w[0], setCurrentSegmentIndex = _w[1];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -948,11 +948,11 @@ var SingleDatePicker = function (props) {
                         react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
                                 borderColor: error ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500] : theme.colors.primary[500],
                                 boxShadow: error
-                                    ? "0 0 0 1px ".concat((_g = (_f = theme.colors.semantic) === null || _f === void 0 ? void 0 : _f.error) === null || _g === void 0 ? void 0 : _g[500])
-                                    : "0 0 0 1px ".concat(theme.colors.primary[500]),
+                                    ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
+                                    : "0 0 0 0.125rem ".concat((_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.primary),
                             }, _hover: {
                                 borderColor: error ? (_j = (_h = theme.colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[500] : undefined,
-                            }, cursor: "text" }),
+                            }, cursor: "text", boxShadow: error ? "0 0 0 0.125rem ".concat((_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.error) : "" }),
                         react_1.default.createElement(react_2.InputRightElement, { pr: 3, pointerEvents: "auto", onClick: function (e) {
                                 e.stopPropagation();
                                 if (!isOpen) {

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -69,6 +69,9 @@ var TimeOnlyPicker = function (props) {
         // Do not close; user asked only outside-click and OK to close
     };
     var handleOk = function () {
+        var commitValue = tempDate !== null && tempDate !== void 0 ? tempDate : new Date(resolvedTempDate.getFullYear(), resolvedTempDate.getMonth(), resolvedTempDate.getDate(), resolvedTempDate.getHours(), resolvedTempDate.getMinutes(), resolvedTempDate.getSeconds(), resolvedTempDate.getMilliseconds());
+        setTempDate(commitValue);
+        props.onChange(commitValue);
         onClose();
     };
     (0, react_1.useEffect)(function () {

package/dist/Components/DatePicker/TimePickerInput.js

@@ -111,7 +111,9 @@ var caretFromDigitIndex = function (digitIndex, digitsLen) {
         return 3;
     return digitIndex + 1;
 };
-var formatToPlaceholder = function (formatStr) { return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM"); };
+var formatToPlaceholder = function (formatStr) {
+    return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+};
 var TimePickerInput = function (_a) {
     var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -123,6 +125,8 @@ var TimePickerInput = function (_a) {
     var _e = (0, react_1.useState)("hour"), activeSegment = _e[0], setActiveSegment = _e[1];
     var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
     var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
+    var ampmRef = (0, react_1.useRef)("AM");
+    var _f = (0, react_1.useState)(""), ampm = _f[0], setAmpm = _f[1];
     var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
         requestAnimationFrame(function () {
             var el = inputRef.current;
@@ -142,7 +146,8 @@ var TimePickerInput = function (_a) {
         var nextDigitIndex = Math.max(0, Math.min(desiredDigitIndex, maxDigitIndex));
         setInputValueAndCaret(formatted, nextDigitIndex);
         if (clamped.length === 4) {
-            var parsed = (0, date_fns_1.parse)(formatted, dateFormat, new Date());
+            var formattedInput = is12Hour ? "".concat(formatted, " ").concat(ampmRef.current || "AM") : formatted;
+            var parsed = (0, date_fns_1.parse)(formattedInput, dateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed))
                 onChange(parsed);
         }
@@ -282,6 +287,7 @@ var TimePickerInput = function (_a) {
             var el = inputRef.current;
             if (!el)
                 return;
+            el.value = formatDigits(digitsRef.current);
             el.focus();
             el.setSelectionRange(0, Math.min(2, el.value.length));
         });
@@ -290,8 +296,16 @@ var TimePickerInput = function (_a) {
     var handleBlur = (0, react_1.useCallback)(function () {
         setIsFocused(false);
         isFocusedRef.current = false;
+        var el = inputRef.current;
+        if (el) {
+            var formatted = formatDigits(digitsRef.current);
+            el.value =
+                is12Hour && formatted
+                    ? "".concat(formatted, " ").concat(ampmRef.current || ampm || "AM")
+                    : formatted;
+        }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
+    }, [onBlur, is12Hour, ampm]);
     var handleClick = (0, react_1.useCallback)(function () {
         var _a;
         var el = inputRef.current;
@@ -330,19 +344,33 @@ var TimePickerInput = function (_a) {
     }, [applyDigits]);
     (0, react_1.useEffect)(function () {
         if (value) {
-            var newDigits = adjustDigits((0, date_fns_1.format)(value, dateFormat).replace(/\D/g, ""), is12Hour);
+            var formattedValue = (0, date_fns_1.format)(value, dateFormat);
+            var newDigits = adjustDigits(formattedValue.replace(/\D/g, ""), is12Hour);
             digitsRef.current = newDigits;
             setDigits(newDigits);
+            if (is12Hour) {
+                var newAmpm = (0, date_fns_1.format)(value, "a").toUpperCase();
+                ampmRef.current = newAmpm;
+                setAmpm(newAmpm);
+            }
+            else {
+                ampmRef.current = "";
+                setAmpm("");
+            }
             if (!isFocusedRef.current) {
                 var formatted = formatDigits(newDigits);
                 if (inputRef.current) {
-                    inputRef.current.value = formatted;
+                    inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampmRef.current) : formatted;
                 }
             }
         }
         else {
             digitsRef.current = "";
             setDigits("");
+            if (is12Hour) {
+                ampmRef.current = "";
+                setAmpm("");
+            }
             if (inputRef.current && !isFocusedRef.current) {
                 inputRef.current.value = "";
             }
@@ -351,9 +379,9 @@ var TimePickerInput = function (_a) {
     (0, react_1.useEffect)(function () {
         var formatted = formatDigits(digits);
         if (!isFocusedRef.current && inputRef.current) {
-            inputRef.current.value = formatted;
+            inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampm) : formatted;
         }
-    }, [digits]);
+    }, [digits, ampm, is12Hour]);
     return (react_1.default.createElement(react_2.InputGroup, null,
         react_1.default.createElement(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off" }),
         react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none" },

package/dist/Components/InputTextArea/InputTextArea.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/InputTextArea/InputTextArea.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React from "react";
+// import type { Meta, StoryObj } from "@storybook/react/*";
+// import { InputTextAreaProps } from "./InputTextAreaProps";
+// import InputTextArea from "./InputTextArea";
+// import { useState } from "react";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/KaTable/CustomHeader.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type CustomHeaderProps = {
+    column: any;
+    onSortChange?: (sortState: string, columnName: string) => void;
+    menuItems?: Array<{
+        label: string;
+        onClick: () => void;
+        submenu?: any[];
+    }>;
+    isSort?: boolean;
+    sortDirection: string;
+};
+declare const CustomHeader: React.MemoExoticComponent<({ column, onSortChange, menuItems, isSort, sortDirection, }: CustomHeaderProps) => React.JSX.Element>;
+export default CustomHeader;

package/dist/Components/KaTable/CustomHeader.js

@@ -0,0 +1,69 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var bs_1 = require("react-icons/bs");
+var fa_1 = require("react-icons/fa");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var CustomHeader = (0, react_1.memo)(function (_a) {
+    var column = _a.column, onSortChange = _a.onSortChange, menuItems = _a.menuItems, isSort = _a.isSort, sortDirection = _a.sortDirection;
+    var handleSortClick = (0, react_1.useCallback)(function () {
+        var sortOrder = "none";
+        if (sortDirection === "none")
+            sortOrder = "asc";
+        else if (sortDirection === "asc")
+            sortOrder = "desc";
+        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortOrder, column.key);
+    }, [sortDirection, column.key, onSortChange]);
+    return (react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
+        react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, column.title),
+        react_1.default.createElement(react_2.Flex, { alignItems: "center" },
+            isSort && (react_1.default.createElement(SortingIcon, { sortState: sortDirection, handleSortClick: handleSortClick })),
+            menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (react_1.default.createElement(react_2.Menu, null,
+                react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", _hover: { bg: "none" }, _active: { bg: "none" } }),
+                react_1.default.createElement(react_2.Portal, null,
+                    react_1.default.createElement(react_2.MenuList, null, menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+                        react_1.default.createElement(react_2.MenuItem, { onClick: function () { return item === null || item === void 0 ? void 0 : item.onClick(); } }, item.label),
+                        item.submenu && react_1.default.createElement(Submenu, { items: item.submenu }))); }))))) : null)));
+});
+var SortingIcon = (0, react_1.memo)(function (_a) {
+    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
+        sortState === "none" && react_1.default.createElement(fa_1.FaSort, { size: 14 }),
+        sortState === "asc" && react_1.default.createElement(fa_1.FaCaretUp, { size: 14 }),
+        sortState === "desc" && react_1.default.createElement(fa_1.FaCaretDown, { size: 14 })));
+});
+var Submenu = (0, react_1.memo)(function (_a) {
+    var items = _a.items;
+    return (react_1.default.createElement(react_2.MenuGroup, null, items.map(function (subItem, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function () { return (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) && (subItem === null || subItem === void 0 ? void 0 : subItem.onClick()); }, sx: {
+            pl: 6,
+            fontSize: "sm",
+            color: "gray.600",
+            _hover: { bg: "gray.100", color: "gray.800" }, // Hover styles
+        } }, subItem.label)); })));
+});
+exports.default = CustomHeader;

package/dist/Components/KaTable/KaTable.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import * as TableEnums from "ka-table/enums";
+import * as TableProps from "ka-table/props";
+import * as TableActionCreator from "ka-table/actionCreators";
+import * as TableModel from "ka-table/models";
+import * as TableUtils from "ka-table/utils";
+import * as TableFun from "ka-table";
+import "ka-table/style.css";
+import "./ka-table.css";
+import { KaTableProps } from "./KaTableProps";
+declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, selected, columnVisibility, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, }: KaTableProps) => React.JSX.Element>;
+export default _default;
+export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };

package/dist/Components/KaTable/KaTable.js

@@ -0,0 +1,111 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
+var react_1 = __importStar(require("react"));
+var ka_table_1 = require("ka-table");
+var TableEnums = __importStar(require("ka-table/enums"));
+exports.TableEnums = TableEnums;
+var TableProps = __importStar(require("ka-table/props"));
+exports.TableProps = TableProps;
+var TableActionCreator = __importStar(require("ka-table/actionCreators"));
+exports.TableActionCreator = TableActionCreator;
+var TableModel = __importStar(require("ka-table/models"));
+exports.TableModel = TableModel;
+var TableUtils = __importStar(require("ka-table/utils"));
+exports.TableUtils = TableUtils;
+var TableFun = __importStar(require("ka-table"));
+exports.TableFun = TableFun;
+require("ka-table/style.css");
+require("./ka-table.css");
+var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var table_1 = require("../../Utils/table");
+var selectionCellColumn = {
+    key: "select-cell",
+    width: 50,
+    columnFreeze: true,
+    customHeader: false,
+    className: "select-cell",
+};
+var KaTable = function (_a) {
+    var _b, _c;
+    var columns = _a.columns, data = _a.data, _d = _a.rowKey, rowKey = _d === void 0 ? "id" : _d, Edit = _a.Edit, 
+    // sorting,
+    format = _a.format, 
+    // paging,
+    filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, selected = _a.selected, columnVisibility = _a.columnVisibility, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _e = (0, react_1.useState)([]), sortState = _e[0], setSortState = _e[1];
+    if (checkSelect &&
+        !columns.some(function (column) { return column.key === "select-cell"; })) {
+        columns.unshift(selectionCellColumn);
+    }
+    var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
+    // const columnVisibilitys = columnVisibility ?? false;
+    var handleSort = function (sort) {
+        setSortState(sort);
+    };
+    var sortedData = (0, react_1.useMemo)(function () { return (0, table_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
+    var mergedChildComponents = (0, useMergedChildComponents_1.default)({
+        childComponents: childComponents,
+        onSortChange: handleSort,
+        handleSelection: onSelectionChange,
+        rowKey: rowKey,
+        onRowClick: onRowClick,
+        selected: selected,
+        dataLength: dataLength,
+        columns: columns,
+        headerBgColor: headerBgColor,
+        freezedBgColor: freezedBgColor,
+        headerTextColor: headerTextColor,
+        freezedTextColor: freezedTextColor,
+        sortState: sortState,
+    });
+    return (react_1.default.createElement("div", { style: {
+            borderRadius: "10px 0 0 10px",
+            borderWidth: "0px 0px 0px 5px",
+            borderColor: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[500],
+            boxShadow: theme.shadows.lg,
+        } },
+        react_1.default.createElement(ka_table_1.Table, { columns: columns, data: sortedData, rowKeyField: rowKey, editingMode: Edit, key: columns, sortingMode: TableEnums.SortingMode.MultipleRemote, format: format, 
+            // paging={paging}
+            filteringMode: undefined, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
+                enabled: true,
+            } })));
+};
+exports.default = react_1.default.memo(KaTable);

package/dist/Components/KaTable/KaTableProps.d.ts

@@ -0,0 +1,23 @@
+export type KaTableProps = {
+    columns: any;
+    data: any;
+    rowKey?: any;
+    Edit?: any;
+    format?: (props: any) => void;
+    validation?: (props: any) => void;
+    filter?: any;
+    childComponents?: any;
+    columnReorder?: any;
+    columnResizing?: any;
+    editableCells?: any;
+    loading?: any;
+    checkSelect?: any;
+    onRowClick?: (rowData: any, column: any) => void;
+    onSelectionChange?: (selectedIds: any[]) => void;
+    selected?: any;
+    columnVisibility?: boolean;
+    headerBgColor?: string;
+    headerTextColor?: string;
+    freezedBgColor?: string;
+    freezedTextColor?: string;
+};

package/dist/Components/KaTable/KaTableProps.js

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

package/dist/Components/KaTable/SelectionCell.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TableProps } from "./KaTable";
+declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
+    onSelectionChange: (ids: any[], type: string) => void;
+    rowKey: any;
+    selected: any;
+}) => React.JSX.Element>;
+export default _default;

package/dist/Components/KaTable/SelectionCell.js

@@ -0,0 +1,38 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 = require("./KaTable");
+var SelectionCell = function (_a) {
+    var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
+    var table = KaTable_1.TableFun.useTableInstance();
+    var onChangeHandle = function (event) {
+        if (event.nativeEvent.shiftKey) {
+            table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
+        }
+        else {
+            var isChecked = event.currentTarget.checked;
+            var action = isChecked ? "add" : "remove";
+            onSelectionChange(rowKeyValue, action);
+            if (isChecked) {
+                table.selectRow(rowKeyValue);
+            }
+            else {
+                table.deselectRow(rowKeyValue);
+            }
+        }
+    };
+    return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
+};
+exports.default = react_1.default.memo(SelectionCell);

package/dist/Components/KaTable/SelectionHeader.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
+export default _default;

package/dist/Components/KaTable/SelectionHeader.js

@@ -0,0 +1,56 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var KaTable_1 = require("./KaTable");
+var SelectionHeader = function (_a) {
+    var onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey, selected = _a.selected;
+    var table = KaTable_1.TableFun.useTableInstance();
+    var selectAllRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (selectAllRef.current) {
+            selectAllRef.current.indeterminate = selected === null || selected === void 0 ? void 0 : selected.intederminate;
+        }
+    }, [selected.intederminate]);
+    var handleSelectionChange = (0, react_1.useCallback)(function (checked) {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked);
+    }, [onSelectionChange]);
+    return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: selected === null || selected === void 0 ? void 0 : selected.checked, onChange: function (event) {
+            var _a, _b;
+            var isChecked = event.currentTarget.checked;
+            // const action = isChecked ? "add" : "remove";
+            var totalIds = isChecked
+                ? (_b = (_a = table === null || table === void 0 ? void 0 : table.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row[rowKey]; })
+                : [];
+            handleSelectionChange(totalIds);
+            if (isChecked) {
+                table.selectAllFilteredRows();
+            }
+            else {
+                table.deselectAllFilteredRows();
+            }
+        }, style: { marginLeft: "40%" } }));
+};
+exports.default = react_1.default.memo(SelectionHeader);

package/dist/Components/KaTable/ka-table.css

@@ -0,0 +1,27 @@
+.ka-thead-cell {
+  padding: 7px 7px;
+}
+.ka-cell {
+  padding: 7px 0px;
+}
+
+.ka-thead-background {
+  background-color: #bfbcbc;
+  z-index: 1;
+}
+
+.ka-cell-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 5%;
+}
+.ka-row {
+  box-sizing: unset;
+  border-bottom: none;
+  border-top: none;
+}
+.ka-table-wrapper {
+  border-bottom: 2px solid #d8d9db;
+  border-right: 2px solid #d8d9db;
+}

package/dist/Components/KaTable/useMergedChildComponents.d.ts

@@ -0,0 +1,14 @@
+import { KaTableProps } from "./KaTableProps";
+type MergedChildComponentsProps = Pick<KaTableProps, "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor"> & {
+    childComponents: any;
+    onSortChange: any;
+    handleSelection: any;
+    rowKey: any;
+    onRowClick: any;
+    selected: any;
+    dataLength: number;
+    columns: any;
+    sortState: any;
+};
+declare const useMergedChildComponents: ({ childComponents, onSortChange, handleSelection, rowKey, onRowClick, selected, dataLength, columns, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, sortState, }: MergedChildComponentsProps) => any;
+export default useMergedChildComponents;

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -0,0 +1,224 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 CustomHeader_1 = __importDefault(require("./CustomHeader"));
+var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
+var SelectionCell_1 = __importDefault(require("./SelectionCell"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var table_1 = require("../../Utils/table");
+var useMergedChildComponents = function (_a) {
+    var childComponents = _a.childComponents, onSortChange = _a.onSortChange, handleSelection = _a.handleSelection, rowKey = _a.rowKey, onRowClick = _a.onRowClick, selected = _a.selected, dataLength = _a.dataLength, columns = _a.columns, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, sortState = _a.sortState;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var handleSortChange = (0, react_1.useCallback)(function (newState, columnKey) {
+        var newSortState = __spreadArray([], sortState, true);
+        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === columnKey; });
+        if (existingIndex === -1) {
+            newSortState.push({
+                column: columnKey,
+                direction: newState, // Default to ascending when adding a column
+            });
+        }
+        else {
+            var existingSort = newSortState[existingIndex];
+            existingSort.direction = newState;
+        }
+        var column = columns.find(function (col) { return col.key === columnKey; });
+        column.sortDirection = newState;
+        onSortChange(newSortState);
+    }, [sortState, onSortChange, columns]);
+    var _b = react_1.default.useState(selected), selections = _b[0], setSelections = _b[1];
+    (0, react_1.useEffect)(function () {
+        setSelections(selected);
+    }, [selected]);
+    var isAllSelected = (0, react_1.useMemo)(function () {
+        return {
+            checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
+            intederminate: (selections === null || selections === void 0 ? void 0 : selections.length) > 0 && (selections === null || selections === void 0 ? void 0 : selections.length) < dataLength,
+        };
+    }, [selections, dataLength]);
+    var cellSelectionHandle = (0, react_1.useCallback)(function (values, type) {
+        if (type === "add") {
+            setSelections(__spreadArray(__spreadArray([], selections, true), [values], false));
+            handleSelection(__spreadArray(__spreadArray([], selections, true), [values], false));
+        }
+        else if (type === "remove") {
+            setSelections(selections.filter(function (value) { return value !== values; }));
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+        else {
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+    }, [selections, handleSelection]);
+    var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
+        setSelections(values);
+        handleSelection(values);
+    }, [handleSelection]);
+    return (0, react_1.useMemo)(function () {
+        return __assign(__assign({}, childComponents), { dataRow: {
+                elementAttributes: function (props) {
+                    var _a, _b;
+                    var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    var attributes = existingElementAttributes
+                        ? existingElementAttributes(props)
+                        : {};
+                    var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
+                    var className = "".concat(attributes.className || "", " ").concat(isSelected ? "ka-row-selected" : "", " ka-row-hover").trim();
+                    // const className =
+                    //   `${attributes.className || ""} ${isSelected ? "ka-row-selected" : ""}`.trim();
+                    return __assign(__assign({}, attributes), { className: className, style: __assign(__assign({}, (attributes.style || {})), { backgroundColor: isSelected
+                                ? theme.colors.backgroundColor.subtle
+                                : undefined, border: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[200]) }) });
+                },
+            }, headCell: {
+                content: function (props) {
+                    var _a, _b, _c;
+                    var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    var column = props.column;
+                    if (column.sortable || column.filter) {
+                        return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: handleSortChange, menuItems: (_b = column === null || column === void 0 ? void 0 : column.menu) !== null && _b !== void 0 ? _b : [], isSort: props.column.sortable, sortDirection: (_c = props.column.sortDirection) !== null && _c !== void 0 ? _c : "none" })));
+                    }
+                    if (props.column.key === "select-cell") {
+                        return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
+                    }
+                    return null;
+                },
+                elementAttributes: function (props) {
+                    var _a, _b, _c, _d, _e, _f;
+                    var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600] }),
+                        };
+                    }
+                    return {
+                        style: {
+                            backgroundColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : (_d = theme.colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.subtle,
+                            color: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600],
+                            border: "1px solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]),
+                        },
+                    };
+                },
+            }, cell: {
+                elementAttributes: function (props) {
+                    var _a, _b, _c, _d, _e;
+                    var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], fontWeight: 600 }),
+                        };
+                    }
+                    return {
+                        style: {
+                            color: (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600],
+                            fontWeight: 500,
+                            border: "1px solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[200]),
+                        },
+                        onClick: function () {
+                            if (onRowClick) {
+                                onRowClick(props.rowData, props.column.key);
+                            }
+                        },
+                    };
+                },
+            }, tableWrapper: {
+                elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
+            }, cellText: {
+                content: function (props) {
+                    var _a;
+                    var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.key === "select-cell") {
+                        var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
+                        return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
+                    }
+                },
+            } });
+    }, [
+        childComponents,
+        rowKey,
+        onRowClick,
+        selections,
+        columns,
+        cellSelectionHandle,
+        headerSelectionHandle,
+        isAllSelected,
+        theme.colors,
+        headerBgColor,
+        headerTextColor,
+        freezedBgColor,
+        freezedTextColor,
+        handleSortChange,
+    ]);
+};
+exports.default = useMergedChildComponents;

package/dist/Components/NumberInput/NumberInput.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/NumberInput/NumberInput.stories.js

@@ -0,0 +1,5 @@
+"use strict";
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import NumberInputs from './NumberInput';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Table/Table.css

@@ -0,0 +1,16 @@
+.table_wrapper {
+  width: 100%;
+  border-collapse: collapse;
+  /* table-layout: fixed; */
+}
+
+.table_wrapper th .resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  z-index: 999;
+}

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": "2.2.52",
+  "version": "2.2.53",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",