react-better-html 1.1.213 → 1.1.215

package/dist/index.js

@@ -4136,6 +4136,7 @@ var filterHover = () => {
 
 // src/components/Chip.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var borderRadiusOffset = 1.3;
 var ChipComponent = (0, import_react16.forwardRef)(function Chip({
   text,
   color,
@@ -4160,7 +4161,7 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({
     {
       width: "fit-content",
       backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
-      borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / 1.3,
+      borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / borderRadiusOffset,
       paddingBlock: theme2.styles.gap / 2,
       paddingInline: theme2.styles.space / 1.5,
       filterHover: onClick || onClickWithValue ? filterHover().z1 : void 0,
@@ -4172,11 +4173,11 @@ var ChipComponent = (0, import_react16.forwardRef)(function Chip({
     }
   );
 });
-ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color, ...props }, ref) {
+ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color, withWhiteBackground, ...props }, ref) {
   const theme2 = useTheme();
   const { colorTheme } = useBetterHtmlContextInternal();
   const readyColor = color ?? theme2.colors.textSecondary;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  const chip = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     ChipComponent,
     {
       color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor(readyColor, 0.7),
@@ -4186,13 +4187,22 @@ ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color,
       ...props
     }
   );
+  return withWhiteBackground ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Div_default,
+    {
+      width: "fit-content",
+      backgroundColor: withWhiteBackground ? colorTheme === "light" ? "#ffffff" : "#000000" : void 0,
+      borderRadius: withWhiteBackground ? props.borderRadius ?? theme2.styles.borderRadius / borderRadiusOffset + 0.3 : void 0,
+      children: chip
+    }
+  ) : chip;
 });
 var Chip2 = (0, import_react16.memo)(ChipComponent);
 Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/constants/countries.ts
@@ -5821,6 +5831,7 @@ var Label_default = (0, import_react17.memo)(Label);
 // src/components/Dropdown.tsx
 var import_react18 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react19 = require("react");
 var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
   label,
   labelColor,
@@ -5992,7 +6003,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
               role: "option",
               "aria-selected": isSelected,
               "aria-disabled": isDisabled,
-              children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label })
+              children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: !option.renderType || option.renderType === "default" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label }) : option.renderType === "chip" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Chip_default, { text: option.label, ...option.chipProps }) : option.renderType === "chip.colored" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Chip_default.colored, { text: option.label, withWhiteBackground: true, ...option.chipProps }) : void 0 })
             }
           ),
           renderOptionDivider ? renderOptionDivider(
@@ -6090,7 +6101,18 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
           paddingBlock: theme2.styles.gap,
           paddingInline: (theme2.styles.space + theme2.styles.gap) / 2,
           transition: theme2.styles.transition,
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Chip_default, { text: option.label }, JSON.stringify(option))) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Div_default.row, { width: "100%", flexWrap: "wrap", gap: theme2.styles.gap, children: selectedOption.map((option) => {
+            const ChipComponentTag = !option.renderType || option.renderType === "default" || option.renderType === "chip" ? Chip_default : option.renderType === "chip.colored" ? Chip_default.colored : Chip_default;
+            return /* @__PURE__ */ (0, import_react19.createElement)(
+              ChipComponentTag,
+              {
+                text: option.label,
+                ...option.renderType === "chip" || option.renderType === "chip.colored" ? option.chipProps : [],
+                withWhiteBackground: option.renderType === "chip.colored",
+                key: JSON.stringify(option)
+              }
+            );
+          }) })
         }
       ) : void 0,
       insideInputFieldAfterComponent: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
@@ -6212,7 +6234,7 @@ Dropdown2.countries = DropdownComponent.countries;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var getMonthName = (month, short = false) => {
@@ -6265,24 +6287,24 @@ var SelectComponent = import_styled_components10.default.select.withConfig({
 `;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
-  const internalYearSelectId = (0, import_react19.useId)();
-  const [currentDate, setCurrentDate] = (0, import_react19.useState)(value ? new Date(value) : void 0);
-  const [currentMonth, setCurrentMonth] = (0, import_react19.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
-  const [currentYear, setCurrentYear] = (0, import_react19.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
-  const daysInMonth = (0, import_react19.useMemo)(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
-  const onClickPreviousMonthButton = (0, import_react19.useCallback)(() => {
+  const internalYearSelectId = (0, import_react20.useId)();
+  const [currentDate, setCurrentDate] = (0, import_react20.useState)(value ? new Date(value) : void 0);
+  const [currentMonth, setCurrentMonth] = (0, import_react20.useState)(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
+  const [currentYear, setCurrentYear] = (0, import_react20.useState)(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
+  const daysInMonth = (0, import_react20.useMemo)(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
+  const onClickPreviousMonthButton = (0, import_react20.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_react19.useCallback)(() => {
+  const onClickNextMonthButton = (0, import_react20.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_react19.useCallback)(
+  const onClickDay = (0, import_react20.useCallback)(
     (day) => {
       if (!day) return;
       const newDate = new Date(currentYear, currentMonth, day);
@@ -6293,25 +6315,25 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     },
     [currentMonth, currentYear, onChange]
   );
-  const onClickClear = (0, import_react19.useCallback)(() => {
+  const onClickClear = (0, import_react20.useCallback)(() => {
     setCurrentDate(void 0);
     onChange?.(void 0);
   }, []);
-  const onClickToday = (0, import_react19.useCallback)(() => {
+  const onClickToday = (0, import_react20.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 onChangeYearSelect = (0, import_react19.useCallback)((event) => {
+  const onChangeYearSelect = (0, import_react20.useCallback)((event) => {
     setCurrentYear(parseInt(event.target.value));
   }, []);
-  const firstDayOfMonth = (0, import_react19.useMemo)(() => {
+  const firstDayOfMonth = (0, import_react20.useMemo)(() => {
     const day = new Date(currentYear, currentMonth, 1).getDay();
     return day === 0 ? 6 : day - 1;
   }, [currentMonth, currentYear]);
-  const days = (0, import_react19.useMemo)(() => {
+  const days = (0, import_react20.useMemo)(() => {
     const result = [];
     for (let index = 0; index < firstDayOfMonth; index++) {
       result.push(void 0);
@@ -6321,7 +6343,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     }
     return result;
   }, [daysInMonth, firstDayOfMonth]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!value) return;
     const date = new Date(value);
     setCurrentDate(date);
@@ -6427,7 +6449,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     ] })
   ] });
 }
-var Calendar_default = (0, import_react19.memo)(Calendar);
+var Calendar_default = (0, import_react20.memo)(Calendar);
 
 // src/components/InputField.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -6595,7 +6617,7 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
 `;
 var hours = Array.from({ length: 24 }, (_, index) => index);
 var minutes = Array.from({ length: 60 }, (_, index) => index);
-var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
+var InputFieldComponent = (0, import_react21.forwardRef)(function InputField({
   label,
   labelColor,
   errorText,
@@ -6620,7 +6642,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = (0, import_react20.useId)();
+  const internalId = (0, import_react21.useId)();
   const { colorTheme } = useBetterHtmlContextInternal();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
@@ -6631,7 +6653,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = (0, import_react20.useCallback)(
+  const onChangeElement = (0, import_react21.useCallback)(
     (event) => {
       const newValue = event.target.value;
       if (withDebounce) {
@@ -6644,13 +6666,13 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
     },
     [onChange, onChangeValue, withDebounce]
   );
-  const leftIconZIndex = (0, import_react20.useMemo)(
+  const leftIconZIndex = (0, import_react21.useMemo)(
     () => ["react-better-html-dropdown-open-late", "react-better-html-inputField-dateTime-opened-late"].some(
       (classNameItem) => props.className?.includes(classNameItem)
     ) ? 1002 : 1,
     [props.className]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
@@ -6757,7 +6779,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
     )
   ] });
 });
-InputFieldComponent.multiline = (0, import_react20.forwardRef)(function Multiline({
+InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multiline({
   label,
   placeholder,
   errorText,
@@ -6772,12 +6794,12 @@ InputFieldComponent.multiline = (0, import_react20.forwardRef)(function Multilin
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = (0, import_react20.useId)();
+  const internalId = (0, import_react21.useId)();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = (0, import_react20.useCallback)(
+  const onChangeElement = (0, import_react21.useCallback)(
     (event) => {
       onChange?.(event);
       onChangeValue?.(event.target.value);
@@ -6851,7 +6873,7 @@ InputFieldComponent.multiline = (0, import_react20.forwardRef)(function Multilin
     )
   ] });
 });
-InputFieldComponent.email = (0, import_react20.forwardRef)(function Email({ ...props }, ref) {
+InputFieldComponent.email = (0, import_react21.forwardRef)(function Email({ ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
     {
@@ -6865,7 +6887,7 @@ InputFieldComponent.email = (0, import_react20.forwardRef)(function Email({ ...p
     }
   );
 });
-InputFieldComponent.password = (0, import_react20.forwardRef)(function Password({ ...props }, ref) {
+InputFieldComponent.password = (0, import_react21.forwardRef)(function Password({ ...props }, ref) {
   const [isPassword, setIsPassword] = useBooleanState(true);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     InputFieldComponent,
@@ -6882,31 +6904,31 @@ InputFieldComponent.password = (0, import_react20.forwardRef)(function Password(
     }
   );
 });
-InputFieldComponent.search = (0, import_react20.forwardRef)(function Search({ value, onChangeValue, onFocus, onBlur, ...props }, ref) {
-  const [inputFieldValue, setInputFieldValue] = (0, import_react20.useState)(value?.toString() ?? "");
+InputFieldComponent.search = (0, import_react21.forwardRef)(function Search({ value, onChangeValue, onFocus, onBlur, ...props }, ref) {
+  const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value?.toString() ?? "");
   const [inputFieldFocused, setInputFieldFocused] = useBooleanState();
-  const onChangeValueElement = (0, import_react20.useCallback)(
+  const onChangeValueElement = (0, import_react21.useCallback)(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
     },
     [onChangeValue]
   );
-  const onFocusElement = (0, import_react20.useCallback)(
+  const onFocusElement = (0, import_react21.useCallback)(
     (event) => {
       setInputFieldFocused.setTrue();
       onFocus?.(event);
     },
     [onFocus]
   );
-  const onBlurElement = (0, import_react20.useCallback)(
+  const onBlurElement = (0, import_react21.useCallback)(
     (event) => {
       setTimeout(() => setInputFieldFocused.setFalse(), 0.1 * 1e3);
       onBlur?.(event);
     },
     [onBlur]
   );
-  const onClickRightIcon = (0, import_react20.useCallback)(() => {
+  const onClickRightIcon = (0, import_react21.useCallback)(() => {
     onChangeValueElement("");
   }, [onChangeValueElement]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -6925,26 +6947,26 @@ InputFieldComponent.search = (0, import_react20.forwardRef)(function Search({ va
     }
   );
 });
-InputFieldComponent.phoneNumber = (0, import_react20.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
+InputFieldComponent.phoneNumber = (0, import_react21.forwardRef)(function PhoneNumber({ label, value, onChangeValue, labelColor, id, ...props }, ref) {
   const theme2 = useTheme();
-  const internalId = (0, import_react20.useId)();
-  const [dropdownValue, setDropdownValue] = (0, import_react20.useState)();
-  const [inputFieldValue, setInputFieldValue] = (0, import_react20.useState)(value?.toString() ?? "");
-  const renderOption = (0, import_react20.useCallback)(
+  const internalId = (0, import_react21.useId)();
+  const [dropdownValue, setDropdownValue] = (0, import_react21.useState)();
+  const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value?.toString() ?? "");
+  const renderOption = (0, import_react21.useCallback)(
     (option, index, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text_default, { children: option.label })
     ] }),
     []
   );
-  const onChangeDropdown = (0, import_react20.useCallback)(
+  const onChangeDropdown = (0, import_react21.useCallback)(
     (value2) => {
       setDropdownValue(value2);
       onChangeValue?.(value2 ? `+${value2}${inputFieldValue}` : inputFieldValue);
     },
     [onChangeValue, inputFieldValue]
   );
-  const onChangeValueElement = (0, import_react20.useCallback)(
+  const onChangeValueElement = (0, import_react21.useCallback)(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
       setInputFieldValue(readyValue);
@@ -6952,7 +6974,7 @@ InputFieldComponent.phoneNumber = (0, import_react20.forwardRef)(function PhoneN
     },
     [onChangeValue, dropdownValue]
   );
-  const options = (0, import_react20.useMemo)(
+  const options = (0, import_react21.useMemo)(
     () => countries.map((country) => ({
       value: country.phoneNumberExtension,
       label: `+${country.phoneNumberExtension}`,
@@ -6960,13 +6982,13 @@ InputFieldComponent.phoneNumber = (0, import_react20.forwardRef)(function PhoneN
     })),
     []
   );
-  const defaultValue = (0, import_react20.useMemo)(() => {
+  const defaultValue = (0, import_react21.useMemo)(() => {
     const thisTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const initialDefaultValue = options.find((option) => option.data?.timeZone === thisTimeZone)?.value ?? "";
     setDropdownValue(initialDefaultValue);
     return initialDefaultValue;
   }, [options]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (value === void 0 || value === null) return;
     const newValue = value.toString();
     const country = countries.find(
@@ -7028,12 +7050,12 @@ InputFieldComponent.phoneNumber = (0, import_react20.forwardRef)(function PhoneN
     ] })
   ] });
 });
-InputFieldComponent.date = (0, import_react20.forwardRef)(function Date2({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDate, maxDate, ...props }, ref) {
   const theme2 = useTheme();
-  const holderRef = (0, import_react20.useRef)(null);
+  const holderRef = (0, import_react21.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = (0, import_react20.useCallback)(
+  const onChange = (0, import_react21.useCallback)(
     (date) => {
       inputFieldProps.onChangeValue?.(date ?? "");
       setInternalValue(date ?? "");
@@ -7067,14 +7089,14 @@ InputFieldComponent.date = (0, import_react20.forwardRef)(function Date2({ minDa
     }
   );
 });
-InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
+InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
   const theme2 = useTheme();
-  const holderRef = (0, import_react20.useRef)(null);
-  const selectedHourRef = (0, import_react20.useRef)(null);
-  const selectedMinuteRef = (0, import_react20.useRef)(null);
+  const holderRef = (0, import_react21.useRef)(null);
+  const selectedHourRef = (0, import_react21.useRef)(null);
+  const selectedMinuteRef = (0, import_react21.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = (0, import_react20.useCallback)(
+  const onChange = (0, import_react21.useCallback)(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
       inputFieldProps.onChangeValue?.(newValue);
@@ -7082,7 +7104,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
     },
     [internalValue, defaultTimeAfterDatePick, inputFieldProps.onChangeValue]
   );
-  const onClickHour = (0, import_react20.useCallback)(
+  const onClickHour = (0, import_react21.useCallback)(
     (hour) => {
       const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
@@ -7092,7 +7114,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
     },
     [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = (0, import_react20.useCallback)(
+  const onClickMinute = (0, import_react21.useCallback)(
     (minute) => {
       const newTime = `${internalValue?.toString().split("T")?.[1]?.split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
@@ -7102,7 +7124,7 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
     },
     [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -7221,14 +7243,14 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
     }
   );
 });
-InputFieldComponent.time = (0, import_react20.forwardRef)(function Time({ ...props }, ref) {
+InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...props }, ref) {
   const theme2 = useTheme();
-  const holderRef = (0, import_react20.useRef)(null);
-  const selectedHourRef = (0, import_react20.useRef)(null);
-  const selectedMinuteRef = (0, import_react20.useRef)(null);
+  const holderRef = (0, import_react21.useRef)(null);
+  const selectedHourRef = (0, import_react21.useRef)(null);
+  const selectedMinuteRef = (0, import_react21.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onClickHour = (0, import_react20.useCallback)(
+  const onClickHour = (0, import_react21.useCallback)(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       inputFieldProps.onChangeValue?.(value);
@@ -7236,7 +7258,7 @@ InputFieldComponent.time = (0, import_react20.forwardRef)(function Time({ ...pro
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = (0, import_react20.useCallback)(
+  const onClickMinute = (0, import_react21.useCallback)(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       inputFieldProps.onChangeValue?.(value);
@@ -7244,7 +7266,7 @@ InputFieldComponent.time = (0, import_react20.forwardRef)(function Time({ ...pro
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (isOpen && selectedHourRef.current)
       selectedHourRef.current.scrollIntoView({ block: "nearest", behavior: "instant" });
     if (isOpen && selectedMinuteRef.current)
@@ -7343,16 +7365,16 @@ InputFieldComponent.time = (0, import_react20.forwardRef)(function Time({ ...pro
     }
   );
 });
-InputFieldComponent.color = (0, import_react20.forwardRef)(function Color2({ value, onChangeValue, ...props }, ref) {
-  const [inputFieldValue, setInputFieldValue] = (0, import_react20.useState)(value ?? "#000000");
-  const onChangeValueElement = (0, import_react20.useCallback)(
+InputFieldComponent.color = (0, import_react21.forwardRef)(function Color2({ value, onChangeValue, ...props }, ref) {
+  const [inputFieldValue, setInputFieldValue] = (0, import_react21.useState)(value ?? "#000000");
+  const onChangeValueElement = (0, import_react21.useCallback)(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
     },
     [onChangeValue]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     setInputFieldValue(value);
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -7381,7 +7403,7 @@ InputFieldComponent.color = (0, import_react20.forwardRef)(function Color2({ val
     }
   );
 });
-var InputField2 = (0, import_react20.memo)(InputFieldComponent);
+var InputField2 = (0, import_react21.memo)(InputFieldComponent);
 InputField2.multiline = InputFieldComponent.multiline;
 InputField2.email = InputFieldComponent.email;
 InputField2.password = InputFieldComponent.password;
@@ -7394,7 +7416,7 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var componentSize = 26;
@@ -7489,7 +7511,7 @@ var SwitchElement = import_styled_components12.default.div.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var ToggleInputComponent = (0, import_react21.forwardRef)(function ToggleInput({
+var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   label,
   labelColor,
   text,
@@ -7505,14 +7527,14 @@ var ToggleInputComponent = (0, import_react21.forwardRef)(function ToggleInput({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const internalId = (0, import_react21.useId)();
+  const internalId = (0, import_react22.useId)();
   const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
   const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const [internalChecked, setInternalChecked] = (0, import_react21.useState)(false);
-  const onChangeElement = (0, import_react21.useCallback)(
+  const [internalChecked, setInternalChecked] = (0, import_react22.useState)(false);
+  const onChangeElement = (0, import_react22.useCallback)(
     (event) => {
       const newIsChecked = event.target.checked;
       if (controlledChecked === void 0) setInternalChecked(newIsChecked);
@@ -7521,7 +7543,7 @@ var ToggleInputComponent = (0, import_react21.forwardRef)(function ToggleInput({
     [onChange, controlledChecked, value]
   );
   const checked = controlledChecked ?? internalChecked;
-  const onClickText = (0, import_react21.useCallback)(() => {
+  const onClickText = (0, import_react22.useCallback)(() => {
     const newIsChecked = !checked;
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
@@ -7602,13 +7624,13 @@ var ToggleInputComponent = (0, import_react21.forwardRef)(function ToggleInput({
   ] });
 });
 var ToggleInput_default = {
-  checkbox: (0, import_react21.forwardRef)(function Checkbox(props, ref) {
+  checkbox: (0, import_react22.forwardRef)(function Checkbox(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleInputComponent, { type: "checkbox", ref, ...props });
   }),
-  radiobutton: (0, import_react21.forwardRef)(function RadioButton(props, ref) {
+  radiobutton: (0, import_react22.forwardRef)(function RadioButton(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToggleInputComponent, { type: "radio", ref, ...props });
   }),
-  switch: (0, import_react21.forwardRef)(function Switch({
+  switch: (0, import_react22.forwardRef)(function Switch({
     label,
     labelColor,
     errorText,
@@ -7622,7 +7644,7 @@ var ToggleInput_default = {
     ...props
   }, ref) {
     const theme2 = useTheme();
-    const internalId = (0, import_react21.useId)();
+    const internalId = (0, import_react22.useId)();
     const styledComponentStyles = useStyledComponentStyles(props, theme2, true);
     const styledComponentStylesWithExcluded = useComponentPropsWithExcludedStyle(props);
     const dataProps = useComponentPropsWithPrefix(props, "data");
@@ -7631,7 +7653,7 @@ var ToggleInput_default = {
     const [internalChecked, setInternalChecked] = useBooleanState();
     const [isMouseDown, setIsMouseDown] = useBooleanState();
     const checked = controlledChecked ?? internalChecked;
-    const onClickElement = (0, import_react21.useCallback)(() => {
+    const onClickElement = (0, import_react22.useCallback)(() => {
       if (disabled) return;
       const newIsChecked = !checked;
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
@@ -7688,9 +7710,9 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var FormComponent = (0, import_react22.forwardRef)(function Form({
+var FormComponent = (0, import_react23.forwardRef)(function Form({
   form,
   name,
   submitButtonText,
@@ -7714,7 +7736,7 @@ var FormComponent = (0, import_react22.forwardRef)(function Form({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const submitButtonIsDisabledInternal = (0, import_react22.useMemo)(() => {
+  const submitButtonIsDisabledInternal = (0, import_react23.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() === "")
@@ -7723,9 +7745,9 @@ var FormComponent = (0, import_react22.forwardRef)(function Form({
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react22.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react22.Fragment, { children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react23.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react23.Fragment, { children: [
       child,
-      index < import_react22.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider_default.horizontal, {})
+      index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
     submitButtonText && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       Div_default.row,
@@ -7763,13 +7785,13 @@ var FormComponent = (0, import_react22.forwardRef)(function Form({
     )
   ] }) });
 });
-var Form2 = (0, import_react22.memo)(FormComponent);
+var Form2 = (0, import_react23.memo)(FormComponent);
 var Form_default = Form2;
 
 // src/components/FormRow.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormRowComponent = (0, import_react23.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
+var FormRowComponent = (0, import_react24.forwardRef)(function FormRow({ oneItemOnly, noBreakingPoint, asColumn, gap, children, ...props }, ref) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const breakingPoint = asColumn ?? (!noBreakingPoint ? mediaQuery.size900 : false);
@@ -7779,7 +7801,7 @@ var FormRowComponent = (0, import_react23.forwardRef)(function FormRow({ oneItem
     oneItemOnly && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: "100%" })
   ] });
 });
-FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
+FormRowComponent.withTitle = (0, import_react24.forwardRef)(function WithTitle({
   icon,
   title,
   titleAs = "h3",
@@ -7846,12 +7868,12 @@ FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
     )
   ] });
 });
-var FormRow2 = (0, import_react23.memo)(FormRowComponent);
+var FormRow2 = (0, import_react24.memo)(FormRowComponent);
 FormRow2.withTitle = FormRowComponent.withTitle;
 var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
@@ -7863,10 +7885,10 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
       darkMode: localStorage.getItem("theme") === "dark"
     }
   });
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     colorThemeControls.toggleTheme(form.values.darkMode ? "dark" : "light");
   }, [form.values.darkMode]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const html = document.querySelector("html");
     if (!html) return;
     const observer = new MutationObserver((mutations) => {
@@ -7900,16 +7922,16 @@ ColorThemeSwitchComponent.withText = function WithText({ withMoon, className, ..
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text_default, { children: "Dark" })
   ] });
 };
-var ColorThemeSwitch2 = (0, import_react24.memo)(ColorThemeSwitchComponent);
+var ColorThemeSwitch2 = (0, import_react25.memo)(ColorThemeSwitchComponent);
 ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/components/Pagination.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var PaginationComponent = function Pagination({
   currentPage = 1,
@@ -7923,19 +7945,19 @@ var PaginationComponent = function Pagination({
 }) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
-  const [currentPageInternal, setCurrentPage] = (0, import_react25.useState)(currentPage);
+  const [currentPageInternal, setCurrentPage] = (0, import_react26.useState)(currentPage);
   const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
-  const onClickPreviousPageElement = (0, import_react25.useCallback)(() => {
+  const onClickPreviousPageElement = (0, import_react26.useCallback)(() => {
     const newPage = currentPageInternal <= 1 ? 1 : currentPageInternal - 1;
     setCurrentPage(newPage);
     onClickPreviousPage?.(newPage);
   }, [currentPageInternal, onClickPreviousPage]);
-  const onClickNextPageElement = (0, import_react25.useCallback)(() => {
+  const onClickNextPageElement = (0, import_react26.useCallback)(() => {
     const newPage = currentPageInternal >= pageCountInternal ? pageCountInternal : currentPageInternal + 1;
     setCurrentPage(newPage);
     onClickNextPage?.(newPage);
   }, [currentPageInternal, pageCountInternal, onClickNextPage]);
-  const paginationItems = (0, import_react25.useMemo)(() => {
+  const paginationItems = (0, import_react26.useMemo)(() => {
     const halfRange = Math.floor(maximumVisiblePages2 / 2);
     let startPage = Math.max(1, currentPageInternal - halfRange);
     let endPage = Math.min(pageCountInternal, currentPageInternal + halfRange);
@@ -7950,10 +7972,10 @@ var PaginationComponent = function Pagination({
       (_, index) => startPage + index
     );
   }, [pageCountInternal, currentPageInternal]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     onChangePage?.(currentPageInternal);
   }, [currentPageInternal, onChangePage]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     setCurrentPage(currentPage);
   }, [currentPage]);
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages2 / 1.4;
@@ -8018,7 +8040,7 @@ var PaginationComponent = function Pagination({
     )
   ] });
 };
-var Pagination2 = (0, import_react25.memo)(PaginationComponent);
+var Pagination2 = (0, import_react26.memo)(PaginationComponent);
 var Pagination_default = Pagination2;
 
 // src/components/Table.tsx
@@ -8167,7 +8189,7 @@ var filterPresetsText = {
   nextMonth: "Next month",
   nextYear: "Next year"
 };
-var TableComponent = (0, import_react26.forwardRef)(function Table({
+var TableComponent = (0, import_react27.forwardRef)(function Table({
   name,
   columns,
   data,
@@ -8194,14 +8216,14 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { colorTheme } = useBetterHtmlContextInternal();
-  const filterModalRef = (0, import_react26.useRef)(null);
-  const readyColumns = (0, import_react26.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
-  const columnsRef = (0, import_react26.useRef)(readyColumns);
+  const filterModalRef = (0, import_react27.useRef)(null);
+  const readyColumns = (0, import_react27.useMemo)(() => columns.filter((column) => !column.hidden), [columns]);
+  const columnsRef = (0, import_react27.useRef)(readyColumns);
   columnsRef.current = readyColumns;
-  const [checkedItems, setCheckedItems] = (0, import_react26.useState)([]);
-  const [expandedRows, setExpandedRows] = (0, import_react26.useState)([]);
-  const [currentPage, setCurrentPage] = (0, import_react26.useState)(1);
-  const [filterData, setFilterData] = (0, import_react26.useState)(() => {
+  const [checkedItems, setCheckedItems] = (0, import_react27.useState)([]);
+  const [expandedRows, setExpandedRows] = (0, import_react27.useState)([]);
+  const [currentPage, setCurrentPage] = (0, import_react27.useState)(1);
+  const [filterData, setFilterData] = (0, import_react27.useState)(() => {
     if (!memoizeFilters || !name) return defaultFilterData ?? {};
     const localStorageData = JSON.parse(localStorage.getItem(`react-better-html-table-filters-${name}`) || "{}");
     const timestamp = localStorageData.timestamp;
@@ -8210,8 +8232,8 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     if (timeDiff > memoizeFiltersLifespan) return defaultFilterData ?? {};
     return data2;
   });
-  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react26.useState)();
-  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react26.useState)();
+  const [openedFilterColumnIndex, setOpenedFilterColumnIndex] = (0, import_react27.useState)();
+  const [filterListSelectedItems, setFilterListSelectedItems] = (0, import_react27.useState)();
   const openedFilterData = openedFilterColumnIndex !== void 0 ? filterData[openedFilterColumnIndex] : void 0;
   const openedFilterColumn = openedFilterColumnIndex !== void 0 ? readyColumns[openedFilterColumnIndex] : void 0;
   const filterForm = useForm({
@@ -8241,8 +8263,8 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
       filterModalRef.current?.close();
     }
   });
-  const expandColumn = (0, import_react26.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
-  const renderCellContent = (0, import_react26.useCallback)(
+  const expandColumn = (0, import_react27.useMemo)(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
+  const renderCellContent = (0, import_react27.useCallback)(
     (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
@@ -8297,7 +8319,7 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     },
     [theme2, checkedItems, expandedRows]
   );
-  const onClickRowElement = (0, import_react26.useCallback)(
+  const onClickRowElement = (0, import_react27.useCallback)(
     (item, index) => {
       if (expandColumn) {
         setExpandedRows((oldValue) => {
@@ -8314,14 +8336,14 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     },
     [onClickRow, expandColumn]
   );
-  const onClickAllCheckboxesElement = (0, import_react26.useCallback)(
+  const onClickAllCheckboxesElement = (0, import_react27.useCallback)(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const onClickFilterButton = (0, import_react26.useCallback)(
+  const onClickFilterButton = (0, import_react27.useCallback)(
     (columnIndex) => {
       const thisFilterData = filterData[columnIndex];
       if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
@@ -8337,12 +8359,12 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     },
     [filterData]
   );
-  const onCloseFilterModal = (0, import_react26.useCallback)(() => {
+  const onCloseFilterModal = (0, import_react27.useCallback)(() => {
     setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
     setFilterListSelectedItems(void 0);
     filterForm.reset();
   }, []);
-  const onClickCancelFormFilter = (0, import_react26.useCallback)(() => {
+  const onClickCancelFormFilter = (0, import_react27.useCallback)(() => {
     if (openedFilterColumnIndex === void 0) return;
     setFilterData(
       (oldValue) => Object.entries({
@@ -8355,7 +8377,7 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
-  const onClickFilterListItem = (0, import_react26.useCallback)(
+  const onClickFilterListItem = (0, import_react27.useCallback)(
     (value) => setFilterListSelectedItems((oldValue) => {
       if (!oldValue) return [value];
       if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
@@ -8363,7 +8385,7 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     }),
     []
   );
-  const onClickFilterPreset = (0, import_react26.useCallback)(
+  const onClickFilterPreset = (0, import_react27.useCallback)(
     (preset) => {
       const getValueForDate = (date) => {
         if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
@@ -8448,7 +8470,7 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     },
     [openedFilterColumn]
   );
-  const renderExpandedRow = (0, import_react26.useCallback)(
+  const renderExpandedRow = (0, import_react27.useCallback)(
     (...props2) => {
       const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
@@ -8456,7 +8478,7 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     },
     [readyColumns]
   );
-  const dataAfterFilter = (0, import_react26.useMemo)(
+  const dataAfterFilter = (0, import_react27.useMemo)(
     () => data.filter(
       (item) => Object.entries(filterData).every(([columnIndex, filter]) => {
         if (!filter) return true;
@@ -8477,7 +8499,7 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
           if (filter.min !== void 0 && minDate && itemValue < minDate) return false;
           if (filter.max !== void 0 && maxDate && itemValue > maxDate) return false;
         } else if (column.filter === "list" && filter.type === "list") {
-          const itemValue = column.getValueForList?.(item).value ?? (column.type === "text" && column.keyName ? String(item[column.keyName]) : "");
+          const itemValue = column.getItemValue?.(item) ?? (column.type === "text" && column.keyName ? String(item[column.keyName]) : "");
           if (!filter.list?.includes(itemValue)) return false;
         }
         return true;
@@ -8485,57 +8507,42 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     ),
     [data, filterData]
   );
-  const dataAfterPagination = (0, import_react26.useMemo)(() => {
+  const dataAfterPagination = (0, import_react27.useMemo)(() => {
     if (pageSize === void 0) return dataAfterFilter;
     if (pageCount !== void 0) return dataAfterFilter;
     const pageStartItemIndex = (currentPage - 1) * (pageSize ?? 0);
     const pageEndItemIndex = pageStartItemIndex + (pageSize ?? 0);
     return dataAfterFilter.slice(pageStartItemIndex, pageEndItemIndex);
   }, [dataAfterFilter, pageSize, currentPage, pageCount]);
-  const everythingIsChecked = (0, import_react26.useMemo)(() => {
+  const everythingIsChecked = (0, import_react27.useMemo)(() => {
     return data.length > 0 && checkedItems.every((checked) => checked) && checkedItems.length === data.length;
   }, [data, checkedItems]);
-  const possibleFilterListValues = (0, import_react26.useMemo)(() => {
-    if (!openedFilterColumn) return [];
-    return data.reduce((previousValue, currentValue) => {
-      const valueFromList = openedFilterColumn.filter === "list" && openedFilterColumn.getValueForList ? openedFilterColumn.getValueForList(currentValue) : void 0;
-      const value = valueFromList ? valueFromList.value : openedFilterColumn.type === "text" && openedFilterColumn.keyName ? String(currentValue[openedFilterColumn.keyName]) : void 0;
-      const label = valueFromList ? valueFromList.label : value;
-      let searchPassed = openedFilterColumn.filter === "list" && openedFilterColumn.withSearch ? false : true;
-      if (openedFilterColumn.filter === "list" && openedFilterColumn.withSearch) {
-        searchPassed = label?.toString().toLowerCase().includes(filterForm.values.search.toLowerCase()) ?? false;
-      }
-      if (value !== void 0 && value !== null && value !== "" && searchPassed) {
-        if (previousValue.some((item) => item.value === value)) {
-          previousValue = previousValue.map(
-            (item) => item.value === value ? {
-              ...item,
-              count: item.count + 1
-            } : item
-          );
-        } else
-          previousValue.push({
-            label: label?.toString() ?? "",
-            value,
-            count: 1
-          });
-      }
-      return previousValue;
-    }, []);
+  const possibleFilterListValues = (0, import_react27.useMemo)(() => {
+    if (!openedFilterColumn || openedFilterColumn.filter !== "list") return [];
+    return openedFilterColumn.list.map((item) => ({
+      ...item,
+      count: data.reduce((previousValue, currentValue) => {
+        const value = openedFilterColumn.getItemValue?.(currentValue) ?? (openedFilterColumn.type === "text" && openedFilterColumn.keyName ? String(currentValue[openedFilterColumn.keyName]) : "");
+        return previousValue + (item.value === value ? 1 : 0);
+      }, 0)
+    })).reduce(
+      (previousValue, currentValue) => !previousValue.some((item) => item.value === currentValue.value) ? [...previousValue, currentValue] : previousValue,
+      []
+    );
   }, [data, openedFilterColumn, filterForm.values.search]);
   const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
-  const onClickSelectAllFilterListItems = (0, import_react26.useCallback)(
+  const onClickSelectAllFilterListItems = (0, import_react27.useCallback)(
     () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
     [possibleFilterListValues]
   );
-  const onClickDeselectAllFilterListItems = (0, import_react26.useCallback)(() => setFilterListSelectedItems([]), []);
-  (0, import_react26.useEffect)(() => {
+  const onClickDeselectAllFilterListItems = (0, import_react27.useCallback)(() => setFilterListSelectedItems([]), []);
+  (0, import_react27.useEffect)(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     onChangeFilter?.(filterData);
   }, [onChangeFilter, filterData]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!memoizeFilters) return;
     if (!name) return;
     localStorage.setItem(
@@ -8546,10 +8553,10 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
       })
     );
   }, [memoizeFilters, name, filterData]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
-  (0, import_react26.useImperativeHandle)(
+  (0, import_react27.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -8621,28 +8628,31 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react26.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  "tr",
-                  {
-                    className: isInsideTableExpandRow && onClickRow === void 0 && expandColumn === void 0 ? "withoutHover" : void 0,
-                    style: getRowStyle?.(item, rowIndex),
-                    onClick: () => onClickRowElement(item, rowIndex),
-                    children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                      TdStyledComponent,
-                      {
-                        textAlign: column.align,
-                        onClick: (event) => {
-                          if (column.clickStopPropagation) event.stopPropagation();
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => {
+                const realRowIndex = rowIndex + (pageSize ? (currentPage - 1) * pageSize : 0);
+                return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react27.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    "tr",
+                    {
+                      className: isInsideTableExpandRow && onClickRow === void 0 && expandColumn === void 0 ? "withoutHover" : void 0,
+                      style: getRowStyle?.(item, realRowIndex),
+                      onClick: () => onClickRowElement(item, realRowIndex),
+                      children: readyColumns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        TdStyledComponent,
+                        {
+                          textAlign: column.align,
+                          onClick: (event) => {
+                            if (column.clickStopPropagation) event.stopPropagation();
+                          },
+                          children: renderCellContent(column, item, realRowIndex)
                         },
-                        children: renderCellContent(column, item, rowIndex)
-                      },
-                      column.type + column.label + colIndex
-                    ))
-                  }
-                ),
-                expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, rowIndex) }) })
-              ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
+                        column.type + column.label + colIndex
+                      ))
+                    }
+                  ),
+                  expandedRows[realRowIndex] && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: renderExpandedRow(item, realRowIndex) }) })
+                ] }, JSON.stringify(item) + realRowIndex);
+              }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "noData", colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
               withFooter && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { colSpan: readyColumns.length, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 Div_default.column,
                 {
@@ -8811,11 +8821,11 @@ var TableComponent = (0, import_react26.forwardRef)(function Table({
     )
   ] });
 });
-var Table2 = (0, import_react26.memo)(TableComponent);
+var Table2 = (0, import_react27.memo)(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var tooltipContainerStyle = (props) => ({
@@ -8919,10 +8929,10 @@ var arrowStyle = (props, borderWidth) => ({
     transform: !borderWidth && props.align === "center" ? "translateY(-50%);" : void 0
   }
 });
-var Arrow = (0, import_react27.memo)(function Arrow2(props) {
+var Arrow = (0, import_react28.memo)(function Arrow2(props) {
   const theme2 = useTheme();
   const { position, size } = props;
-  const outerProps = (0, import_react27.useMemo)(
+  const outerProps = (0, import_react28.useMemo)(
     () => ({
       ...props,
       color: theme2.colors.border
@@ -8951,7 +8961,7 @@ var Arrow = (0, import_react27.memo)(function Arrow2(props) {
     }
   );
 });
-var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
+var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
   position = "bottom",
   trigger = "hover",
   align = "center",
@@ -8972,17 +8982,17 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
   children
 }, ref) {
   const theme2 = useTheme();
-  const triggerHolderRef = (0, import_react27.useRef)(null);
-  const contentRef = (0, import_react27.useRef)(null);
-  const tooltipContainerRef = (0, import_react27.useRef)(null);
-  const closeTimerRef = (0, import_react27.useRef)(void 0);
-  const [isOpen, setIsOpen] = (0, import_react27.useState)(false);
-  const [isOpenLate, setIsOpenLate] = (0, import_react27.useState)(false);
+  const triggerHolderRef = (0, import_react28.useRef)(null);
+  const contentRef = (0, import_react28.useRef)(null);
+  const tooltipContainerRef = (0, import_react28.useRef)(null);
+  const closeTimerRef = (0, import_react28.useRef)(void 0);
+  const [isOpen, setIsOpen] = (0, import_react28.useState)(false);
+  const [isOpenLate, setIsOpenLate] = (0, import_react28.useState)(false);
   const arrowSize = withArrow ? theme2.styles.gap : 0;
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
-  const openTooltip = (0, import_react27.useCallback)(() => {
+  const openTooltip = (0, import_react28.useCallback)(() => {
     if (disabled) return;
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
@@ -9007,18 +9017,18 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
     }, 1);
     onOpen?.();
   }, [disabled, onOpen, outsideScreenGap, totalGap]);
-  const closeTooltip = (0, import_react27.useCallback)(() => {
+  const closeTooltip = (0, import_react28.useCallback)(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
     onClose?.();
   }, [onClose]);
-  const onMouseEnter = (0, import_react27.useCallback)(() => {
+  const onMouseEnter = (0, import_react28.useCallback)(() => {
     if (trigger === "hover") openTooltip();
   }, [trigger, openTooltip]);
-  const onMouseLeave = (0, import_react27.useCallback)(() => {
+  const onMouseLeave = (0, import_react28.useCallback)(() => {
     if (trigger === "hover") closeTooltip();
   }, [trigger, closeTooltip]);
-  const onClickHolder = (0, import_react27.useCallback)(
+  const onClickHolder = (0, import_react28.useCallback)(
     (event) => {
       if (trigger === "click") {
         if (!isOpen) openTooltip();
@@ -9027,7 +9037,7 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
     },
     [trigger, openTooltip, isOpen, closeTooltip]
   );
-  const onClickOutside = (0, import_react27.useCallback)(
+  const onClickOutside = (0, import_react28.useCallback)(
     (event) => {
       if (!isOpen) return;
       if (trigger !== "click") return;
@@ -9037,7 +9047,7 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
       return () => {
@@ -9045,11 +9055,11 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
       };
     }
   }, [trigger, onClickOutside]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
-  (0, import_react27.useImperativeHandle)(
+  (0, import_react28.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -9140,7 +9150,7 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
     }
   );
 });
-TooltipComponent.item = (0, import_react27.forwardRef)(function Item({
+TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
   icon,
   iconColor,
   text,
@@ -9181,11 +9191,11 @@ TooltipComponent.item = (0, import_react27.forwardRef)(function Item({
     }
   );
 });
-TooltipComponent.divider = (0, import_react27.forwardRef)(function DividerComponent(props, ref) {
+TooltipComponent.divider = (0, import_react28.forwardRef)(function DividerComponent(props, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
 });
-TooltipComponent.sectionTitle = (0, import_react27.forwardRef)(function SectionTitle({ text, ...props }, ref) {
+TooltipComponent.sectionTitle = (0, import_react28.forwardRef)(function SectionTitle({ text, ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Text_default,
@@ -9201,26 +9211,26 @@ TooltipComponent.sectionTitle = (0, import_react27.forwardRef)(function SectionT
     }
   );
 });
-var Tooltip2 = (0, import_react27.memo)(TooltipComponent);
+var Tooltip2 = (0, import_react28.memo)(TooltipComponent);
 Tooltip2.item = TooltipComponent.item;
 Tooltip2.divider = TooltipComponent.divider;
 Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = useTheme();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const { colorTheme, componentsState } = useBetterHtmlContextInternal();
-  const firstRenderPassedRef = (0, import_react28.useRef)(false);
-  const tabsRef = (0, import_react28.useRef)({});
-  const [selectedTab, setSelectedTab] = (0, import_react28.useState)(() => {
+  const firstRenderPassedRef = (0, import_react29.useRef)(false);
+  const tabsRef = (0, import_react29.useRef)({});
+  const [selectedTab, setSelectedTab] = (0, import_react29.useState)(() => {
     const selectedTabValue = tabs[0] ?? "";
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
@@ -9229,9 +9239,9 @@ var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, a
     }
     return selectedTabValue;
   });
-  const [rerenderState, setRerenderState] = (0, import_react28.useState)(0);
+  const [rerenderState, setRerenderState] = (0, import_react29.useState)(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
-  const onClickTab = (0, import_react28.useCallback)(
+  const onClickTab = (0, import_react29.useCallback)(
     (tab) => {
       setSelectedTab(tab);
       onChange?.(tab);
@@ -9243,11 +9253,11 @@ var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, a
     },
     [onChange, name, urlQuery]
   );
-  const width = (0, import_react28.useMemo)(
+  const width = (0, import_react29.useMemo)(
     () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
     [rerenderState, selectedTab]
   );
-  const leftSpacing = (0, import_react28.useMemo)(() => {
+  const leftSpacing = (0, import_react29.useMemo)(() => {
     const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
@@ -9255,7 +9265,7 @@ var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, a
     });
     return spacing;
   }, [selectedTab, tabs, tabsGap]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
       firstRenderPassedRef.current = true;
@@ -9264,7 +9274,7 @@ var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, a
       clearTimeout(timeout);
     };
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     componentsState.tabs.setTabGroups((oldValue) => {
       const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
       if (thisTabGroup) {
@@ -9285,20 +9295,20 @@ var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, a
       }
     });
   }, [selectedTab, name]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     tabsRef.current[selectedTab]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
   }, [selectedTab]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     return () => {
       componentsState.tabs.setTabGroups(
         (oldValue) => oldValue.filter((item) => item.name !== (name ?? defaultTabName))
       );
     };
   }, []);
-  (0, import_react28.useImperativeHandle)(
+  (0, import_react29.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -9379,11 +9389,11 @@ var TabsComponent = (0, import_react28.forwardRef)(function Tabs({ tabs, name, a
 });
 TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isInitialTab, children }) {
   const { componentsState } = useBetterHtmlContextInternal();
-  const thisTabGroupData = (0, import_react28.useMemo)(
+  const thisTabGroupData = (0, import_react29.useMemo)(
     () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
     [componentsState.tabs, tabsGroupName]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (tabWithDot) {
       componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
     } else {
@@ -9394,16 +9404,16 @@ TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, isIni
   }, [tabWithDot]);
   return (thisTabGroupData ? thisTabGroupData.selectedTab === tab : isInitialTab) ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default, { width: "100%", children }) : void 0;
 };
-var Tabs2 = (0, import_react28.memo)(TabsComponent);
+var Tabs2 = (0, import_react29.memo)(TabsComponent);
 Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
-var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
+var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
@@ -9423,23 +9433,23 @@ var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const bodyRef = (0, import_react29.useRef)(null);
+  const bodyRef = (0, import_react30.useRef)(null);
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
-  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react29.useState)();
+  const [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react30.useState)();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = (0, import_react29.useCallback)(() => {
+  const open = (0, import_react30.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = (0, import_react29.useCallback)(() => {
+  const close = (0, import_react30.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = (0, import_react29.useCallback)(() => {
+  const toggleOpen = (0, import_react30.useCallback)(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!bodyRef.current) return;
     const body = bodyRef.current;
     setBodyVirtualHeight(body.scrollHeight * 2);
@@ -9450,7 +9460,7 @@ var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
       clearTimeout(timeout);
     };
   }, [isOpen]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!isOpen) return;
     if (!bodyRef.current) return;
     const observer = new ResizeObserver(() => {
@@ -9462,7 +9472,7 @@ var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
       observer.disconnect();
     };
   }, [isOpen]);
-  (0, import_react29.useImperativeHandle)(
+  (0, import_react30.useImperativeHandle)(
     ref,
     () => {
       return {
@@ -9534,7 +9544,7 @@ var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
     )
   ] });
 });
-FoldableComponent.box = (0, import_react29.forwardRef)(function Box3({ ...props }, ref) {
+FoldableComponent.box = (0, import_react30.forwardRef)(function Box3({ ...props }, ref) {
   const theme2 = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     FoldableComponent,
@@ -9549,23 +9559,23 @@ FoldableComponent.box = (0, import_react29.forwardRef)(function Box3({ ...props
     }
   );
 });
-var Foldable2 = (0, import_react29.memo)(FoldableComponent);
+var Foldable2 = (0, import_react30.memo)(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var sideMenuContext = (0, import_react30.createContext)(void 0);
+var sideMenuContext = (0, import_react31.createContext)(void 0);
 var SideMenuContextProvider = sideMenuContext.Provider;
 var useSideMenuContext = () => {
-  const context = (0, import_react30.useContext)(sideMenuContext);
+  const context = (0, import_react31.useContext)(sideMenuContext);
   if (!context) {
     throw new Error("`useSideMenuContext` must be used within a `<SideMenuContextProvider>` component");
   }
   return context;
 };
-var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
+var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -9580,7 +9590,7 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
   const { activeItem, setActiveItem } = useSideMenuContext();
   const [isOpened, setIsOpened] = useBooleanState();
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
-  const onClickElement = (0, import_react30.useCallback)(() => {
+  const onClickElement = (0, import_react31.useCallback)(() => {
     if (item.disabled) return;
     if (!item.children) setActiveItem((oldValue) => oldValue?.href === item.href ? oldValue : void 0);
     if (item.children) {
@@ -9657,7 +9667,7 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
       )
     }
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!item.href) return;
     const isActive2 = location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/";
     if (!isActive2) return;
@@ -9668,14 +9678,14 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
       } : void 0
     );
   }, [location.pathname]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
       (child) => child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false
     );
     setIsOpened.setState(toBeOpened);
   }, [item]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!isCollapsed) return;
     setIsOpened.setFalse();
   }, [isCollapsed]);
@@ -9765,13 +9775,13 @@ var SideMenuComponent = function SideMenu({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
-  const [activeItem, setActiveItem] = (0, import_react30.useState)();
-  const onClickXButton = (0, import_react30.useCallback)(() => {
+  const [activeItem, setActiveItem] = (0, import_react31.useState)();
+  const onClickXButton = (0, import_react31.useCallback)(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
-  const readyItems = (0, import_react30.useMemo)(() => items.filter((item) => !item.hidden), [items]);
-  const readyBottomItems = (0, import_react30.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
-  const contextValue = (0, import_react30.useMemo)(
+  const readyItems = (0, import_react31.useMemo)(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = (0, import_react31.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const contextValue = (0, import_react31.useMemo)(
     () => ({
       activeItem,
       setActiveItem
@@ -10036,7 +10046,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
     }
   );
 };
-var SideMenu2 = (0, import_react30.memo)(SideMenuComponent);
+var SideMenu2 = (0, import_react31.memo)(SideMenuComponent);
 SideMenu2.pageHolder = SideMenuComponent.pageHolder;
 SideMenu2.burgerButton = SideMenuComponent.burgerButton;
 var SideMenu_default = SideMenu2;