react-better-html 1.1.75 → 1.1.77

package/dist/index.mjs

@@ -1335,7 +1335,7 @@ var theme = {
     },
     dark: {
       textPrimary: "#f8f8f8",
-      textSecondary: "#e8e8e8",
+      textSecondary: "#c8c8c8",
       textLink: "#0894ff",
       label: "#111111",
       primary: "#9b6499",
@@ -1344,7 +1344,7 @@ var theme = {
       success: "#28a745",
       info: "#0fa0da",
       warn: "#ffc107",
-      error: "#dc3545",
+      error: "#f5384b",
       base: "#f8f8f8",
       backgroundBase: "#111111",
       backgroundSecondary: "#222222",
@@ -1396,6 +1396,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,
@@ -1703,7 +1723,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();
@@ -1712,7 +1732,7 @@ function useComponentInputFieldDateProps(props, holderRef) {
   const inputFieldProps = useMemo2(
     () => ({
       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();
@@ -1731,7 +1751,7 @@ function useComponentInputFieldDateProps(props, holderRef) {
         props.onChangeValue?.(value);
       }
     }),
-    [props, internalValue, isOpen, isOpenLate]
+    [props, internalValue, isOpen, isOpenLate, disabled]
   );
   const insideInputFieldComponentProps = useMemo2(
     () => ({
@@ -3059,7 +3079,7 @@ Chip2.circle = ChipComponent.circle;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef8, memo as memo15, useCallback as useCallback8, useState as useState6, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { forwardRef as forwardRef8, memo as memo16, useCallback as useCallback9, useState as useState7, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4 } from "react";
 import styled8 from "styled-components";
 
 // src/constants/countries.ts
@@ -4543,6 +4563,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
 import { memo as memo13 } from "react";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
@@ -4850,8 +4932,188 @@ var DropdownComponent = forwardRef7(function Dropdown({
 var Dropdown2 = memo14(DropdownComponent);
 var Dropdown_default = Dropdown2;
 
-// src/components/InputField.tsx
+// src/components/Calendar.tsx
+import { useCallback as useCallback8, useMemo as useMemo4, useState as useState6, memo as memo15, useEffect as useEffect6 } from "react";
 import { jsx as jsx14, jsxs as jsxs9 } from "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] = useState6(value ? new Date(value) : void 0);
+  const [currentMonth, setCurrentMonth] = useState6(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
+  const [currentYear, setCurrentYear] = useState6(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
+  const daysInMonth = useMemo4(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
+  const onClickPreviousMonthButton = useCallback8(() => {
+    const newMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+    const newYear = currentMonth === 0 ? currentYear - 1 : currentYear;
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+  }, [currentMonth, currentYear]);
+  const onClickNextMonthButton = useCallback8(() => {
+    const newMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+    const newYear = currentMonth === 11 ? currentYear + 1 : currentYear;
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
+  }, [currentMonth, currentYear]);
+  const onClickDay = useCallback8(
+    (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 = useCallback8(() => {
+    setCurrentDate(void 0);
+    onChange?.(void 0);
+  }, []);
+  const onClickToday = useCallback8(() => {
+    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 = useMemo4(() => {
+    const day = new Date(currentYear, currentMonth, 1).getDay();
+    return day === 0 ? 6 : day - 1;
+  }, [currentMonth, currentYear]);
+  const days = useMemo4(() => {
+    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]);
+  useEffect6(() => {
+    if (!value) return;
+    const date = new Date(value);
+    setCurrentDate(date);
+    setCurrentMonth(date.getMonth());
+    setCurrentYear(date.getFullYear());
+  }, [value]);
+  return /* @__PURE__ */ jsxs9(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
+    /* @__PURE__ */ jsxs9(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx14(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
+      /* @__PURE__ */ jsxs9(Text_default, { fontWeight: 700, children: [
+        getMonthName(currentMonth),
+        " ",
+        currentYear
+      ] }),
+      /* @__PURE__ */ jsx14(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
+    ] }),
+    /* @__PURE__ */ jsxs9(Div_default.grid, { width: "100%", gridTemplateColumns: "repeat(7, 1fr)", gap: theme2.styles.gap / 2, children: [
+      weekDaysIndex.map((day) => /* @__PURE__ */ jsx14(Div_default.row, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx14(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__ */ jsxs9(
+          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__ */ jsx14(
+                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__ */ jsx14(
+                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__ */ jsxs9(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx14(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickClear, children: /* @__PURE__ */ jsx14(
+        Text_default,
+        {
+          fontSize: 14,
+          textDecorationHover: "underline",
+          color: theme2.colors.textSecondary,
+          colorHover: theme2.colors.textPrimary,
+          children: "Clear"
+        }
+      ) }),
+      /* @__PURE__ */ jsx14(Div_default, { isTabAccessed: true, cursor: "pointer", onClick: onClickToday, children: /* @__PURE__ */ jsx14(
+        Text_default,
+        {
+          fontSize: 14,
+          textDecorationHover: "underline",
+          color: theme2.colors.textSecondary,
+          colorHover: theme2.colors.textPrimary,
+          children: "Today"
+        }
+      ) })
+    ] })
+  ] });
+}
+var Calendar_default = memo15(Calendar);
+
+// src/components/InputField.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var buttonWidth = 50;
 var InputElement = styled8.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
@@ -4883,11 +5145,20 @@ var InputElement = styled8.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 {
@@ -4993,7 +5264,7 @@ var InputFieldComponent = forwardRef8(function InputField({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = useCallback8(
+  const onChangeElement = useCallback9(
     (event) => {
       const newValue = event.target.value;
       if (withDebounce) {
@@ -5006,14 +5277,14 @@ var InputFieldComponent = forwardRef8(function InputField({
     },
     [onChange, onChangeValue, withDebounce]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
-  return /* @__PURE__ */ jsxs9(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
-    label && /* @__PURE__ */ jsx14(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ jsxs9(Div_default, { position: "relative", width: "100%", children: [
-      leftIcon && /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
+    label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", children: [
+      leftIcon && /* @__PURE__ */ jsx15(
         Icon_default,
         {
           name: leftIcon,
@@ -5025,7 +5296,7 @@ var InputFieldComponent = forwardRef8(function InputField({
           zIndex: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1
         }
       ),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         InputElement,
         {
           theme: theme2,
@@ -5041,7 +5312,7 @@ var InputFieldComponent = forwardRef8(function InputField({
           ref
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx14(
+      rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx15(
         Button_default.icon,
         {
           icon: rightIcon,
@@ -5051,7 +5322,7 @@ var InputFieldComponent = forwardRef8(function InputField({
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
-      ) : /* @__PURE__ */ jsx14(
+      ) : /* @__PURE__ */ jsx15(
         Icon_default,
         {
           name: rightIcon,
@@ -5064,7 +5335,7 @@ var InputFieldComponent = forwardRef8(function InputField({
       ) : void 0,
       insideInputFieldComponent
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ jsx14(
+    (errorText || infoText) && /* @__PURE__ */ jsx15(
       Text_default,
       {
         as: "span",
@@ -5094,17 +5365,17 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = useCallback8(
+  const onChangeElement = useCallback9(
     (event) => {
       onChange?.(event);
       onChangeValue?.(event.target.value);
     },
     [onChange, onChangeValue]
   );
-  return /* @__PURE__ */ jsxs9(Div_default.column, { gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ jsx14(Label_default, { text: label, required, isError: !!errorText }),
-    /* @__PURE__ */ jsxs9(Div_default, { position: "relative", width: "100%", children: [
-      leftIcon && /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10(Div_default.column, { gap: theme2.styles.gap, children: [
+    label && /* @__PURE__ */ jsx15(Label_default, { text: label, required, isError: !!errorText }),
+    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", children: [
+      leftIcon && /* @__PURE__ */ jsx15(
         Icon_default,
         {
           name: leftIcon,
@@ -5115,7 +5386,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
           pointerEvents: "none"
         }
       ),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         TextareaElement,
         {
           theme: theme2,
@@ -5131,7 +5402,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
           ref
         }
       ),
-      rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx14(
+      rightIcon ? onClickRightIcon ? /* @__PURE__ */ jsx15(
         Button_default.icon,
         {
           icon: rightIcon,
@@ -5141,7 +5412,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
-      ) : /* @__PURE__ */ jsx14(
+      ) : /* @__PURE__ */ jsx15(
         Icon_default,
         {
           name: rightIcon,
@@ -5153,7 +5424,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
         }
       ) : void 0
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ jsx14(
+    (errorText || infoText) && /* @__PURE__ */ jsx15(
       Text_default,
       {
         as: "span",
@@ -5167,7 +5438,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
   ] });
 });
 InputFieldComponent.email = forwardRef8(function Email({ ...props }, ref) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     InputFieldComponent,
     {
       type: "email",
@@ -5182,7 +5453,7 @@ InputFieldComponent.email = forwardRef8(function Email({ ...props }, ref) {
 });
 InputFieldComponent.password = forwardRef8(function Password({ ...props }, ref) {
   const [isPassword, setIsPassword] = useBooleanState(true);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     InputFieldComponent,
     {
       type: isPassword ? "password" : "text",
@@ -5198,20 +5469,20 @@ InputFieldComponent.password = forwardRef8(function Password({ ...props }, ref)
   );
 });
 InputFieldComponent.search = forwardRef8(function Search({ ...props }, ref) {
-  return /* @__PURE__ */ jsx14(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
+  return /* @__PURE__ */ jsx15(InputFieldComponent, { leftIcon: "magnifyingGlass", placeholder: "Search...", ref, ...props });
 });
 InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
   const theme2 = useTheme();
-  const [dropdownValue, setDropdownValue] = useState6();
-  const [inputFieldValue, setInputFieldValue] = useState6(value?.toString() ?? "");
-  const renderOption = useCallback8(
-    (option, index, isSelected) => /* @__PURE__ */ jsxs9(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ jsx14(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
-      /* @__PURE__ */ jsx14(Text_default, { children: option.label })
+  const [dropdownValue, setDropdownValue] = useState7();
+  const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
+  const renderOption = useCallback9(
+    (option, index, isSelected) => /* @__PURE__ */ jsxs10(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ jsx15(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
+      /* @__PURE__ */ jsx15(Text_default, { children: option.label })
     ] }),
     []
   );
-  const onChangeValueElement = useCallback8(
+  const onChangeValueElement = useCallback9(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
       setInputFieldValue(readyValue);
@@ -5219,7 +5490,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     },
     [onChangeValue, dropdownValue]
   );
-  const options = useMemo4(
+  const options = useMemo5(
     () => countries.map((country) => ({
       value: country.phoneNumberExtension,
       label: `+${country.phoneNumberExtension}`,
@@ -5227,13 +5498,13 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     })),
     []
   );
-  const defaultValue = useMemo4(() => {
+  const defaultValue = useMemo5(() => {
     const thisTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const initialDefaultValue = options.find((option) => option.data?.timeZone === thisTimeZone)?.value ?? "";
     setDropdownValue(initialDefaultValue);
     return initialDefaultValue;
   }, [options]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (value === void 0 || value === null) return;
     const newValue = value.toString();
     const country = countries.find(
@@ -5249,10 +5520,10 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     setDropdownValue(country.phoneNumberExtension);
     setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
   }, [value]);
-  return /* @__PURE__ */ jsxs9(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
-    label && /* @__PURE__ */ jsx14(Label_default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }),
-    /* @__PURE__ */ jsxs9(Div_default.row, { children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, children: [
+    label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }),
+    /* @__PURE__ */ jsxs10(Div_default.row, { children: [
+      /* @__PURE__ */ jsx15(
         Dropdown_default,
         {
           options,
@@ -5268,7 +5539,7 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
           withoutClearButton: true
         }
       ),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         InputFieldComponent,
         {
           placeholder: label ?? "Phone number",
@@ -5282,31 +5553,38 @@ InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, valu
     ] })
   ] });
 });
-InputFieldComponent.date = forwardRef8(function Date({ className, onFocus, onBlur, ...props }, ref) {
+InputFieldComponent.date = forwardRef8(function Date2({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef);
-  return /* @__PURE__ */ jsx14(
+  const isMobileIOS = isMobileDevice && getBrowser() === "safari";
+  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const onChange = useCallback9(
+    (date) => {
+      inputFieldProps.onChangeValue?.(date ?? "");
+      setInternalValue(date ?? "");
+    },
+    [inputFieldProps.onChangeValue]
+  );
+  return /* @__PURE__ */ jsx15(
     InputFieldComponent,
     {
       type: "date",
-      insideInputFieldComponent: /* @__PURE__ */ jsx14(
+      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ jsx15(
         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__ */ jsx15(Calendar_default, { value: internalValue, minDate, maxDate, onChange })
         }
-      ),
+      ) : void 0,
       holderRef,
       ref,
       ...props,
@@ -5314,31 +5592,152 @@ InputFieldComponent.date = forwardRef8(function Date({ className, onFocus, onBlu
     }
   );
 });
-InputFieldComponent.dateTime = forwardRef8(function DateTime({ className, onFocus, onBlur, ...props }, ref) {
+InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef4(null);
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef);
-  return /* @__PURE__ */ jsx14(
+  const selectedHourRef = useRef4(null);
+  const selectedMinuteRef = useRef4(null);
+  const isMobileIOS = isMobileDevice && getBrowser() === "safari";
+  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const onChange = useCallback9(
+    (date) => {
+      const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? "00:00"}` : "";
+      inputFieldProps.onChangeValue?.(newValue);
+      setInternalValue(newValue);
+    },
+    [internalValue, inputFieldProps.onChangeValue]
+  );
+  const onClickHour = useCallback9(
+    (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 = useCallback9(
+    (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]
+  );
+  useEffect7(() => {
+    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__ */ jsx15(
     InputFieldComponent,
     {
       type: "datetime-local",
-      insideInputFieldComponent: /* @__PURE__ */ jsx14(
+      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ jsx15(
         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__ */ jsxs10(Div_default.row, { gap: theme2.styles.space, children: [
+            /* @__PURE__ */ jsx15(Calendar_default, { value: internalValue, minDate, maxDate, onChange }),
+            /* @__PURE__ */ jsxs10(
+              Div_default.row,
+              {
+                height: 276,
+                gap: theme2.styles.gap / 2,
+                paddingTop: topSpacing,
+                paddingBottom: theme2.styles.space / 2,
+                paddingRight: theme2.styles.space / 2,
+                children: [
+                  /* @__PURE__ */ jsxs10(Div_default, { height: "100%", children: [
+                    /* @__PURE__ */ jsx15(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "H" }),
+                    /* @__PURE__ */ jsx15(
+                      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__ */ jsx15(
+                            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__ */ jsx15(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                            },
+                            hour
+                          );
+                        })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs10(Div_default, { height: "100%", children: [
+                    /* @__PURE__ */ jsx15(Text_default, { fontSize: 14, fontWeight: 700, textAlign: "center", marginBottom: theme2.styles.gap / 2, children: "M" }),
+                    /* @__PURE__ */ jsx15(
+                      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__ */ jsx15(
+                            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__ */ jsx15(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                            },
+                            minute
+                          );
+                        })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ] })
         }
-      ),
+      ) : void 0,
       holderRef,
       ref,
       ...props,
@@ -5351,8 +5750,9 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
   const holderRef = useRef4(null);
   const selectedHourRef = useRef4(null);
   const selectedMinuteRef = useRef4(null);
-  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef);
-  const onClickHour = useCallback8(
+  const isMobileIOS = isMobileDevice && getBrowser() === "safari";
+  const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const onClickHour = useCallback9(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       inputFieldProps.onChangeValue?.(value);
@@ -5360,7 +5760,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = useCallback8(
+  const onClickMinute = useCallback9(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       inputFieldProps.onChangeValue?.(value);
@@ -5368,7 +5768,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -5376,12 +5776,11 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
   }, [isOpen]);
   const valueHour = parseInt(internalValue?.toString().split(":")?.[0]).toString();
   const valueMinute = parseInt(internalValue?.toString().split(":")?.[1]).toString();
-  const buttonWidth = 50;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     InputFieldComponent,
     {
       type: "time",
-      insideInputFieldComponent: /* @__PURE__ */ jsx14(
+      insideInputFieldComponent: !isMobileIOS ? /* @__PURE__ */ jsx15(
         Div_default,
         {
           position: "absolute",
@@ -5394,11 +5793,12 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
           borderBottomRightRadius: theme2.styles.borderRadius,
           boxShadow: "0px 10px 20px #00000020",
           overflowY: "auto",
+          userSelect: "none",
           ...insideInputFieldComponentProps,
-          children: /* @__PURE__ */ jsxs9(Div_default.row, { height: "100%", children: [
-            /* @__PURE__ */ jsx14(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: hours.map((hour) => {
+          children: /* @__PURE__ */ jsxs10(Div_default.row, { height: "100%", children: [
+            /* @__PURE__ */ jsx15(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__ */ jsx14(
+              return /* @__PURE__ */ jsx15(
                 Div_default.row,
                 {
                   alignItems: "center",
@@ -5411,14 +5811,14 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
                   value: hour,
                   onClickWithValue: onClickHour,
                   ref: isSelected ? selectedHourRef : void 0,
-                  children: /* @__PURE__ */ jsx14(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
+                  children: /* @__PURE__ */ jsx15(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                 },
                 hour
               );
             }) }),
-            /* @__PURE__ */ jsx14(Div_default, { className: "react-better-html-no-scrollbar", width: buttonWidth, height: "100%", overflowY: "auto", children: minutes.map((minute) => {
+            /* @__PURE__ */ jsx15(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__ */ jsx14(
+              return /* @__PURE__ */ jsx15(
                 Div_default.row,
                 {
                   alignItems: "center",
@@ -5431,14 +5831,14 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
                   value: minute,
                   onClickWithValue: onClickMinute,
                   ref: isSelected ? selectedMinuteRef : void 0,
-                  children: /* @__PURE__ */ jsx14(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
+                  children: /* @__PURE__ */ jsx15(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                 },
                 minute
               );
             }) })
           ] })
         }
-      ),
+      ) : void 0,
       holderRef,
       ref,
       ...props,
@@ -5447,7 +5847,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
     }
   );
 });
-var InputField2 = memo15(InputFieldComponent);
+var InputField2 = memo16(InputFieldComponent);
 InputField2.multiline = InputFieldComponent.multiline;
 InputField2.email = InputFieldComponent.email;
 InputField2.password = InputFieldComponent.password;
@@ -5459,9 +5859,9 @@ InputField2.time = InputFieldComponent.time;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback9, useState as useState7 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback10, useState as useState8 } from "react";
 import styled9 from "styled-components";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
@@ -5571,8 +5971,8 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const [internalChecked, setInternalChecked] = useState7(false);
-  const onChangeElement = useCallback9(
+  const [internalChecked, setInternalChecked] = useState8(false);
+  const onChangeElement = useCallback10(
     (event) => {
       const newIsChecked = event.target.checked;
       if (controlledChecked === void 0) setInternalChecked(newIsChecked);
@@ -5581,16 +5981,16 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
     [onChange, controlledChecked, value]
   );
   const checked = controlledChecked ?? internalChecked;
-  const onClickText = useCallback9(() => {
+  const onClickText = useCallback10(() => {
     const newIsChecked = !checked;
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
   }, [checked, controlledChecked, onChange, value]);
-  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-    label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ jsxs10(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-      /* @__PURE__ */ jsxs10(Div_default.row, { position: "relative", alignItems: "center", children: [
-        /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs11(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+    label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+    /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+      /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", children: [
+        /* @__PURE__ */ jsx16(
           InputElement2,
           {
             theme: theme2,
@@ -5603,7 +6003,7 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
             ...restProps
           }
         ),
-        props.type === "checkbox" ? /* @__PURE__ */ jsx15(
+        props.type === "checkbox" ? /* @__PURE__ */ jsx16(
           Icon_default,
           {
             name: "check",
@@ -5617,7 +6017,7 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
             pointerEvents: "none",
             transition: theme2.styles.transition
           }
-        ) : props.type === "radio" ? /* @__PURE__ */ jsx15(
+        ) : props.type === "radio" ? /* @__PURE__ */ jsx16(
           Div_default,
           {
             position: "absolute",
@@ -5633,15 +6033,15 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text && /* @__PURE__ */ jsxs10(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text && /* @__PURE__ */ jsxs11(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
-        required && !label && /* @__PURE__ */ jsxs10(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+        required && !label && /* @__PURE__ */ jsxs11(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
       ] })
     ] }),
-    (errorText || infoText) && /* @__PURE__ */ jsx15(
+    (errorText || infoText) && /* @__PURE__ */ jsx16(
       Text_default,
       {
         as: "span",
@@ -5655,10 +6055,10 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
 });
 var ToggleInput_default = {
   checkbox: forwardRef9(function Checkbox(props, ref) {
-    return /* @__PURE__ */ jsx15(ToggleInputComponent, { type: "checkbox", ref, ...props });
+    return /* @__PURE__ */ jsx16(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
   radiobutton: forwardRef9(function RadioButton(props, ref) {
-    return /* @__PURE__ */ jsx15(ToggleInputComponent, { type: "radio", ref, ...props });
+    return /* @__PURE__ */ jsx16(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
   switch: forwardRef9(function Switch({
     label,
@@ -5681,15 +6081,15 @@ var ToggleInput_default = {
     const [internalChecked, setInternalChecked] = useBooleanState();
     const [isMouseDown, setIsMouseDown] = useBooleanState();
     const checked = controlledChecked ?? internalChecked;
-    const onClickElement = useCallback9(() => {
+    const onClickElement = useCallback10(() => {
       if (disabled) return;
       const newIsChecked = !checked;
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
       onChange?.(newIsChecked, value);
     }, [disabled, checked, onChange, controlledChecked, value]);
-    return /* @__PURE__ */ jsxs10(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
-      label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-      /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs11(Div_default.column, { width: "fit-content", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
+      label && /* @__PURE__ */ jsx16(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
+      /* @__PURE__ */ jsx16(
         Div_default.row,
         {
           alignItems: "center",
@@ -5700,7 +6100,7 @@ var ToggleInput_default = {
           onTouchStart: setIsMouseDown.setTrue,
           onTouchEnd: setIsMouseDown.setFalse,
           onTouchCancel: setIsMouseDown.setFalse,
-          children: /* @__PURE__ */ jsx15(
+          children: /* @__PURE__ */ jsx16(
             SwitchElement,
             {
               theme: theme2,
@@ -5716,7 +6116,7 @@ var ToggleInput_default = {
           )
         }
       ),
-      (errorText || infoText) && /* @__PURE__ */ jsx15(
+      (errorText || infoText) && /* @__PURE__ */ jsx16(
         Text_default,
         {
           as: "span",
@@ -5731,8 +6131,8 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-import { memo as memo16, useMemo as useMemo5 } from "react";
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { memo as memo17, useMemo as useMemo6 } from "react";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function Form({
   form,
   submitButtonText,
@@ -5749,7 +6149,7 @@ function Form({
   ...props
 }) {
   const theme2 = useTheme();
-  const submitButtonIsDisabledInternal = useMemo5(() => {
+  const submitButtonIsDisabledInternal = useMemo6(() => {
     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() === "")
@@ -5757,9 +6157,9 @@ function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-  return /* @__PURE__ */ jsx16(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs11("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
-    gap !== void 0 ? /* @__PURE__ */ jsx16(Div_default.column, { gap, children }) : children,
-    submitButtonText && /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx17(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs12("form", { onSubmit: onSubmit ?? form?.onSubmit, children: [
+    gap !== void 0 ? /* @__PURE__ */ jsx17(Div_default.column, { gap, children }) : children,
+    submitButtonText && /* @__PURE__ */ jsxs12(
       Div_default.row,
       {
         alignItems: "center",
@@ -5767,8 +6167,8 @@ function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          onClickCancel && /* @__PURE__ */ jsx16(Button_default.secondary, { text: "Cancel", onClick: onClickCancel }),
-          /* @__PURE__ */ jsx16(
+          onClickCancel && /* @__PURE__ */ jsx17(Button_default.secondary, { text: "Cancel", onClick: onClickCancel }),
+          /* @__PURE__ */ jsx17(
             SubmitButtonTag,
             {
               text: submitButtonText,
@@ -5784,19 +6184,19 @@ function Form({
     )
   ] }) });
 }
-var Form_default = memo16(Form);
+var Form_default = memo17(Form);
 
 // src/components/FormRow.tsx
-import { forwardRef as forwardRef10, memo as memo17 } from "react";
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { forwardRef as forwardRef10, memo as memo18 } from "react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var FormRowComponent = forwardRef10(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__ */ jsxs12(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
+  return /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: gap ?? readyGap, invertFlexDirection: breakingPoint, ...props, ref, children: [
     children,
-    oneItemOnly && /* @__PURE__ */ jsx17(Div_default, { width: "100%" })
+    oneItemOnly && /* @__PURE__ */ jsx18(Div_default, { width: "100%" })
   ] });
 });
 FormRowComponent.withTitle = forwardRef10(function WithTitle({
@@ -5813,15 +6213,15 @@ FormRowComponent.withTitle = forwardRef10(function WithTitle({
 }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
-  return /* @__PURE__ */ jsxs12(FormRowComponent, { ...props, ref, children: [
-    /* @__PURE__ */ jsxs12(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
-      icon && /* @__PURE__ */ jsx17(Icon_default, { name: icon }),
-      /* @__PURE__ */ jsxs12(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-        /* @__PURE__ */ jsx17(Text_default, { as: "h3", children: title }),
-        description && /* @__PURE__ */ jsx17(Text_default, { color: theme2.colors.textSecondary, children: description })
+  return /* @__PURE__ */ jsxs13(FormRowComponent, { ...props, ref, children: [
+    /* @__PURE__ */ jsxs13(Div_default.row, { width: "100%", alignItems: "center", gap: theme2.styles.space, children: [
+      icon && /* @__PURE__ */ jsx18(Icon_default, { name: icon }),
+      /* @__PURE__ */ jsxs13(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+        /* @__PURE__ */ jsx18(Text_default, { as: "h3", children: title }),
+        description && /* @__PURE__ */ jsx18(Text_default, { color: theme2.colors.textSecondary, children: description })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs13(
       Div_default.row,
       {
         width: props.noBreakingPoint && mediaQuery.size900 ? void 0 : "100%",
@@ -5829,22 +6229,22 @@ FormRowComponent.withTitle = forwardRef10(function WithTitle({
         gap: theme2.styles.gap,
         children: [
           children,
-          withActions && /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
-            onClickReset && /* @__PURE__ */ jsx17(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
-            /* @__PURE__ */ jsx17(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
+          withActions && /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+            onClickReset && /* @__PURE__ */ jsx18(Button_default.icon, { icon: "XMark", loaderName: resetButtonLoaderName, onClick: onClickReset }),
+            /* @__PURE__ */ jsx18(Button_default.icon, { icon: "check", loaderName: saveButtonLoaderName, onClick: onClickSave })
           ] })
         ]
       }
     )
   ] });
 });
-var FormRow2 = memo17(FormRowComponent);
+var FormRow2 = memo18(FormRowComponent);
 FormRow2.withTitle = FormRowComponent.withTitle;
 var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
-import { memo as memo18, useEffect as useEffect7 } from "react";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { memo as memo19, useEffect as useEffect8 } from "react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
   className,
@@ -5855,7 +6255,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       darkMode: localStorage.getItem("theme") === "dark"
     }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     const timeout = setTimeout(() => {
       window.document.body.parentElement?.setAttribute("data-theme", form.values.darkMode ? "dark" : "light");
       localStorage.setItem("theme", form.values.darkMode ? "dark" : "light");
@@ -5864,7 +6264,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       clearTimeout(timeout);
     };
   }, [form.values.darkMode]);
-  useEffect7(() => {
+  useEffect8(() => {
     const html = document.querySelector("html");
     if (!html) return;
     const observer = new MutationObserver((mutations) => {
@@ -5881,7 +6281,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       observer.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     ToggleInput_default.switch,
     {
       className: `react-better-html-color-theme-switch ${withMoon ? ` react-better-html-color-theme-switch-with-moon` : ""}${className ? ` ${className}` : ""}`,
@@ -5892,23 +6292,23 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
 };
 ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ...props }) {
   const theme2 = useTheme();
-  return /* @__PURE__ */ jsxs13(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
-    /* @__PURE__ */ jsx18(Text_default, { children: "Light" }),
-    /* @__PURE__ */ jsx18(ColorThemeSwitchComponent, { withMoon, className }),
-    /* @__PURE__ */ jsx18(Text_default, { children: "Dark" })
+  return /* @__PURE__ */ jsxs14(Div_default.row, { width: "fit-content", alignItems: "center", gap: theme2.styles.gap, userSelect: "none", ...props, children: [
+    /* @__PURE__ */ jsx19(Text_default, { children: "Light" }),
+    /* @__PURE__ */ jsx19(ColorThemeSwitchComponent, { withMoon, className }),
+    /* @__PURE__ */ jsx19(Text_default, { children: "Dark" })
   ] });
 };
-var ColorThemeSwitch2 = memo18(ColorThemeSwitchComponent);
+var ColorThemeSwitch2 = memo19(ColorThemeSwitchComponent);
 ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-import { forwardRef as forwardRef11, memo as memo19, useCallback as useCallback10, useMemo as useMemo6, useState as useState8 } from "react";
+import { forwardRef as forwardRef11, memo as memo20, useCallback as useCallback11, useMemo as useMemo7, useState as useState9 } from "react";
 import styled10, { css as css2 } from "styled-components";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultImageWidth = 120;
 var TableStyledComponent = styled10.table.withConfig({
-  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "theme"].includes(prop)
+  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
 })`
    width: 100%;
    border-collapse: collapse;
@@ -5936,7 +6336,7 @@ var TableStyledComponent = styled10.table.withConfig({
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):hover {
-                    filter: brightness(0.95);
+                    filter: brightness(${props.colorTheme === "light" ? "0.95" : "0.85"});
                  }
               ` : ""}
 
@@ -5947,7 +6347,7 @@ var TableStyledComponent = styled10.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 {
@@ -5974,15 +6374,17 @@ var TableComponent = forwardRef11(function Table({
   columns,
   data,
   isStriped,
+  isLoading,
   withStickyHeader,
   noDataItemsMessage = "No data available",
   onClickRow,
   onClickAllCheckboxes,
   ...props
 }, ref) {
+  const { colorTheme } = useBetterHtmlContext();
   const theme2 = useTheme();
-  const [checkedItems, setCheckedItems] = useState8([]);
-  const renderCellContent = useCallback10(
+  const [checkedItems, setCheckedItems] = useState9([]);
+  const renderCellContent = useCallback11(
     (column, item, index) => {
       switch (column.type) {
         case "text": {
@@ -5990,17 +6392,17 @@ var TableComponent = forwardRef11(function Table({
           return column.format ? column.format(item, index) : String(value ?? "");
         }
         case "element": {
-          return column.render?.(item, index) ?? /* @__PURE__ */ jsx19(Fragment3, {});
+          return column.render?.(item, index) ?? /* @__PURE__ */ jsx20(Fragment3, {});
         }
         case "image": {
           const { type, keyName, ...props2 } = column;
           const src = keyName ? item[keyName] : void 0;
-          return /* @__PURE__ */ jsx19(Image_default, { src, width: defaultImageWidth, borderRadius: theme2.styles.borderRadius / 2, ...props2 });
+          return /* @__PURE__ */ jsx20(Image_default, { src, width: defaultImageWidth, borderRadius: theme2.styles.borderRadius / 2, ...props2 });
         }
         case "checkbox": {
           const { type, onChange, ...props2 } = column;
           const checkedValue = checkedItems[index];
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx20(
             ToggleInput_default.checkbox,
             {
               checked: checkedValue,
@@ -6015,29 +6417,29 @@ var TableComponent = forwardRef11(function Table({
           );
         }
         default: {
-          return /* @__PURE__ */ jsx19(Fragment3, {});
+          return /* @__PURE__ */ jsx20(Fragment3, {});
         }
       }
     },
     [theme2, checkedItems]
   );
-  const onClickRowElement = useCallback10(
+  const onClickRowElement = useCallback11(
     (item, index) => {
       onClickRow?.(item, index);
     },
     [onClickRow]
   );
-  const onClickAllCheckboxesElement = useCallback10(
+  const onClickAllCheckboxesElement = useCallback11(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const everythingIsChecked = useMemo6(() => {
+  const everythingIsChecked = useMemo7(() => {
     return checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     Div_default,
     {
       border: `1px solid ${theme2.colors.border}`,
@@ -6045,22 +6447,23 @@ var TableComponent = forwardRef11(function Table({
       overflow: "auto",
       ...props,
       ref,
-      children: /* @__PURE__ */ jsxs14(
+      children: /* @__PURE__ */ jsxs15(
         TableStyledComponent,
         {
           isStriped,
           withHover: onClickRow !== void 0,
           withStickyHeader,
+          colorTheme,
           theme: theme2,
           children: [
-            /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsx19("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsx20("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ jsx20(
               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__ */ jsx19(
+                children: column.label ?? (column.type === "checkbox" && onClickAllCheckboxes ? /* @__PURE__ */ jsx20(
                   ToggleInput_default.checkbox,
                   {
                     checked: everythingIsChecked,
@@ -6070,86 +6473,24 @@ var TableComponent = forwardRef11(function Table({
               },
               column.type + column.label + index
             )) }) }),
-            /* @__PURE__ */ jsx19("tbody", { children: data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20("tbody", { children: isLoading ? /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Loader_default.box, {}) }) }) : data.length > 0 ? data.map((item, rowIndex) => /* @__PURE__ */ jsx20(
               "tr",
               {
                 className: onClickRow ? "isClickable" : void 0,
                 onClick: () => onClickRowElement(item, rowIndex),
-                children: columns.map((column, colIndex) => /* @__PURE__ */ jsx19(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
+                children: columns.map((column, colIndex) => /* @__PURE__ */ jsx20(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))
               },
               JSON.stringify(item) + rowIndex
-            )) : /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx19(Text_default.unknown, { children: noDataItemsMessage }) }) }) })
+            )) : /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx20(Text_default.unknown, { children: noDataItemsMessage }) }) }) })
           ]
         }
       )
     }
   );
 });
-var Table2 = memo19(TableComponent);
+var Table2 = memo20(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) {