react-better-html 1.1.79 → 1.1.81

package/dist/index.mjs

@@ -1471,6 +1471,10 @@ var appConfig = {
 // src/components/BetterHtmlProvider.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var GlobalStyle = createGlobalStyle`
+   html {
+      background-color: ${(props) => props.backgroundColor};
+   }
+
    body {
       font-family: ${(props) => props.fontFamily};
       color: ${(props) => props.color};
@@ -1501,9 +1505,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, componentsState, ...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 +1582,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 +1625,17 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
       components: {
         ...value?.components
       },
-      plugins
+      plugins,
+      componentsState: {
+        tabs: {
+          tabGroups,
+          setTabGroups,
+          tabsWithDots,
+          setTabsWithDots
+        }
+      }
     }),
-    [value, colorTheme, loaders, plugins]
+    [value, colorTheme, loaders, plugins, tabGroups, tabsWithDots]
   );
   useEffect(() => {
     plugins.forEach((plugin) => {
@@ -2314,7 +2336,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 +2395,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 +2428,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 +2454,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 +2507,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 +2519,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 +2548,7 @@ var ButtonComponent = function Button({
     {
       as: href ? "a" : "button",
       theme: theme2,
+      colorTheme: betterHtmlContext2.colorTheme,
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
@@ -2591,7 +2610,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 +2623,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 +2636,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 +2660,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 +2723,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 +2782,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 +2920,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 +2949,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 +2993,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 +3024,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 +3099,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 +4670,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,
@@ -4682,13 +4702,13 @@ var DropdownComponent = forwardRef7(function Dropdown({
   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 +4717,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 +4758,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 +4771,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
     },
     [onChange, controlledValue]
   );
-  const onClickClearButton = useCallback7(
+  const onClickClearButton = useCallback6(
     (event) => {
       event.stopPropagation();
       setInternalValue(void 0);
@@ -4763,7 +4783,7 @@ var DropdownComponent = forwardRef7(function Dropdown({
     },
     [onChange]
   );
-  const onChangeValue = useCallback7(
+  const onChangeValue = useCallback6(
     (newValue) => {
       setSearchQuery(newValue);
       if (withDebounce) setDebouncedSearchQuery(newValue);
@@ -4808,7 +4828,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, 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,
       {
@@ -4828,7 +4848,6 @@ var DropdownComponent = forwardRef7(function Dropdown({
         onFocus: setIsFocused.setTrue,
         onBlur: setIsFocused.setFalse,
         onKeyDown: onKeyDownInputField,
-        holderRef: inputFieldHolderRef,
         onChangeValue: withSearch ? onChangeValue : void 0,
         insideInputFieldComponent: /* @__PURE__ */ jsx13(
           Div_default,
@@ -4934,7 +4953,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 [
@@ -4966,23 +4985,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);
@@ -4993,11 +5012,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?.(
@@ -5265,7 +5284,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) {
@@ -5372,7 +5391,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);
@@ -5480,16 +5499,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);
@@ -5565,7 +5584,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 ?? "");
@@ -5606,7 +5625,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);
@@ -5614,7 +5633,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")}`;
@@ -5624,7 +5643,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")}`;
@@ -5759,7 +5778,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);
@@ -5767,7 +5786,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);
@@ -5866,7 +5885,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;
@@ -5903,6 +5922,8 @@ var InputElement2 = styled9.input.withConfig({
    ${(props) => props.normalStyle}
 
    &:hover {
+      border-color: ${(props) => props.theme.colors.primary};
+
       ${(props) => props.hoverStyle}
    }
 `;
@@ -5978,8 +5999,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);
@@ -5988,7 +6009,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);
@@ -6088,7 +6109,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);
@@ -6310,7 +6331,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;
@@ -6388,10 +6409,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": {
@@ -6430,13 +6451,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));
@@ -6498,6 +6519,302 @@ 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, componentsState } = useBetterHtmlContextInternal();
+  const firstRenderPassedRef = useRef5(false);
+  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 spacing = 0;
+    Object.values(tabsRef.current).forEach((tab, index) => {
+      if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
+    });
+    return spacing;
+  }, [selectedTab, tabs, tabsGap]);
+  useEffect9(() => {
+    const timeout = setTimeout(() => {
+      setRerenderState(Math.random());
+      firstRenderPassedRef.current = true;
+    }, 0.01 * 1e3);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+  useEffect9(() => {
+    componentsState.tabs.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]);
+  useEffect9(() => {
+    tabsRef.current[selectedTab]?.scrollIntoView({
+      behavior: firstRenderPassedRef.current ? "smooth" : void 0,
+      block: "nearest"
+    });
+  }, [selectedTab]);
+  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: [
+              componentsState.tabs.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: firstRenderPassedRef.current ? theme2.styles.transition : "none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx21(Div_default, { width: "100%", children })
+  ] });
+};
+TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
+  const { componentsState } = useBetterHtmlContextInternal();
+  const thisTabGroupData = useMemo8(
+    () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
+    [componentsState.tabs, tabsGroupName]
+  );
+  useEffect9(() => {
+    if (tabWithDot) {
+      componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
+    } else {
+      componentsState.tabs.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 animationDurationClose = 0.15;
+var animationDurationOpen = animationDurationClose * 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 [bodyVirtualHeight, setBodyVirtualHeight] = useState10(500);
+  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;
+    setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
+  }, [isOpen]);
+  useImperativeHandle2(
+    ref,
+    () => {
+      return {
+        open,
+        close,
+        toggle: toggleOpen,
+        isOpen
+      };
+    },
+    [open, close, toggleOpen, isOpen]
+  );
+  return /* @__PURE__ */ jsxs17(Div_default.column, { width: "100%", ...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,
+      {
+        maxHeight: isOpen ? bodyVirtualHeight : 0,
+        opacity: !isOpen ? 0 : void 0,
+        transition: `max-height ${isOpen ? animationDurationOpen : animationDurationClose}s ease, opacity ${theme2.styles.transition}`,
+        overflow: !isOpen ? "hidden" : void 0,
+        pointerEvents: !isOpen ? "none" : void 0,
+        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) {
@@ -6544,6 +6861,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,
@@ -6555,6 +6873,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,