react-better-html 1.1.207 → 1.1.209

package/dist/index.mjs

@@ -1825,7 +1825,18 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, bac
       ...props,
       children: /* @__PURE__ */ jsx4(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
     }
-  ) : /* @__PURE__ */ jsx4(Image, { width: size, height: size, borderRadius: 999, objectFit: "cover", ref, ...props });
+  ) : /* @__PURE__ */ jsx4(
+    Image,
+    {
+      width: size,
+      height: size,
+      border: `solid 1px ${theme2.colors.border}`,
+      borderRadius: 999,
+      objectFit: "cover",
+      ref,
+      ...props
+    }
+  );
 });
 var MemoizedImage = memo4(Image);
 MemoizedImage.profileImage = Image.profileImage;
@@ -3816,7 +3827,7 @@ PageHolder2.center = PageHolderComponent.center;
 var PageHolder_default = PageHolder2;
 
 // src/components/Chip.tsx
-import { forwardRef as forwardRef9, memo as memo14 } from "react";
+import { forwardRef as forwardRef9, memo as memo14, useCallback as useCallback7 } from "react";
 
 // src/utils/colorManipulation.ts
 var rgbToHsl = (r, g, b) => {
@@ -3938,8 +3949,25 @@ var desaturateColor = (hexColor, amount) => {
 
 // src/components/Chip.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var ChipComponent = forwardRef9(function Chip({ text, color, backgroundColor, borderRadius, isCircle, ...props }, ref) {
+var ChipComponent = forwardRef9(function Chip({
+  text,
+  color,
+  backgroundColor,
+  borderRadius,
+  isCircle,
+  value,
+  onClick,
+  onClickWithValue,
+  ...props
+}, ref) {
   const theme2 = useTheme();
+  const onClickElement = useCallback7(
+    (event) => {
+      onClick?.(event);
+      onClickWithValue?.(value);
+    },
+    [onClick, onClickWithValue, value]
+  );
   return /* @__PURE__ */ jsx14(
     Div_default,
     {
@@ -3948,6 +3976,7 @@ var ChipComponent = forwardRef9(function Chip({ text, color, backgroundColor, bo
       borderRadius: isCircle ? 999 : borderRadius ?? theme2.styles.borderRadius / 1.3,
       paddingBlock: theme2.styles.gap / 2,
       paddingInline: theme2.styles.space / 1.5,
+      onClick: onClickElement,
       ...props,
       ref,
       children: /* @__PURE__ */ jsx14(Text_default, { color: color ?? theme2.colors.textPrimary, children: text })
@@ -3974,7 +4003,7 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback9, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
+import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback10, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
 import styled10 from "styled-components";
 
 // src/constants/countries.ts
@@ -5691,7 +5720,7 @@ function Label({ text, required, isError, color, htmlFor }) {
 var Label_default = memo15(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef10, Fragment as Fragment3, memo as memo16, useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { forwardRef as forwardRef10, Fragment as Fragment3, memo as memo16, useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var DropdownComponent = forwardRef10(function Dropdown({
   label,
@@ -5744,7 +5773,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
       (option) => option.label.toLowerCase().includes(query) || option.searchValues?.some((value2) => value2.toLowerCase().includes(query))
     );
   }, [options, searchQuery]);
-  const onKeyDownInputField = useCallback7(
+  const onKeyDownInputField = useCallback8(
     (event) => {
       if (event.key === "Enter" || !withSearch && event.key === " ") {
         event.preventDefault();
@@ -5797,7 +5826,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
       withMultiselect
     ]
   );
-  const onClickOption = useCallback7(
+  const onClickOption = useCallback8(
     (option) => {
       if (!option.disabled) {
         const clickedValue = option.value;
@@ -5812,7 +5841,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
     },
     [onChange, internalValue, controlledValue, withMultiselect]
   );
-  const onClickClearButton = useCallback7(
+  const onClickClearButton = useCallback8(
     (event) => {
       event.stopPropagation();
       setInternalValue(void 0);
@@ -5824,7 +5853,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
     },
     [onChange]
   );
-  const onChangeValue = useCallback7(
+  const onChangeValue = useCallback8(
     (newValue) => {
       setSearchQuery(newValue);
       if (withDebounce) setDebouncedSearchQuery(newValue);
@@ -6044,7 +6073,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
 });
 DropdownComponent.countries = forwardRef10(function Countries({ ...props }, ref) {
   const theme2 = useTheme();
-  const renderOption = useCallback7(
+  const renderOption = useCallback8(
     (option, index, isSelected) => /* @__PURE__ */ jsxs11(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 })
@@ -6079,7 +6108,7 @@ Dropdown2.countries = DropdownComponent.countries;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-import { useCallback as useCallback8, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7, useId } from "react";
+import { useCallback as useCallback9, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7, useId } from "react";
 import styled9 from "styled-components";
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
@@ -6137,19 +6166,19 @@ function Calendar({ value, minDate, maxDate, onChange }) {
   const [currentMonth, setCurrentMonth] = useState6(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
   const [currentYear, setCurrentYear] = useState6(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
   const daysInMonth = useMemo5(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
-  const onClickPreviousMonthButton = useCallback8(() => {
+  const onClickPreviousMonthButton = useCallback9(() => {
     const newMonth = currentMonth === 0 ? 11 : currentMonth - 1;
     const newYear = currentMonth === 0 ? currentYear - 1 : currentYear;
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
-  const onClickNextMonthButton = useCallback8(() => {
+  const onClickNextMonthButton = useCallback9(() => {
     const newMonth = currentMonth === 11 ? 0 : currentMonth + 1;
     const newYear = currentMonth === 11 ? currentYear + 1 : currentYear;
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
-  const onClickDay = useCallback8(
+  const onClickDay = useCallback9(
     (day) => {
       if (!day) return;
       const newDate = new Date(currentYear, currentMonth, day);
@@ -6160,18 +6189,18 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     },
     [currentMonth, currentYear, onChange]
   );
-  const onClickClear = useCallback8(() => {
+  const onClickClear = useCallback9(() => {
     setCurrentDate(void 0);
     onChange?.(void 0);
   }, []);
-  const onClickToday = useCallback8(() => {
+  const onClickToday = useCallback9(() => {
     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 = useCallback8((event) => {
+  const onChangeYearSelect = useCallback9((event) => {
     setCurrentYear(parseInt(event.target.value));
   }, []);
   const firstDayOfMonth = useMemo5(() => {
@@ -6498,7 +6527,7 @@ var InputFieldComponent = forwardRef11(function InputField({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = useCallback9(
+  const onChangeElement = useCallback10(
     (event) => {
       const newValue = event.target.value;
       if (withDebounce) {
@@ -6644,7 +6673,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = useCallback9(
+  const onChangeElement = useCallback10(
     (event) => {
       onChange?.(event);
       onChangeValue?.(event.target.value);
@@ -6752,28 +6781,28 @@ InputFieldComponent.password = forwardRef11(function Password({ ...props }, ref)
 InputFieldComponent.search = forwardRef11(function Search({ value, onChangeValue, onFocus, onBlur, ...props }, ref) {
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const [inputFieldFocused, setInputFieldFocused] = useBooleanState();
-  const onChangeValueElement = useCallback9(
+  const onChangeValueElement = useCallback10(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
     },
     [onChangeValue]
   );
-  const onFocusElement = useCallback9(
+  const onFocusElement = useCallback10(
     (event) => {
       setInputFieldFocused.setTrue();
       onFocus?.(event);
     },
     [onFocus]
   );
-  const onBlurElement = useCallback9(
+  const onBlurElement = useCallback10(
     (event) => {
       setTimeout(() => setInputFieldFocused.setFalse(), 0.1 * 1e3);
       onBlur?.(event);
     },
     [onBlur]
   );
-  const onClickRightIcon = useCallback9(() => {
+  const onClickRightIcon = useCallback10(() => {
     onChangeValueElement("");
   }, [onChangeValueElement]);
   return /* @__PURE__ */ jsx17(
@@ -6797,21 +6826,21 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber({ label, val
   const internalId = useId2();
   const [dropdownValue, setDropdownValue] = useState7();
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
-  const renderOption = useCallback9(
+  const renderOption = useCallback10(
     (option, index, isSelected) => /* @__PURE__ */ jsxs13(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx17(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx17(Text_default, { children: option.label })
     ] }),
     []
   );
-  const onChangeDropdown = useCallback9(
+  const onChangeDropdown = useCallback10(
     (value2) => {
       setDropdownValue(value2);
       onChangeValue?.(value2 ? `+${value2}${inputFieldValue}` : inputFieldValue);
     },
     [onChangeValue, inputFieldValue]
   );
-  const onChangeValueElement = useCallback9(
+  const onChangeValueElement = useCallback10(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
       setInputFieldValue(readyValue);
@@ -6900,7 +6929,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...pr
   const holderRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = useCallback9(
+  const onChange = useCallback10(
     (date) => {
       inputFieldProps.onChangeValue?.(date ?? "");
       setInternalValue(date ?? "");
@@ -6941,7 +6970,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
   const selectedMinuteRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = useCallback9(
+  const onChange = useCallback10(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
       inputFieldProps.onChangeValue?.(newValue);
@@ -6949,7 +6978,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
     },
     [internalValue, defaultTimeAfterDatePick, inputFieldProps.onChangeValue]
   );
-  const onClickHour = useCallback9(
+  const onClickHour = useCallback10(
     (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")}`;
@@ -6959,7 +6988,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
     },
     [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = useCallback9(
+  const onClickMinute = useCallback10(
     (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")}`;
@@ -7095,7 +7124,7 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
   const selectedMinuteRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onClickHour = useCallback9(
+  const onClickHour = useCallback10(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       inputFieldProps.onChangeValue?.(value);
@@ -7103,7 +7132,7 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = useCallback9(
+  const onClickMinute = useCallback10(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       inputFieldProps.onChangeValue?.(value);
@@ -7212,7 +7241,7 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
 });
 InputFieldComponent.color = forwardRef11(function Color2({ value, onChangeValue, ...props }, ref) {
   const [inputFieldValue, setInputFieldValue] = useState7(value ?? "#000000");
-  const onChangeValueElement = useCallback9(
+  const onChangeValueElement = useCallback10(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
@@ -7261,7 +7290,7 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback10, useId as useId3, useState as useState8 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback11, useId as useId3, useState as useState8 } from "react";
 import styled11 from "styled-components";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var componentSize = 26;
@@ -7379,7 +7408,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
   const [internalChecked, setInternalChecked] = useState8(false);
-  const onChangeElement = useCallback10(
+  const onChangeElement = useCallback11(
     (event) => {
       const newIsChecked = event.target.checked;
       if (controlledChecked === void 0) setInternalChecked(newIsChecked);
@@ -7388,7 +7417,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
     [onChange, controlledChecked, value]
   );
   const checked = controlledChecked ?? internalChecked;
-  const onClickText = useCallback10(() => {
+  const onClickText = useCallback11(() => {
     const newIsChecked = !checked;
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
@@ -7498,7 +7527,7 @@ var ToggleInput_default = {
     const [internalChecked, setInternalChecked] = useBooleanState();
     const [isMouseDown, setIsMouseDown] = useBooleanState();
     const checked = controlledChecked ?? internalChecked;
-    const onClickElement = useCallback10(() => {
+    const onClickElement = useCallback11(() => {
       if (disabled) return;
       const newIsChecked = !checked;
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
@@ -7775,7 +7804,7 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 import {
   forwardRef as forwardRef15,
   memo as memo23,
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useMemo as useMemo9,
   useState as useState10,
   useImperativeHandle as useImperativeHandle2,
@@ -7786,7 +7815,7 @@ import {
 import styled12, { css as css2 } from "styled-components";
 
 // src/components/Pagination.tsx
-import { memo as memo22, useCallback as useCallback11, useEffect as useEffect10, useMemo as useMemo8, useState as useState9 } from "react";
+import { memo as memo22, useCallback as useCallback12, useEffect as useEffect10, useMemo as useMemo8, useState as useState9 } from "react";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var PaginationComponent = function Pagination({
   currentPage = 1,
@@ -7802,12 +7831,12 @@ var PaginationComponent = function Pagination({
   const mediaQuery = useMediaQuery();
   const [currentPageInternal, setCurrentPage] = useState9(currentPage);
   const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
-  const onClickPreviousPageElement = useCallback11(() => {
+  const onClickPreviousPageElement = useCallback12(() => {
     const newPage = currentPageInternal <= 1 ? 1 : currentPageInternal - 1;
     setCurrentPage(newPage);
     onClickPreviousPage?.(newPage);
   }, [currentPageInternal, onClickPreviousPage]);
-  const onClickNextPageElement = useCallback11(() => {
+  const onClickNextPageElement = useCallback12(() => {
     const newPage = currentPageInternal >= pageCountInternal ? pageCountInternal : currentPageInternal + 1;
     setCurrentPage(newPage);
     onClickNextPage?.(newPage);
@@ -8118,7 +8147,7 @@ var TableComponent = forwardRef15(function Table({
     }
   });
   const expandColumn = useMemo9(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
-  const renderCellContent = useCallback12(
+  const renderCellContent = useCallback13(
     (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
@@ -8173,7 +8202,7 @@ var TableComponent = forwardRef15(function Table({
     },
     [theme2, checkedItems, expandedRows]
   );
-  const onClickRowElement = useCallback12(
+  const onClickRowElement = useCallback13(
     (item, index) => {
       if (expandColumn) {
         setExpandedRows((oldValue) => {
@@ -8190,14 +8219,14 @@ var TableComponent = forwardRef15(function Table({
     },
     [onClickRow, expandColumn]
   );
-  const onClickAllCheckboxesElement = useCallback12(
+  const onClickAllCheckboxesElement = useCallback13(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const onClickFilterButton = useCallback12(
+  const onClickFilterButton = useCallback13(
     (columnIndex) => {
       const thisFilterData = filterData[columnIndex];
       if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
@@ -8213,12 +8242,12 @@ var TableComponent = forwardRef15(function Table({
     },
     [filterData]
   );
-  const onCloseFilterModal = useCallback12(() => {
+  const onCloseFilterModal = useCallback13(() => {
     setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
     setFilterListSelectedItems(void 0);
     filterForm.reset();
   }, []);
-  const onClickCancelFormFilter = useCallback12(() => {
+  const onClickCancelFormFilter = useCallback13(() => {
     if (openedFilterColumnIndex === void 0) return;
     setFilterData(
       (oldValue) => Object.entries({
@@ -8231,7 +8260,7 @@ var TableComponent = forwardRef15(function Table({
     );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
-  const onClickFilterListItem = useCallback12(
+  const onClickFilterListItem = useCallback13(
     (value) => setFilterListSelectedItems((oldValue) => {
       if (!oldValue) return [value];
       if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
@@ -8239,7 +8268,7 @@ var TableComponent = forwardRef15(function Table({
     }),
     []
   );
-  const onClickFilterPreset = useCallback12(
+  const onClickFilterPreset = useCallback13(
     (preset) => {
       const getValueForDate = (date) => {
         if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
@@ -8324,7 +8353,7 @@ var TableComponent = forwardRef15(function Table({
     },
     [openedFilterColumn]
   );
-  const renderExpandedRow = useCallback12(
+  const renderExpandedRow = useCallback13(
     (...props2) => {
       const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
@@ -8400,11 +8429,11 @@ var TableComponent = forwardRef15(function Table({
     }, []);
   }, [data, openedFilterColumn, filterForm.values.search]);
   const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
-  const onClickSelectAllFilterListItems = useCallback12(
+  const onClickSelectAllFilterListItems = useCallback13(
     () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
     [possibleFilterListValues]
   );
-  const onClickDeselectAllFilterListItems = useCallback12(() => setFilterListSelectedItems([]), []);
+  const onClickDeselectAllFilterListItems = useCallback13(() => setFilterListSelectedItems([]), []);
   useEffect11(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
@@ -8691,7 +8720,7 @@ var Table2 = memo23(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-import { memo as memo24, useCallback as useCallback13, useRef as useRef7, useState as useState11, useEffect as useEffect12, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
+import { memo as memo24, useCallback as useCallback14, useRef as useRef7, useState as useState11, useEffect as useEffect12, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
 import styled13, { css as css3 } from "styled-components";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
@@ -8858,7 +8887,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
-  const openTooltip = useCallback13(() => {
+  const openTooltip = useCallback14(() => {
     if (disabled) return;
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
@@ -8883,18 +8912,18 @@ var TooltipComponent = forwardRef16(function Tooltip({
     }, 1);
     onOpen?.();
   }, [disabled, onOpen, outsideScreenGap, totalGap]);
-  const closeTooltip = useCallback13(() => {
+  const closeTooltip = useCallback14(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
     onClose?.();
   }, [onClose]);
-  const onMouseEnter = useCallback13(() => {
+  const onMouseEnter = useCallback14(() => {
     if (trigger === "hover") openTooltip();
   }, [trigger, openTooltip]);
-  const onMouseLeave = useCallback13(() => {
+  const onMouseLeave = useCallback14(() => {
     if (trigger === "hover") closeTooltip();
   }, [trigger, closeTooltip]);
-  const onClickHolder = useCallback13(
+  const onClickHolder = useCallback14(
     (event) => {
       if (trigger === "click") {
         if (!isOpen) openTooltip();
@@ -8903,7 +8932,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, openTooltip, isOpen, closeTooltip]
   );
-  const onClickOutside = useCallback13(
+  const onClickOutside = useCallback14(
     (event) => {
       if (!isOpen) return;
       if (trigger !== "click") return;
@@ -9084,7 +9113,7 @@ Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback14, useEffect as useEffect13, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState12 } from "react";
+import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback15, useEffect as useEffect13, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState12 } from "react";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
@@ -9107,7 +9136,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   });
   const [rerenderState, setRerenderState] = useState12(0);
   const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
-  const onClickTab = useCallback14(
+  const onClickTab = useCallback15(
     (tab) => {
       setSelectedTab(tab);
       onChange?.(tab);
@@ -9275,7 +9304,7 @@ Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback15, useEffect as useEffect14, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState13 } from "react";
+import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback16, useEffect as useEffect14, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState13 } from "react";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
 var animationDurationOpen = animationDurationClose * 2;
@@ -9303,15 +9332,15 @@ var FoldableComponent = forwardRef18(function Foldable({
   const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
   const [bodyVirtualHeight, setBodyVirtualHeight] = useState13();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = useCallback15(() => {
+  const open = useCallback16(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = useCallback15(() => {
+  const close = useCallback16(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = useCallback15(() => {
+  const toggleOpen = useCallback16(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
@@ -9430,7 +9459,7 @@ Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-import { createContext as createContext2, memo as memo27, useCallback as useCallback16, useContext as useContext2, useEffect as useEffect15, useMemo as useMemo12, useState as useState14 } from "react";
+import { createContext as createContext2, memo as memo27, useCallback as useCallback17, useContext as useContext2, useEffect as useEffect15, useMemo as useMemo12, useState as useState14 } from "react";
 import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var sideMenuContext = createContext2(void 0);
 var SideMenuContextProvider = sideMenuContext.Provider;
@@ -9456,7 +9485,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
   const { activeItem, setActiveItem } = useSideMenuContext();
   const [isOpened, setIsOpened] = useBooleanState();
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
-  const onClickElement = useCallback16(() => {
+  const onClickElement = useCallback17(() => {
     if (item.disabled) return;
     if (!item.children) setActiveItem((oldValue) => oldValue?.href === item.href ? oldValue : void 0);
     if (item.children) {
@@ -9642,7 +9671,7 @@ var SideMenuComponent = function SideMenu({
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [activeItem, setActiveItem] = useState14();
-  const onClickXButton = useCallback16(() => {
+  const onClickXButton = useCallback17(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
   const readyItems = useMemo12(() => items.filter((item) => !item.hidden), [items]);