react-better-html 1.1.75 → 1.1.77

package/dist/index.js

@@ -1408,7 +1408,7 @@ var theme = {
     },
     dark: {
       textPrimary: "#f8f8f8",
-      textSecondary: "#e8e8e8",
+      textSecondary: "#c8c8c8",
       textLink: "#0894ff",
       label: "#111111",
       primary: "#9b6499",
@@ -1417,7 +1417,7 @@ var theme = {
       success: "#28a745",
       info: "#0fa0da",
       warn: "#ffc107",
-      error: "#dc3545",
+      error: "#f5384b",
       base: "#f8f8f8",
       backgroundBase: "#111111",
       backgroundSecondary: "#222222",
@@ -1469,6 +1469,26 @@ var icons = {
       }
     ]
   },
+  chevronLeft: {
+    width: 320,
+    height: 512,
+    paths: [
+      {
+        d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z",
+        type: "fill"
+      }
+    ]
+  },
+  chevronRight: {
+    width: 320,
+    height: 512,
+    paths: [
+      {
+        d: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z",
+        type: "fill"
+      }
+    ]
+  },
   eye: {
     width: 576,
     height: 512,
@@ -1776,7 +1796,7 @@ function useComponentPropsWithoutStyle(props) {
     [props]
   );
 }
-function useComponentInputFieldDateProps(props, holderRef) {
+function useComponentInputFieldDateProps(props, holderRef, disabled) {
   const theme2 = useTheme();
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
@@ -1785,7 +1805,7 @@ function useComponentInputFieldDateProps(props, holderRef) {
   const inputFieldProps = (0, import_react2.useMemo)(
     () => ({
       value: internalValue,
-      className: `${isOpen ? "react-better-html-inputField-dateTime-opened" : ""}${isOpenLate ? " react-better-html-inputField-dateTime-opened-late" : ""}${props.className ? ` ${props.className}` : ""}`,
+      className: `${isOpen && !disabled ? "react-better-html-inputField-dateTime-opened" : ""}${isOpenLate && !disabled ? " react-better-html-inputField-dateTime-opened-late" : ""}${props.className ? ` ${props.className}` : ""}`,
       onClick: (event) => {
         if (props.disabled) return;
         setIsOpen.setTrue();
@@ -1804,7 +1824,7 @@ function useComponentInputFieldDateProps(props, holderRef) {
         props.onChangeValue?.(value);
       }
     }),
-    [props, internalValue, isOpen, isOpenLate]
+    [props, internalValue, isOpen, isOpenLate, disabled]
   );
   const insideInputFieldComponentProps = (0, import_react2.useMemo)(
     () => ({
@@ -3132,7 +3152,7 @@ Chip2.circle = ChipComponent.circle;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/constants/countries.ts
@@ -4616,6 +4636,68 @@ var countries = [
   }
 ];
 
+// src/utils/functions.ts
+var generateRandomString = (stringLength, options) => {
+  const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  const lowers = "abcdefghijklmnopqrstuvwxyz";
+  const numbers = "0123456789";
+  const includes = [];
+  if (options?.includeCapitalLetters !== false) includes.push(capitals);
+  if (options?.includeLowerLetters !== false) includes.push(lowers);
+  if (options?.includeNumbers !== false) includes.push(numbers);
+  const characters = includes.join("");
+  const dashSections = Math.max(1, options?.dashSections ?? 1);
+  const dashSectionLength = Math.floor(stringLength / dashSections);
+  if (stringLength < dashSections) return "";
+  let result = "";
+  let currentSectionLength = 0;
+  while (result.length < stringLength) {
+    if (currentSectionLength >= dashSectionLength) {
+      result += "-";
+      currentSectionLength = 0;
+    }
+    if (result.length < stringLength) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+      currentSectionLength += 1;
+    }
+  }
+  return result;
+};
+var getBrowser = () => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  if (userAgent.includes("firefox")) return "firefox";
+  if (userAgent.includes("chrome") && !userAgent.includes("edg")) return "chrome";
+  if (userAgent.includes("safari") && !userAgent.includes("chrome")) return "safari";
+  if (userAgent.includes("edg")) return "edge";
+  if (userAgent.includes("opr") || userAgent.includes("opera")) return "opera";
+  return;
+};
+var formatPhoneNumber = (phoneNumber) => {
+  const cleanPhoneNumber = phoneNumber.replace(/\D/g, "");
+  const country = countries.find(
+    (country2) => country2.phoneNumberExtension === cleanPhoneNumber.slice(0, country2.phoneNumberExtension.length)
+  );
+  if (!country) return phoneNumber;
+  let phonNumberRest = cleanPhoneNumber.slice(country.phoneNumberExtension.length);
+  if (country.phoneNumberFormat) {
+    let formattedNumber = "";
+    let index = 0;
+    for (const char of country.phoneNumberFormat) {
+      if (char === "X" && index < phonNumberRest.length) {
+        formattedNumber += phonNumberRest[index];
+        index++;
+      } else {
+        formattedNumber += char;
+      }
+    }
+    phonNumberRest = formattedNumber.replace(/X/g, "").trim();
+  }
+  return `+${country.phoneNumberExtension} ${phonNumberRest}`;
+};
+var getFormErrorObject = (formValues) => {
+  return {};
+};
+
 // src/components/Label.tsx
 var import_react15 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -4923,8 +5005,188 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
 var Dropdown2 = (0, import_react16.memo)(DropdownComponent);
 var Dropdown_default = Dropdown2;
 
-// src/components/InputField.tsx
+// src/components/Calendar.tsx
+var import_react17 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+var getMonthName = (month, short = false) => {
+  return [
+    short ? "Jan" : "January",
+    short ? "Feb" : "February",
+    short ? "Mar" : "March",
+    short ? "Apr" : "April",
+    short ? "May" : "May",
+    short ? "Jun" : "June",
+    short ? "Jul" : "July",
+    short ? "Aug" : "August",
+    short ? "Sep" : "September",
+    short ? "Oct" : "October",
+    short ? "Nov" : "November",
+    short ? "Dec" : "December"
+  ][month];
+};
+var getWeekDayName = (day, short = false) => {
+  return [
+    short ? "Sun" : "Sunday",
+    short ? "Mon" : "Monday",
+    short ? "Tue" : "Tuesday",
+    short ? "Wed" : "Wednesday",
+    short ? "Thu" : "Thursday",
+    short ? "Fri" : "Friday",
+    short ? "Sat" : "Saturday"
+  ][day];
+};
+var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
+function Calendar({ value, minDate, maxDate, onChange }) {
+  const theme2 = useTheme();
+  const [currentDate, setCurrentDate] = (0, import_react17.useState)(value ? new Date(value) : void 0);
+  const [currentMonth, setCurrentMonth] = (0, import_react17.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
+  const [currentYear, setCurrentYear] = (0, import_react17.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
+  const daysInMonth = (0, import_react17.useMemo)(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
+  const onClickPreviousMonthButton = (0, import_react17.useCallback)(() => {
+    const newMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+    const newYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+  }, [currentMonth, currentYear]);
+  const onClickNextMonthButton = (0, import_react17.useCallback)(() => {
+    const newMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+    const newYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+  }, [currentMonth, currentYear]);
+  const onClickDay = (0, import_react17.useCallback)(
+    (day) => {
+      if (!day) return;
+      const newDate = new Date(currentYear, currentMonth, day);
+      setCurrentDate(newDate);
+      onChange?.(
+        `${newDate.getFullYear()}-${(newDate.getMonth() + 1).toString().padStart(2, "0")}-${newDate.getDate().toString().padStart(2, "0")}`
+      );
+    },
+    [currentMonth, currentYear, onChange]
+  );
+  const onClickClear = (0, import_react17.useCallback)(() => {
+    setCurrentDate(void 0);
+    onChange?.(void 0);
+  }, []);
+  const onClickToday = (0, import_react17.useCallback)(() => {
+    const today = /* @__PURE__ */ new Date();
+    setCurrentDate(today);
+    onChange?.(
+      `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`
+    );
+  }, [onChange]);
+  const firstDayOfMonth = (0, import_react17.useMemo)(() => {
+    const day = new Date(currentYear, currentMonth, 1).getDay();
+    return day === 0 ? 6 : day - 1;
+  }, [currentMonth, currentYear]);
+  const days = (0, import_react17.useMemo)(() => {
+    const result = [];
+    for (let index = 0; index < firstDayOfMonth; index++) {
+      result.push(void 0);
+    }
+    for (let index = 1; index <= daysInMonth; index++) {
+      result.push(index);
+    }
+    return result;
+  }, [daysInMonth, firstDayOfMonth]);
+  (0, import_react17.useEffect)(() => {
+    if (!value) return;
+    const date = new Date(value);
+    setCurrentDate(date);
+    setCurrentMonth(date.getMonth());
+    setCurrentYear(date.getFullYear());
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text_default, { fontWeight: 700, children: [
+        getMonthName(currentMonth),
+        " ",
+        currentYear
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
+      weekDaysIndex.map((day) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", children: getWeekDayName(day, true) }) }, day)),
+      days.map((day, index) => {
+        const thisDayDate = new Date(currentYear, currentMonth, day);
+        const isSelected = day !== void 0 && day === currentDate?.getDate() && currentMonth === currentDate.getMonth() && currentYear === currentDate.getFullYear();
+        const isWeekend = thisDayDate.getDay() === 6 || thisDayDate.getDay() === 0;
+        const isDisabled = minDate && thisDayDate.getTime() < minDate.getTime() || maxDate && thisDayDate.getTime() > maxDate.getTime();
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          Div_default.row,
+          {
+            position: "relative",
+            width: "100%",
+            aspectRatio: "1",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+            filterHover: !isDisabled ? "brightness(0.9)" : void 0,
+            borderRadius: theme2.styles.borderRadius / 2,
+            padding: theme2.styles.space / 2,
+            cursor: day ? !isDisabled ? "pointer" : "not-allowed" : void 0,
+            value: day,
+            onClickWithValue: !isDisabled ? onClickDay : void 0,
+            children: [
+              day && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Text_default,
+                {
+                  fontSize: 14,
+                  textAlign: "center",
+                  color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : isWeekend ? theme2.colors.textSecondary : void 0,
+                  children: day
+                }
+              ),
+              isDisabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Div_default,
+                {
+                  position: "absolute",
+                  width: "60%",
+                  height: 1,
+                  top: "50%",
+                  left: "50%",
+                  backgroundColor: theme2.colors.textSecondary,
+                  borderRadius: 999,
+                  transform: "translate(-50%, -50%) rotate(45deg)"
+                }
+              )
+            ]
+          },
+          index
+        );
+      })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Text_default,
+        {
+          fontSize: 14,
+          textDecorationHover: "underline",
+          color: theme2.colors.textSecondary,
+          colorHover: theme2.colors.textPrimary,
+          children: "Clear"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickToday, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        Text_default,
+        {
+          fontSize: 14,
+          textDecorationHover: "underline",
+          color: theme2.colors.textSecondary,
+          colorHover: theme2.colors.textPrimary,
+          children: "Today"
+        }
+      ) })
+    ] })
+  ] });
+}
+var Calendar_default = (0, import_react17.memo)(Calendar);
+
+// src/components/InputField.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var buttonWidth = 50;
 var InputElement = import_styled_components9.default.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
@@ -4956,11 +5218,20 @@ var InputElement = import_styled_components9.default.input.withConfig({
       cursor: not-allowed;
    }
 
-   &[type="date"]::-webkit-calendar-picker-indicator,
-   &[type="datetime-local"]::-webkit-calendar-picker-indicator,
-   &[type="time"]::-webkit-calendar-picker-indicator {
-      display: none;
+   &[type="date"],
+   &[type="datetime-local"],
+   &[type="time"] {
+      min-height: 48px;
       -webkit-appearance: none;
+
+      &::-webkit-calendar-picker-indicator {
+         display: none;
+         -webkit-appearance: none;
+      }
+
+      &::-webkit-date-and-time-value {
+         text-align: left !important;
+      }
    }
 
    &.react-better-html-phone-number-holder {
@@ -5038,7 +5309,7 @@ var TextareaElement = import_styled_components9.default.textarea.withConfig({
 `;
 var hours = Array.from({ length: 24 }, (_, index) => index);
 var minutes = Array.from({ length: 60 }, (_, index) => index);
-var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
+var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
   label,
   labelColor,
   errorText,
@@ -5066,7 +5337,7 @@ var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = (0, import_react17.useCallback)(
+  const onChangeElement = (0, import_react18.useCallback)(
     (event) => {
       const newValue = event.target.value;
       if (withDebounce) {
@@ -5079,14 +5350,14 @@ var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
     },
     [onChange, onChangeValue, withDebounce]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default, { position: "relative", width: "100%", children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
         {
           name: leftIcon,
@@ -5098,7 +5369,7 @@ var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
           zIndex: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         InputElement,
         {
           theme: theme2,
@@ -5114,7 +5385,7 @@ var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
           ref
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button_default.icon,
         {
           icon: rightIcon,
@@ -5124,7 +5395,7 @@ var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
         {
           name: rightIcon,
@@ -5137,7 +5408,7 @@ var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
       ) : void 0,
       insideInputFieldComponent
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Text_default,
       {
         as: "span",
@@ -5149,7 +5420,7 @@ var InputFieldComponent = (0, import_react17.forwardRef)(function InputField({
     )
   ] });
 });
-InputFieldComponent.multiline = (0, import_react17.forwardRef)(function Multiline({
+InputFieldComponent.multiline = (0, import_react18.forwardRef)(function Multiline({
   label,
   placeholder,
   errorText,
@@ -5167,17 +5438,17 @@ InputFieldComponent.multiline = (0, import_react17.forwardRef)(function Multilin
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = (0, import_react17.useCallback)(
+  const onChangeElement = (0, import_react18.useCallback)(
     (event) => {
       onChange?.(event);
       onChangeValue?.(event.target.value);
     },
     [onChange, onChangeValue]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.column, { gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label_default, { text: label, required, isError: !!errorText }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default, { position: "relative", width: "100%", children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { gap: theme2.styles.gap, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, required, isError: !!errorText }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
         {
           name: leftIcon,
@@ -5188,7 +5459,7 @@ InputFieldComponent.multiline = (0, import_react17.forwardRef)(function Multilin
           pointerEvents: "none"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         TextareaElement,
         {
           theme: theme2,
@@ -5204,7 +5475,7 @@ InputFieldComponent.multiline = (0, import_react17.forwardRef)(function Multilin
           ref
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      rightIcon ? onClickRightIcon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Button_default.icon,
         {
           icon: rightIcon,
@@ -5214,7 +5485,7 @@ InputFieldComponent.multiline = (0, import_react17.forwardRef)(function Multilin
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
         {
           name: rightIcon,
@@ -5226,7 +5497,7 @@ InputFieldComponent.multiline = (0, import_react17.forwardRef)(function Multilin
         }
       ) : void 0
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Text_default,
       {
         as: "span",
@@ -5239,8 +5510,8 @@ InputFieldComponent.multiline = (0, import_react17.forwardRef)(function Multilin
     )
   ] });
 });
-InputFieldComponent.email = (0, import_react17.forwardRef)(function Email({ ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+InputFieldComponent.email = (0, import_react18.forwardRef)(function Email({ ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputFieldComponent,
     {
       type: "email",
@@ -5253,9 +5524,9 @@ InputFieldComponent.email = (0, import_react17.forwardRef)(function Email({ ...p
     }
   );
 });
-InputFieldComponent.password = (0, import_react17.forwardRef)(function Password({ ...props }, ref) {
+InputFieldComponent.password = (0, import_react18.forwardRef)(function Password({ ...props }, ref) {
   const [isPassword, setIsPassword] = useBooleanState(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputFieldComponent,
     {
       type: isPassword ? "password" : "text",
@@ -5270,21 +5541,21 @@ InputFieldComponent.password = (0, import_react17.forwardRef)(function Password(
     }
   );
 });
-InputFieldComponent.search = (0, import_react17.forwardRef)(function Search({ ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
+InputFieldComponent.search = (0, import_react18.forwardRef)(function Search({ ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
 });
-InputFieldComponent.phoneNumber = (0, import_react17.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
+InputFieldComponent.phoneNumber = (0, import_react18.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
   const theme2 = useTheme();
-  const [dropdownValue, setDropdownValue] = (0, import_react17.useState)();
-  const [inputFieldValue, setInputFieldValue] = (0, import_react17.useState)(value?.toString() ?? "");
-  const renderOption = (0, import_react17.useCallback)(
-    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { children: option.label })
+  const [dropdownValue, setDropdownValue] = (0, import_react18.useState)();
+  const [inputFieldValue, setInputFieldValue] = (0, import_react18.useState)(value?.toString() ?? "");
+  const renderOption = (0, import_react18.useCallback)(
+    (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label })
     ] }),
     []
   );
-  const onChangeValueElement = (0, import_react17.useCallback)(
+  const onChangeValueElement = (0, import_react18.useCallback)(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
       setInputFieldValue(readyValue);
@@ -5292,7 +5563,7 @@ InputFieldComponent.phoneNumber = (0, import_react17.forwardRef)(function PhoneN
     },
     [onChangeValue, dropdownValue]
   );
-  const options = (0, import_react17.useMemo)(
+  const options = (0, import_react18.useMemo)(
     () => countries.map((country) => ({
       value: country.phoneNumberExtension,
       label: `+${country.phoneNumberExtension}`,
@@ -5300,13 +5571,13 @@ InputFieldComponent.phoneNumber = (0, import_react17.forwardRef)(function PhoneN
     })),
     []
   );
-  const defaultValue = (0, import_react17.useMemo)(() => {
+  const defaultValue = (0, import_react18.useMemo)(() => {
     const thisTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const initialDefaultValue = options.find((option) => option.data?.timeZone === thisTimeZone)?.value ?? "";
     setDropdownValue(initialDefaultValue);
     return initialDefaultValue;
   }, [options]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (value === void 0 || value === null) return;
     const newValue = value.toString();
     const country = countries.find(
@@ -5322,10 +5593,10 @@ InputFieldComponent.phoneNumber = (0, import_react17.forwardRef)(function PhoneN
     setDropdownValue(country.phoneNumberExtension);
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label_default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.row, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Dropdown_default,
         {
           options,
@@ -5341,7 +5612,7 @@ InputFieldComponent.phoneNumber = (0, import_react17.forwardRef)(function PhoneN
           withoutClearButton: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         InputFieldComponent,
         {
           placeholder: label ?? "Phone number",
@@ -5355,31 +5626,38 @@ InputFieldComponent.phoneNumber = (0, import_react17.forwardRef)(function PhoneN
     ] })
   ] });
 });
-InputFieldComponent.date = (0, import_react17.forwardRef)(function Date({ className, onFocus, onBlur, ...props }, ref) {
+InputFieldComponent.date = (0, import_react18.forwardRef)(function Date2({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
-  const holderRef = (0, import_react17.useRef)(null);
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const holderRef = (0, import_react18.useRef)(null);
+  const isMobileIOS = isMobileDevice && getBrowser() === "safari";
+  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const onChange = (0, import_react18.useCallback)(
+    (date) => {
+      inputFieldProps.onChangeValue?.(date ?? "");
+      setInternalValue(date ?? "");
+    },
+    [inputFieldProps.onChangeValue]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputFieldComponent,
     {
       type: "date",
-      insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Div_default,
         {
           position: "absolute",
           top: "100%",
           left: 0,
-          width: "100%",
-          maxHeight: 300,
+          width: "fit-content",
           backgroundColor: theme2.colors.backgroundContent,
           borderBottomLeftRadius: theme2.styles.borderRadius,
           borderBottomRightRadius: theme2.styles.borderRadius,
           boxShadow: "0px 10px 20px #00000020",
-          overflowY: "auto",
+          userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: "Hello there"
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
         }
-      ),
+      ) : void 0,
       holderRef,
       ref,
       ...props,
@@ -5387,31 +5665,152 @@ InputFieldComponent.date = (0, import_react17.forwardRef)(function Date({ classN
     }
   );
 });
-InputFieldComponent.dateTime = (0, import_react17.forwardRef)(function DateTime({ className, onFocus, onBlur, ...props }, ref) {
+InputFieldComponent.dateTime = (0, import_react18.forwardRef)(function DateTime({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
-  const holderRef = (0, import_react17.useRef)(null);
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const holderRef = (0, import_react18.useRef)(null);
+  const selectedHourRef = (0, import_react18.useRef)(null);
+  const selectedMinuteRef = (0, import_react18.useRef)(null);
+  const isMobileIOS = isMobileDevice && getBrowser() === "safari";
+  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const onChange = (0, import_react18.useCallback)(
+    (date) => {
+      const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? "00:00"}` : "";
+      inputFieldProps.onChangeValue?.(newValue);
+      setInternalValue(newValue);
+    },
+    [internalValue, inputFieldProps.onChangeValue]
+  );
+  const onClickHour = (0, import_react18.useCallback)(
+    (hour) => {
+      const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
+      const today = `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
+      const newValue = `${(internalValue.trim() || today)?.toString().split("T")[0]}T${newTime}`;
+      inputFieldProps.onChangeValue?.(newValue);
+      setInternalValue(newValue);
+    },
+    [internalValue, inputFieldProps.onChangeValue]
+  );
+  const onClickMinute = (0, import_react18.useCallback)(
+    (minute) => {
+      const newTime = `${internalValue?.toString().split("T")?.[1]?.split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
+      const today = `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
+      const newValue = `${(internalValue.trim() || today)?.toString().split("T")[0]}T${newTime}`;
+      console.log(newValue);
+      inputFieldProps.onChangeValue?.(newValue);
+      setInternalValue(newValue);
+    },
+    [internalValue, inputFieldProps.onChangeValue]
+  );
+  (0, import_react18.useEffect)(() => {
+    if (isOpen && selectedHourRef.current)
+      selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
+    if (isOpen && selectedMinuteRef.current)
+      selectedMinuteRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
+  }, [isOpen]);
+  const valueHour = parseInt(internalValue?.toString().split("T")?.[1]?.split(":")?.[0]).toString();
+  const valueMinute = parseInt(internalValue?.toString().split("T")?.[1]?.split(":")?.[1]).toString();
+  const topSpacing = 32 + theme2.styles.space / 2 + theme2.styles.gap;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputFieldComponent,
     {
       type: "datetime-local",
-      insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Div_default,
         {
           position: "absolute",
           top: "100%",
           left: 0,
-          width: "100%",
-          maxHeight: 300,
+          width: "fit-content",
           backgroundColor: theme2.colors.backgroundContent,
           borderBottomLeftRadius: theme2.styles.borderRadius,
           borderBottomRightRadius: theme2.styles.borderRadius,
           boxShadow: "0px 10px 20px #00000020",
-          overflowY: "auto",
+          overflow: "hidden",
+          userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: "Hello there"
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { gap: theme2.styles.space, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              Div_default.row,
+              {
+                height: 276,
+                gap: theme2.styles.gap / 2,
+                paddingTop: topSpacing,
+                paddingBottom: theme2.styles.space / 2,
+                paddingRight: theme2.styles.space / 2,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Div_default,
+                      {
+                        className: "react-better-html-no-scrollbar",
+                        width: buttonWidth,
+                        height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
+                        overflowY: "auto",
+                        children: hours.map((hour) => {
+                          const isSelected = hour.toString() === valueHour;
+                          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                            Div_default.row,
+                            {
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                              borderRadius: theme2.styles.borderRadius / 2,
+                              filterHover: "brightness(0.9)",
+                              cursor: "pointer",
+                              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                              value: hour,
+                              onClickWithValue: onClickHour,
+                              ref: isSelected ? selectedHourRef : void 0,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                            },
+                            hour
+                          );
+                        })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { height: "100%", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Div_default,
+                      {
+                        className: "react-better-html-no-scrollbar",
+                        width: buttonWidth,
+                        height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
+                        overflowY: "auto",
+                        children: minutes.map((minute) => {
+                          const isSelected = minute.toString() === valueMinute;
+                          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                            Div_default.row,
+                            {
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+                              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+                              borderRadius: theme2.styles.borderRadius / 2,
+                              filterHover: "brightness(0.9)",
+                              cursor: "pointer",
+                              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                              value: minute,
+                              onClickWithValue: onClickMinute,
+                              ref: isSelected ? selectedMinuteRef : void 0,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                            },
+                            minute
+                          );
+                        })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] })
         }
-      ),
+      ) : void 0,
       holderRef,
       ref,
       ...props,
@@ -5419,13 +5818,14 @@ InputFieldComponent.dateTime = (0, import_react17.forwardRef)(function DateTime(
     }
   );
 });
-InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...props }, ref) {
+InputFieldComponent.time = (0, import_react18.forwardRef)(function Time({ ...props }, ref) {
   const theme2 = useTheme();
-  const holderRef = (0, import_react17.useRef)(null);
-  const selectedHourRef = (0, import_react17.useRef)(null);
-  const selectedMinuteRef = (0, import_react17.useRef)(null);
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef);
-  const onClickHour = (0, import_react17.useCallback)(
+  const holderRef = (0, import_react18.useRef)(null);
+  const selectedHourRef = (0, import_react18.useRef)(null);
+  const selectedMinuteRef = (0, import_react18.useRef)(null);
+  const isMobileIOS = isMobileDevice && getBrowser() === "safari";
+  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const onClickHour = (0, import_react18.useCallback)(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       inputFieldProps.onChangeValue?.(value);
@@ -5433,7 +5833,7 @@ InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...pro
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = (0, import_react17.useCallback)(
+  const onClickMinute = (0, import_react18.useCallback)(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       inputFieldProps.onChangeValue?.(value);
@@ -5441,7 +5841,7 @@ InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...pro
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -5449,12 +5849,11 @@ InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...pro
   }, [isOpen]);
   const valueHour = parseInt(internalValue?.toString().split(":")?.[0]).toString();
   const valueMinute = parseInt(internalValue?.toString().split(":")?.[1]).toString();
-  const buttonWidth = 50;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     InputFieldComponent,
     {
       type: "time",
-      insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Div_default,
         {
           position: "absolute",
@@ -5467,11 +5866,12 @@ InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...pro
           borderBottomRightRadius: theme2.styles.borderRadius,
           boxShadow: "0px 10px 20px #00000020",
           overflowY: "auto",
+          userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Div_default.row, { height: "100%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { height: "100%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
               const isSelected = hour.toString() === valueHour;
-              return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 Div_default.row,
                 {
                   alignItems: "center",
@@ -5484,14 +5884,14 @@ InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...pro
                   value: hour,
                   onClickWithValue: onClickHour,
                   ref: isSelected ? selectedHourRef : void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                 },
                 hour
               );
             }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
               const isSelected = minute.toString() === valueMinute;
-              return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 Div_default.row,
                 {
                   alignItems: "center",
@@ -5504,14 +5904,14 @@ InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...pro
                   value: minute,
                   onClickWithValue: onClickMinute,
                   ref: isSelected ? selectedMinuteRef : void 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                 },
                 minute
               );
             }) })
           ] })
         }
-      ),
+      ) : void 0,
       holderRef,
       ref,
       ...props,
@@ -5520,7 +5920,7 @@ InputFieldComponent.time = (0, import_react17.forwardRef)(function Time({ ...pro
     }
   );
 });
-var InputField2 = (0, import_react17.memo)(InputFieldComponent);
+var InputField2 = (0, import_react18.memo)(InputFieldComponent);
 InputField2.multiline = InputFieldComponent.multiline;
 InputField2.email = InputFieldComponent.email;
 InputField2.password = InputFieldComponent.password;
@@ -5532,9 +5932,9 @@ InputField2.time = InputFieldComponent.time;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
@@ -5625,7 +6025,7 @@ var SwitchElement = import_styled_components10.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var ToggleInputComponent = (0, import_react18.forwardRef)(function ToggleInput({
+var ToggleInputComponent = (0, import_react19.forwardRef)(function ToggleInput({
   label,
   labelColor,
   text,
@@ -5644,8 +6044,8 @@ var ToggleInputComponent = (0, import_react18.forwardRef)(function ToggleInput({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const [internalChecked, setInternalChecked] = (0, import_react18.useState)(false);
-  const onChangeElement = (0, import_react18.useCallback)(
+  const [internalChecked, setInternalChecked] = (0, import_react19.useState)(false);
+  const onChangeElement = (0, import_react19.useCallback)(
     (event) => {
       const newIsChecked = event.target.checked;
       if (controlledChecked === void 0) setInternalChecked(newIsChecked);
@@ -5654,16 +6054,16 @@ var ToggleInputComponent = (0, import_react18.forwardRef)(function ToggleInput({
     [onChange, controlledChecked, value]
   );
   const checked = controlledChecked ?? internalChecked;
-  const onClickText = (0, import_react18.useCallback)(() => {
+  const onClickText = (0, import_react19.useCallback)(() => {
     const newIsChecked = !checked;
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           InputElement2,
           {
             theme: theme2,
@@ -5676,7 +6076,7 @@ var ToggleInputComponent = (0, import_react18.forwardRef)(function ToggleInput({
             ...restProps
           }
         ),
-        props.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        props.type === "checkbox" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Icon_default,
           {
             name: "check",
@@ -5690,7 +6090,7 @@ var ToggleInputComponent = (0, import_react18.forwardRef)(function ToggleInput({
             pointerEvents: "none",
             transition: theme2.styles.transition
           }
-        ) : props.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ) : props.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Div_default,
           {
             position: "absolute",
@@ -5706,15 +6106,15 @@ var ToggleInputComponent = (0, import_react18.forwardRef)(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
-        required && !label && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && !label && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
       ] })
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       Text_default,
       {
         as: "span",
@@ -5727,13 +6127,13 @@ var ToggleInputComponent = (0, import_react18.forwardRef)(function ToggleInput({
   ] });
 });
 var ToggleInput_default = {
-  checkbox: (0, import_react18.forwardRef)(function Checkbox(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToggleInputComponent, { type: "checkbox", ref, ...props });
+  checkbox: (0, import_react19.forwardRef)(function Checkbox(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
-  radiobutton: (0, import_react18.forwardRef)(function RadioButton(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToggleInputComponent, { type: "radio", ref, ...props });
+  radiobutton: (0, import_react19.forwardRef)(function RadioButton(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
-  switch: (0, import_react18.forwardRef)(function Switch({
+  switch: (0, import_react19.forwardRef)(function Switch({
     label,
     labelColor,
     errorText,
@@ -5754,15 +6154,15 @@ var ToggleInput_default = {
     const [internalChecked, setInternalChecked] = useBooleanState();
     const [isMouseDown, setIsMouseDown] = useBooleanState();
     const checked = controlledChecked ?? internalChecked;
-    const onClickElement = (0, import_react18.useCallback)(() => {
+    const onClickElement = (0, import_react19.useCallback)(() => {
       if (disabled) return;
       const newIsChecked = !checked;
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Div_default.row,
         {
           alignItems: "center",
@@ -5773,7 +6173,7 @@ var ToggleInput_default = {
           onTouchStart: setIsMouseDown.setTrue,
           onTouchEnd: setIsMouseDown.setFalse,
           onTouchCancel: setIsMouseDown.setFalse,
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             SwitchElement,
             {
               theme: theme2,
@@ -5789,7 +6189,7 @@ var ToggleInput_default = {
           )
         }
       ),
-      (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Text_default,
         {
           as: "span",
@@ -5804,8 +6204,8 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-var import_react19 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Form({
   form,
   submitButtonText,
@@ -5822,7 +6222,7 @@ function Form({
   ...props
 }) {
   const theme2 = useTheme();
-  const submitButtonIsDisabledInternal = (0, import_react19.useMemo)(() => {
+  const submitButtonIsDisabledInternal = (0, import_react20.useMemo)(() => {
     if (!form || !form.requiredFields) return false;
     return Object.entries(form.values).some(
       ([key, value]) => form.requiredFields?.includes(key) && (value === void 0 || value === null || value?.toString().trim() === "")
@@ -5830,9 +6230,9 @@ function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
-    gap !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Div_default.column, { gap, children }) : children,
-    submitButtonText && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
+    gap !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default.column, { gap, children }) : children,
+    submitButtonText && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       Div_default.row,
       {
         alignItems: "center",
@@ -5840,8 +6240,8 @@ function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.secondary, { text: "Cancel", onClick: onClickCancel }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default.secondary, { text: "Cancel", onClick: onClickCancel }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             SubmitButtonTag,
             {
               text: submitButtonText,
@@ -5857,22 +6257,22 @@ function Form({
     )
   ] }) });
 }
-var Form_default = (0, import_react19.memo)(Form);
+var Form_default = (0, import_react20.memo)(Form);
 
 // src/components/FormRow.tsx
-var import_react20 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var FormRowComponent = (0, import_react20.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
+var import_react21 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var FormRowComponent = (0, import_react21.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const breakingPoint = !noBreakingPoint ? mediaQuery.size900 : false;
   const readyGap = breakingPoint || noBreakingPoint && mediaQuery.size900 ? theme2.styles.gap : theme2.styles.space * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
-    oneItemOnly && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Div_default, { width: "100%" })
+    oneItemOnly && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Div_default, { width: "100%" })
   ] });
 });
-FormRowComponent.withTitle = (0, import_react20.forwardRef)(function WithTitle({
+FormRowComponent.withTitle = (0, import_react21.forwardRef)(function WithTitle({
   icon,
   title,
   description,
@@ -5886,15 +6286,15 @@ FormRowComponent.withTitle = (0, import_react20.forwardRef)(function WithTitle({
 }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon_default, { name: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { as: "h3", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(FormRowComponent, { ...props, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { as: "h3", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Div_default.row,
       {
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
@@ -5902,22 +6302,22 @@ FormRowComponent.withTitle = (0, import_react20.forwardRef)(function WithTitle({
         gap: theme2.styles.gap,
         children: [
           children,
-          withActions && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-            onClickReset && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
+          withActions && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+            onClickReset && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
         ]
       }
     )
   ] });
 });
-var FormRow2 = (0, import_react20.memo)(FormRowComponent);
+var FormRow2 = (0, import_react21.memo)(FormRowComponent);
 FormRow2.withTitle = FormRowComponent.withTitle;
 var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
-var import_react21 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
   className,
@@ -5928,7 +6328,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       darkMode: localStorage.getItem("theme") === "dark"
     }
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const timeout = setTimeout(() => {
       window.document.body.parentElement?.setAttribute("data-theme", form.values.darkMode ? "dark" : "light");
       localStorage.setItem("theme", form.values.darkMode ? "dark" : "light");
@@ -5937,7 +6337,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       clearTimeout(timeout);
     };
   }, [form.values.darkMode]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const html = document.querySelector("html");
     if (!html) return;
     const observer = new MutationObserver((mutations) => {
@@ -5954,7 +6354,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     ToggleInput_default.switch,
     {
       className: `react-better-html-color-theme-switch ${withMoon ? ` react-better-html-color-theme-switch-with-moon` : ""}${className ? ` ${className}` : ""}`,
@@ -5965,23 +6365,23 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { children: "Light" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorThemeSwitchComponent, { withMoon, className }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text_default, { children: "Dark" })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default, { children: "Light" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorThemeSwitchComponent, { withMoon, className }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default, { children: "Dark" })
   ] });
 };
-var ColorThemeSwitch2 = (0, import_react21.memo)(ColorThemeSwitchComponent);
+var ColorThemeSwitch2 = (0, import_react22.memo)(ColorThemeSwitchComponent);
 ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var defaultImageWidth = 120;
 var TableStyledComponent = import_styled_components11.default.table.withConfig({
-  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "theme"].includes(prop)
+  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
 })`
    width: 100%;
    border-collapse: collapse;
@@ -6009,7 +6409,7 @@ var TableStyledComponent = import_styled_components11.default.table.withConfig({
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):hover {
-                    filter: brightness(0.95);
+                    filter: brightness(${props.colorTheme === "light" ? "0.95" : "0.85"});
                  }
               ` : ""}
 
@@ -6020,7 +6420,7 @@ var TableStyledComponent = import_styled_components11.default.table.withConfig({
       }
 
       td {
-         border-top: 1px solid ${(props) => props.theme.colors.border}60;
+         border-top: 1px solid ${(props) => props.theme.colors.border + (props.colorTheme === "light" ? "60" : "40")};
          padding: ${(props) => props.theme.styles.gap}px ${(props) => props.theme.styles.space}px;
 
          &.noData {
@@ -6043,19 +6443,21 @@ var TdStyledComponent = import_styled_components11.default.td.withConfig({
 })`
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
 `;
-var TableComponent = (0, import_react22.forwardRef)(function Table({
+var TableComponent = (0, import_react23.forwardRef)(function Table({
   columns,
   data,
   isStriped,
+  isLoading,
   withStickyHeader,
   noDataItemsMessage = "No data available",
   onClickRow,
   onClickAllCheckboxes,
   ...props
 }, ref) {
+  const { colorTheme } = useBetterHtmlContext();
   const theme2 = useTheme();
-  const [checkedItems, setCheckedItems] = (0, import_react22.useState)([]);
-  const renderCellContent = (0, import_react22.useCallback)(
+  const [checkedItems, setCheckedItems] = (0, import_react23.useState)([]);
+  const renderCellContent = (0, import_react23.useCallback)(
     (column, item, index) => {
       switch (column.type) {
         case "text": {
@@ -6063,17 +6465,17 @@ var TableComponent = (0, import_react22.forwardRef)(function Table({
           return column.format ? column.format(item, index) : String(value ?? "");
         }
         case "element": {
-          return column.render?.(item, index) ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
+          return column.render?.(item, index) ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
         }
         case "image": {
           const { type, keyName, ...props2 } = column;
           const src = keyName ? item[keyName] : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Image_default, { src, width: defaultImageWidth, borderRadius: theme2.styles.borderRadius / 2, ...props2 });
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Image_default, { src, width: defaultImageWidth, borderRadius: theme2.styles.borderRadius / 2, ...props2 });
         }
         case "checkbox": {
           const { type, onChange, ...props2 } = column;
           const checkedValue = checkedItems[index];
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
@@ -6088,29 +6490,29 @@ var TableComponent = (0, import_react22.forwardRef)(function Table({
           );
         }
         default: {
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
         }
       }
     },
     [theme2, checkedItems]
   );
-  const onClickRowElement = (0, import_react22.useCallback)(
+  const onClickRowElement = (0, import_react23.useCallback)(
     (item, index) => {
       onClickRow?.(item, index);
     },
     [onClickRow]
   );
-  const onClickAllCheckboxesElement = (0, import_react22.useCallback)(
+  const onClickAllCheckboxesElement = (0, import_react23.useCallback)(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const everythingIsChecked = (0, import_react22.useMemo)(() => {
+  const everythingIsChecked = (0, import_react23.useMemo)(() => {
     return checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Div_default,
     {
       border: `1px solid ${theme2.colors.border}`,
@@ -6118,22 +6520,23 @@ var TableComponent = (0, import_react22.forwardRef)(function Table({
       overflow: "auto",
       ...props,
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         TableStyledComponent,
         {
           isStriped,
           withHover: onClickRow !== void 0,
           withStickyHeader,
+          colorTheme,
           theme: theme2,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               ThStyledComponent,
               {
                 width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width,
                 minWidth: column.minWidth,
                 maxWidth: column.maxWidth,
                 textAlign: column.align,
-                children: column.label ?? (column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                children: column.label ?? (column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   ToggleInput_default.checkbox,
                   {
                     checked: everythingIsChecked,
@@ -6143,86 +6546,24 @@ var TableComponent = (0, import_react22.forwardRef)(function Table({
               },
               column.type + column.label + index
             )) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tbody", { children: data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader_default.box, {}) }) }) : data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "tr",
               {
                 className: onClickRow ? "isClickable" : void 0,
                 onClick: () => onClickRowElement(item, rowIndex),
-                children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
+                children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
               },
               JSON.stringify(item) + rowIndex
-            )) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) })
+            )) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) })
           ]
         }
       )
     }
   );
 });
-var Table2 = (0, import_react22.memo)(TableComponent);
+var Table2 = (0, import_react23.memo)(TableComponent);
 var Table_default = Table2;
 
-// src/utils/functions.ts
-var generateRandomString = (stringLength, options) => {
-  const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-  const lowers = "abcdefghijklmnopqrstuvwxyz";
-  const numbers = "0123456789";
-  const includes = [];
-  if (options?.includeCapitalLetters !== false) includes.push(capitals);
-  if (options?.includeLowerLetters !== false) includes.push(lowers);
-  if (options?.includeNumbers !== false) includes.push(numbers);
-  const characters = includes.join("");
-  const dashSections = Math.max(1, options?.dashSections ?? 1);
-  const dashSectionLength = Math.floor(stringLength / dashSections);
-  if (stringLength < dashSections) return "";
-  let result = "";
-  let currentSectionLength = 0;
-  while (result.length < stringLength) {
-    if (currentSectionLength >= dashSectionLength) {
-      result += "-";
-      currentSectionLength = 0;
-    }
-    if (result.length < stringLength) {
-      result += characters.charAt(Math.floor(Math.random() * characters.length));
-      currentSectionLength += 1;
-    }
-  }
-  return result;
-};
-var getBrowser = () => {
-  const userAgent = navigator.userAgent.toLowerCase();
-  if (userAgent.includes("firefox")) return "firefox";
-  if (userAgent.includes("chrome") && !userAgent.includes("edg")) return "chrome";
-  if (userAgent.includes("safari") && !userAgent.includes("chrome")) return "safari";
-  if (userAgent.includes("edg")) return "edge";
-  if (userAgent.includes("opr") || userAgent.includes("opera")) return "opera";
-  return;
-};
-var formatPhoneNumber = (phoneNumber) => {
-  const cleanPhoneNumber = phoneNumber.replace(/\D/g, "");
-  const country = countries.find(
-    (country2) => country2.phoneNumberExtension === cleanPhoneNumber.slice(0, country2.phoneNumberExtension.length)
-  );
-  if (!country) return phoneNumber;
-  let phonNumberRest = cleanPhoneNumber.slice(country.phoneNumberExtension.length);
-  if (country.phoneNumberFormat) {
-    let formattedNumber = "";
-    let index = 0;
-    for (const char of country.phoneNumberFormat) {
-      if (char === "X" && index < phonNumberRest.length) {
-        formattedNumber += phonNumberRest[index];
-        index++;
-      } else {
-        formattedNumber += char;
-      }
-    }
-    phonNumberRest = formattedNumber.replace(/X/g, "").trim();
-  }
-  return `+${country.phoneNumberExtension} ${phonNumberRest}`;
-};
-var getFormErrorObject = (formValues) => {
-  return {};
-};
-
 // src/utils/variableFunctions.ts
 var checkBetterHtmlContextValue = (value, functionsName) => {
   if (value === void 0) {