react-better-html 1.1.278 → 1.1.280

package/dist/index.mjs

@@ -26,7 +26,7 @@ import {
 } from "react-better-core";
 
 // src/components/BetterHtmlProvider.tsx
-import { createContext, memo as memo12, useCallback as useCallback6, useContext, useEffect as useEffect6, useMemo as useMemo3, useState as useState4 } from "react";
+import { createContext, memo as memo12, useCallback as useCallback7, useContext, useEffect as useEffect6, useMemo as useMemo3, useState as useState4 } from "react";
 import {
   useBooleanState as useBooleanState3,
   colorThemeControls,
@@ -129,7 +129,7 @@ import { memo as memo11 } from "react";
 import { useTheme as useTheme12 } from "react-better-core";
 
 // src/components/Div.tsx
-import { forwardRef as forwardRef6, memo as memo6, useCallback as useCallback2 } from "react";
+import { forwardRef as forwardRef6, memo as memo6, useCallback as useCallback3 } from "react";
 import { useTheme as useTheme7 } from "react-better-core";
 import styled4 from "styled-components";
 
@@ -1303,7 +1303,7 @@ import { forwardRef as forwardRef2, memo as memo2 } from "react";
 import { useTheme as useTheme3 } from "react-better-core";
 
 // src/components/Text.tsx
-import { forwardRef, memo } from "react";
+import { forwardRef, memo, useCallback as useCallback2 } from "react";
 import { useTheme as useTheme2 } from "react-better-core";
 import styled, { css } from "styled-components";
 import { jsx } from "react/jsx-runtime";
@@ -1320,17 +1320,30 @@ var TextStyledComponent = styled.p.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextComponent = forwardRef(function Text({ as: asValue, htmlContentTranslate, children, ...props }, ref) {
+var TextComponent = forwardRef(function Text({ as: asValue, isTabAccessed, htmlContentTranslate, onKeyDown, children, ...props }, ref) {
   const theme2 = useTheme2();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
+  const onKeyDownElement = useCallback2(
+    (event) => {
+      onKeyDown?.(event);
+      if (!isTabAccessed) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    },
+    [onKeyDown, isTabAccessed]
+  );
   return /* @__PURE__ */ jsx(
     TextStyledComponent,
     {
       as: asValue,
+      tabIndex: isTabAccessed && !isMobileDevice ? 0 : void 0,
       theme: theme2,
       translate: htmlContentTranslate,
+      onKeyDown: onKeyDownElement,
       style,
       hoverStyle,
       isP: asValue === "p",
@@ -1707,14 +1720,14 @@ var DivComponent = forwardRef6(function Div({
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const onClickElement = useCallback2(
+  const onClickElement = useCallback3(
     (event) => {
       onClick?.(event);
       onClickWithValue?.(value);
     },
     [onClick, onClickWithValue, value]
   );
-  const onKeyDownElement = useCallback2(
+  const onKeyDownElement = useCallback3(
     (event) => {
       onKeyDown?.(event);
       if (!isTabAccessed) return;
@@ -1859,7 +1872,7 @@ Div2.box = DivComponent.box;
 var Div_default = Div2;
 
 // src/components/alerts/Alert.tsx
-import { memo as memo10, useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
+import { memo as memo10, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 import { useTheme as useTheme11 } from "react-better-core";
 import styled8 from "styled-components";
 
@@ -1920,7 +1933,7 @@ var localStoragePlugin = (options) => ({
 });
 
 // src/components/Button.tsx
-import { memo as memo8, useCallback as useCallback3 } from "react";
+import { memo as memo8, useCallback as useCallback4 } from "react";
 import {
   useBetterCoreContext as useBetterCoreContext3,
   useLoader,
@@ -2160,7 +2173,7 @@ var ButtonComponent = function Button({
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const onClickElement = useCallback3(
+  const onClickElement = useCallback4(
     (event) => {
       onClick?.(event);
       onClickWithValue?.(value);
@@ -2332,7 +2345,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...button
     betterHtmlContextInternal.components.button?.style?.upload,
     buttonProps
   );
-  const onClickElement = useCallback3(() => {
+  const onClickElement = useCallback4(() => {
     const input = document.createElement("input");
     input.setAttribute("type", "file");
     if (accept) input.setAttribute("accept", accept);
@@ -2361,7 +2374,7 @@ Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
 
 // src/components/Modal.tsx
-import { memo as memo9, useCallback as useCallback4, forwardRef as forwardRef7, useImperativeHandle, useRef as useRef2, useEffect as useEffect4 } from "react";
+import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef7, useImperativeHandle, useRef as useRef2, useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
 import {
   useBetterCoreContext as useBetterCoreContext4,
@@ -2444,7 +2457,7 @@ var ModalComponent = forwardRef7(function Modal({
   onCloseRef.current = onClose;
   const [isOpened, setIsOpened] = useBooleanState2(false);
   const [isOpenedLate, setIsOpenedLate] = useBooleanState2(false);
-  const onClickOpen = useCallback4(() => {
+  const onClickOpen = useCallback5(() => {
     dialogRef.current?.showModal();
     setIsOpened.setTrue();
     setIsOpenedLate.setTrue();
@@ -2458,7 +2471,7 @@ var ModalComponent = forwardRef7(function Modal({
     }
     onOpenRef.current?.();
   }, [urlQuery, name]);
-  const onClickClose = useCallback4(
+  const onClickClose = useCallback5(
     (event) => {
       event?.stopPropagation();
       setIsOpened.setFalse();
@@ -2471,7 +2484,7 @@ var ModalComponent = forwardRef7(function Modal({
     },
     [urlQuery, name]
   );
-  const onKeyDown = useCallback4(
+  const onKeyDown = useCallback5(
     (event) => {
       if (event.key === "Escape") {
         if (!withoutCloseButton) return;
@@ -2630,11 +2643,11 @@ var ModalComponent = forwardRef7(function Modal({
 ModalComponent.confirmation = forwardRef7(function Confirmation({ message, continueButtonText = "Continue", continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
   const theme2 = useTheme10();
   const modalRef = useRef2(null);
-  const onCancelElement = useCallback4(() => {
+  const onCancelElement = useCallback5(() => {
     onCancel?.();
     modalRef.current?.close();
   }, [onCancel]);
-  const onContinueElement = useCallback4(() => {
+  const onContinueElement = useCallback5(() => {
     onContinue?.();
     modalRef.current?.close();
   }, [onContinue]);
@@ -2667,11 +2680,11 @@ ModalComponent.destructive = forwardRef7(function Destructive2({
 }, ref) {
   const theme2 = useTheme10();
   const modalRef = useRef2(null);
-  const onCancelElement = useCallback4(() => {
+  const onCancelElement = useCallback5(() => {
     onCancel?.();
     modalRef.current?.close();
   }, [onCancel]);
-  const onDeleteElement = useCallback4(() => {
+  const onDeleteElement = useCallback5(() => {
     onDelete?.();
     modalRef.current?.close();
   }, [onDelete]);
@@ -2837,7 +2850,7 @@ function Alert2({ alert }) {
   const [isPaused, setIsPaused] = useState3(false);
   const [progress, setProgress] = useState3(100);
   const [isRemoved, setIsRemoved] = useState3(false);
-  const startProgressTimer = useCallback5(() => {
+  const startProgressTimer = useCallback6(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
     }
@@ -2864,7 +2877,7 @@ function Alert2({ alert }) {
       }
     }, updateInterval);
   }, [alert, progress, defaultAlertDisplay]);
-  const onClickCloseAlert = useCallback5(() => {
+  const onClickCloseAlert = useCallback6(() => {
     setIsRemoved(true);
     setTimeout(
       () => {
@@ -2877,7 +2890,7 @@ function Alert2({ alert }) {
       0.2 * 1e3 - 10
     );
   }, [alert]);
-  const onMouseEnter = useCallback5(() => {
+  const onMouseEnter = useCallback6(() => {
     setIsPaused(true);
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -2885,11 +2898,11 @@ function Alert2({ alert }) {
     }
     remainingTimeRef.current = defaultAlertDurationNumber * (progress / 100);
   }, [defaultAlertDurationNumber, progress]);
-  const onMouseLeave = useCallback5(() => {
+  const onMouseLeave = useCallback6(() => {
     setIsPaused(false);
     startProgressTimer();
   }, [startProgressTimer]);
-  const onClickAlertModalDone = useCallback5(() => {
+  const onClickAlertModalDone = useCallback6(() => {
     setIsRemoved(true);
     modalRef.current?.close();
     setTimeout(
@@ -3125,7 +3138,7 @@ var useAlertControls = () => {
     throw new Error(
       "`useAlertControls()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
     );
-  const createAlert = useCallback6((alert) => {
+  const createAlert = useCallback7((alert) => {
     const readyAlert = {
       id: crypto.randomUUID(),
       ...alert
@@ -3133,7 +3146,7 @@ var useAlertControls = () => {
     context.setAlerts((oldValue) => [...oldValue, readyAlert]);
     return readyAlert;
   }, []);
-  const removeAlert = useCallback6((alertId) => {
+  const removeAlert = useCallback7((alertId) => {
     context.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
   }, []);
   return {
@@ -3603,25 +3616,30 @@ PageHolder2.center = PageHolderComponent.center;
 var PageHolder_default = PageHolder2;
 
 // src/components/Chip.tsx
-import { forwardRef as forwardRef9, memo as memo14, useCallback as useCallback7 } from "react";
+import { forwardRef as forwardRef9, memo as memo14, useCallback as useCallback8 } from "react";
 import { darkenColor, lightenColor, useBetterCoreContext as useBetterCoreContext6, useTheme as useTheme15 } from "react-better-core";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var borderRadiusOffset = 1.3;
-var ChipComponent = forwardRef9(function Chip({
-  text,
-  beforeText,
-  afterText,
-  color,
-  backgroundColor,
-  borderRadius,
-  isCircle,
-  value,
-  onClick,
-  onClickWithValue,
-  ...props
-}, ref) {
+var ChipComponent = forwardRef9(function Chip({ fromSubcomponent, ...chipProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    text,
+    beforeText,
+    afterText,
+    color,
+    backgroundColor,
+    borderRadius,
+    isCircle,
+    value,
+    onClick,
+    onClickWithValue,
+    ...props
+  } = useComponentsPropsMerger(
+    !fromSubcomponent ? betterHtmlContextInternal.components.chip?.style?.default : {},
+    chipProps
+  );
   const theme2 = useTheme15();
-  const onClickElement = useCallback7(
+  const onClickElement = useCallback8(
     (event) => {
       onClick?.(event);
       onClickWithValue?.(value);
@@ -3649,7 +3667,12 @@ var ChipComponent = forwardRef9(function Chip({
     }
   );
 });
-ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackground, ...props }, ref) {
+ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackground, ...chipProps }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.chip?.style?.colored,
+    chipProps
+  );
   const theme2 = useTheme15();
   const { colorTheme } = useBetterCoreContext6();
   const readyColor = color ?? theme2.colors.textSecondary;
@@ -3678,7 +3701,7 @@ Chip2.colored = ChipComponent.colored;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback10, useState as useState7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
+import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback11, useState as useState7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
 import {
   darkenColor as darkenColor2,
   lightenColor as lightenColor2,
@@ -3745,7 +3768,7 @@ function Label(labelProps) {
 var Label_default = memo15(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef10, Fragment as Fragment5, memo as memo16, useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { forwardRef as forwardRef10, Fragment as Fragment5, memo as memo16, useCallback as useCallback9, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
 import {
   getPluralWord,
   useBooleanState as useBooleanState4,
@@ -3818,7 +3841,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
       (option) => option.label.toLowerCase().includes(query) || option.searchValues?.some((value2) => value2.toLowerCase().includes(query))
     );
   }, [options, searchQuery]);
-  const onKeyDownInputField = useCallback8(
+  const onKeyDownInputField = useCallback9(
     (event) => {
       if (event.key === "Enter" || !withSearch && event.key === " ") {
         event.preventDefault();
@@ -3874,7 +3897,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
       withMultiselect
     ]
   );
-  const onClickOption = useCallback8(
+  const onClickOption = useCallback9(
     (option) => {
       if (!option.disabled) {
         const clickedValue = option.value;
@@ -3891,7 +3914,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     },
     [onChange, internalValue, controlledValue, withMultiselect]
   );
-  const onClickClearButton = useCallback8(
+  const onClickClearButton = useCallback9(
     (event) => {
       event.stopPropagation();
       setInternalValue(void 0);
@@ -3903,7 +3926,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     },
     [onChange]
   );
-  const onChangeValue = useCallback8(
+  const onChangeValue = useCallback9(
     (newValue) => {
       setSearchQuery(newValue);
       setIsOpen.setTrue();
@@ -4161,7 +4184,7 @@ DropdownComponent.countries = forwardRef10(function Countries(dropdownProps, ref
     dropdownProps
   );
   const theme2 = useTheme17();
-  const renderOption = useCallback8(
+  const renderOption = useCallback9(
     (option, index, isSelected) => /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx16(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx16(Text_default, { children: option.label })
@@ -4198,14 +4221,14 @@ DropdownComponent.language = forwardRef10(function Countries2({ isSmall, ...drop
     dropdownProps
   );
   const theme2 = useTheme17();
-  const renderOption = useCallback8(
+  const renderOption = useCallback9(
     (option, index, isSelected) => /* @__PURE__ */ jsxs12(Div_default.row, { alignItems: "center", justifyContent: isSmall ? "center" : void 0, gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx16(Image_default, { src: `https://flagcdn.com/w80/${option.data?.flagCode.toString().toLowerCase()}.webp`, width: 20 }),
       !isSmall && /* @__PURE__ */ jsx16(Text_default, { children: option.label })
     ] }),
     [isSmall]
   );
-  const onChange = useCallback8((value) => {
+  const onChange = useCallback9((value) => {
     betterHtmlContextInternal.setLanguage(value);
     localStorage.setItem("language", value);
   }, []);
@@ -4244,7 +4267,7 @@ Dropdown2.language = DropdownComponent.language;
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-import { useCallback as useCallback9, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect8, useId } from "react";
+import { useCallback as useCallback10, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect8, useId } from "react";
 import { useTheme as useTheme18 } from "react-better-core";
 import styled9 from "styled-components";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -4303,19 +4326,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 = useCallback9(() => {
+  const onClickPreviousMonthButton = useCallback10(() => {
     const newMonth = currentMonth === 0 ? 11 : currentMonth - 1;
     const newYear = currentMonth === 0 ? currentYear - 1 : currentYear;
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
-  const onClickNextMonthButton = useCallback9(() => {
+  const onClickNextMonthButton = useCallback10(() => {
     const newMonth = currentMonth === 11 ? 0 : currentMonth + 1;
     const newYear = currentMonth === 11 ? currentYear + 1 : currentYear;
     setCurrentMonth(newMonth);
     setCurrentYear(newYear);
   }, [currentMonth, currentYear]);
-  const onClickDay = useCallback9(
+  const onClickDay = useCallback10(
     (day) => {
       if (!day) return;
       const newDate = new Date(currentYear, currentMonth, day);
@@ -4326,18 +4349,18 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     },
     [currentMonth, currentYear, onChange]
   );
-  const onClickClear = useCallback9(() => {
+  const onClickClear = useCallback10(() => {
     setCurrentDate(void 0);
     onChange?.(void 0);
   }, []);
-  const onClickToday = useCallback9(() => {
+  const onClickToday = useCallback10(() => {
     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 = useCallback9((event) => {
+  const onChangeYearSelect = useCallback10((event) => {
     setCurrentYear(parseInt(event.target.value));
   }, []);
   const firstDayOfMonth = useMemo5(() => {
@@ -4694,7 +4717,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const onChangeElement = useCallback10(
+  const onChangeElement = useCallback11(
     (event) => {
       const newValue = event.target.value;
       if (withDebounce) {
@@ -4867,7 +4890,7 @@ InputFieldComponent.multiline = forwardRef11(function Multiline(inputFieldProps,
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
-  const onChangeElement = useCallback10(
+  const onChangeElement = useCallback11(
     (event) => {
       onChange?.(event);
       onChangeValue?.(event.target.value);
@@ -5006,28 +5029,28 @@ InputFieldComponent.search = forwardRef11(function Search(inputFieldProps, ref)
   );
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
   const [inputFieldFocused, setInputFieldFocused] = useBooleanState5();
-  const onChangeValueElement = useCallback10(
+  const onChangeValueElement = useCallback11(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
     },
     [onChangeValue]
   );
-  const onFocusElement = useCallback10(
+  const onFocusElement = useCallback11(
     (event) => {
       setInputFieldFocused.setTrue();
       onFocus?.(event);
     },
     [onFocus]
   );
-  const onBlurElement = useCallback10(
+  const onBlurElement = useCallback11(
     (event) => {
       setTimeout(() => setInputFieldFocused.setFalse(), 0.1 * 1e3);
       onBlur?.(event);
     },
     [onBlur]
   );
-  const onClickRightIcon = useCallback10(() => {
+  const onClickRightIcon = useCallback11(() => {
     onChangeValueElement("");
   }, [onChangeValueElement]);
   return /* @__PURE__ */ jsx18(
@@ -5064,21 +5087,21 @@ InputFieldComponent.phoneNumber = forwardRef11(function PhoneNumber(inputFieldPr
   const internalId = useId2();
   const [dropdownValue, setDropdownValue] = useState7();
   const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
-  const renderOption = useCallback10(
+  const renderOption = useCallback11(
     (option, index, isSelected) => /* @__PURE__ */ jsxs14(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx18(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx18(Text_default, { children: option.label })
     ] }),
     []
   );
-  const onChangeDropdown = useCallback10(
+  const onChangeDropdown = useCallback11(
     (value2) => {
       setDropdownValue(value2);
       onChangeValue?.(value2 ? `+${value2}${inputFieldValue}` : inputFieldValue);
     },
     [onChangeValue, inputFieldValue]
   );
-  const onChangeValueElement = useCallback10(
+  const onChangeValueElement = useCallback11(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
       setInputFieldValue(readyValue);
@@ -5185,7 +5208,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, dropd
     insideInputFieldComponentProps,
     isFocused
   } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = useCallback10(
+  const onChange = useCallback11(
     (date) => {
       restInputFieldProps.onChangeValue?.(date ?? "");
       setInternalValue(date ?? "");
@@ -5272,7 +5295,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
     () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
     [minutesToRender]
   );
-  const onChange = useCallback10(
+  const onChange = useCallback11(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
       restInputFieldProps.onChangeValue?.(newValue);
@@ -5280,7 +5303,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
     },
     [internalValue, defaultTimeAfterDatePick, restInputFieldProps.onChangeValue]
   );
-  const onBlur = useCallback10(
+  const onBlur = useCallback11(
     (event) => {
       if (hoursToRender || minutesToRender) {
         const value = event.target.value;
@@ -5306,7 +5329,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
       restInputFieldProps.onBlur
     ]
   );
-  const onClickHour = useCallback10(
+  const onClickHour = useCallback11(
     (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")}`;
@@ -5316,7 +5339,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({
     },
     [defaultDateAfterTimePick, internalValue, restInputFieldProps.onChangeValue]
   );
-  const onClickMinute = useCallback10(
+  const onClickMinute = useCallback11(
     (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")}`;
@@ -5494,7 +5517,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
     () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
     [minutesToRender]
   );
-  const onBlur = useCallback10(
+  const onBlur = useCallback11(
     (event) => {
       if (!!minHours || !!maxHours || !!minMinutes || !!maxMinutes || hoursToRender || minutesToRender) {
         const value = event.target.value;
@@ -5522,7 +5545,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
       restInputFieldProps.onBlur
     ]
   );
-  const onClickHour = useCallback10(
+  const onClickHour = useCallback11(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       restInputFieldProps.onChangeValue?.(value);
@@ -5530,7 +5553,7 @@ InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesTo
     },
     [internalValue, restInputFieldProps.onChangeValue]
   );
-  const onClickMinute = useCallback10(
+  const onClickMinute = useCallback11(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       restInputFieldProps.onChangeValue?.(value);
@@ -5667,7 +5690,7 @@ InputFieldComponent.color = forwardRef11(function Color4({ ...inputFieldProps },
     inputFieldProps
   );
   const [inputFieldValue, setInputFieldValue] = useState7(value ?? "#000000");
-  const onChangeValueElement = useCallback10(
+  const onChangeValueElement = useCallback11(
     (value2) => {
       setInputFieldValue(value2);
       onChangeValue?.(value2);
@@ -5718,7 +5741,7 @@ InputField2.color = InputFieldComponent.color;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback11, useId as useId3, useState as useState8 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback12, useId as useId3, useState as useState8 } from "react";
 import { useBetterCoreContext as useBetterCoreContext8, useBooleanState as useBooleanState6, useTheme as useTheme20 } from "react-better-core";
 import styled11, { css as css4 } from "styled-components";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -5850,7 +5873,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
   const [internalChecked, setInternalChecked] = useState8(false);
-  const onChangeElement = useCallback11(
+  const onChangeElement = useCallback12(
     (event) => {
       const newIsChecked = event.target.checked;
       if (controlledChecked === void 0) setInternalChecked(newIsChecked);
@@ -5859,7 +5882,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
     [onChange, controlledChecked, value]
   );
   const checked = controlledChecked ?? internalChecked;
-  const onClickText = useCallback11(() => {
+  const onClickText = useCallback12(() => {
     const newIsChecked = !checked;
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
@@ -6016,7 +6039,7 @@ var ToggleInput_default = {
     const [internalChecked, setInternalChecked] = useBooleanState6();
     const [isMouseDown, setIsMouseDown] = useBooleanState6();
     const checked = controlledChecked ?? internalChecked;
-    const onClickElement = useCallback11(() => {
+    const onClickElement = useCallback12(() => {
       if (disabled) return;
       const newIsChecked = !checked;
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
@@ -6258,7 +6281,7 @@ FormRow2.withTitle = FormRowComponent.withTitle;
 var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
-import { memo as memo21, useCallback as useCallback12, useEffect as useEffect10, useState as useState9 } from "react";
+import { memo as memo21, useCallback as useCallback13, useEffect as useEffect10, useState as useState9 } from "react";
 import { useTheme as useTheme23 } from "react-better-core";
 import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
@@ -6267,7 +6290,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
   ...props
 }) {
   const [value, setValue] = useState9(localStorage.getItem("theme") === "dark");
-  const onChangeSwitch = useCallback12((checked) => {
+  const onChangeSwitch = useCallback13((checked) => {
     setValue(checked);
     document.querySelector("html")?.setAttribute("data-theme", checked ? "dark" : "light");
   }, []);
@@ -6315,7 +6338,7 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 import {
   forwardRef as forwardRef15,
   memo as memo23,
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useMemo as useMemo9,
   useState as useState11,
   useImperativeHandle as useImperativeHandle2,
@@ -6327,7 +6350,7 @@ import { darkenColor as darkenColor3, useBetterCoreContext as useBetterCoreConte
 import styled12, { css as css5 } from "styled-components";
 
 // src/components/Pagination.tsx
-import { memo as memo22, useCallback as useCallback13, useEffect as useEffect11, useMemo as useMemo8, useState as useState10 } from "react";
+import { memo as memo22, useCallback as useCallback14, useEffect as useEffect11, useMemo as useMemo8, useState as useState10 } from "react";
 import { useTheme as useTheme24 } from "react-better-core";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationComponent = function Pagination({
@@ -6344,12 +6367,12 @@ var PaginationComponent = function Pagination({
   const mediaQuery = useMediaQuery();
   const [currentPageInternal, setCurrentPage] = useState10(currentPage);
   const pageCountInternal = pageCount ?? (itemsPerPage !== void 0 ? Math.ceil(itemsLength / itemsPerPage) : 1);
-  const onClickPreviousPageElement = useCallback13(() => {
+  const onClickPreviousPageElement = useCallback14(() => {
     const newPage = currentPageInternal <= 1 ? 1 : currentPageInternal - 1;
     setCurrentPage(newPage);
     onClickPreviousPage?.(newPage);
   }, [currentPageInternal, onClickPreviousPage]);
-  const onClickNextPageElement = useCallback13(() => {
+  const onClickNextPageElement = useCallback14(() => {
     const newPage = currentPageInternal >= pageCountInternal ? pageCountInternal : currentPageInternal + 1;
     setCurrentPage(newPage);
     onClickNextPage?.(newPage);
@@ -6662,7 +6685,7 @@ var TableComponent = forwardRef15(function Table({
     }
   });
   const expandColumn = useMemo9(() => readyColumns.find((column) => column.type === "expand"), [readyColumns]);
-  const renderCellContent = useCallback14(
+  const renderCellContent = useCallback15(
     (column, item, itemIndex) => {
       switch (column.type) {
         case "text": {
@@ -6717,7 +6740,7 @@ var TableComponent = forwardRef15(function Table({
     },
     [theme2, checkedItems, expandedRows]
   );
-  const onClickRowElement = useCallback14(
+  const onClickRowElement = useCallback15(
     (item, index) => {
       if (expandColumn) {
         setExpandedRows((oldValue) => {
@@ -6734,14 +6757,14 @@ var TableComponent = forwardRef15(function Table({
     },
     [onClickRow, expandColumn]
   );
-  const onClickAllCheckboxesElement = useCallback14(
+  const onClickAllCheckboxesElement = useCallback15(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
     },
     [onClickAllCheckboxes, data]
   );
-  const onClickFilterButton = useCallback14(
+  const onClickFilterButton = useCallback15(
     (columnIndex) => {
       const thisFilterData = filterData[columnIndex];
       if (thisFilterData?.type === "number" || thisFilterData?.type === "date" || thisFilterData?.type === "date-time") {
@@ -6757,12 +6780,12 @@ var TableComponent = forwardRef15(function Table({
     },
     [filterData]
   );
-  const onCloseFilterModal = useCallback14(() => {
+  const onCloseFilterModal = useCallback15(() => {
     setTimeout(() => setOpenedFilterColumnIndex(void 0), 0.2 * 1e3);
     setFilterListSelectedItems(void 0);
     filterForm.reset();
   }, []);
-  const onClickCancelFormFilter = useCallback14(() => {
+  const onClickCancelFormFilter = useCallback15(() => {
     if (openedFilterColumnIndex === void 0) return;
     setFilterData(
       (oldValue) => Object.entries({
@@ -6775,7 +6798,7 @@ var TableComponent = forwardRef15(function Table({
     );
     filterModalRef.current?.close();
   }, [openedFilterColumnIndex]);
-  const onClickFilterListItem = useCallback14(
+  const onClickFilterListItem = useCallback15(
     (value) => setFilterListSelectedItems((oldValue) => {
       if (!oldValue) return [value];
       if (oldValue.includes(value)) return oldValue.filter((item) => item !== value);
@@ -6783,7 +6806,7 @@ var TableComponent = forwardRef15(function Table({
     }),
     []
   );
-  const onClickFilterPreset = useCallback14(
+  const onClickFilterPreset = useCallback15(
     (preset) => {
       const getValueForDate = (date) => {
         if (openedFilterColumn?.filter === "date") return date.toISOString().split("T")[0];
@@ -6868,7 +6891,7 @@ var TableComponent = forwardRef15(function Table({
     },
     [openedFilterColumn]
   );
-  const renderExpandedRow = useCallback14(
+  const renderExpandedRow = useCallback15(
     (...props2) => {
       const expandColumn2 = readyColumns.find((column) => column.type === "expand");
       if (!expandColumn2) return;
@@ -6929,11 +6952,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 = useCallback14(
+  const onClickSelectAllFilterListItems = useCallback15(
     () => setFilterListSelectedItems(possibleFilterListValues.map((item) => item.value)),
     [possibleFilterListValues]
   );
-  const onClickDeselectAllFilterListItems = useCallback14(() => setFilterListSelectedItems([]), []);
+  const onClickDeselectAllFilterListItems = useCallback15(() => setFilterListSelectedItems([]), []);
   useEffect12(() => {
     onChangePage?.(currentPage);
   }, [onChangePage, currentPage]);
@@ -7219,7 +7242,7 @@ var Table2 = memo23(TableComponent);
 var Table_default = Table2;
 
 // src/components/Tooltip.tsx
-import { memo as memo24, useCallback as useCallback15, useRef as useRef7, useState as useState12, useEffect as useEffect13, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
+import { memo as memo24, useCallback as useCallback16, useRef as useRef7, useState as useState12, useEffect as useEffect13, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo10 } from "react";
 import { useTheme as useTheme26 } from "react-better-core";
 import styled13, { css as css6 } from "styled-components";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -7389,7 +7412,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
-  const openTooltip = useCallback15(() => {
+  const openTooltip = useCallback16(() => {
     if (disabled) return;
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
@@ -7414,18 +7437,18 @@ var TooltipComponent = forwardRef16(function Tooltip({
     }, 1);
     onOpen?.();
   }, [disabled, onOpen, outsideScreenGap, totalGap]);
-  const closeTooltip = useCallback15(() => {
+  const closeTooltip = useCallback16(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
     onClose?.();
   }, [onClose]);
-  const onMouseEnter = useCallback15(() => {
+  const onMouseEnter = useCallback16(() => {
     if (trigger === "hover") openTooltip();
   }, [trigger, openTooltip]);
-  const onMouseLeave = useCallback15(() => {
+  const onMouseLeave = useCallback16(() => {
     if (trigger === "hover") closeTooltip();
   }, [trigger, closeTooltip]);
-  const onClickHolder = useCallback15(
+  const onClickHolder = useCallback16(
     (event) => {
       if (trigger === "click") {
         if (!isOpen) openTooltip();
@@ -7434,7 +7457,7 @@ var TooltipComponent = forwardRef16(function Tooltip({
     },
     [trigger, openTooltip, isOpen, closeTooltip]
   );
-  const onClickOutside = useCallback15(
+  const onClickOutside = useCallback16(
     (event) => {
       if (!isOpen) return;
       if (trigger !== "click") return;
@@ -7619,7 +7642,7 @@ Tooltip2.sectionTitle = TooltipComponent.sectionTitle;
 var Tooltip_default = Tooltip2;
 
 // src/components/Tabs.tsx
-import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback16, useEffect as useEffect14, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
+import { forwardRef as forwardRef17, memo as memo25, useCallback as useCallback17, useEffect as useEffect14, useImperativeHandle as useImperativeHandle4, useMemo as useMemo11, useRef as useRef8, useState as useState13 } from "react";
 import { useTheme as useTheme27 } from "react-better-core";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var tabBottomLineWidth = 2;
@@ -7657,7 +7680,7 @@ var TabsComponent = forwardRef17(function Tabs({
     return selectedTabId2.id;
   });
   const [rerenderState, setRerenderState] = useState13(0);
-  const onClickTab = useCallback16(
+  const onClickTab = useCallback17(
     (tabId) => {
       setSelectedTabId(tabId);
       onChange?.(tabId);
@@ -7847,7 +7870,7 @@ Tabs2.content = TabsComponent.content;
 var Tabs_default = Tabs2;
 
 // src/components/Foldable.tsx
-import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback17, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState14 } from "react";
+import { forwardRef as forwardRef18, memo as memo26, useCallback as useCallback18, useEffect as useEffect15, useImperativeHandle as useImperativeHandle5, useRef as useRef9, useState as useState14 } from "react";
 import { useBooleanState as useBooleanState7, useTheme as useTheme28 } from "react-better-core";
 import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var animationDurationClose = 0.15;
@@ -7887,15 +7910,15 @@ var FoldableComponent = forwardRef18(function Foldable({
   const [internalIsOpen, setInternalIsOpen] = useBooleanState7(defaultOpen);
   const [bodyVirtualHeight, setBodyVirtualHeight] = useState14();
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const open = useCallback17(() => {
+  const open = useCallback18(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
     onOpenChange?.(true);
   }, [controlledIsOpen, onOpenChange]);
-  const close = useCallback17(() => {
+  const close = useCallback18(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
     onOpenChange?.(false);
   }, [controlledIsOpen, onOpenChange]);
-  const toggleOpen = useCallback17(() => {
+  const toggleOpen = useCallback18(() => {
     if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
     onOpenChange?.(!isOpen);
   }, [controlledIsOpen, isOpen, onOpenChange]);
@@ -8008,7 +8031,7 @@ Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
 // src/components/SideMenu.tsx
-import { createContext as createContext2, memo as memo27, useCallback as useCallback18, useContext as useContext2, useEffect as useEffect16, useMemo as useMemo12, useState as useState15 } from "react";
+import { createContext as createContext2, memo as memo27, useCallback as useCallback19, useContext as useContext2, useEffect as useEffect16, useMemo as useMemo12, useState as useState15 } from "react";
 import {
   calculateColorContrast,
   lightenColor as lightenColor3,
@@ -8042,7 +8065,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
   const { activeItem, setActiveItem } = useSideMenuContext();
   const [isOpened, setIsOpened] = useBooleanState8();
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
-  const onClickElement = useCallback18(() => {
+  const onClickElement = useCallback19(() => {
     if (item.disabled) return;
     if (!item.children) setActiveItem((oldValue) => oldValue?.href === item.href ? oldValue : void 0);
     if (item.children) {
@@ -8306,7 +8329,7 @@ var SideMenuComponent = function SideMenu({
   const [activeItem, setActiveItem] = useState15();
   const [itemsState, setItemsState] = useState15(items);
   const [bottomItemsState, setBottomItemsState] = useState15(bottomItems);
-  const onClickXButton = useCallback18(() => {
+  const onClickXButton = useCallback19(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
   const readyItems = useMemo12(() => items.filter((item) => !item.hidden), [items]);
@@ -8577,7 +8600,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
   const theme2 = useTheme29();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = useBooleanState8();
-  const onClickElement = useCallback18(() => {
+  const onClickElement = useCallback19(() => {
     setSideMenuIsOpenMobile.toggle();
     onClick?.(!sideMenuIsOpenMobile);
   }, [onClick, sideMenuIsOpenMobile]);