pixelize-design-library 2.3.7 → 2.3.9

package/dist/Components/DatePicker/TimePickerInput.js

@@ -1,57 +1,25 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerInput = void 0;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var date_fns_1 = require("date-fns");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var textInputIconSize_1 = require("../Input/textInputIconSize");
-var sanitizeDigits = function (input) { return input.replace(/\D/g, "").slice(0, 4); };
-var adjustDigits = function (digits, is12Hour) {
-    var result = sanitizeDigits(digits);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const date_fns_1 = require("date-fns");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const textInputIconSize_1 = require("../Input/textInputIconSize");
+const sanitizeDigits = (input) => input.replace(/\D/g, "").slice(0, 4);
+const adjustDigits = (digits, is12Hour) => {
+    let result = sanitizeDigits(digits);
     if (!result)
         return "";
-    var maxFirstHour = is12Hour ? 1 : 2;
-    var firstDigit = parseInt(result.charAt(0), 10);
+    const maxFirstHour = is12Hour ? 1 : 2;
+    const firstDigit = parseInt(result.charAt(0), 10);
     if (!isNaN(firstDigit) && firstDigit > maxFirstHour) {
         result = ("0" + firstDigit.toString() + result.slice(1)).slice(0, 4);
     }
     if (result.length >= 2) {
-        var hour = parseInt(result.slice(0, 2), 10);
+        let hour = parseInt(result.slice(0, 2), 10);
         if (isNaN(hour))
             hour = 0;
         if (is12Hour) {
@@ -69,13 +37,13 @@ var adjustDigits = function (digits, is12Hour) {
         result = hour.toString().padStart(2, "0") + result.slice(2);
     }
     if (result.length >= 3) {
-        var firstMinuteDigit = parseInt(result.charAt(2), 10);
+        const firstMinuteDigit = parseInt(result.charAt(2), 10);
         if (!isNaN(firstMinuteDigit) && firstMinuteDigit > 5) {
             result = result.slice(0, 2) + "5" + result.slice(3);
         }
     }
     if (result.length >= 4) {
-        var minute = parseInt(result.slice(2, 4), 10);
+        let minute = parseInt(result.slice(2, 4), 10);
         if (isNaN(minute))
             minute = 0;
         if (minute < 0)
@@ -86,26 +54,26 @@ var adjustDigits = function (digits, is12Hour) {
     }
     return result.slice(0, 4);
 };
-var formatDigits = function (digits) {
+const formatDigits = (digits) => {
     if (!digits)
         return "";
     if (digits.length === 1)
         return digits;
     if (digits.length === 2)
-        return "".concat(digits, ":");
+        return `${digits}:`;
     if (digits.length === 3)
-        return "".concat(digits.slice(0, 2), ":").concat(digits.slice(2, 3));
-    return "".concat(digits.slice(0, 2), ":").concat(digits.slice(2, 4));
+        return `${digits.slice(0, 2)}:${digits.slice(2, 3)}`;
+    return `${digits.slice(0, 2)}:${digits.slice(2, 4)}`;
 };
-var getDigitIndexFromCaret = function (formatted, caret) {
-    var digitIndex = 0;
-    for (var i = 0; i < caret && i < formatted.length; i++) {
+const getDigitIndexFromCaret = (formatted, caret) => {
+    let digitIndex = 0;
+    for (let i = 0; i < caret && i < formatted.length; i++) {
         if (/\d/.test(formatted[i]))
             digitIndex++;
     }
     return digitIndex;
 };
-var caretFromDigitIndex = function (digitIndex, digitsLen) {
+const caretFromDigitIndex = (digitIndex, digitsLen) => {
     if (digitIndex < 0)
         return 0;
     if (digitsLen <= 1)
@@ -122,99 +90,96 @@ 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 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, error = _a.error, _c = _a.size, size = _c === void 0 ? "md" : _c;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var sizeKey = typeof size === "string" ? size : "md";
-    var iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
-    var iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var inputRef = (0, react_1.useRef)(null);
-    var _d = (0, react_1.useState)(""), digits = _d[0], setDigits = _d[1];
-    var digitsRef = (0, react_1.useRef)("");
-    var _e = (0, react_1.useState)(false), setIsFocused = _e[1];
-    var isFocusedRef = (0, react_1.useRef)(false);
-    var _f = (0, react_1.useState)("hour"), setActiveSegment = _f[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 _g = (0, react_1.useState)("AM"), ampm = _g[0], setAmpm = _g[1];
-    var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
-        requestAnimationFrame(function () {
-            var el = inputRef.current;
+const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const sizeKey = typeof size === "string" ? size : "md";
+    const iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
+    const iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
+    const inputRef = (0, react_1.useRef)(null);
+    const [digits, setDigits] = (0, react_1.useState)("");
+    const digitsRef = (0, react_1.useRef)("");
+    const [, setIsFocused] = (0, react_1.useState)(false);
+    const isFocusedRef = (0, react_1.useRef)(false);
+    const [, setActiveSegment] = (0, react_1.useState)("hour");
+    const is12Hour = (0, react_1.useMemo)(() => /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat), [dateFormat]);
+    const placeholderText = (0, react_1.useMemo)(() => placeholder || formatToPlaceholder(dateFormat), [placeholder, dateFormat]);
+    const ampmRef = (0, react_1.useRef)("AM");
+    const [ampm, setAmpm] = (0, react_1.useState)("AM");
+    const setInputValueAndCaret = (0, react_1.useCallback)((formatted, caretDigitIndex) => {
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
             if (!el)
                 return;
             el.value = formatted;
-            var caretPos = Math.min(caretFromDigitIndex(caretDigitIndex, digitsRef.current.length), formatted.length);
+            const caretPos = Math.min(caretFromDigitIndex(caretDigitIndex, digitsRef.current.length), formatted.length);
             el.setSelectionRange(caretPos, caretPos);
         });
     }, []);
-    var applyDigits = (0, react_1.useCallback)(function (rawDigits, desiredDigitIndex) {
-        var clamped = adjustDigits(rawDigits, is12Hour);
+    const applyDigits = (0, react_1.useCallback)((rawDigits, desiredDigitIndex) => {
+        const clamped = adjustDigits(rawDigits, is12Hour);
         digitsRef.current = clamped;
         setDigits(clamped);
-        var formatted = formatDigits(clamped);
-        var maxDigitIndex = clamped.length === 2 ? 2 : clamped.length;
-        var nextDigitIndex = Math.max(0, Math.min(desiredDigitIndex, maxDigitIndex));
+        const formatted = formatDigits(clamped);
+        const maxDigitIndex = clamped.length === 2 ? 2 : clamped.length;
+        const nextDigitIndex = Math.max(0, Math.min(desiredDigitIndex, maxDigitIndex));
         setInputValueAndCaret(formatted, nextDigitIndex);
         if (clamped.length === 4) {
-            var formattedInput = is12Hour ? "".concat(formatted, " ").concat(ampmRef.current || "AM") : formatted;
-            var parsed = (0, date_fns_1.parse)(formattedInput, dateFormat, new Date());
+            const formattedInput = is12Hour ? `${formatted} ${ampmRef.current || "AM"}` : formatted;
+            const parsed = (0, date_fns_1.parse)(formattedInput, dateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed))
                 onChange(parsed);
         }
         else if (clamped.length === 0) {
             onChange(null);
         }
-        return { digits: clamped, nextDigitIndex: nextDigitIndex };
+        return { digits: clamped, nextDigitIndex };
     }, [dateFormat, is12Hour, onChange, setInputValueAndCaret]);
-    var updateAmpmValue = (0, react_1.useCallback)(function (next) {
+    const updateAmpmValue = (0, react_1.useCallback)((next) => {
         if (!is12Hour)
             return;
-        var upperNext = next.toUpperCase() === "PM" ? "PM" : "AM";
-        var formattedDigits = formatDigits(digitsRef.current);
+        const upperNext = next.toUpperCase() === "PM" ? "PM" : "AM";
+        const formattedDigits = formatDigits(digitsRef.current);
         ampmRef.current = upperNext;
         setAmpm(upperNext);
         if (digitsRef.current.length === 4) {
-            var parsed = (0, date_fns_1.parse)("".concat(formattedDigits, " ").concat(upperNext), dateFormat, new Date());
+            const parsed = (0, date_fns_1.parse)(`${formattedDigits} ${upperNext}`, dateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed))
                 onChange(parsed);
         }
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (!el)
             return;
         if (isFocusedRef.current) {
             el.value = formattedDigits;
         }
         else {
-            el.value = formattedDigits ? "".concat(formattedDigits, " ").concat(upperNext) : "";
+            el.value = formattedDigits ? `${formattedDigits} ${upperNext}` : "";
         }
     }, [dateFormat, is12Hour, onChange]);
-    var toggleAmpm = (0, react_1.useCallback)(function () {
+    const toggleAmpm = (0, react_1.useCallback)(() => {
         if (!is12Hour)
             return;
-        var current = (ampmRef.current || ampm || "AM").toUpperCase();
-        var next = current === "AM" ? "PM" : "AM";
+        const current = (ampmRef.current || ampm || "AM").toUpperCase();
+        const next = current === "AM" ? "PM" : "AM";
         updateAmpmValue(next);
     }, [ampm, is12Hour, updateAmpmValue]);
-    var setAmpmFromKey = (0, react_1.useCallback)(function (next) {
+    const setAmpmFromKey = (0, react_1.useCallback)((next) => {
         updateAmpmValue(next);
     }, [updateAmpmValue]);
-    var handleDigitInput = (0, react_1.useCallback)(function (digit) {
+    const handleDigitInput = (0, react_1.useCallback)((digit) => {
         var _a, _b;
-        var el = inputRef.current;
-        var formatted = formatDigits(digitsRef.current);
-        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
-        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
-        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
-        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
-        var newDigits = digitsRef.current;
+        const el = inputRef.current;
+        const formatted = formatDigits(digitsRef.current);
+        const start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        const end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        const startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        const endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        let newDigits = digitsRef.current;
         newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
         newDigits = newDigits.slice(0, startDigitIndex) + digit + newDigits.slice(startDigitIndex);
         newDigits = newDigits.slice(0, 4);
-        var _c = applyDigits(newDigits, startDigitIndex + 1), finalDigits = _c.digits, nextDigitIndex = _c.nextDigitIndex;
+        const { digits: finalDigits, nextDigitIndex } = applyDigits(newDigits, startDigitIndex + 1);
         if (startDigitIndex < 2 && finalDigits.length >= 2) {
             setActiveSegment("minute");
         }
@@ -225,24 +190,24 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    var handleBackspace = (0, react_1.useCallback)(function () {
+    const handleBackspace = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!digitsRef.current)
             return;
-        var el = inputRef.current;
-        var formatted = formatDigits(digitsRef.current);
-        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
-        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
-        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
-        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        const el = inputRef.current;
+        const formatted = formatDigits(digitsRef.current);
+        const start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        const end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        let startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        const endDigitIndex = getDigitIndexFromCaret(formatted, end);
         if (startDigitIndex === endDigitIndex) {
             if (startDigitIndex === 0)
                 return;
             startDigitIndex -= 1;
         }
-        var newDigits = digitsRef.current;
+        let newDigits = digitsRef.current;
         newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
-        var _c = applyDigits(newDigits, startDigitIndex), nextDigitIndex = _c.nextDigitIndex, finalDigits = _c.digits;
+        const { nextDigitIndex, digits: finalDigits } = applyDigits(newDigits, startDigitIndex);
         if (finalDigits.length < 2 || nextDigitIndex <= 2) {
             setActiveSegment("hour");
         }
@@ -250,24 +215,24 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    var handleDelete = (0, react_1.useCallback)(function () {
+    const handleDelete = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!digitsRef.current)
             return;
-        var el = inputRef.current;
-        var formatted = formatDigits(digitsRef.current);
-        var start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
-        var end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
-        var startDigitIndex = getDigitIndexFromCaret(formatted, start);
-        var endDigitIndex = getDigitIndexFromCaret(formatted, end);
+        const el = inputRef.current;
+        const formatted = formatDigits(digitsRef.current);
+        const start = (_a = el === null || el === void 0 ? void 0 : el.selectionStart) !== null && _a !== void 0 ? _a : formatted.length;
+        const end = (_b = el === null || el === void 0 ? void 0 : el.selectionEnd) !== null && _b !== void 0 ? _b : start;
+        const startDigitIndex = getDigitIndexFromCaret(formatted, start);
+        let endDigitIndex = getDigitIndexFromCaret(formatted, end);
         if (startDigitIndex === endDigitIndex) {
             if (startDigitIndex >= digitsRef.current.length)
                 return;
             endDigitIndex = startDigitIndex + 1;
         }
-        var newDigits = digitsRef.current;
+        let newDigits = digitsRef.current;
         newDigits = newDigits.slice(0, startDigitIndex) + newDigits.slice(endDigitIndex);
-        var _c = applyDigits(newDigits, startDigitIndex), nextDigitIndex = _c.nextDigitIndex, finalDigits = _c.digits;
+        const { nextDigitIndex, digits: finalDigits } = applyDigits(newDigits, startDigitIndex);
         if (finalDigits.length < 2 || nextDigitIndex <= 2) {
             setActiveSegment("hour");
         }
@@ -275,7 +240,7 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    var handleArrow = (0, react_1.useCallback)(function (direction) {
+    const handleArrow = (0, react_1.useCallback)((direction) => {
         if (direction === "left") {
             setActiveSegment("hour");
             setInputValueAndCaret(formatDigits(digitsRef.current), 0);
@@ -287,10 +252,10 @@ var TimePickerInput = function (_a) {
             }
         }
     }, [setInputValueAndCaret]);
-    var handleKeyDown = (0, react_1.useCallback)(function (e) {
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
         if (disabled)
             return;
-        var key = e.key;
+        const key = e.key;
         if (/^[0-9]$/.test(key)) {
             e.preventDefault();
             handleDigitInput(key);
@@ -335,12 +300,12 @@ var TimePickerInput = function (_a) {
         }
         e.preventDefault();
     }, [disabled, handleDigitInput, handleBackspace, handleDelete, handleArrow, is12Hour, toggleAmpm, setAmpmFromKey]);
-    var handleFocus = (0, react_1.useCallback)(function () {
+    const handleFocus = (0, react_1.useCallback)(() => {
         setIsFocused(true);
         isFocusedRef.current = true;
         setActiveSegment("hour");
-        requestAnimationFrame(function () {
-            var el = inputRef.current;
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
             if (!el)
                 return;
             el.value = formatDigits(digitsRef.current);
@@ -349,27 +314,27 @@ var TimePickerInput = function (_a) {
         });
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
     }, [onFocus]);
-    var handleBlur = (0, react_1.useCallback)(function () {
+    const handleBlur = (0, react_1.useCallback)(() => {
         setIsFocused(false);
         isFocusedRef.current = false;
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (el) {
-            var formatted = formatDigits(digitsRef.current);
+            const formatted = formatDigits(digitsRef.current);
             el.value =
                 is12Hour && formatted
-                    ? "".concat(formatted, " ").concat(ampmRef.current || ampm || "AM")
+                    ? `${formatted} ${ampmRef.current || ampm || "AM"}`
                     : formatted;
         }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
     }, [onBlur, is12Hour, ampm]);
-    var handleClick = (0, react_1.useCallback)(function () {
+    const handleClick = (0, react_1.useCallback)(() => {
         var _a;
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (!el)
             return;
-        var caret = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : 0;
-        var formatted = formatDigits(digitsRef.current);
-        var digitIndex = getDigitIndexFromCaret(formatted, caret);
+        const caret = (_a = el.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const formatted = formatDigits(digitsRef.current);
+        const digitIndex = getDigitIndexFromCaret(formatted, caret);
         if (digitIndex < 2) {
             setActiveSegment("hour");
         }
@@ -378,19 +343,19 @@ var TimePickerInput = function (_a) {
                 setActiveSegment("minute");
         }
     }, []);
-    var handleInput = (0, react_1.useCallback)(function (e) {
+    const handleInput = (0, react_1.useCallback)(() => {
         // Prevent uncontrolled edits – we manage value ourselves
-        var el = inputRef.current;
+        const el = inputRef.current;
         if (!el)
             return;
-        var formatted = formatDigits(digitsRef.current);
+        const formatted = formatDigits(digitsRef.current);
         if (el.value !== formatted) {
             el.value = formatted;
         }
     }, []);
-    var handlePaste = (0, react_1.useCallback)(function (e) {
+    const handlePaste = (0, react_1.useCallback)((e) => {
         e.preventDefault();
-        var pasted = sanitizeDigits(e.clipboardData.getData("text"));
+        const pasted = sanitizeDigits(e.clipboardData.getData("text"));
         if (!pasted)
             return;
         applyDigits(pasted, pasted.length);
@@ -398,14 +363,14 @@ var TimePickerInput = function (_a) {
             setActiveSegment("minute");
         }
     }, [applyDigits]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (value) {
-            var formattedValue = (0, date_fns_1.format)(value, dateFormat);
-            var newDigits = adjustDigits(formattedValue.replace(/\D/g, ""), is12Hour);
+            const formattedValue = (0, date_fns_1.format)(value, dateFormat);
+            const newDigits = adjustDigits(formattedValue.replace(/\D/g, ""), is12Hour);
             digitsRef.current = newDigits;
             setDigits(newDigits);
             if (is12Hour) {
-                var newAmpm = (0, date_fns_1.format)(value, "a").toUpperCase();
+                const newAmpm = (0, date_fns_1.format)(value, "a").toUpperCase();
                 ampmRef.current = newAmpm;
                 setAmpm(newAmpm);
             }
@@ -414,9 +379,9 @@ var TimePickerInput = function (_a) {
                 setAmpm("");
             }
             if (!isFocusedRef.current) {
-                var formatted = formatDigits(newDigits);
+                const formatted = formatDigits(newDigits);
                 if (inputRef.current) {
-                    inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampmRef.current) : formatted;
+                    inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampmRef.current}` : formatted;
                 }
             }
         }
@@ -432,16 +397,12 @@ var TimePickerInput = function (_a) {
             }
         }
     }, [value, dateFormat, is12Hour]);
-    (0, react_1.useEffect)(function () {
-        var formatted = formatDigits(digits);
+    (0, react_1.useEffect)(() => {
+        const formatted = formatDigits(digits);
         if (!isFocusedRef.current && inputRef.current) {
-            inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampm) : formatted;
+            inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return (react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
-        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", isInvalid: error, size: sizeKey }),
-        react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center" },
-            react_1.default.createElement(react_2.Box, { as: "span", sx: iconWrapperSx },
-                react_1.default.createElement(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.gray[500] })))));
+    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.gray[500] }) }) })] }));
 };
 exports.TimePickerInput = TimePickerInput;

package/dist/Components/Divider/Divider.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-declare const VeritcalDivider: () => React.JSX.Element;
+declare const VeritcalDivider: () => import("react/jsx-runtime").JSX.Element;
 export default VeritcalDivider;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/Components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/Components/Divider/Divider.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,eAAe,+CAUpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/Divider/Divider.js

@@ -1,14 +1,11 @@
 "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 react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var VeritcalDivider = function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const VeritcalDivider = () => {
     var _a;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    return (react_1.default.createElement(react_2.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[500] }));
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[500] }));
 };
 exports.default = VeritcalDivider;

package/dist/Components/Drawer/Drawer.d.ts

@@ -9,4 +9,5 @@ export declare const DrawerBody: React.FC<{
 export declare const DrawerFooter: React.FC<{
     children: React.ReactNode;
 }>;
-export default function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): React.JSX.Element;
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/Components/Drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAW5C,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEhE,CAAA;AACD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE9D,CAAA;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEhE,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,IAAW,EACX,EAAE,EACF,OAAiB,EACjB,QAAQ,GACT,EAAE,WAAW,2CAmCb"}

package/dist/Components/Drawer/Drawer.js

@@ -5,36 +5,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = void 0;
 exports.default = Drawer;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var DrawerHeader = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@chakra-ui/react");
+const DrawerHeader = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.DrawerHeader = DrawerHeader;
-var DrawerBody = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+const DrawerBody = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.DrawerBody = DrawerBody;
-var DrawerFooter = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+const DrawerFooter = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.DrawerFooter = DrawerFooter;
-function Drawer(_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.placement, placement = _b === void 0 ? "right" : _b, _c = _a.size, size = _c === void 0 ? "xl" : _c, id = _a.id, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, children = _a.children;
-    var isReactElement = function (child) {
+function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant = "solid", children, }) {
+    const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;
     };
-    var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.DrawerHeader; });
-    var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.DrawerBody; });
-    var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.DrawerFooter; });
-    return (react_1.default.createElement(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id },
-        react_1.default.createElement(react_2.DrawerOverlay, null),
-        react_1.default.createElement(react_2.DrawerContent, null,
-            react_1.default.createElement(react_2.DrawerCloseButton, null),
-            header && (react_1.default.createElement(react_2.DrawerHeader, { borderBottomWidth: "1px" }, header)),
-            react_1.default.createElement(react_2.DrawerBody, null, body && body),
-            footer && react_1.default.createElement(react_2.DrawerFooter, { borderTopWidth: "1px" }, footer))));
+    const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerHeader);
+    const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerBody);
+    const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.DrawerFooter);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: variant, id: id, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { children: [(0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), header && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", children: header })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { children: body && body }), footer && (0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", children: footer })] })] }));
 }

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -5,3 +5,4 @@ export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placem
     vaiant?: "solid" | "outline" | "ghost" | "link";
     children?: React.ReactNode;
 };
+//# sourceMappingURL=DrawerProps.d.ts.map

package/dist/Components/Drawer/DrawerProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Drawer/DrawerProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,iBAAiB,EACjB,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAC/D,GAAG;IACF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACjD,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC"}

package/dist/Components/Dropdown/DropDown.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import { DropdownProps } from "./DropdownProps";
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;
+//# sourceMappingURL=DropDown.d.ts.map

package/dist/Components/Dropdown/DropDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../src/Components/Dropdown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAWpF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAqBhD,QAAA,MAAM,QAAQ,sFA0Qb,CAAC;AAIF,eAAe,QAAQ,CAAC"}