react-better-html 1.1.78 → 1.1.80

package/dist/index.mjs

@@ -1501,9 +1501,17 @@ var useBetterHtmlContext = () => {
     throw new Error(
       "`useBetterHtmlContext()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
     );
-  const { setLoaders, plugins, ...rest } = context;
+  const { setLoaders, plugins, tabsComponentState, ...rest } = context;
   return rest;
 };
+var useBetterHtmlContextInternal = () => {
+  const context = useContext(betterHtmlContext);
+  if (context === void 0)
+    throw new Error(
+      "`useBetterHtmlContextInternal()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
+    );
+  return context;
+};
 var useTheme = () => {
   const context = useContext(betterHtmlContext);
   if (context === void 0)
@@ -1570,11 +1578,13 @@ function BetterHtmlProviderContent({ children }) {
   ] });
 }
 function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
-  const [loaders, setLoaders] = useState(value?.loaders ?? {});
-  const [plugins] = useState(pluginsToUse ?? []);
   const [colorTheme, setColorTheme] = useState(
     localStorage.getItem("theme") === "dark" ? "dark" : value?.colorTheme ?? "light"
   );
+  const [loaders, setLoaders] = useState(value?.loaders ?? {});
+  const [plugins] = useState(pluginsToUse ?? []);
+  const [tabGroups, setTabGroups] = useState([]);
+  const [tabsWithDots, setTabsWithDots] = useState([]);
   const readyValue = useMemo(
     () => ({
       app: {
@@ -1611,9 +1621,15 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
       components: {
         ...value?.components
       },
-      plugins
+      plugins,
+      tabsComponentState: {
+        tabGroups,
+        setTabGroups,
+        tabsWithDots,
+        setTabsWithDots
+      }
     }),
-    [value, colorTheme, loaders, plugins]
+    [value, colorTheme, loaders, plugins, tabGroups, tabsWithDots]
   );
   useEffect(() => {
     plugins.forEach((plugin) => {
@@ -2314,7 +2330,7 @@ var IconElement = styled4.svg.withConfig({
 `;
 var Icon = forwardRef3(function Icon2({ name, size = 16, ...props }, ref) {
   const theme2 = useTheme();
-  const { icons: icons2 } = useBetterHtmlContext();
+  const { icons: icons2 } = useBetterHtmlContextInternal();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -2373,7 +2389,7 @@ var ImageElement = styled5.img.withConfig({
 `;
 var Image = forwardRef4(function Image2({ name, src, ...props }, ref) {
   const theme2 = useTheme();
-  const { assets: assets2 } = useBetterHtmlContext();
+  const { assets: assets2 } = useBetterHtmlContextInternal();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -2406,11 +2422,11 @@ MemoizedImage.profileImage = Image.profileImage;
 var Image_default = { Image: MemoizedImage }.Image;
 
 // src/components/Button.tsx
-import { memo as memo7, useCallback as useCallback5 } from "react";
+import { memo as memo7, useCallback as useCallback4 } from "react";
 import styled6, { css } from "styled-components";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var ButtonElement = styled6.button.withConfig({
-  shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "normalStyle", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop)
 })`
    display: block;
    position: relative;
@@ -2432,15 +2448,11 @@ var ButtonElement = styled6.button.withConfig({
    ${(props) => props.disabled ? css`
               opacity: 0.6;
               cursor: not-allowed;
-
-              &.secondary:disabled {
-                 filter: brightness(0.9);
-              }
            ` : !props.isLoading ? css`
               cursor: pointer;
 
               &:not(.secondary):hover {
-                 filter: brightness(0.9);
+                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
               }
 
               &.secondary:hover {
@@ -2489,7 +2501,7 @@ var ButtonComponent = function Button({
 }) {
   const theme2 = useTheme();
   const isLoadingHook = useLoader(loaderName);
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   const isLoadingElement = isLoading ?? isLoadingHook;
   const styledComponentStyles = useStyledComponentStyles(
     {
@@ -2501,7 +2513,7 @@ var ButtonComponent = function Button({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onClickElement = useCallback5(
+  const onClickElement = useCallback4(
     (event) => {
       onClick?.(event);
       onClickWithValue?.(value);
@@ -2530,6 +2542,7 @@ var ButtonComponent = function Button({
     {
       as: href ? "a" : "button",
       theme: theme2,
+      colorTheme: betterHtmlContext2.colorTheme,
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
@@ -2591,7 +2604,7 @@ var ButtonComponent = function Button({
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
   const theme2 = useTheme();
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx7(
     ButtonComponent,
     {
@@ -2604,7 +2617,7 @@ ButtonComponent.secondary = function Secondary({ className, ...props }) {
 };
 ButtonComponent.destructive = function Destructive(props) {
   const theme2 = useTheme();
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx7(
     ButtonComponent,
     {
@@ -2617,7 +2630,7 @@ ButtonComponent.destructive = function Destructive(props) {
 };
 ButtonComponent.icon = function Icon3({ size = 16, backgroundButtonColor, ...props }) {
   const theme2 = useTheme();
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   const buttonSize = size + theme2.styles.space;
   const backgroundButtonColorReady = backgroundButtonColor ?? theme2.colors.textPrimary;
   return /* @__PURE__ */ jsx7(
@@ -2641,8 +2654,8 @@ ButtonComponent.icon = function Icon3({ size = 16, backgroundButtonColor, ...pro
   );
 };
 ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props }) {
-  const betterHtmlContext2 = useBetterHtmlContext();
-  const onClickElement = useCallback5(() => {
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
+  const onClickElement = useCallback4(() => {
     const input = document.createElement("input");
     input.setAttribute("type", "file");
     if (accept) input.setAttribute("accept", accept);
@@ -2704,7 +2717,7 @@ var Divider_default = {
 };
 
 // src/components/Modal.tsx
-import { memo as memo9, useCallback as useCallback6, forwardRef as forwardRef5, useImperativeHandle, useRef as useRef2, useState as useState4 } from "react";
+import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef5, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
 import styled7 from "styled-components";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DialogStylesElement = styled7.dialog.withConfig({
@@ -2763,24 +2776,25 @@ var ModalComponent = forwardRef5(function Modal({
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const theme2 = useTheme();
-  const { app, colorTheme } = useBetterHtmlContext();
+  const { app, colorTheme } = useBetterHtmlContextInternal();
   const dialogRef = useRef2(null);
-  const [isOpened, setIsOpened] = useState4(false);
-  const [isOpenedLate, setIsOpenedLate] = useState4(false);
-  const onClickOpen = useCallback6(() => {
+  const [isOpened, setIsOpened] = useState3(false);
+  const [isOpenedLate, setIsOpenedLate] = useState3(false);
+  const onClickOpen = useCallback5(() => {
     dialogRef.current?.showModal();
     setIsOpened(true);
     setIsOpenedLate(true);
-    if (urlQuery && name)
+    if (urlQuery && name) {
       urlQuery.setQuery(
         {
           [`${name}-modal`]: "opened"
         },
         false
       );
+    }
     onOpen?.();
   }, [onOpen, urlQuery, name]);
-  const onClickClose = useCallback6(() => {
+  const onClickClose = useCallback5(() => {
     setIsOpened(false);
     onClose?.();
     if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
@@ -2900,11 +2914,11 @@ var ModalComponent = forwardRef5(function Modal({
 ModalComponent.confirmation = forwardRef5(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef2(null);
-  const onCancelElement = useCallback6(() => {
+  const onCancelElement = useCallback5(() => {
     onCancel?.();
     modalRef.current?.close();
   }, [onCancel]);
-  const onContinueElement = useCallback6(() => {
+  const onContinueElement = useCallback5(() => {
     onContinue?.();
     modalRef.current?.close();
   }, [onContinue]);
@@ -2929,11 +2943,11 @@ ModalComponent.confirmation = forwardRef5(function Confirmation({ continueButton
 ModalComponent.destructive = forwardRef5(function Destructive2({ deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = useRef2(null);
-  const onCancelElement = useCallback6(() => {
+  const onCancelElement = useCallback5(() => {
     onCancel?.();
     modalRef.current?.close();
   }, [onCancel]);
-  const onDeleteElement = useCallback6(() => {
+  const onDeleteElement = useCallback5(() => {
     onDelete?.();
     modalRef.current?.close();
   }, [onDelete]);
@@ -2973,7 +2987,7 @@ import { memo as memo10 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function PageHolder({ noMaxContentWidth, children }) {
   const theme2 = useTheme();
-  const { app } = useBetterHtmlContext();
+  const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ jsx10(
     Div_default,
     {
@@ -3004,7 +3018,7 @@ function PageHeader({
   marginBottom
 }) {
   const theme2 = useTheme();
-  const { app } = useBetterHtmlContext();
+  const { app } = useBetterHtmlContextInternal();
   const mediaQuery = useMediaQuery();
   return /* @__PURE__ */ jsxs6(Div_default.row, { alignItems: "center", gap: theme2.styles.space, marginBottom: marginBottom ?? theme2.styles.space * 2, children: [
     imageUrl && /* @__PURE__ */ jsx11(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
@@ -3079,7 +3093,7 @@ Chip2.circle = ChipComponent.circle;
 var Chip_default = Chip2;
 
 // src/components/InputField.tsx
-import { forwardRef as forwardRef8, memo as memo16, useCallback as useCallback9, useState as useState7, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4 } from "react";
+import { forwardRef as forwardRef8, memo as memo16, useCallback as useCallback8, useState as useState6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef4 } from "react";
 import styled8 from "styled-components";
 
 // src/constants/countries.ts
@@ -4650,7 +4664,7 @@ function Label({ text, required, isError, color }) {
 var Label_default = memo13(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef7, memo as memo14, useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
+import { forwardRef as forwardRef7, memo as memo14, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var DropdownComponent = forwardRef7(function Dropdown({
   label,
@@ -4677,18 +4691,18 @@ var DropdownComponent = forwardRef7(function Dropdown({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const dropdownHolderRef = useRef3(null);
+  const inputFieldHolderRef = useRef3(null);
   const inputRef = useRef3(null);
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
   const [isFocused, setIsFocused] = useBooleanState();
-  const [searchQuery, setSearchQuery] = useState5("");
+  const [searchQuery, setSearchQuery] = useState4("");
   const [_, debouncedSearchQuery, setDebouncedSearchQuery, isLoadingDebouncedSearchQuery] = useDebounceState(
     "",
     debounceDelay
   );
-  const [focusedOptionIndex, setFocusedOptionIndex] = useState5();
-  const [internalValue, setInternalValue] = useState5(defaultValue);
+  const [focusedOptionIndex, setFocusedOptionIndex] = useState4();
+  const [internalValue, setInternalValue] = useState4(defaultValue);
   const value = controlledValue ?? internalValue;
   const filteredOptions = useMemo3(() => {
     if (!searchQuery) return options;
@@ -4697,7 +4711,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
       (option) => option.label.toLowerCase().includes(query) || option.searchValues?.some((value2) => value2.toLowerCase().includes(query))
     );
   }, [options, searchQuery]);
-  const onKeyDownInputField = useCallback7(
+  const onKeyDownInputField = useCallback6(
     (event) => {
       if (event.key === "Enter" || !withSearch && event.key === " ") {
         event.preventDefault();
@@ -4738,7 +4752,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
     },
     [disabled, withSearch, isOpen, filteredOptions, focusedOptionIndex, controlledValue, onChange]
   );
-  const onClickOption = useCallback7(
+  const onClickOption = useCallback6(
     (option) => {
       if (!option.disabled) {
         if (controlledValue === void 0) setInternalValue(option.value);
@@ -4751,7 +4765,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
     },
     [onChange, controlledValue]
   );
-  const onClickClearButton = useCallback7(
+  const onClickClearButton = useCallback6(
     (event) => {
       event.stopPropagation();
       setInternalValue(void 0);
@@ -4763,7 +4777,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
     },
     [onChange]
   );
-  const onChangeValue = useCallback7(
+  const onChangeValue = useCallback6(
     (newValue) => {
       setSearchQuery(newValue);
       if (withDebounce) setDebouncedSearchQuery(newValue);
@@ -4788,7 +4802,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   }, [filteredOptions]);
   useEffect5(() => {
     const handleClickOutside = (event) => {
-      if (dropdownHolderRef.current && !dropdownHolderRef.current.contains(event.target)) {
+      if (inputFieldHolderRef.current && !inputFieldHolderRef.current.contains(event.target)) {
         setIsOpen.setFalse();
         setSearchQuery("");
         setFocusedOptionIndex(void 0);
@@ -4808,7 +4822,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", children: [
+  return /* @__PURE__ */ jsx13(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ jsxs8(Div_default.row, { position: "relative", width: "100%", ref: inputFieldHolderRef, children: [
     /* @__PURE__ */ jsx13(
       InputField_default,
       {
@@ -4933,7 +4947,7 @@ var Dropdown2 = memo14(DropdownComponent);
 var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
-import { useCallback as useCallback8, useMemo as useMemo4, useState as useState6, memo as memo15, useEffect as useEffect6 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo4, useState as useState5, memo as memo15, useEffect as useEffect6 } from "react";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
   return [
@@ -4965,23 +4979,23 @@ var getWeekDayName = (day, short = false) => {
 var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
-  const [currentDate, setCurrentDate] = useState6(value ? new Date(value) : void 0);
-  const [currentMonth, setCurrentMonth] = useState6(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
-  const [currentYear, setCurrentYear] = useState6(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
+  const [currentDate, setCurrentDate] = useState5(value ? new Date(value) : void 0);
+  const [currentMonth, setCurrentMonth] = useState5(currentDate?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth());
+  const [currentYear, setCurrentYear] = useState5(currentDate?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear());
   const daysInMonth = useMemo4(() => new Date(currentYear, currentMonth + 1, 0).getDate(), [currentMonth, currentYear]);
-  const onClickPreviousMonthButton = useCallback8(() => {
+  const onClickPreviousMonthButton = useCallback7(() => {
     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 = useCallback7(() => {
     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 = useCallback7(
     (day) => {
       if (!day) return;
       const newDate = new Date(currentYear, currentMonth, day);
@@ -4992,11 +5006,11 @@ function Calendar({ value, minDate, maxDate, onChange }) {
     },
     [currentMonth, currentYear, onChange]
   );
-  const onClickClear = useCallback8(() => {
+  const onClickClear = useCallback7(() => {
     setCurrentDate(void 0);
     onChange?.(void 0);
   }, []);
-  const onClickToday = useCallback8(() => {
+  const onClickToday = useCallback7(() => {
     const today = /* @__PURE__ */ new Date();
     setCurrentDate(today);
     onChange?.(
@@ -5264,7 +5278,7 @@ var InputFieldComponent = forwardRef8(function InputField({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = useCallback9(
+  const onChangeElement = useCallback8(
     (event) => {
       const newValue = event.target.value;
       if (withDebounce) {
@@ -5287,9 +5301,9 @@ var InputFieldComponent = forwardRef8(function InputField({
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
-  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
+  return /* @__PURE__ */ jsxs10(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ jsx15(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ jsxs10(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ jsx15(
         Icon_default,
         {
@@ -5371,7 +5385,7 @@ InputFieldComponent.multiline = forwardRef8(function Multiline({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const onChangeElement = useCallback9(
+  const onChangeElement = useCallback8(
     (event) => {
       onChange?.(event);
       onChangeValue?.(event.target.value);
@@ -5479,16 +5493,16 @@ InputFieldComponent.search = forwardRef8(function Search({ ...props }, ref) {
 });
 InputFieldComponent.phoneNumber = forwardRef8(function PhoneNumber({ label, value, onChangeValue, labelColor, ...props }, ref) {
   const theme2 = useTheme();
-  const [dropdownValue, setDropdownValue] = useState7();
-  const [inputFieldValue, setInputFieldValue] = useState7(value?.toString() ?? "");
-  const renderOption = useCallback9(
+  const [dropdownValue, setDropdownValue] = useState6();
+  const [inputFieldValue, setInputFieldValue] = useState6(value?.toString() ?? "");
+  const renderOption = useCallback8(
     (option, index, isSelected) => /* @__PURE__ */ jsxs10(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
       /* @__PURE__ */ jsx15(Image_default, { src: `https://flagcdn.com/w80/${option.data?.code.toString().toLowerCase()}.webp`, width: 20 }),
       /* @__PURE__ */ jsx15(Text_default, { children: option.label })
     ] }),
     []
   );
-  const onChangeValueElement = useCallback9(
+  const onChangeValueElement = useCallback8(
     (value2) => {
       const readyValue = value2.replace(/\D/g, "");
       setInputFieldValue(readyValue);
@@ -5564,7 +5578,7 @@ InputFieldComponent.date = forwardRef8(function Date2({ minDate, maxDate, ...pro
   const holderRef = useRef4(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = useCallback9(
+  const onChange = useCallback8(
     (date) => {
       inputFieldProps.onChangeValue?.(date ?? "");
       setInternalValue(date ?? "");
@@ -5605,7 +5619,7 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
   const selectedMinuteRef = useRef4(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onChange = useCallback9(
+  const onChange = useCallback8(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? "00:00"}` : "";
       inputFieldProps.onChangeValue?.(newValue);
@@ -5613,7 +5627,7 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickHour = useCallback9(
+  const onClickHour = useCallback8(
     (hour) => {
       const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       const today = `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
@@ -5623,7 +5637,7 @@ InputFieldComponent.dateTime = forwardRef8(function DateTime({ minDate, maxDate,
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = useCallback9(
+  const onClickMinute = useCallback8(
     (minute) => {
       const newTime = `${internalValue?.toString().split("T")?.[1]?.split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       const today = `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
@@ -5758,7 +5772,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
   const selectedMinuteRef = useRef4(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
-  const onClickHour = useCallback9(
+  const onClickHour = useCallback8(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
       inputFieldProps.onChangeValue?.(value);
@@ -5766,7 +5780,7 @@ InputFieldComponent.time = forwardRef8(function Time({ ...props }, ref) {
     },
     [internalValue, inputFieldProps.onChangeValue]
   );
-  const onClickMinute = useCallback9(
+  const onClickMinute = useCallback8(
     (minute) => {
       const value = `${internalValue?.toString().split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
       inputFieldProps.onChangeValue?.(value);
@@ -5865,7 +5879,7 @@ InputField2.time = InputFieldComponent.time;
 var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback10, useState as useState8 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback9, useState as useState7 } from "react";
 import styled9 from "styled-components";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var componentSize = 26;
@@ -5902,6 +5916,8 @@ var InputElement2 = styled9.input.withConfig({
    ${(props) => props.normalStyle}
 
    &:hover {
+      border-color: ${(props) => props.theme.colors.primary};
+
       ${(props) => props.hoverStyle}
    }
 `;
@@ -5977,8 +5993,8 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
   const restProps = useComponentPropsWithoutStyle(props);
-  const [internalChecked, setInternalChecked] = useState8(false);
-  const onChangeElement = useCallback10(
+  const [internalChecked, setInternalChecked] = useState7(false);
+  const onChangeElement = useCallback9(
     (event) => {
       const newIsChecked = event.target.checked;
       if (controlledChecked === void 0) setInternalChecked(newIsChecked);
@@ -5987,7 +6003,7 @@ var ToggleInputComponent = forwardRef9(function ToggleInput({
     [onChange, controlledChecked, value]
   );
   const checked = controlledChecked ?? internalChecked;
-  const onClickText = useCallback10(() => {
+  const onClickText = useCallback9(() => {
     const newIsChecked = !checked;
     if (controlledChecked === void 0) setInternalChecked(newIsChecked);
     onChange?.(newIsChecked, value);
@@ -6087,7 +6103,7 @@ var ToggleInput_default = {
     const [internalChecked, setInternalChecked] = useBooleanState();
     const [isMouseDown, setIsMouseDown] = useBooleanState();
     const checked = controlledChecked ?? internalChecked;
-    const onClickElement = useCallback10(() => {
+    const onClickElement = useCallback9(() => {
       if (disabled) return;
       const newIsChecked = !checked;
       if (controlledChecked === void 0) setInternalChecked.setState(newIsChecked);
@@ -6309,7 +6325,7 @@ ColorThemeSwitch2.withText = ColorThemeSwitchComponent.withText;
 var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
-import { forwardRef as forwardRef11, memo as memo20, useCallback as useCallback11, useMemo as useMemo7, useState as useState9 } from "react";
+import { forwardRef as forwardRef11, memo as memo20, useCallback as useCallback10, useMemo as useMemo7, useState as useState8 } from "react";
 import styled10, { css as css2 } from "styled-components";
 import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultImageWidth = 120;
@@ -6387,10 +6403,10 @@ var TableComponent = forwardRef11(function Table({
   onClickAllCheckboxes,
   ...props
 }, ref) {
-  const { colorTheme } = useBetterHtmlContext();
+  const { colorTheme } = useBetterHtmlContextInternal();
   const theme2 = useTheme();
-  const [checkedItems, setCheckedItems] = useState9([]);
-  const renderCellContent = useCallback11(
+  const [checkedItems, setCheckedItems] = useState8([]);
+  const renderCellContent = useCallback10(
     (column, item, index) => {
       switch (column.type) {
         case "text": {
@@ -6429,13 +6445,13 @@ var TableComponent = forwardRef11(function Table({
     },
     [theme2, checkedItems]
   );
-  const onClickRowElement = useCallback11(
+  const onClickRowElement = useCallback10(
     (item, index) => {
       onClickRow?.(item, index);
     },
     [onClickRow]
   );
-  const onClickAllCheckboxesElement = useCallback11(
+  const onClickAllCheckboxesElement = useCallback10(
     (checked) => {
       onClickAllCheckboxes?.(checked);
       setCheckedItems(data.map(() => checked));
@@ -6497,6 +6513,301 @@ var TableComponent = forwardRef11(function Table({
 var Table2 = memo20(TableComponent);
 var Table_default = Table2;
 
+// src/components/Tabs.tsx
+import { memo as memo21, useCallback as useCallback11, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef5, useState as useState9 } from "react";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var tabBottomLineWidth = 2;
+var tabDotSize = 6;
+var defaultTabName = "tab";
+var TabsComponent = function Tabs({
+  tabs,
+  name,
+  accentColor,
+  style = "default",
+  children,
+  ...props
+}) {
+  const reactRouterDomPlugin2 = usePlugin("react-router-dom");
+  const theme2 = useTheme();
+  const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
+  const { colorTheme, tabsComponentState } = useBetterHtmlContextInternal();
+  const tabsRef = useRef5({});
+  const [selectedTab, setSelectedTab] = useState9(() => {
+    const selectedTabValue = tabs[0] ?? "";
+    if (urlQuery) {
+      const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
+      if (!tabQueryValue) return selectedTabValue;
+      if (tabs.includes(tabQueryValue)) return tabQueryValue;
+    }
+    return selectedTabValue;
+  });
+  const [rerenderState, setRerenderState] = useState9(0);
+  const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
+  const onClickTab = useCallback11(
+    (tab) => {
+      setSelectedTab(tab);
+      if (urlQuery) {
+        urlQuery.setQuery({
+          [name ?? defaultTabName]: tab
+        });
+      }
+    },
+    [name, urlQuery]
+  );
+  const width = useMemo8(
+    () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
+    [rerenderState, selectedTab]
+  );
+  const leftSpacing = useMemo8(() => {
+    const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
+    let totalWidth = 0;
+    Object.values(tabsRef.current).forEach((tab, index) => {
+      if (index < selectedTabIndex) totalWidth += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
+    });
+    return totalWidth;
+  }, [selectedTab, tabs, tabsGap]);
+  useEffect9(() => {
+    const timeout = setTimeout(() => setRerenderState(Math.random()), 0.01 * 1e3);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+  useEffect9(() => {
+    tabsComponentState.setTabGroups((oldValue) => {
+      const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
+      if (thisTabGroup) {
+        return oldValue.map(
+          (item) => item.name === (name ?? defaultTabName) ? {
+            ...item,
+            selectedTab
+          } : item
+        );
+      } else {
+        return [
+          ...oldValue,
+          {
+            name: name ?? defaultTabName,
+            selectedTab
+          }
+        ];
+      }
+    });
+  }, [selectedTab, name]);
+  return /* @__PURE__ */ jsxs16(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ jsxs16(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ jsx21(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+        const selected = tab === selectedTab;
+        return /* @__PURE__ */ jsxs16(
+          Div_default,
+          {
+            position: "relative",
+            width: "fit-content",
+            backgroundColor: style === "box" ? selected ? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
+            borderRadius: style === "box" ? theme2.styles.borderRadius : void 0,
+            borderTopLeftRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
+            borderTopRightRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
+            border: style === "box" ? `1px solid ${selected ? "transparent" : theme2.colors.border}` : void 0,
+            filterHover: colorTheme === "dark" ? style === "box" ? "brightness(1.2)" : "brightness(2)" : "brightness(0.9)",
+            paddingInline: theme2.styles.space,
+            paddingBlock: theme2.styles.gap,
+            value: tab,
+            cursor: "pointer",
+            isTabAccessed: true,
+            onClickWithValue: onClickTab,
+            ref: (ref) => {
+              tabsRef.current[tab] = ref;
+            },
+            children: [
+              tabsComponentState.tabsWithDots.includes(tab) && /* @__PURE__ */ jsx21(
+                Div_default,
+                {
+                  position: "absolute",
+                  top: (theme2.styles.space - tabDotSize) / 2,
+                  right: (theme2.styles.space - tabDotSize) / 2,
+                  width: tabDotSize,
+                  height: tabDotSize,
+                  backgroundColor: style === "box" && selected ? theme2.colors.base : theme2.colors.primary,
+                  borderRadius: 999,
+                  transition: theme2.styles.transition
+                }
+              ),
+              /* @__PURE__ */ jsx21(
+                Text_default,
+                {
+                  fontWeight: 700,
+                  color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
+                  transition: theme2.styles.transition,
+                  whiteSpace: "nowrap",
+                  children: tab
+                }
+              )
+            ]
+          },
+          tab
+        );
+      }) }),
+      style !== "box" && /* @__PURE__ */ jsx21(
+        Div_default,
+        {
+          position: "absolute",
+          width,
+          height: tabBottomLineWidth,
+          bottom: 0,
+          left: leftSpacing,
+          backgroundColor: accentColor ?? theme2.colors.primary,
+          transition: theme2.styles.transition
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx21(Div_default, { width: "100%", children })
+  ] });
+};
+TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
+  const { tabsComponentState } = useBetterHtmlContextInternal();
+  const thisTabGroupData = useMemo8(
+    () => tabsComponentState.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
+    [tabsComponentState, tabsGroupName]
+  );
+  useEffect9(() => {
+    if (tabWithDot) {
+      tabsComponentState.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
+    } else {
+      tabsComponentState.setTabsWithDots?.(
+        (oldValue) => oldValue.includes(tab) ? oldValue.filter((tab2) => tab2 !== tab2) : oldValue
+      );
+    }
+  }, [tabWithDot]);
+  return thisTabGroupData?.selectedTab === tab ? /* @__PURE__ */ jsx21(Div_default, { width: "100%", children }) : void 0;
+};
+var Tabs2 = memo21(TabsComponent);
+Tabs2.content = TabsComponent.content;
+var Tabs_default = Tabs2;
+
+// src/components/Foldable.tsx
+import { forwardRef as forwardRef12, memo as memo22, useCallback as useCallback12, useEffect as useEffect10, useImperativeHandle as useImperativeHandle2, useRef as useRef6, useState as useState10 } from "react";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var animationDuration = 0.2;
+var FoldableComponent = forwardRef12(function Foldable({
+  isOpen: controlledIsOpen,
+  defaultOpen = false,
+  title,
+  description,
+  icon,
+  image,
+  headerPaddingInline,
+  renderHeader,
+  onOpenChange,
+  children,
+  ...props
+}, ref) {
+  const theme2 = useTheme();
+  const bodyRef = useRef6(null);
+  const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
+  const [bodyHeight, setBodyHeight] = useState10(defaultOpen ? void 0 : 0);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const open = useCallback12(() => {
+    if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
+    onOpenChange?.(true);
+  }, [controlledIsOpen, onOpenChange]);
+  const close = useCallback12(() => {
+    if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
+    onOpenChange?.(false);
+  }, [controlledIsOpen, onOpenChange]);
+  const toggleOpen = useCallback12(() => {
+    if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
+    onOpenChange?.(!isOpen);
+  }, [controlledIsOpen, isOpen, onOpenChange]);
+  useEffect10(() => {
+    if (!bodyRef.current) return;
+    if (isOpen) {
+      const height = bodyRef.current.scrollHeight;
+      setBodyHeight(height);
+      const timeout = setTimeout(() => {
+        setBodyHeight(void 0);
+      }, animationDuration * 1e3);
+      return () => {
+        clearTimeout(timeout);
+      };
+    } else {
+      if (bodyHeight === void 0) {
+        const height = bodyRef.current.scrollHeight;
+        setBodyHeight(height);
+        bodyRef.current.offsetHeight;
+      }
+      const timeout = setTimeout(() => {
+        setBodyHeight(0);
+      }, 0.01 * 1e3);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [isOpen, animationDuration, bodyHeight]);
+  useImperativeHandle2(
+    ref,
+    () => {
+      return {
+        open,
+        close,
+        toggle: toggleOpen,
+        isOpen
+      };
+    },
+    [open, close, toggleOpen, isOpen]
+  );
+  return /* @__PURE__ */ jsxs17(Div_default.column, { width: "100%", overflow: "hidden", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ jsxs17(
+      Div_default.row,
+      {
+        width: "100%",
+        alignItems: "center",
+        gap: theme2.styles.gap,
+        paddingBlock: theme2.styles.gap,
+        paddingInline: headerPaddingInline,
+        cursor: "pointer",
+        onClick: toggleOpen,
+        userSelect: "none",
+        children: [
+          /* @__PURE__ */ jsxs17(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+            icon && /* @__PURE__ */ jsx22(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+            image && /* @__PURE__ */ jsx22(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
+            /* @__PURE__ */ jsxs17(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ jsx22(Text_default, { as: "h3", fontWeight: 700, children: title }),
+              description && /* @__PURE__ */ jsx22(Text_default, { color: theme2.colors.textSecondary, children: description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx22(
+            Icon_default,
+            {
+              name: "chevronDown",
+              transform: `rotate(${isOpen ? 180 : 0}deg)`,
+              transition: theme2.styles.transition
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx22(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx22(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ jsx22(Div_default, { height: bodyHeight, transition: `height ${animationDuration}s ease`, ref: bodyRef, children: /* @__PURE__ */ jsx22(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children }) })
+  ] });
+});
+FoldableComponent.box = forwardRef12(function Box3({ ...props }, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ jsx22(
+    FoldableComponent,
+    {
+      backgroundColor: theme2.colors.backgroundContent,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.styles.borderRadius,
+      headerPaddingInline: theme2.styles.space,
+      ...props,
+      ref
+    }
+  );
+});
+var Foldable2 = memo22(FoldableComponent);
+Foldable2.box = FoldableComponent.box;
+var Foldable_default = Foldable2;
+
 // src/utils/variableFunctions.ts
 var checkBetterHtmlContextValue = (value, functionsName) => {
   if (value === void 0) {
@@ -6543,6 +6854,7 @@ export {
   Div_default as Div,
   Divider_default as Divider,
   Dropdown_default as Dropdown,
+  Foldable_default as Foldable,
   Form_default as Form,
   FormRow_default as FormRow,
   Icon_default as Icon,
@@ -6554,6 +6866,7 @@ export {
   PageHeader_default as PageHeader,
   PageHolder_default as PageHolder,
   Table_default as Table,
+  Tabs_default as Tabs,
   Text_default as Text,
   ToggleInput_default as ToggleInput,
   formatPhoneNumber,